Tagline Box Element
The Tagline Box Element is a highlighted box with a title, a short description and an optional button. It is made for calls to action: asking for a quote, pointing to a contact form, announcing an offer or leading visitors to the next step.
A colored highlight border on one side, a soft shadow below the box and its own background make it stand out from the regular text around it, while the button can open a link, a new tab or a modal window. All of it follows the Tagline Box section of Global Options unless you change it.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Tagline Box Element
Add the Tagline Box Element to a column and fill in the Tagline Title and Tagline Description. Additional Content takes further text below them. Choose the Content Alignment: left, center or right.
For a button, enter the Button Link and the Button Text, and choose the Link Target. To open a modal window instead, enter its class name in Modal Window Anchor. On the Design tab set the Button Size, Button Type and Button Border Radius.
Also on the Design tab you set the title typography, the font sizes of description and content, the background, the border and the padding. Highlight Border Position adds a border of at least 3 pixels on the left, right, top or bottom in the primary color of the site; Shadow adds a curved shadow under the box with an adjustable Shadow Opacity.
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 → Tagline Box. Change them there to style every Tagline Box at once.
General
| Heading | Description |
|---|---|
| Content Alignment | Choose how the content should be displayed. |
| Button Link | The url the button will link to. |
| Button Text | Insert the text that will display in the button. |
| Link Target | Controls how the link will open. |
| Modal Window Anchor | Add the class name of the modal window you want to open on button click. |
| Tagline Title | Insert the title text. |
| Tagline Description | Insert the description text. |
| Additional Content | This is additional content you can add to the tagline box. This will show below the title and description if one is used. |
| 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 Typography | Controls the typography of the tagline title. Leave empty for the global font family. |
| Description Font Size | Controls the font size for the description text. Enter value including CSS unit (px, em, rem), for example 10px. |
| Content Font Size | Controls the font size for the content text. Enter value including CSS unit (px, em, rem), for example 10px. |
| Background Color | Controls the background color. |
| Shadow | Show the shadow below the box. |
| Shadow Opacity | Choose the opacity of the shadow. |
| Border Size | In pixels. |
| Border Color | Controls the border color. |
| Highlight Border Position | Choose the position of the highlight. This border highlight is from Global Options primary color and does not take the color from border color above. |
| Button Size | Select the button’s size. Choose default for Global Option selection. |
| Button Type | Select the button’s type. |
| Button Border Radius | Controls the border radius. Enter values including any valid CSS unit, for example 10px. |
| Tagline Box Padding | In pixels or percentage, for example 10px or 10%. |
| Margin | Spacing above and below the tagline. 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. |
| 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 | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- The button only appears when both Button Link and Button Text are filled in (or a Modal Window Anchor is set together with the text).
- The title is always output as an H2 heading. Keep it short and meaningful, and do not use the box where an H2 would break the heading order of the page.
- The highlight border always uses the primary color from Global Options; Border Color only colors the other sides.
- Use one tagline box per section at most. Several boxes in a row compete for attention and weaken each call to action.
- Write the button text as an action, such as “Request a quote”, rather than “Click here”. It is clearer for all visitors and for screen readers.