Versions 1.0.0-1.7.3
A versatile section that will allow you to manipulate up to 6 content blocks with control over individual block width.
Suggested Use
- Sponsors, certificates or top brands logos with links
- Testimonials
- Promotion tiles
- Individual images
- Promotional text with links
- Trust icons
In this section...
Settings
Image fill space height
The overall height of the image section blocks in relation to the height of the screen when 'Image fit' is set to 'Fill space'. 5% is the minimum, and it steps up by 5 to a maximum of 100%
Vertical positioning
Position the content within the block at the Top, Middle or Bottom
Background color
3 settings are available to use as a background for the section. The Primary & Secondary colors are set in the Theme Settings Color section
Full width background
The background color has the option of being as wide as the screen or only as wide as the content container
Text Content Blocks
Heading
Title of the section or feature
Subheading
Secondary title of the section or feature
Text
A text block for basic formatting including bold, italic & linked text
Link
Include a button with a link
Button
Customize the text for the button
Outline button
Invert the button to use a frame with no background
Alignment
Text can be aligned to the left, right or centered to the container
Container width
The design is based on a 12 column, 1200px wide layout. Refer to the following table to reference content widths:
| Setting | Desktop Width | Maximum Width |
|---|---|---|
| 25% | 300px | 1200px |
| 33% | 400px | 1200px |
| 50% | 600px | 1200px |
| 66% | 800px | 1200px |
| 75% | 900px | 1200px |
Image Content Blocks
Image
Select an image to be used. Refer to the 'Width' table below for optimal image sizing. Settings 12.5%, 25% & 33% need a higher minimum width to accommodate responsive & mobile screen sizes
Image fit
There are 2 choices for how the image will fit into the container:
- Fill space: The image will occupy the full width of the container & the height will depend on the heights of the additional Content Blocks. Use this like a background image, ie textures
- Fit to space: The image will occupy the full width of the container & the height will proportionally fit to the width. Use this like a stand alone image, ie logos
Fill space image position
Set the focus of the image to ensure consistency regardless of the height setting, content height or screen width
Caption
Add a caption below the image
Link
Include a link for the image
Container width
The design is based on a 12 column, 1200px wide layout. Refer to the following table to reference content widths & optimal image sizing:
| Setting | Desktop Width | Maximum Width |
|---|---|---|
| 12.5% | 200px | 1200px |
| 25% | 300px | 1200px |
| 33% | 400px | 1200px |
| 50% | 600px | 1200px |
| 66% | 800px | 1200px |
| 75% | 900px | 1200px |
| 87.5% | 1000px | 1200px |
| 100% | 1200px | 1200px |
Icon Content Blocks
Icon
Select an icon to be used from the preset list
Icon size
There are 4 choices for size of the icon
Icon color
Preferred color of the icon. Defaults to the color assigned to the Headers
Icon highlight color
Some icons have elements that can be assigned a different color. Defaults to the color assigned to the Buttons
Caption
Add a caption below the icon
Link
Include a link for the icon
Container width
The design is based on a 12 column, 1200px wide layout. Refer to the following table to reference content widths:
| Setting | Desktop Width | Maximum Width |
|---|---|---|
| 12.5% | 200px | 1200px |
| 25% | 300px | 1200px |
| 33% | 400px | 1200px |
| 50% | 600px | 1200px |
| 66% | 800px | 1200px |
| 75% | 900px | 1200px |
| 87.5% | 1000px | 1200px |
| 100% | 1200px | 1200px |