Tagline Box Element

Last Update: February 19, 2023

The Tagline Box Element is very versatile promotional element, and has numerous options for easy customization. Insert a title, body copy and a button link for default, or customize it with adding a shadow, changing the background color, border size, border color and highlight position. Users can set custom links and a link target for the button. Read below for an overview of the specific features of the Element, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Tagline Box Element

The Tagline Box Element can be used in a variety of ways, enabling you to easily add a promotion box anywhere on your site. To start, add the element to your desired column.

There are a large number of options in this Element, as it is highly customizable, both with style and content. Work your way down through the options, and configure the element as you wish. This is a very versatile element and is limited largely by your own imagination and needs.

See below for details of all element options.

Element Options

Note: The Default setting will use the global settings assigned for this element in your Global Options > Avada Builder Elements > Tagline Box section. Also, please note that the displayed options below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

HeadingDescription
Content AlignmentChoose how the content should be displayed.
Button LinkThe url the button will link to.
Button TextInsert the text that will display in the button.
Link TargetControls how the link will open.
Modal Window AnchorAdd the class name of the modal window you want to open on button click.
Button SizeSelect the button's size. Choose default for Global Option selection.
Button TypeSelect the button's type.
Button ColorChoose the button color.
Tagline TitleInsert the title text.
Tagline DescriptionInsert the description text.
Additional ContentThis is additional content you can add to the tagline box. This will show below the title and description if one is used.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
Title TypographyControls the typography of the tagline title. Leave empty for the global font family.
Description Font SizeControls the font size for the description text. Enter value including CSS unit (px, em, rem), ex: 10px
Content Font SizeControls the font size for the content text. Enter value including CSS unit (px, em, rem), ex: 10px
Background ColorControls the background color.
ShadowShow the shadow below the box.
Shadow OpacityChoose the opacity of the shadow.
Border SizeIn pixels.
Border ColorControls the border color.
Highlight Border PositionChoose 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 Border RadiusControls the border radius. Enter values including any valid CSS unit, ex: 10px.
Tagline Box PaddingIn pixels or percentage, ex: 10px or 10%.
MarginSpacing above and below the tagline. In px, em or %, e.g. 10px.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

In this article