Would you like to create an Alert message like this one below?
It’s easier than you think! Just follow the steps below:
1. Firstly, drag an HTML widget to the page.
2. Copy&paste the following Code into HTML editor:
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
This is an alert box.
</div>
3. Then, add the following CSS code into HTML widget -> Additional CSS.
/* The alert message box */
.alert {
padding: 20px;
background-color: #f44336; /* Red */
color: white;
margin-bottom: 15px;
}
/* The close button */
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
/* When moving the mouse over the close button */
.closebtn:hover {
color: black;
}