TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

13

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

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

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

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

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

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

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

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

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

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

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

Первым шагом к созданию этих информационных блоков является привязка 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?

Добавить код заголовка на уровне сайта 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; }

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

Редактирование основного файла 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> охватывает разные типы сообщений. Например, чтобы добавить окно успеха, просто добавьте следующий 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 Информационное окно сообщения с изображениями значков

Во втором стиле окон сообщений используются маленькие изображения вместо значков шрифтов, и они будут выглядеть, как показано ниже:

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

Для этого виджета требуются следующие четыре изображения значков, щелкните правой кнопкой мыши и загрузите изображения на свой локальный компьютер.

Загрузите изображения в «Тема> Редактировать 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>

Если вы хотите использовать только одно поле, используйте соответствующий код в тегах

… </ p>.

Примечание. У вас есть два других варианта вместо добавления кода CSS в раздел заголовка «Настройки» сайта. Один из них – вставить код в файл «main.less», а другой – добавить код в раздел заголовка конкретной страницы, чтобы он действовал только на этой странице. В обоих сценариях убедитесь, что вы добавили код в тег….

Источник записи: www.webnots.com
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее