Как добавить информационные окна на сайт Weebly?

Выделение важной информации в статье помогает успешно донести сообщение до пользователей. Как правило, вы можете использовать окна сообщений для демонстрации советов, справки, предупреждений, предупреждений и другой информации. Такие фреймворки, как Bootstrap, предлагают предопределенный компонент предупреждений для добавления этих информационных окон. Точно так же вы можете использовать плагины в системах управления контентом, таких как WordPress. На Weebly вы можете создавать информационные окна сообщений, используя простой CSS. В этой статье мы объясним добавление окна информационного сообщения на сайте Weebly на основе компонента предупреждений Bootstrap.

Окна информационных сообщений

Мы создадим окна сообщений с двумя разными стилями.

• Использование значков шрифтов
• Использование маленьких изображений значков

Иконки шрифтов – хороший вариант, если вы используете Font Awesome на своем сайте. В противном случае вы можете выбрать вариант изображения вместо значков шрифтов.

Особенность окон информационных сообщений

Окна информационных сообщений будут иметь следующие функции:

• Сделано с помощью CSS и полностью адаптивного автоматического выравнивания на мобильных устройствах.
• Стили включают в себя окно сообщения для информации, успеха, предупреждения, опасности, советов, помощи и объявлений. Вы также можете определить собственное окно сообщения на основе кода.
• Добавьте индивидуальные ящики сообщений в зависимости от ваших потребностей. Например, если вы хотите отобразить подсказку, используйте «окно подсказки», а для предупреждения – «окно предупреждающего сообщения». Этим можно управлять с помощью HTML, вставленного внутри элемента «Код внедрения».
• Цвета и шрифты можно настроить по своему усмотрению.
• Ширина окна уведомлений может быть увеличена до полной ширины экрана или уменьшена, чтобы соответствовать длине содержимого.

1 информационное окно со значками шрифтов

Ниже показано, как будут выглядеть блоки, содержащие цветовое поле CSS и значки шрифтов перед текстом.

Первым шагом к созданию этих информационных блоков является привязка CSS-значков font awesome icons к разделу заголовка вашего сайта. Для этого добавьте приведенный ниже код в раздел «Настройки> SEO> Код заголовка» в редакторе сайта Weebly.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

Добавить код заголовка на уровне сайта Weebly

Второй шаг – добавить приведенный ниже код CSS в файл «main.less».

.webnots-notification-box {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #ffffff;
font-family: verdana, 'open sans', sans-serif;
margin-bottom: 25px;
padding: 10px 14px 10px 44px;
position: relative;
box-shadow: 0px 1px 5px #999;
/* width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content; */
}
.webnots-notification-box:before {
font-family: FontAwesome;
font-size: 21px;
left: 14px;
position: absolute;
}
.webnots-success {
background-color: #2ecc71;
}
.webnots-success:before {
content: "f00c";
margin-left: -2px;
}
.webnots-failure {
background-color: #e74c3c;
}
.webnots-failure:before {
content: "f00d";
}
.webnots-warning {
background-color: #e67e22;
}
.webnots-warning:before {
content: "f12a";
margin-left: 5px;
}
.webnots-information {
background-color: #3498db;
}
.webnots-information:before {
content: "f129";
margin-left: 4px;
}
.webnots-question {
background-color: #f1c40f;
}
.webnots-question:before {
content: "f128";
margin-left: 2px;
}
.webnots-tip {
background-color: #16a085;
}
.webnots-tip:before {
content: "f0eb";
margin-left: 2px;
}
.webnots-notice {
background-color: #bea474;
}
.webnots-notice:before {
content: "f0a1";
margin-left: -1px;
}

Редактирование основного файла CSS в Weebly

После того, как вы добавили код CSS, перейдите на страницу, на которой вы хотите добавить информационное окно. Скопируйте и вставьте приведенный ниже HTML-код, перетащив элемент «Вставить код »:

<div class="webnots-information webnots-notification-box">This is the info box - You can input as much or as little information!</div>
<div class="webnots-question webnots-notification-box">This is the help box - You can input as much or as little information!</div>
<div class="webnots-tip webnots-notification-box">This is the tip box - You can input as much or as little information!</div>
<div class="webnots-notice webnots-notification-box">This is the notice box - You can input as much or as little information!</div>
<div class="webnots-success webnots-notification-box">This is the success box - You can input as much or as little information!</div>
<div class="webnots-failure webnots-notification-box">This is the danger box - You can input as much or as little information!</div>
<div class="webnots-warning webnots-notification-box">This is the warning box - You can input as much or as little information!</div>

Каждый тег

<div class="webnots-success webnots-notification-box">This is the success box - You can input as much or as little information!</div>

.info_alert {
background-image: url(https://img.webnots.com/2015/10/info.png);
border: 1px solid #CCCCCC;
background-color: #E0E0E0;
padding: 15px 15px 15px 45px;
background-repeat: no-repeat;
background-position: 10px 10px;
border-radius: 3px;
box-shadow: 0px 1px 5px #999;
margin: 10px 0px;
}

.warning_alert {
background-image: url(https://img.webnots.com/2015/10/warning.png);
border: 1px solid #FE7736;
background-color: #FFBD59;
padding: 15px 15px 15px 45px;
background-repeat: no-repeat;
background-position: 10px 10px;
border-radius: 3px;
box-shadow: 0px 1px 5px #999;
margin: 10px 0px;
color: white;
}

.danger_alert {
background-image: url(https://img.webnots.com/2015/10/danger.png);
border: 1px solid #FF0F0F;
background-color: #FF8080;
padding: 15px 15px 15px 45px;
background-repeat: no-repeat;
background-position: 10px 12px;
border-radius: 3px;
box-shadow: 0px 1px 5px #999;
margin: 10px 0px;
color: white;
}

.success_alert {
background-image: url(https://img.webnots.com/2015/10/success.png);
border: 1px solid #83CD52;
background-color: #8DE182;
padding: 15px 15px 15px 45px;
background-repeat: no-repeat;
background-position: 10px 12px;
border-radius: 3px;
box-shadow: 0px 1px 5px #999;
margin: 10px 0px;
color: #060;
}

<p class="info_alert">This is an information alert - You can input as much or as little information as you like within this section!</p>
<p class="warning_alert">This is an warning alert - You can input as much or as little information as you like within this section!</p>
<p class="danger_alert">This is an rejection alert - You can input as much or as little information as you like within this section!</p>
<p class="success_alert">This is an acceptance alert - You can input as much or as little information as you like within this section!</p>