Tagline Box Element

08/08/2019

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.

Purchase Now

Join 490,000+ Satisfied Customers

Avada has been the #1 selling theme for more than 6 years, making it the most trusted and complete WordPress theme on the market. Powerful options & tools, unlimited designs, responsive framework and amazing support are the reasons our customers have fallen in love.
Purchase Now

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. Make sure to view the Element Demo page to get a good idea of what this Element can achieve.

Step 1 – Create a new page or edit an existing one.

Step 2 – Add a container then select your desired column layout.

Step 3 – Click the ‘+ Element’ button to bring up the Elements window. Locate the ‘Tagline Box’ element and click it to bring up its options window.

Step 4 – 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.

Step 5 – Once you have finished configuring the options, click ‘Save’ to insert the element into the page. Preview the page to view the Tagline Box, and remember you can come back into the element to fine tune it.

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: The Default setting will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > Tagline Box Elements section. Also, please note that the displayed options screens 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 Tab

  • Background Color – Controls the background color. Leave empty for the default value.

  • Shadow – Choose whether to show the shadow below the box.

  • Border Size – In pixels.

  • Border Color – Controls the border color. Leave empty for the default value.

  • Highlight Border Position – Choose the position of the highlight. This border highlight is from theme options primary color and does not take the color from border color above. Choose from Top, Bottom, Left, Right, or None.

  • Content Alignment – Choose how the content should be aligned. Choose from Left, Center, or Right.

  • Button Link – The URL the button will link to.

  • 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.

  • Margin – Spacing above and below the tagline. In px, em or %, e.g. 10px.

  • Element Visibility – Allows you to control the column’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

  • CSS Class – Allows you to add a class for the column.

  • CSS ID – Allows you to add an ID for the column.

View The Options Screen

Animation Tab

  • Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.

  • Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.

  • Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 1.

  • Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Tagline Box Element

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • Tagline Box Background Color – Controls the color of the tagline box background.

  • Tagline Box Border Color – Controls the border color of the tagline box.

  • Tagline Top/Bottom Margins – Controls the top/bottom margin of the tagline box. Enter values including any valid CSS unit, ex: 0px, 84px.

View The Options Screen

Raw Element Parameters

Copy to Clipboard
    • backgroundcolor – Accept a hexcode ( #000000 ). Sets the background color.
    • shadow – Choose from yes, or no. Show or hide a shadow below the tagline box.
    • shadowopacity – Can be a numerical value from 0.1 to 1. Sets the shadow’s opacity level. 1 is equivalent to 100% opacity.
    • border – Accepts a numerical value. For example, 1. Set the border size.
    • bordercolor – Accepts a hexcode ( #000000 ). Sets the border’s color
    • highlightposition – Choose from none, left, right, top, or bottom. Sets the highlight border’s position.
    • content_alignment – Choose from left, center, or right. Sets the content’s alignment.
    • link – The URL path where the button links to. For example, http://www.example.com/
    • button – The custom button text. For example, Click Here.
    • linktarget – Choose from _blank or _self. Choose _blank to open the link in a new window, or _self to open it in the same window.
    • modal – The unique identifier of the Modal Element you’ve created that allows the button to trigger the modal.
    • button_size – Choose from default, small, medium, large, or xlarge. Sets the size of the button.
    • button_type – Choose from default, flat, 3d. Sets the button’s type.
    • button_shape – Choose from default, square, pill, or round. Sets the button’s shape.
    • buttoncolor – Choose from default, green, darkgreen, orange, blue, red, pink, darkgray, or lightgray.
    • title – The custom title text.
    • description – The custom description text.
    • margin_top – Accepts a pixel value. For example, 5px. Sets the top margin.
    • margin_bottom – Accepts a pixel value. For example, 5px. Sets the bottom margin.
    • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
    • class – Add a custom class to the wrapping HTML element for further CSS customization.
    • id – Add a custom id to the wrapping HTML element for further CSS customization.
    • animation_type – Choose from none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the element.
    • animation_direction – Choose from down, right, left, up, or static. Sets the animation’s incoming direction.
    • animation_speed – Accepts a numerical value from .1 (fastest), to 1, (slowest).
    • animation_offset – Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
    • custom content – Insert additional content between the
      Copy to Clipboard

      tags.