Alert Element

Last Updated on

The Alert Element allows you to display a colored alert box with many styles to draw the attention of your viewers for different purposes.

Common Uses:

You can use this element to display dismissable special offers, GDPR and Privacy notifications like the ones you see on this page. It is appearing each time the user opens the page.

x
Beware! This element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor. Right now the default Elementor alert widget doesn’t have any documents, but you may drag and drop it into your page in order to see the differences between Raven and Elementor Alert widgets.

In this article


Displaying the Alert Element

To add an Alert element to a page:

1
Add a new page or edit an existing one.
2
Click on Edit with Elementor button.

3
From the left dashboard, search for a “Alert”.

4
Drag and drop the Alert element to your page.

5
A new dashboard on the left will open with the element’s settings. These are explained below.

Content

SettingDescription
TypeThere are 4 types of alerts to fit with 4 general purposes: Info, Success, Warning, Danger.
Title & DescriptionYou need to add the message content and Title in the respective boxes.
Choose IconAdds icon displayed inside the alert box.
Dismiss ButtonToggle the dismiss button on or off.  Please note that, dismiss button will hide the box, but as soon as you refresh the page, the alert box will show up again.

Style

SettingDescription
Background Color TypeSets a classic or gradient background color for the Alert element.
WidthSets the width of the Alert element.
HeightSets the height of the Alert element.
PaddingSets a padding for the Alert element.
AlignmentAligns the button on a page.
Border TypeSets a type of border for the Alert element.
Border RadiusSets a custom radius for the border.

Title Style

SettingDescription
Text ColorSets the color of the title text in the Alert box.
TypographyLets you change and style everything related to the Alert title text.

Description Style

SettingDescription
Text ColorSets the color of the description text in the Alert box.
TypographyLets you change and style everything related to the Alert box description text.

Icon Style

SettingDescription
ColorSets the color of the icon.
SizeSets the size of the icon.
PaddingSets a padding around the icon.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Alert element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

 

To learn more about it, please check this article.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket