Content Layouts

This theme includes all the content layouts used on the demo site. You can edit them, and also create your own layouts.

Cache reminder

Since browser cache exists, your page probably won't display the setting result properly after saving. Press Ctrl + F5 to refresh the page.

Content Layouts

Control Panel Area

You will go to the control panel area of the content layout after clicking Add Layout. Some default layouts are included — you can change and delete them, but don't forget to save at the end.

Control panel area

Layout

Choose the layouts you want and drag them to the Container area.

Drag layouts

Pane

A Pane is the container that lets a page apply modules. You can drag panes to columns.

Panes

Pane Settings

Pane Name — set the name of the pane
Background Settings — set a background image and background color for the pane
Custom CSS — add the pre-built CSS of the theme to the pane

Row Settings

Click the edit button on the right of a Row to go to the row settings interface.

Row settings entry

General

Layout — quickly set the column layout by clicking the corresponding icons, or customize the layout. In custom layouts you can enter 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 and 5/5.

Layout settings

Row Stretch — the style of the row; there are 4 styles included:

Default — the content width is the same as the theme width
Stretch Row — the row is full width; the content width is the same as the theme width
Stretch Row and Content — the row and content are full width, with extra spacing on both sides of the content
Stretch Row and Content (No Paddings) — the row and content are both full width

Row stretch comparison

Full Height Row — set the height of the row to the same height as the browser window.

Equal Height — set every column of the row to have the same height.

Equal height

Content Position — use flexbox alignment utilities to vertically align columns.

Top

Content position: top

Middle

Content position: middle

Bottom

Content position: bottom

Justify Content — use flexbox alignment utilities to horizontally align columns.

CSS Animation — add entering animations for elements; choose the animation style and duration. For the animation effects, please check this demo page.

Extra class name — add extra CSS to the row.

Custom CSS

You can add the pre-built CSS of the theme to the row.

Row custom CSS

Typography

You can set the text style of the row — text size, color, font family and so on.

Row typography

Hide Element

You can set rows to be hidden under certain resolutions.

Background

Background Style — set the style of the background.

1. Single Color — set the background to a single color.

2. Gradient Color — set the background to a gradient color.

Gradient Type — set the direction of the gradient
Gradient Start Color — set the start color of the gradient
Gradient End Color — set the end color of the gradient

3. Image — set the background to an image.

4. Parallax — set a parallax background image.

Parallax Style — there are 2 styles included: Fixed at its position and Parallax on scroll
Parallax Factor — when Parallax on scroll is chosen, you can set the displacement range of the background image, also per resolution

5. YouTube Video — a YouTube video can be used as the background.

YouTube ID — you need to enter the video ID. To get your YouTube ID, visit the video on YouTube.com and view the URL in the browser's address bar. The ID will be after the v= part of the URL. In https://www.youtube.com/watch?v=AkcUoA2f-jU, the ID is AkcUoA2f-jU
Placeholder Images — set the cover image of the video
Loop — set to play the video in a loop
Muted — set whether to mute the video
Start Time(s) — set the start time of the video
End Time(s) — set the end time of the video
Play video only when in viewport — set to play the video only when you scroll down the page to the video area
Display Color Overlay — add a shade layer to the background; you can set the color and transparency of the shade layer
Enable Slanted Background — set whether to slant the background; you can also set the angle of the tilt

Anchor

Anchor ID — the anchor ID
Anchor Title — the text of the title

TIP

Anchors are used by One Page navigation and Scroll Fix Content.

Fixed Element

Allows you to set extra elements for the row and add rotating animations to elements. See How to: Set Up Fixed Elements.