Alert Element

03/12/2018

The Alert Element offers four preset and one custom Alert Box for your website. These are useful for all sorts of situations. There is a General Alert, an Error Alert, a Success Alert, a Notice Alert, and the aforementioned Custom Alert. There is a range of settings available, some of which only apply to the Custom Alert, as the first four are preset to specific situations and uses. The Custom Alert however is fully customizable.

Alert

Default General Message Type
Default Error Message Type
Default Success Message Type
Default Notice Message Type
View more Examples!

How To Use The Alert Element

The Alert Element is easy to add anywhere in your content. Follow these simple steps below.

Step 1. Edit an existing page. Ensure the Fusion Builder is activated, by clicking the 'Use Fusion Builder' button on top of the page editor.

Step 2. Choose the Container and Column you wish to add the Alert Element into. Click on Add new Element, at the bottom of the content in the Column.

Step 3. Choose Alert from the Elements List.

Step 4. The first option allows you to select from a number of preset Alert boxes, or you can choose Custom if you prefer to style it yourself. Note that the next two options, Accent Color, and Background Color, will not affect the Element unless you have chosen Custom in the first option.

Step 5. Once you have chosen colors, you can go through the other General Options. You have options for Border width, Icon, Content Alignment, Text Transform, Box Shadow, and Dismissable Box. By default, Alerts Boxes are dismissible (the user can close them) but there is an option here to make them permanent if you wish.

Step 6. Once you have chosen your options, add your content in the Alert Content field. This is the text that shows on the Alert box.

Step 7. If you wish to make further customization, there are options for Element Visibility, as well as fields for a CSS Class, and CSS ID. There is also an animation tab, if you wish to customize how the Alert will load on the page. Once you have completed selecting your options, click on Save. Preview the page to view, and you can always come back and edit the Button to fine tune the look and function.

Read below for a detailed description of all element options.

Alert Element Options

General Tab

Alert Type - Illustrated as A. Allows you to choose from any of the 4 preset alerts (General, Error, Success or Notice), or the Custom one.

Accent Color - Illustrated as B. This setting is only for the Custom Alert. It allows you to set the border, text and icon color for custom alert boxes.

Background Color - Illustrated as C. This setting is only for the Custom Alert. This allows you to set the background color for custom alert boxes.

Border Size - Illustrated as D. This setting is only for the Custom Alert. This allows you to set the border size for custom alert boxes. In pixels.

Select Custom Icon - Illustrated as E. This setting is only for the Custom Alert. This allows you to set the icon for custom alert boxes.

Content Alignment - Illustrated as F. This setting allows you to choose the alignment of the Alert content.

Text Transform - Illustrated as G. This setting allows you to transform the case of the Alert text.

Dismissable Box - Illustrated as H. This setting allows you to specify whether the Alert Box can be dismissed or not.

Box Shadow - Illustrated as I. This setting displays a shadow below the Alert Box.

Alert Content - Illustrated as J. This is where you enter the content for the Alert Box.

Element Visibility - Illustrated as K. Allows you to control the column's visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

CSS Class - Illustrated as L. Allows you to add a class for the column.

CSS ID - Illustrated as M. Allows you to add an ID for the column.

Alert Element General Options

Animation Tab

Animation Type - Illustrated as A. Controls the column's animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.

Direction of Animation - Illustrated as B. Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.

Speed of Animation - Illustrated as C. Controls the speed of animation on the column. Choose between 0.1 to 1.

Offset of Animation - Illustrated as D. 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.

Alert Element Animation Options

Global Options

As well as the Element Options, there are also global options that can be set for the Alert Element in the Theme Options (Avada > Theme Options > Fusion Builder Elements > Alert Element). These are the default General Background Color, General Accent Color, Error Background Color, Error Accent Color, Success Background Color, Success Accent Color, Notice Background Color, Notice Accent Color, Content Alignment, Text Transform, Dismissable Box, Box Shadow, and Border Size. All of these options can be overridden in the Element options.

Alert Element Global Options

Alert Element Parameters

Copy to Clipboard
  • type - Choose from general, error, success, notice, or custom. Sets the alert type.
  • accent_color - Accepts a hexcode ( #000000 ). Sets the border, text and icon color.
  • background_color - Accept a hexcode ( #000000 ). Sets the background color.
  • border_size - Accepts a pixel value. For example, 1px. Sets border width.
  • icon - A font awesome icon value. For example, fa-glass.
  • text_align - Choose how the content is aligned. Choose from default, left, right, or centre.
  • text_transform - Choose how the text is displayed in the Alert. Options are default (leave empty), normal or capitalize.
  • dismissable - Selects whether the Alert box is dismissible or not. Options are default (leave empty), yes, or no.
  • box_shadow - Choose from yes, or no. This will show or hide a box shadow below the alert box.
  • 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 the custom title between the
    Copy to Clipboard

    tags.

Recent Posts

Recent Tweets

For privacy reasons Twitter needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept