Get up to speed

Welcome to the training & play area of our website. Here you can learn about uploading content, editing code, blog posts and so much more.

 

Available Training

If there is specific training that does not feature here, but may prove beneficial, please speak to the marketing department

 
 

Walkthrough

Uploading video

Uploading video content & building blocks of content

 

Walkthrough

Editing concertina content

 

Rather than filling the page with content, we utilise code to collapse and expand content with the user in control of what they see and when. An example of this in action is our User Guides. It was utilised to turn a 60pg Word document into one easy to navigate and interactive page. These exercises allow you to play with a section of code to edit, fix and learn how it works.

The Squarespace building block we’ll be using is the ‘Markdown’ block. It works in conjunction with code within the site to simplify more complex features.

Squarespace may display the content fully expanded for reviewing and editing purposes. So once you’ve edited and saved the markdown box, you may need to refresh the page to test your changes or view it live here.

//Note
Below this text is a hidden block of javascript code in a ‘code block’. This enables the markdown blocks to animate the way they do without repeating this code in every instance they appear on the page. When you click to edit the page it will become visible.

 

example #1

This text you're reading is in a Markdown block rather than a text block. We can have text that displays at all times and we can have text that tucks away until it is called upon by visitors to our site.

+ This is the call to action to expand

This is the collapsable text. It remains hidden until the the user decides to click on the call to action (CTA) above. Clicking on the header/CTA will close this section again.

When in edit mode of the page. Take note of the hidden markers within this passage above. The code is looking for these markers, eg. The #'s —which indicate the use of a heading/CTA, this is displayed in a 'h2' (heading style marker, it tells the website to displays the text in a specific typeface or colour).

The bracketed 'b' and '/b' indicate that a passage of text will display as bold (This is inline text styling).
The bracketed 'br' cause a hard return
. We will touch on these in the exercises below.

We can include text, links, imagery and video in here too.

+ Heading

Hello there!

image name

Getting the idea of how they work yet?

If not, don't worry, there are a few examples below for you to play with to help you learn. Breaking code is equally valuable in the learning process. Each tag, bracketed instruction and even punctuation can affect the way the website reads the content hosted on it.

Editing it will take a little bit of getting used to, but will seem simple in no time.

//Note
To view the Markdown block and its content you will need to click the ’edit’ button in the hovering grey toolbar on this screen, or double click on the content. The toolbars are only visible when you are logged into Squarespace. This is an editing feature and not something the visitors to the site can see. If you were to view this page live as a user would see it you’ll notice they can only view the expanding and collapsing text and have no access to how it works or the editing features.

 
 

Exercise 1

We’ve created a little exercise to help you edit. Before starting, watch the video, then try the exercise below. The aim of this exercise is to locate the existing text in the markdown below and replace it with the following:

+ heading 1
This is the first bit of hidden text

+ heading 2
This is the second bit of hidden text

![image 1](https:// link waving bear gif goes here )

 

EXISTING MARKDOWN BLOCK FOR EDITING

 

+ Accessing VIOOH Content?

To access VIOOH Content, go to smartcontent.viooh.com on a desktop, laptop, tablet or mobile phone. All functionality will be available on computer and tablet devices. A reduced functionality version is available on mobile devices. VIOOH Content is functional on all modern browsers: Chrome, Firefox, Safari, Edge. We recommend using Chrome which is the most reliable option.

+ How to Log In?

When you access VIOOH Content you will see a login screen. Enter your email address and password into the fields and log in.

image 1

Create a new markdown block below this text block. Please delete your copy once you’re done.

 

EXERCISE 1: ANSWER

+ heading 1

This is the first bit of hidden text

+ heading 2

This is the second bit of hidden text

image 1

 

Exercise 2

The markdown block below is broken. Create your own markdown block to the right of it, copy and paste the text in to repair it.

A working version is available to the right beneath the video as reference.

Try work it out before viewing the Markdown block’s content for the answers. This will help you spot the small changes that can affect the way the page displays the code.

Things to fix:

  • The image above the first heading is not displaying

  • The second heading is not displaying as bold

  • There is a link in the content under the second heading that is missing. Add the followinghttps://www.viooh.com/

  • The third heading and its content are not collapsing and expanding as they should. In fact they’re not displaying at all. Additionally the image, within the content, is displaying at the incorrect width. It should be 600px wide

//Note
Imagery for this exercise can be found here

THIS IS THE WORKING VERSION

image #
+ Dunnhumby Brick —UK only

The Dunnhumby brick applies to the UK only and uses Tesco (supermarket) customer buying data to target Tesco frames.

image #

image #
+ Route Brick —UK only

The Route brick applies Route’s audience data to frames which allows you to target a specific audience type i.e. Male 15-34, in order to optimise your media planning and increase the likelihood of the message reaching the target consumer.

Click here to read more

+ Workspace

Once you are happy with the information in the Campaign Details area, click on the ‘Workspace’ tab at the top of the page.

image #

 

THIS IS THE BROKEN VERSION

 


+ Dunnhumby Brick —UK only

The Dunnhumby brick applies to the UK only and uses Tesco (supermarket) customer buying data to target Tesco frames.

image #

image #
+ Route Brick —UK only

The Route brick applies Route’s audience data to frames which allows you to target a specific audience type i.e. Male 15-34, in order to optimise your media planning and increase the likelihood of the message reaching the target consumer.

Click here to read more


+ Workspace

Once you are happy with the information in the Campaign Details area, click on the ‘Workspace’ tab at the top of the page.

image #

Create a new markdown block below this text block. Please delete your copy once you’re done.