Sticky blocks

Creating the sticky block

Start in the Page management area of the Sequence page.

1. Click on the (Select type to create) dropdown menu above the Blocks area, and select Layout block.
2. Click Add.
3. Enter a block heading and content in the Main tab as required.
4. Navigate to the Children tab and select Sticky block from the drop-down menu How would you like the blocks to show?
5. Click Save and Publish.

 Create the first sticky block

1. Click on the (Select type to create) dropdown menu and select Content block. Click Add.
2. Add a heading into the Heading field (this will be for your own reference in the back end). In the Would you like to hide the heading? field select Yes. While you can keep headings on for sticky blocks, hiding the headings allows for a smoother visual experience.
3. Add your text content into the Content field.
4. Scroll down to the Icon or scene background area and click on the From Files button. You will need to have already uploaded your images to the Files area in Glasshouse. For details on how to do this, have a look at the Adding images and Managing files documentation.
5. Select the image you wish to add from the appropriate folder and select Add file(s).
6. Click Published.

Editing the visual settings

By default the text added into the content area will sit over the top of the image and be left-justified with a transparent background. The image will also be left justified. These positions, as well as the text colour and width of the text block, can all be customised depending on the complexity of your background image and quantity of text.

1. Navigate to the Visual tab inside the content block.
2. Select the Where should this block be positioned? dropdown menu, and if desired, select a new position for the text content.
3. If you would like a solid colour or white background behind the text box, add a hex code (e.g. #FFFFFF for white) into the Background text box colour dropdown menu.
4. By default the text will be black or whatever body text colour has been defined for your site. To change the text colour for this block, add a hex code (e.g. #0000FF for standard blue) into the Text colour dropdown menu.
5. The text content will automatically fill the standard block width if undefined. To restrict the width, add a pixel value (e.g. 500px) into the Sticky block content width field.
6. You can change the position of the background image by selecting one of the positioning options from the Where should this image be positioned when not full width? dropdown menu.
7. Click Published to save your changes.

Adding more content blocks

The visual effect of the sticky block will not be apparent until two or more content blocks have been added to the parent layout block. Repeat the steps from Create the first sticky block section above to add more content, changing text, background and visual settings as desired.

If no background image is added to a particular content block, that block will inherit the background image from the previous content block.

Setting site-wide settings for sticky blocks

If the visual settings for the sticky blocks are going to be consistent across the whole site, you can set some universal settings that will apply for every instance of sticky blocks.

Navigate to the Settings tab in the left-hand menu.

1. Click on the Visual tab in the top panel of the Settings page
2. Scroll down to the accordions and expand the Sticky block styles accordion
3. Click Save at the bottom of the page after making changes

Universal settings that can be applied here include the position of the block, background text box colour and text colour.