Nesting Content Blocks / Child Content Blocks

When building your store with the StoreConnect CMS, users often need to apply different styles to different content blocks.

For example, you would use four Content Blocks to create a full-width background colour for a section of your website, with two columns of text that have a maximum width of 1200px.


Here’s an example of a layout:

Sample Layout


 

To create this layout, do the following:

  1. Create Two Content blocks with the Content Template set to Text. Add your text for column one in the first content block and your text for column two in the second content block. Add titles, subtitles and content as required.

  2. Create a Content Block with the Content Template set to Container with a Layout Style of Full width on smaller screens and two columns on larger. Save this content block. Then, in the related tab, add both of the text content blocks as children of this container. Assign the first Text Content Block Position 10*, and the second Text Content Block Position 20. We can now use Custom CSS to target this content block and restrict it’s width to 1200px. Learn about Styling Content Blocks here.

  3. Create a Content block with the Content Template set to Container and add the earlier container content block as it’s child. We can now assign custom CSS to this content block to create a full-width background colour or image.

3D view of Content Blocks


Important points to note:

The Content Template for each content block determines which fields in the Salesforce Page are used when the system renders the content block. Find the full reference of which Content Types use which fields on these pages:

Once you have created the content blocks for each of your items, you use the Content Block’s Identifier as your CSS selector to apply styles to your content block.

Styling options are available here:


* Numbering child content for content blocks is usually done in increments of 10. This practice allows greater flexibility when new content needs to be inserted above or below the existing content.

 
 
Back to Documentation