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

Як додати вікна інформаційних повідомлень на веб -сайт Weebly?

3

Виділення важливої ​​інформації у статті допомагає успішно донести повідомлення до користувачів. Як правило, ви можете використовувати вікна повідомлень для демонстрації порад, допомоги, попереджень, попереджень та багатьох інших типів інформації. Такі фреймворки, як Bootstrap, пропонують заздалегідь визначений компонент попередження для додавання цих інформаційних вікон повідомлень. Аналогічно, ви можете використовувати плагіни в системах управління контентом, наприклад WordPress. На Weebly можна створювати вікна інформаційних повідомлень за допомогою простого CSS. У цій статті ми пояснимо додавання вікна інформаційного повідомлення на веб -сайті Weebly на основі компонента сповіщення Bootstrap.

Вікна інформаційних повідомлень

Ми створимо скриньки повідомлень з двома різними стилями.

  • Використання значків шрифтів
  • Використання маленьких зображень піктограм

Значки шрифтів – хороший варіант, якщо ви використовуєте на своєму сайті Font Awesome. В іншому випадку ви можете вибрати варіант зображення замість значків шрифту.

Особливість скриньки інформаційних повідомлень

Вікна інформаційних повідомлень матимуть такі функції:

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

1 Вікно інформаційного повідомлення з іконками шрифту

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

Як додати вікна інформаційних повідомлень на веб -сайт Weebly?

Перший крок до створення цих інформаційних вікон – це зв’язати CSS чудові значки шрифтів із заголовком вашого сайту. Для цього додайте код нижче у розділі «Налаштування> 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>

У цьому прикладі ми використали чудовий шрифт 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”, а інший – додати код під розділ заголовка певної сторінки, щоб він був ефективним лише на цій сторінці. В обох сценаріях обов’язково додайте код у тег….

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі