This page provides examples of the various page sections that can be used to create more compelling page layouts.
Above you'll see the header image. Any page can optionally include a header image. This is a field in the edit form of each page. Click 'edit' at the bottom left of the page to start editing this page.
WYSIWYG Section
This field is a WYSIWYG field (What you see is what you get). Essentially it is used to add paragraphs of text. You also have a toolbar to add links, bulleted lists, numbered lists, and more. This field can also be used to create headings of various sizes.
You'll also see on this page that we use "Lorem Ipsum" text (latin text) as placeholder to give a better sense of what a section might look like without distracting with readable sentences.
Media + WYSIWYG Section
This section allows for images and text to be placed next to eachother. You can choose if you want the media to be on the left or the right of the text.
Below this section is an example of media only. That section uses the "media" section. Media can be an image or a video. Below is an example of a youtube video embedded.
-
Accordion list - Heading 1
Accordion lists can be used to provide these collapsible sections. This first accordion item has a class set in the advanced settings for "first active". This ensures that when this accordion section is first loaded that this specific section is expanded first.
-
another accordion item
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar mollis sodales. Aenean malesuada auctor nunc, eu viverra augue porttitor a. Duis volutpat leo id urna mattis, ac pharetra tortor eleifend. Quisque non ligula augue. Proin gravida mauris interdum nisi tempor, sed tristique purus blandit. Ut gravida aliquet nibh, non pharetra erat iaculis vel. Sed nec ex sed nunc aliquam feugiat sed eget eros. Suspendisse a euismod lorem. Pellentesque blandit dolor a libero blandit, euismod dictum erat feugiat. Sed iaculis pellentesque sapien ut consequat.
-
A third accordion item
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar mollis sodales. Aenean malesuada auctor nunc, eu viverra augue porttitor a. Duis volutpat leo id urna mattis, ac pharetra tortor eleifend. Quisque non ligula augue. Proin gravida mauris interdum nisi tempor, sed tristique purus blandit. Ut gravida aliquet nibh, non pharetra erat iaculis vel. Sed nec ex sed nunc aliquam feugiat sed eget eros. Suspendisse a euismod lorem. Pellentesque blandit dolor a libero blandit, euismod dictum erat feugiat. Sed iaculis pellentesque sapien ut consequat.
Grid lists below
You can also use WYSIWYG sections to act as headers for sections of content below. That's what I'm doing here. I placed a WYSIWYG section between the accordion list and the grid list to provide an intro into the grid list below. Scroll down to see how the grid list section is used in different ways.
Grid lists expand to take up the full width of the page layout. That means if you have 5 items in a grid list they will each take up 20% of the layout. Or if you have 2 items in a grid list they will each take up 50% of the layout. See below.