To add section layouts to your page, navigate to your page and click "Edit". If you followed the tutorial "Creating a Basic page", we added a title background,  title, body and button to this tutorial. 

At the bottom of the page builder is the list of section layouts to choose from. I will add Accordion. 

This is often used for FAQ, so the title is the question, and "content" is the answer. 

To add another accordion item, click "add accordion item".  and fill out the title and body for the next item. 

Alert! Clicking the "Add accordion" button will add another section of an accordion. Make sure to only add accordion item. Use Add Accordion, if you want another instance of accordion questions.

I will add one more to make a total of 3. As we go through the layouts, you will see at the end of the tutorial how this will look on the front end of your page when you publish. 

There is also a header and footer section. The header will display text that you enter above the accordion, while footer will be below. 

You can add as many section layouts as you like. Next I will add cover. 

I will delete the auto text and add in my own, 

Since the cover is a "statement piece", I want to make the text large, so I went under "Styles" dropdown in the CKeditor and selected "Mega". 

- Select a value -
Red
Dark
Golden Yellow
Light Gray
White

Click "Open File Browser" to add an image. 

Alert! ALWAYS use file browser to add an image. This is important because uploading too many images can result in duplicates, and too much space and storage being used on the website. 

If you want to add a new image, click "Upload". Whatever images you upload will stay on IMCE file browser to re-use. 

For this example, we will use one already on the file browser. Click  "background".

I'm going to use this image already on the website. 

Side note: You may get errors when uploading new images to IMCE. In this example, my file size was too large. Your image must be under 1MB, or the specified amount dedicated for your site. Another error you may see is an image being too small. You will get an error message stating any details why an image can't be uploaded. 

Once you upload your image, add alternate text if applicable. 

Tip! Use alt text if your image is just 'decoration'. If you have content on your page that explains the purpose for the image, then alt text is not needed. 

Next Section Layout I will add is columns. 

For this example, I will leave the lorem ipsum auto text, but just as above, delete the text to add your own.

Like Accordion, use add column item to add a new column, making 2 columns. 

Tip! If you want to add another ROW of columns, click the section layout, "Add Columns" again. 

Like the cover, I want this to be a bold statement, so I made the text "Mega" using the "Styles" dropdown. 

Tip! When styling text, make sure your text is highlighted so the CK Editor understands which text you are editing. 

To change my next line of text to something smaller, I select mega again to turn it back to regular font size. 

This is a hero image. 

This is an example. 


I'm selecting this image already in my files. 

Enter a description in the "Alternative text" field.

Tip! alt text helps screen readers understand what the image is about. 

Lastly, I will add image and text columns. 

Enter text for the content that will be beside the image. 

Enter a description the "Alternative text" field.

Enter your editing in the "Revision log message" field.

Tip! Revision logs are mandatory, and help us keep track of what edits have been done to the page. 

Here is the page. Here is the title and body text and button created in "How to create a basics page".

Open Primary tabs configuration options
Primary tabs
View
(active tab)
Edit
Delete
Revisions
Open configuration options

Body paragraph

Body text

Explore

Question 1
expand
Question 2
expand
Question 3
expand

This is the footer for the accordion. 

This is a Cover Layout

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.

Lorem ipsum

Lorem ipsum dolor sit amet, co

The first instance of using Section Layouts was accordion, as seen here. The titles are seen and the body is seen when expanded. 

Here is what our cover looks like, with our background color and image we selected.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Here are our columns, with the auto text still inside.

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.

Here is our hero image. Note how this looks visually different than "cover". 

And here is our alternating image and text. If we want to see what this looks like full width, then...

Click the "Full Width" field. in the "Title and Page Settings" in the right-hand toolbar. 

Enter "Revision log message" field. Be specific enough so others would know what was edited. 

Now our sections expand the entire width of the page. See the space between our last content and the footer? We can take care of that by:

Click the "Remove Margin Bottom" field on "Title and Page Settings".

Tip! If you have any questions or need additional help building section layouts, please open a HelpDesk ticket. 

In this tutorial I will demonstrate using the section layouts: accordion, cover, columns, hero, and alternating image and text. We will also get a better understanding of how "Full Width" and "Margin Bottom" settings from the "Title and Page Settings" toolbar works. 

Using Section Layouts