Как добавить информационные окна на сайт Weebly?
<
div itemprop=»articleBody»>
Выделение важной информации в статье помогает успешно донести сообщение до пользователей. Как правило, вы можете использовать окна сообщений для демонстрации советов, справки, предупреждений, предупреждений и другой информации. Такие фреймворки, как 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">
Второй шаг — добавить приведенный ниже код 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, перейдите на страницу, на которой вы хотите добавить информационное окно. Скопируйте и вставьте приведенный ниже 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>
Каждый тег
… охватывает разные типы сообщений. Например, чтобы добавить окно успеха, просто добавьте следующий HTML-код:
<div class="webnots-success webnots-notification-box">This is the success box - You can input as much or as little information!</div>
В этом примере мы использовали font awesome 4.7. Вы можете использовать версию 5 или 6, заменив CSS и соответствующие классы в HTML.
2. Информационное окно с изображениями значков
Во втором стиле окон сообщений используются маленькие изображения вместо значков шрифтов, и они будут выглядеть следующим образом:
Для этого виджета требуются следующие четыре изображения значков, щелкните правой кнопкой мыши и загрузите изображения на свой локальный компьютер.
Загрузите изображения в разделе «Тема> Изменить HTML / CSS> Ресурсы> Загрузить файл (ы)…» вашего сайта Weebly. Путь к файлу загруженного изображения Weebly будет иметь вид «https://your-site-name.com/files/theme/info.png». Кроме того, вы можете щелкнуть правой кнопкой мыши загруженный файл и получить правильный путь к этому изображению.
Как только у вас будет правильный путь к загруженным изображениям, добавьте приведенный ниже код CSS в свой файл «main.less». Не забудьте обновить URL-адреса изображений с помощью URL-адресов изображений вашего сайта Weebly.
.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;
}Перейдите на страницу, на которой вы хотите добавить окно сообщения, и вставьте приведенный ниже HTML-код в элемент «Код для вставки».
<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>
Если вы хотите использовать только одно поле, используйте соответствующий код в тегах … .
Заметка: У вас есть два других варианта вместо добавления кода CSS в раздел заголовка «Настройки» сайта. Один из них — вставить код в файл «main.less», а другой — добавить код в раздел заголовка конкретной страницы, чтобы он действовал только на этой странице. В обоих сценариях убедитесь, что вы добавили код в тег
.
