Content Layouts
The Minis theme includes all content layouts used on the demo site. You can edit them or create your own layouts.
Cache note
After saving, the page may not immediately reflect your changes due to browser caching. Press Ctrl + F5 to force a refresh.
Control Panel Area
Click Add Layout to open the control panel. It contains some default layouts, which you can modify or delete. Do not forget to save after making changes.
Layout
Select the layout you need and drag it into the Container area.
Pane
A Pane is a container that lets you place modules on a page. You can drag a Pane into a column.
Pane Settings
| Setting | Description |
|---|---|
| Pane Name | The name of the Pane |
| Background Settings | Set a background image and background color for the Pane |
| Custom CSS | Add the theme's preset CSS to the Pane |
Row Settings
Click the edit button to the right of a Row to open the row settings screen.
General
| Setting | Description |
|---|---|
| Layout | Click an icon to quickly set the column layout, or customize the layout. Custom layouts support values such as 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 |
| Setting | Description |
|---|---|
| Row stretch | The stretch style of the row; 4 options are available, see the table below |
Row stretch styles:
| Style | Description |
|---|---|
| Default | The content width matches the theme content area width |
| Stretch row | The row spans the full width, and the content width matches the theme content area width |
| Stretch row and content | Both the row and the content span the full width, with extra spacing on both sides of the content |
| Stretch row and content (no paddings) | Both the row and the content span the full width, without padding |
| Setting | Description |
|---|---|
| Full height row | The height of the row matches the height of the browser window |
| Equal height | All columns in the row have the same height |
| Setting | Description |
|---|---|
| Content position | Vertically aligns the columns with the flexbox alignment tool; supports top, middle, and bottom |
| Justify Content | Horizontally aligns the columns with the flexbox alignment tool |
| CSS Animation | Adds an entrance animation to the element; you can choose the animation style and duration. For animation effects, see the demo page |
| Extra class name | Adds an extra CSS class name to the row |
Content position alignment effects:
Custom CSS
Add the theme's preset CSS to the row.
Typography
Set the typography of the row, such as font size, color, font family, and more.
Hide Element
You can set the row to be hidden at certain resolutions.
Background
Background Style — the style of the background; the following 5 types are supported:
| Type | Description |
|---|---|
| 1. Single Color | A solid color background |
| 2. Gradient Color | A gradient color background |
| 3. Image | An image background |
| 4. Parallax | A parallax scrolling background image |
| 5. YouTube Video | A YouTube video as the background |
Gradient Color:
| 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 |
Parallax:
| Setting | Description |
|---|---|
| Parallax Style | The parallax style; 2 options: Fixed at its position (stays in place) and Parallax on scroll (parallax while scrolling) |
| Parallax Factor | When Parallax on scroll is selected, you can set the movement range of the background image; it can also be set separately for different resolutions |
YouTube Video:
| Setting | Description |
|---|---|
| YouTube ID | The video ID. Open the video on YouTube.com; the ID is 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 | The cover image of the video |
| Loop | Whether to loop the video |
| Muted | Whether to mute |
| Start Time(s) | The start time of the video |
| End Time(s) | The end time of the video |
| Play video only when in viewport | Whether to play the video only when the video area is scrolled into view |
| Display Color Overlay | Whether to add an overlay layer over the background; you can set the overlay color and opacity |
Slanted Background:
| Setting | Description |
|---|---|
| Enable slanted background | Whether to slant the background; you can also set the slant angle |
Anchor
| Setting | Description |
|---|---|
| Anchor ID | The anchor ID |
| Anchor Title | The text of the anchor title |
For OnePage single-page sites
Anchor is often used together with OnePage single-page sites so that clicking a menu item scrolls the page to the corresponding section.
Fixed Element
Lets you add extra elements to a row and apply a rotation animation to them.
Column Settings
Click the edit button to the right of a column to open the column settings screen.
General
| Setting | Description |
|---|---|
| CSS Animation | Adds an entrance animation to the element; you can choose the animation style and duration |
| Content position | Vertically aligns the column content with the flexbox alignment tool |
| Extra class name | Adds an extra CSS class name to the column |
Background Settings
Set a background image and background color for the column.
Responsive Options
You can configure the following for a column separately at different resolutions:
| Setting | Description |
|---|---|
| Default Width | The width of the column |
| Device | Device breakpoints: Extra small < 576px, Small ≥ 576px, Medium ≥ 768px, Large ≥ 992px, Extra large ≥ 1200px |
| Offset | The offset of the column |
| Device Width | The width of the column at different resolutions; full width by default on mobile |
| Order | The display order of the column |
Custom CSS
Add the theme's preset CSS to the column.
Hide Element
You can set the column to be hidden at certain resolutions.