1. Home
  2. Docs
  3. Marketing Elements
  4. Alert Box

Alert Box EA Element

The Alert Box enables you to display a colored alert box to draw attention to an important message. You can use this off-grid widget to display dismissable special offers, GDPR and Privacy notifications. You can make it appears each time the user opens a page or appears once only and doesn’t appear again until specific period passes,  Here in this tutorial, you’re going to learn how to use the Alert Box element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Alert Box Element

»Content

 

Box

⇒Position: Set the position of the alert box either left, center, right or use your custom positioning. And then customize the settings according to your choice.

⇒Close Button:

→Horizontal Position: Set the horizontal position of the close button either after or before.

→Vertical Position: Set the vertical position of the close button either top, middle or bottom.

: Set a z-index for the notification bar, default is: 9999

 

Content

⇒Content to Show: Set the type of content to show on the alert box.

: Enable/disable the icon on the alert box content.

: Set the icon type either font awesome icon or your custom image.

Select an icon from the font awesome library or upload your own SVG.

: Enter the alert title here. To decorate the text click on Dynamic settings to apply the AnalogWP Classes to the title. (Ex. Add a dark background)

Add a close button text here.

: Set the alignment of the alert box.

 

Advanced Settings

⇒Use Cookies: Enable cookies here. This option will use cookies to remember user action

⇒Responsive Controls: This option will hide the notification bar below a specific screen size.

⇒Height: Customize the height of the alert box manually for different dimensions.

⇒Overflow: Set the alert box overflow for different dimensions.

 


»Style

 

Box

⇒Background Color: Add a custom color to the background of the alert box.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the alert box for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the alert box border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the alert box for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Margin: Set the margin value for the top, right, bottom and left around the alert box for different dimensions. You can link the values together or customize them individually.

⇒Padding: Set the padding value for the top, right, bottom and left around the alert box for different dimensions. You can link the values together or customize them individually.

 

Icon

⇒Color: Customize the icon color of the alert box.

⇒Hover Color: Customize the icon color for the Hover view.

⇒Size: Customize the size of the icon manually for different dimensions.

⇒Background Color: Customize the icon background color.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the icon for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the icon border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the icon for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Margin: Set the margin value for the top, right, bottom and left around the alert box icon for different dimensions. You can link the values together or customize them individually.

⇒Padding: Set the padding value for the top, right, bottom and left around the alert box icon for different dimensions. You can link the values together or customize them individually.

 

Text

⇒Color: Customize the alert box title text color.

⇒Typography: Set the typography options for the text.

⇒Background Color: Customize the text background color.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the alert text for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the text border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the text for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Margin: Set the margin value for the top, right, bottom and left around the alert box text for different dimensions. You can link the values together or customize them individually.

⇒Padding: Set the padding value for the top, right, bottom and left around the alert box text for different dimensions. You can link the values together or customize them individually.

 

Close

⇒Color: Customize the alert box close button color.

⇒Hover Color: Customize the alert box close button color for the Hover view.

⇒Typography: Set the typography options for the close button text.

⇒Background Color: Customize the close button background color.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the alert box close button for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the close button border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the close button for different dimensions.

⇒Shadow: Customize the shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Margin: Set the margin value for the top, right, bottom and left around the alert box close button for different dimensions. You can link the values together or customize them individually.

⇒Padding: Set the padding value for the top, right, bottom and left around the alert box close button for different dimensions. You can link the values together or customize them individually.

 

After done with all customization, Update changes to the page by clicking the APPLY button at the top

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Alert Box Element.


Was this article helpful to you? Yes No

How can we help?