Content Boxes Element
The Content Boxes Element shows a row of short boxes, each with an icon or small image, a title, a text and an optional read more link. It is the classic way to present services, features or the steps of a process side by side.
Eight layouts are available, from boxed and side-by-side icons to clean layouts without icon backgrounds and two timeline layouts that connect the boxes with a line. Icons, colors and links can be set once for all boxes and changed for single boxes where needed.
In this article: How To Use · Element Options · Content Box Options · Tips · Related Elements · Example
How To Use The Content Boxes Element
Add the Content Boxes Element to a column and add one Content Box per item. Choose a Box Layout first, because it decides where the icon, title and text sit. Then set the Number of Columns per row; leave it empty to fit all boxes in one row, up to six. Link Type, Link Area and Link Target control how the read more link of each box appears and what is clickable.
On the Design tab set the title size, HTML Heading Tag and font colors, a background color, border radius and box shadow. The Icon chosen here is used for every box that has no icon of its own, together with its color, background, borders, size and Icon Hover Animation Type. To use your own graphic, deselect the icon and upload an Icon Image.
The two timeline layouts behave differently from the others: Timeline Vertical always uses one column, and both timeline layouts replace your animation settings with a fixed fade-in so the boxes appear one after the other. The connecting line is only drawn for boxes with an icon and with Icon Background turned on. Content Alignment (left or right) only works with the side-by-side layouts.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Content Boxes. Change them there to style every Content Boxes at once.
Options with a small state switch next to them can be set separately for the normal, hover and active state.
General
| Heading | Description |
|---|---|
| Content | Enter some content for this content box. |
| Box Layout | Select the layout for the content box. |
| Number of Columns | Set the number of columns per row. |
| Alignment | Defines how the content boxes should align within the container. |
| Link Type | Select the type of link that should show in the content box. Select default for Global Options selection. |
| Button Span | Choose to have the button span the full width. |
| Link Area | Select which area the link will be assigned to. Select default for Global Options selection. |
| Link Target | _self = open in same window _blank = open in new window. |
| Content Alignment | Works with “Classic Icon With Title” and “Classic Icon On Side” layout options. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Controls the delay of animation between each element in a set. In seconds (0.0 – 5.0). |
| Offset of Animation | Controls when the animation should start. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Title Size | Controls the size of the title. In pixels for example 18px. |
| HTML Heading Tag | Choose HTML tag of the heading, either div, p or the heading tag, h1-h6. |
| Title Font Color | Controls the color of the title font. for example #000. |
| Body Font Color | Controls the color of the body font. for example #000. |
| Content Box Background Color | Controls this setting. |
| Border Radius | Enter values including any valid CSS unit, for example 10px. |
| Box Shadow | Set to “Yes” to enable box shadows. |
| Box Shadow Position | Set the vertical and horizontal position of the box shadow. Positive values put the shadow below and right of the box, negative values put it above and left of the box. In pixels, ex. 5px. |
| Box Shadow Blur Radius | Set the blur radius of the box shadow. In pixels. |
| Box Shadow Spread Radius | Set the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels. |
| Box Shadow Color | Controls the color of the box shadow. |
| Box Shadow Style | Set the style of the box shadow to either be an outer or inner shadow. |
| Icon | Global setting for all content boxes, this can be overridden individually. Click an icon to select, click again to deselect. |
| Flip Icon | Choose to flip the icon. |
| Rotate Icon | Choose to rotate the icon. |
| Spinning Icon | Choose to let the icon spin. |
| Icon Color | Controls this setting. |
| Icon Background | Choose to show a background behind the icon. Select default for Global Options selection. |
| Icon Background Radius | Choose the border radius of the icon background. In pixels (px), for example 1px, or “round”. |
| Icon Background Color | Controls this setting. |
| Icon Background Inner Border Size | Controls this setting. |
| Icon Background Inner Border Color | Controls this setting. |
| Icon Background Outer Border Size | Controls this setting. |
| Icon Background Outer Border Color | Controls this setting. |
| Icon Size | Controls the size of the icon. In pixels. |
| Icon Hover Animation Type | Select the animation type for icon on hover. Select default for Global Options selection. |
| Hover Accent Color | Controls the accent color on hover. |
| Icon Image | To upload your own icon image, deselect the icon above and then upload your icon image. |
| Icon Image Max Width | Set the icon image max width. Leave empty to use image’s native width. In pixels, for example 35. |
| Margin | Spacing above and below the content boxes. In px, em or %, e.g. 10px. |
| Item Margin | Spacing above and below each item boxes. In px, em or %, e.g. 10px. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Content Box Options
Each Content Box has its own title, text and read more link. Its icon, icon colors and icon image override the parent settings for this box only; leave them empty to inherit.
General
| Heading | Description |
|---|---|
| Title | The box title. |
| Content Box Background Color | Controls this setting. |
| Icon | Click an icon to select, click again to deselect. |
| Flip Icon | Choose to flip the icon. |
| Rotate Icon | Choose to rotate the icon. |
| Spinning Icon | Choose to let the icon spin. |
| Icon Color | Controls the color of the icon. |
| Icon Background Color | Choose to show a background behind the icon. |
| Icon Background Inner Border Size | Controls this setting. |
| Icon Background Inner Border Color | Controls this setting. |
| Icon Background Outer Border Size | Controls this setting. |
| Icon Background Outer Border Color | Controls this setting. |
| Icon Image | To upload your own icon image, deselect the icon above and then upload your icon image. |
| Icon Image Max Width | Set the icon image max width. Leave empty for value set in parent option. Set to -1 to use image’s native width. In pixels, for example 35. |
| Read More Link Url | Add the link’s url for example http://example.com. |
| Read More Link Text | Insert the text to display as the link. |
| Read More Link Target | Controls how the link will open. |
| Content Box Content | Add content for content box. |
| Animation Color | Select the color of the animation. |
Animation
| Heading | Description |
|---|---|
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- Pick the HTML Heading Tag by the place of the boxes in the page structure. Box titles under an H2 section heading are usually H3.
- Set the icon once on the parent element and only override it in single boxes. This keeps the row consistent and is quicker to change later.
- With Link Area set to Entire Content Box, the whole box opens the link, which gives visitors a larger target on touch screens.
- Keep box texts to two or three short sentences. Longer content belongs on the linked page.
- Item Margin sets the space above and below each box, which helps when the boxes wrap into several rows.