Content Layouts
The Flux theme ships with all the Content Layouts used in the demo site. You can edit these preset layouts directly or create brand-new custom layouts.
Cache reminder
Because of browser caching, the page may not display the effect correctly immediately after saving. Press Ctrl + F5 to refresh the page and clear the cache.
Control Panel Area
Click Add Layout to enter the Content Layout control panel. The panel contains a number of default layouts that can be modified or deleted; remember to save when you're done.
Layout
Select the layout you need from the layout list and drag it into the Container area.
Pane
A Pane is a container that holds modules and can be dragged into a column for use.
Pane Settings
| Setting | Description |
|---|---|
| Pane Name | The name of the pane |
| Background Settings | The background image and background color of the pane |
| Custom CSS | Adds theme-preset CSS to the pane |
Row Settings
Click the edit button to the right of a Row to enter the row settings interface.
General
Layout — Click the corresponding icon to quickly choose a column layout, or customize it. Custom layouts support the following grid ratios:
- Based on a 12-column grid:
1/12~12/12 - Based on a 5-column grid:
1/5~5/5
Row stretch — Sets the width style of the row; 4 options in total:
| Style | Description |
|---|---|
| Default | The content width matches the theme width |
| Stretch row | The row is full width; the content width matches the theme width |
| Stretch row and content | Both the row and content are full width, with spacing preserved on both sides of the content |
| Stretch row and content (no paddings) | Both the row and content are full width, with no padding |
| Setting | Description |
|---|---|
| Full height row | The row height matches the browser window height |
| Equal height | The columns within the row have equal height |
Content position — Controls the vertical alignment of the columns within the row:
| Position | Illustration |
|---|---|
| top |  |
| middle |  |
| bottom |  |
| Setting | Description |
|---|---|
| Justify Content | Controls the horizontal alignment of the columns within the row |
| CSS Animation | Adds an entrance animation to the element; you can choose the animation style and duration. See the demo page for the effects |
| Extra class name | Attaches a custom CSS class to the row |
Custom CSS
Adds theme-preset CSS to the row.
Typography
Set the font size, color, font family, and other text styling for the row.
Hide Element
Hide the row at certain resolutions.
Background
Background Style — 5 options in total:
1. Single Color — A solid color background.
2. Gradient Color — A gradient background.
| Setting | Description |
|---|---|
| Gradient Type | The direction of the gradient |
| Gradient Start Color | The start color of the gradient |
| Gradient End Color | The end color of the gradient |
3. Image — An image background.
4. Parallax — A parallax background image.
| Setting | Description |
|---|---|
| Parallax Style | 2 options: Fixed at its position and Parallax on scroll |
| Parallax Factor | Takes effect when Parallax on scroll is selected; sets the displacement magnitude of the background image and can be set per resolution |
5. YouTube Video — Uses a YouTube video as the background.
| Setting | Description |
|---|---|
| YouTube ID | The video ID. Open the video on YouTube; the part after v= in the address bar URL is the ID. For example, the ID of https://www.youtube.com/watch?v=AkcUoA2f-jU is AkcUoA2f-jU |
| Placeholder Images | The video cover image |
| Loop | Whether to loop playback |
| Muted | Whether to mute |
| Start Time(s) | The start time of the video (seconds) |
| End Time(s) | The end time of the video (seconds) |
| Play video only when in viewport | Plays only when scrolled into the video area |
| Display Color Overlay | Overlays a mask layer on the background; you can set the color and opacity |
| Enable slanted background | Whether to slant the background; you can set the slant angle |
Anchor
| Setting | Description |
|---|---|
| Anchor ID | The anchor ID |
| Anchor Title | The title text of the anchor |
Fixed Element
Lets you add extra elements to the row, with support for setting a rotation animation for the element.
Column Settings
Click the edit button to the right of a column to enter the column settings interface.
General
| Setting | Description |
|---|---|
| CSS Animation | Adds an entrance animation to the element; you can choose the animation style and duration. See the demo page for the effects |
| Content position | Controls the vertical alignment of the content within the column |
| Extra class name | Attaches a custom CSS class to the column |
Background Settings
Set a background image and background color for the column.
Responsive Options
Configure the column separately for different resolutions.
| Setting | Description |
|---|---|
| Default Width | The width of the column |
| Device | Breakpoints: Extra small < 576px, Small ≥ 576px, Medium ≥ 768px, Large ≥ 992px, Extra large ≥ 1200px |
| Offset | The offset of the column |
| Device Width | The column width at different resolutions; on mobile it is full width by default |
| Order | The display order of the column |
Custom CSS
Adds theme-preset CSS to the column.
Hide Element
Hide the column at certain resolutions.