Content Layouts
The theme ships with every content layout used on the demo site. Edit them as they are, or create your own.
Browser cache
Saved changes may not show immediately because of browser caching. Press Ctrl + F5 to force a refresh.
Control Panel Area
Click Add Layout to open the content layout control panel. It contains a few default layouts — change or delete them as you like, and remember to save.
Layout
Pick the layout you want and drag it into the Container area.
Panes
A pane is the container that lets a page host modules. Drag panes into columns.
Pane Settings
| Setting | Description |
|---|---|
| Pane Name | The pane's name |
| Background Settings | Background image and color of the pane |
| Custom CSS | Attach the theme's pre-built CSS to the pane |
Row Settings
Click the edit button on the right of a row to open its settings.
General
| Setting | Description |
|---|---|
| Layout | Click an icon to pick a column layout, or customize it. Custom layouts accept 1/12, 2/12, 3/12, 4/12, 5/12, 6/12, 7/12, 8/12, 9/12, 10/12, 11/12, 12/12, 1/5, 2/5, 3/5, 4/5, 5/5 |
| Row stretch | How the row stretches — 4 styles (below) |
| Full height row | Make the row as tall as the browser window |
| Equal height | Give every column in the row the same height |
| Content position | Vertically align columns with flexbox utilities: top / middle / bottom |
| Justify Content | Horizontally align columns with flexbox utilities |
| CSS Animation | Add an entering animation — pick the effect and duration. See the demo page |
| Extra class name | Append a custom CSS class to the row |
Row stretch — 4 styles:
| Style | Description |
|---|---|
| Default | Content width matches the theme's content area |
| Stretch row | The row spans full width; content width matches the theme |
| Stretch row and content | Row and content span full width, with extra spacing on both sides of the content |
| Stretch row and content (no paddings) | Row and content span full width with no extra spacing |
Content position:
Custom CSS
Attach the theme's pre-built CSS to the row.
Typography
Set the text style of the row — size, color, font family, and so on.
Hide Element
Hide the row below certain resolutions.
Background
Background Style — 5 options:
1. Single Color — a solid background color.
2. Gradient Color — a gradient background.
| Setting | Description |
|---|---|
| Gradient Type | Direction of the gradient |
| Gradient Start Color | Starting color |
| Gradient End Color | Ending color |
3. Image — a background image.
4. Parallax — a parallax background image.
| Setting | Description |
|---|---|
| Parallax Style | Two styles: Fixed at its position and Parallax on scroll |
| Parallax Factor | With Parallax on scroll, how far the background shifts — configurable per resolution |
5. YouTube Video — a YouTube video as the background.
| Setting | Description |
|---|---|
| YouTube ID | The video ID. Open the video on YouTube.com and copy the part of the URL after v=. For example, the ID of https://www.youtube.com/watch?v=AkcUoA2f-jU is AkcUoA2f-jU |
| Placeholder Images | Cover image of the video |
| Loop | Play the video in a loop |
| Muted | Mute the video |
| Start Time(s) | Where the video starts |
| End Time(s) | Where the video ends |
| Play video only when in viewport | Start playing only after the visitor scrolls to the video area |
Shared options (available for all styles):
| Setting | Description |
|---|---|
| Display Color Overlay | Add a shade layer over the background, with its own color and opacity |
| Enable slanted background | Slant the background and set the tilt angle |
Anchor
| Setting | Description |
|---|---|
| Anchor ID | The anchor ID (no spaces) |
| Anchor Title | The anchor title, shown in places like the OnePage navigation |
TIP
Combine with the OnePage setup and Scroll-Fix Content.
Fixed Element
Add extra elements to the row, with optional rotation animations. See Set Up Fixed Elements.
Column Settings
Click the edit button on the right of a column to open its settings.
General
| Setting | Description |
|---|---|
| CSS Animation | Add an entering animation — pick the effect and duration |
| Content position | Vertically align content with flexbox utilities |
| Extra class name | Append a custom CSS class to the column |
Background Settings
Set a background image and color for the column.
Responsive Options
| Setting | Description |
|---|---|
| Default Width | Width of the column |
| Device | Breakpoints: Extra small < 576px, Small ≥ 576px, Medium ≥ 768px, Large ≥ 992px, Extra large ≥ 1200px |
| Offset | Column offset |
| Device Width | Column width per resolution; mobile defaults to full width |
| Order | Display order of the column |
Custom CSS
Attach the theme's pre-built CSS to the column.
Hide Element
Hide the column below certain resolutions.