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.,×Default General Message Type×Default Error Message Type×Default Success Message Type×Default Notice Message Type,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Alert ElementThe Alert Element is easy to add anywhere in your content. Follow these simple steps below.
Step 1. Ensure Avada Builder, or Avada Live is active.
Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
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 dismissable (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. Save your page.
Read below for a detailed description of all element options.
767,635 Businesses Trust Avada
Get Avada767,635 Businesses Trust Avada
Get Avada767,635 Businesses Trust Avada
Get Avada,Element OptionsLocation: 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 at Options > Avada Builder Elements > Alert. Also, please note that the displayed option 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
Alert Type – Allows you to choose from any of the 4 preset alerts (General, Error, Success or Notice), or the Custom one.
Accent Color – 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 – This setting is only for the Custom Alert. This allows you to set the background color for custom alert boxes.
Border Size – 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 – This setting is only for the Custom Alert. This allows you to set the icon for custom alert boxes.
Content Alignment – This setting allows you to choose the alignment of the Alert content.
Margin – Enter values including any valid CSS unit, ex: 4%.
Text Transform – This setting allows you to transform the case of the Alert text.
Dismissable Box – This setting allows you to specify whether the Alert Box can be dismissed or not.
Box Shadow – This setting displays a shadow below the Alert Box.
Alert Content – This is where you enter the content for the Alert Box.
Element Visibility – Allows you to control the column』s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.
Element Sticky Visibility – (Only visible if parent Container is set to Sticky). Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time.
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 ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.
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 5.
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 ScreenGlobal OptionsLocation: Avada > Options > Avada Builder Elements > Alert
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.
General Background Color – Set the background color for general alert boxes.
General Accent Color – Set the accent color for general alert boxes.
Error Background Color – Set the background color for error alert boxes.
Error Accent Color – Set the accent color for error alert boxes.
Success Background Color – Set the background color for success alert boxes.
Success Accent Color – Set the accent color for success alert boxes.
Notice Background Color – Set the background color for notice alert boxes.
Notice Accent Color – Set the accent color for notice alert boxes.
Content Alignment – Choose how the content should be aligned. Choose between Left, Center, and Right.
Text Transform – Choose how the text is displayed. Choose between Normal or Uppercase.
Dismissable Box – Select if the alert box should be dismissable.
Box Shadow – Display a box shadow below the alert box.
Border Size – Controls the border size of the alert boxes. In pixels.
View The Options Screen