Наверняка вам частенько встречались на страницах сайтов, выдвигающиеся панели различного вида и расположения, высказывающие сверху, снизу, справа или слева на полном автомате, с заданным интервалом времени, или же активируемые по клику. Как правило, в таких панелях размещают скрытую с глаз пользователя до поры до времени, какую-либо дополнительную информацию, важную и не очень. Например формы подписки, виджеты соц.сетей, ссылки, теги, контактные данные и т.д и т.п., короче, всё что угодно.
Давно хотел замутить что-нибудь этакое, механизм использования скрытых чекбоксов хорошо знаком и понятен, да всё как-то руки не доходили. И вот, наткнувшись в пыльных кладовых CodePen на одну , решил поэкспериментировать и выдать на гора, вполне себе рабочий, немного видоизменённый и адаптированный для нашего брата, свой вариант выдвижной верхней панели на чистом CSS, получилось то, что получилось)).
Пример посмотрели, с оригиналом сравнили, и теперь, кому оно надо, давайте вместе разберём, как всё это дело работает. Ещё раз напоминаю, никаких js, только девственно-чистый html и «магия» css, сделают всю работу.
Раскладка Html Состоит из трёх основных элементов: базовый контейнер, блок с содержанием и кнопка открытия/закрытия панели.
Здесь размещаете любое содержание.....
Как видите в конструкции панели присутствует флажок type=" " , по-умолчанию скрыт и неактивен. С помощью тега , который оформлен в виде кнопки в css, устанавливаем связь между чекбоксом, т.е., если нажать на label , то сработает input (станет активным). Ну, а с помощью псевдокласса: в css устанавливаем связь между скрытым чекбоксом и элементами панели. и при активации выдвижной панели, блок с контентом и кнопка, сдвигаются вниз на расстояние соответствующее высоте панели.
Теперь, давайте сформируем стили нашей выдвигающейся панели, для начала, установим размеры базового контейнера, определим цвет фона и его изначальное расположение. В CSS создадим класс.top-panel , в котором и пропишем все необходимые нам свойства.
.
top-
panel {
background:
#39464e;
position:
fixed;
top:
0
;
width:
100
%;
padding:
0
;
-
webkit-
box-
sizing:
border-
box;
-
moz-
box-
sizing:
border-
box;
box-
sizing:
border-
box;
-
webkit-
transform:
translateY(-
100
%
)
;
-
moz-
transform:
translateY(-
100
%
)
;
transform:
translateY(-
100
%
)
;
}
Top-panel {
background: #39464e;
position: fixed;
top: 0;
width: 100%;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
}
Блок сообщения панели расположен внутри базового контейнера и ему присвоен определённы класс class="message" , именно в неё мы указываем свойства для всех элементов располагающихся внутри этого бока, цвет и семейство шрифта, размеры изображений и т.д...
/* Блок сообщения */
.message {
color: #fff;
font-weight: 300;
position: relative;
padding: 2em;
margin: 0 auto;
max-width: 980px
}
/* Заголовок 1 уровня */
.message h1 {
color: #fff
}
/* Заголовок 2 уровня */
.message h2 {
color: #888
}
Далее, определим все необходимые стили для переключателя нашей панели. Для начала скроем с глаз пользователей флажок type="checkbox" , не особо мудрствуя, в html тегу
Open {
position: absolute;
clip: rect(0 0 0 0);
opacity: 0;
}
Тегу присвоим class="btn" , с которым и будем работать в css, чтобы «нарисовать», вполне себе симпатичный переключатель(кнопку):
/* Переключатель панели */
label.
btn {
display:
block;
position:
absolute;
right:
25px;
top:
100
%;
/*bottom: -35px;*/
cursor:
pointer;
background:
#2bbbad;
border-
radius:
0
0
3px 3px;
padding:
8px 16px;
color:
#fff;
font-
size:
100
%;
line-
height:
1em;
text-
align:
center;
-
webkit-
font-
smoothing:
antialiased;
cursor:
pointer;
box-
shadow:
0
2px 5px 0
rgba(0
,
0
,
0
,
0.16
)
,
0
2px 10px 0
rgba(0
,
0
,
0
,
0.12
)
;
z-
index:
9999
}
/* Переключатель при наведении */
label.
btn:
hover {
-
webkit-
transition:
0.
35s;
-
moz-
transition:
0.
35s;
transition:
0.
35s;
box-
shadow:
0
5px 11px 0
rgba(0
,
0
,
0
,
0.18
)
,
0
4px 15px 0
rgba(0
,
0
,
0
,
0.15
)
}
/* Стрелка переключателя вниз */
label.
btn:
after {
content:
"\f078"
;
font:
normal 18px/
1
FontAwesome;
text-
decoration:
inherit
}
/* Переключатель панели */
label.btn {
display: block;
position: absolute;
right: 25px;
top: 100%;
/*bottom: -35px;*/
cursor: pointer;
background: #2bbbad;
border-radius: 0 0 3px 3px;
padding: 8px 16px;
color: #fff;
font-size: 100%;
line-height: 1em;
text-align: center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
z-index: 9999
} /* Переключатель при наведении */
label.btn:hover {
-webkit-transition: 0.35s;
-moz-transition: 0.35s;
transition: 0.35s;
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)
} /* Стрелка переключателя вниз */
label.btn:after {
content: "\f078";
font: normal 18px/1 FontAwesome;
text-decoration: inherit
}
Стрелки переключателя взяты из пакета шрифт-иконок FontAwesome, соответственно файл стилей этого набора, должен быть предварительно подключён к странице:
<
link
href=
"https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
rel=
"stylesheet"
>
Вы можете использовать и другой вид переключателя, например, соответствующий текст или символ html.
Активируем нашу панель и изменяем состояние переключателя с помощью псевдокласса:checked .
.
open:
checked ~ .
top-
panel {
box-
shadow:
0
2px 5px 0
rgba(0
,
0
,
0
,
0.16
)
,
0
2px 10px 0
rgba(0
,
0
,
0
,
0.12
)
;
-
webkit-
transform:
translateY(0
)
;
-
moz-
transform:
translateY(0
)
;
transform:
translateY(0
)
;
-
webkit-
transition:
0.
35s;
-
moz-
transition:
0.
35s;
transition:
0.
35s
}
.
open:
not(:
checked)
~ .
top-
panel {
-
webkit-
transition:
0.
35s;
-
moz-
transition:
0.
35s;
transition:
0.
35s
}
/* Цвет переключателя при клике */
.
open:
checked ~ .
top-
panel >
label.
btn {
background:
#dd6149
}
/* Стрелка переключателя вверх*/
.
open:
checked ~ .
top-
panel >
label.
btn:
after {
content:
"\f077"
;
font:
normal 18px/
1
FontAwesome
}
Open:checked ~ .top-panel {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
-webkit-transition: 0.35s;
-moz-transition: 0.35s;
transition: 0.35s
} .open:not(:checked) ~ .top-panel {
-webkit-transition: 0.35s;
-moz-transition: 0.35s;
transition: 0.35s
}
/* Цвет переключателя при клике */ .open:checked ~ .top-panel > label.btn {
background: #dd6149
}
/* Стрелка переключателя вверх*/ .open:checked ~ .top-panel > label.btn:after {
content: "\f077";
font: normal 18px/1 FontAwesome
}
Для изменения размеров шрифта при просмотре на различных экранах пользовательских устройств, использовал медиа-запросы @media . Учитывая современные реалии, думаю совсем не лишнее дополнение:
@
media only screen and (max-
width:
400px)
{
body {
font-
size:
90
%
}
}
@
media only screen and (max-
width:
800px)
{
body {
font-
size:
100
%
}
}
@
media only screen and (min-
width:
1100px)
{
body {
font-
size:
120
%
}
}
@media only screen and (max-width: 400px) {
body {
font-size: 90%
}
} @media only screen and (max-width: 800px) {
body {
font-size: 100%
}
} @media only screen and (min-width: 1100px) {
body {
font-size: 120%
}
}
На этом пожалуй и всё! Выдвигающаяся сверху панель готова к работе, остаётся только наполнить её содержанием. Ещё раз смотрите живой пример, скачивайте архив с исходниками, смело экспериментируйте с различными параметрами и творите, творите, творите...
С Уважением, Андрей
Вы хотели бы отображать на своём сайте панель уведомлений для ваших читателей? Тогда вам поможет информационная панель для WordPress. Ниже мы представляем вам целый ряд различных WordPress плагинов с описанием того, как каждый из них может помочь вам своим стилем привлечь внимание ваших читателей.
6 плагинов панели уведомлений для WordPress:
1. WordPress Notification Bar
WordPress Notification
– этот простой, но привлекающий внимание плагин предоставляет вам множество возможностей, способных удовлетворить ваши индивидуальные потребности. После того, как вы установите этот плагин, вы можете настроить параметры для изменения цвета сообщения, гиперссылок, кнопок, да и всего, чего угодно, будь это привлекающее внимание красным цветом предложение скидки на товар или какой-то элемент, вписывающийся в дизайн вашего сайта, со ссылкой на вашу целевую страницу рассылки. Можете даже, если хотите, прикрепить панель к верхней части вашего сайта, а если хотите, в ней будет выполняться прокрутка сообщений ваших читателей.
2. Easy Heads Up Bar
Heads Up Bar
– этот плагин работает подобно описанному выше WordPress Notification plugin, но с несколькими ключевыми отличиями в параметрах административной панели.
Первое важное отличие этой панели уведомлений заключается в том, что она позволяет вам установить, на каких страницах вашего сайта она будет отображаться. Например, если вы хотите видеть её на вашей домашней странице, а не на страницах с контентом, вы можете выбрать, чтобы просто разместить её на главной странице. Эта функция работает так же и в обратную сторону, то есть даёт возможность видеть панель на страницах с контентом, а не на главной странице. Вы, конечно, можете отображать её на всех страницах, если вам нравится.
Второе существенное отличие заключается в том, что этот плагин позволяет вам устанавливать таймеры на то, сколько времени панель будет находиться на вашем сайте с «момента начала», который можно установить заранее, а также устанавливать «момент окончания», который автоматически удалит панель в заданное время.
Третьим важным отличием является возможность создания нескольких панелей, которые будут показываться в случайном порядке. Плагин позволяет автоматически отображать сообщения между различными датами.
Здесь вы можете увидеть пример его работы:
3. Quick Notice Bar
Quick Notice Bar
– этот плагин является одним из наиболее популярных, так как он может автоматически создавать панель уведомлений при повторной установке и имеет различные опции. Так что, если вы хотите иметь что-то простое, что просто делает свою работу, то этот плагин для вас. Одно примечательное замечание к этому плагину – он может изменять размер, стиль и цвет шрифта. Вы также можете сами изменить цвет панели, как и в двух вышеперечисленных плагинах, используя редактор градиента, чтобы выбрать, а затем скопировать и вставить новый цвет заднего фона.
Здесь вы можете увидеть пример его работы:
4. The Hello Bar
Hello Bar
– этот плагин очень похож на WordPress Notification Plugin, который мы рассмотрели выше, с некоторыми исключениями. Сначала вы должны будете зарегистрироваться на сайте hello bar, чтобы получить возможность работать с этим плагином. Как и некоторые другие, Hello Bar позволяет вам размещать любое сообщение или объявление с бесконечными вариантами цвета и шрифтов. Но что действительно сильно отличает этот плагин от других – это возможность легко отслеживать сделанные клики и тестировать различные сообщения.
Здесь вы можете увидеть пример его работы:
5. Viper Bar
Viper Bar
– этот плагин от Viper Chill имеет больше всего особенностей из всех основных плагинов панели уведомлений. Вы можете:
Изменять внешний вид, изменяя настройки цвета, заднего фона, прозрачности, а также цвета текста.
Вставлять выбранные формы на почтовую рассылку или ваш RSS-поток.
Собирать статистику о ваших формах, таких, как количество показов, предоставление форм и выбранные преобразования.
Устанавливать cookies, чтобы пользователи могли скрыть панель после того, как они уже видели её. Это очень полезная функция, если вы выбираете панель для прокрутки страницы с пользователем, что, разумеется, может очень раздражать и отвлекать. Вы также можете закрепить панель в верхней части страницы.
Делать различные тестирования для оптимизации результатов вашей работы с этой панелью.
Здесь вы можете увидеть пример его работы:
6. News Ticker
News Ticker
– этот плагин отличается от всех, перечисленных выше, так как он предоставляет анимированный баннер. Он может отображать изображения, цитаты, даты и заголовки записей, которые могут скользить и плавно исчезать, уступая место следующему. Этот плагин может быть встроен в любое место вашего заголовка, подчеркивая ваши самые последние, популярные, или конкретные записи с помощью идентификатора записей. Вы можете установить любое количество записей для отображения в потоке.
К сожалению, мы не смогли показать вам пример его работы, потому что просто не имеем для этого достаточно места в нашем заголовке. Это может быть случиться и с вами, поэтому постарайтесь выбрать такую тему WordPress, которая будет хорошо работать с ним.
Если вы хотите эту статью или её часть разместить на вашем сайте, то вы можете сделать это, разместив на нём ссылку на наш сайт.
Недавно один из наших читателей спрашивал, каким образом можно заменить его меню навигации по сайту на выезжающую jQuery панель меню. Такая панель может заметно повысить юзабилити на мобильных версиях сайтов. В этой статье мы покажем вам как добавить выезжающую панель меню в темы WordPress.
Примечание: Данная статья предполагает средний уровень знаний HTML и CSS.
Заменяем стандартное меню на выезжающую панель в WordPress
Целью здесь является показать выезжающую панель меню пользователям с небольшим разрешением экрана, при этом сохранив стандартное меню нашей темы, чтобы пользователи компьютеров могли видеть полную версию меню. Прежде чем мы начнем, важно понимать, что существует множество различных тем WordPress, и поэтому придется подправить стили CSS в зависимости от вашего дизайна.
Первым делом нам нужно открыть текстовый редактор типа Блокнот и создать новый файл. Скопируйте и вставьте в него следующий код:
(function($) {
$("#toggle").toggle(function() {
$("#popout").animate({ left: 0 }, "slow", function() {
$("#toggle").html("
Замените example.com
на ваше доменное имя сайта, а также измените your-theme
на действующую папку вашей текущей темы. Сохраните файл с именем slidepanel.js
на компьютер. Этот код использует jQuery для переключения выезжающей панели меню. Также он анимирует эффект переключения.
Открываем свой FTP-клиент (Filezilla или Total Commander) и подключаемся к своему сайту. Далее переходим в директорию вашей тему и если в ней уже существует папка js
, тогда откройте ее. Если же в вашей теме нет такой директории, то создайте её и загрузите внутрь файл slidepanel.js.
Следующий шаг — дизайн или поиск иконки для меню. Наиболее используемая иконка для этого — с тремя полосками. Ее можно создать в любом графическом редакторе (например, в Photoshop) или найти одну из множества существующих в гугле. В этом примере мы будем использовать размер 27x23px для иконки. После того, как вы ее создадите, переименуйте в menu.png и загрузите в папку с изображениями в директории вашей темы.
Следующий шаг — для выезжающей панели меню. Нужно просто скопировать и вставить следующий код в файл functions.php
темы:
Wp_enqueue_script("wpb_slidepanel", get_template_directory_uri() . "/js/slidepanel.js", array("jquery"), "20131010", true);
Теперь, когда все подготовительные работы завершены, необходимо модифицировать дефолтное меню темы. Как правило, большинство тем выводят меню навигации в файле header.php
темы. Открываем header.php
и находим строку, похожую на эту:
"primary", "menu_class" => "nav-menu")); ?>
Задача состоит в том, чтобы обернуть меню темы в HTML-код для вывода выезжающей панели меню на маленьких экранах. Мы обернем его в
"primary", "menu_class" => "nav-menu")); ?>
Замените example.com на ваше доменное имя и your-theme на вашу папку темы. Сохраните изменения.
Последний шаг: использование CSS для того, чтобы скрыть иконку меню для пользователей с большим экраном и отображать ее для тех, у кого маленькое разрешение. Также нам нужно отрегулировать положение иконки меню и внешний вид выезжающей панели. Скопируйте и вставьте этот код CSS в таблицу стилей вашей темы.
@media screen and (min-width: 769px) {
#toggle {
display:none;
}
}
@media screen and (max-width: 768px) {
#popout {
position: fixed;
height: 100%;
width: 250px;
background: rgb(25, 25, 25);
background: rgba(25, 25, 25, .9);
color: white;
top: 0px;
left: -250px;
overflow:auto;
}
#toggle {
float: right;
position: fixed;
top: 60px;
right: 45px;
width: 28px;
height: 24px;
}
.nav-menu li {
border-bottom:1px solid #eee;
padding:20px;
width:100%;
}
.nav-menu li:hover {
background:#CCC;
}
.nav-menu li a {
color:#FFF;
text-decoration:none;
width:100%;
}
}
Имейте в виду, что меню вашей темы может использовать различные классы CSS и они могут конфликтовать с теми, что приведены выше. Решить эту проблему можно, используя Инспектор в Хроме или Firefox для того, чтобы выяснить какие именно классы конфликтуют с вашими. Также не забывайте о том, что внешний вид панели вы вольны настроить под дизайн сайта.
Панели уведомлений
- исключительно эффективное средство для стимулирования перехода пользователя на требуемую страницу. Кроме того они служат для отображения важной информации, поскольку всегда привлекают внимание пользователя. Некоторые панели содержат формы для ввода данных и могут служить, например, для организации подписки на почтовые рассылки.
В интернет-магазинах панели уведомлений активно используются для извещения посетителей об акциях и скидках и, таким образом, являются мощным механизмом, способствующим увеличению объема продаж.
В этом обзоре я расскажу лишь о некоторых, самых функциональных и привлекательных, на мой взгляд, плагинах для создания таких панелей на страницах сайта или блога на платформе . Каждый из них имеет свои достоинства, множество функций и возможность адаптации внешнего вида под стиль и дизайн вашего сайта. Не сомневаюсь, что благодаря этому обзору вы сможете подобрать плагин, наиболее полно соответствующий вашим требованиям.
Custom Notifications Качественный плагин премиум-класса, который обладает всеми необходимыми функциями, присущими плагину подобного уровня.
Панель уведомлений может содержать простой текст, форму для ввода e-mail
или на сайте, соцсетей и таймер обратного отсчета времени.
И все это заключено в адаптивные контейнеры и будет корректно отображаться на любых экранах. Кроме того, панель настроек позволяет управлять положением на странице и цветовой гаммой практически без ограничений.
Стоимость: $29
BugMeBar WordPress plugin Простая, но привлекающая внимание панель с очень красивыми и броскими цветовыми эффектами. Ее можно расположить в любом месте страницы, а кроме того она может устанавливать cookies и не отображаться при последующем посещении страницы, если пользователь вдруг не захочет ее больше видеть.
Из других особенностей следует отметить:
Указание страниц, на которых панель будет отображаться, и на которых нет. Установка времени действия cookies. Полный контроль над внешним видом, включая выбор цвета, прозрачности и т.п. Возможность смещения фиксированных колонитулов, сохраняя, при этом, целостность макета. Возможность включать или отключать транзитивность и анимацию
Стоимость: $12
Hello Bar Одна из наиболее популярных
панелей уведомлений для Wordpress
. И, к тому же,
бесплатная
, хотя по функциональности ничем не уступает своим премиум-аналогам.
Для использования Hello bar достаточно перейти на плагина и ввести URL своего блога. Далее вы попадете в панель настроек, где сможете настроить местоположение и внешний вид уведомлений. Причем панель настроек обладает функцией предварительного просмотра, так что вы быстро сможете придать вашим уведомлениям желаемый вид.
После завершения настроек вы получите фрагмент кода, который нужно вставить непосредственно на страницу сайта. Если же вы не чувствуете себя достаточно квалифицированным для этой операции можно установить , который сделает за вас эту рутинную работу.
DW Promobar Довольно простой плагин, содержащий только самое необходимое. В панели уведомления может отображаться простой текст, кнопка, ссылка или таймер обратного отсчета времени . Выглядит привлекательно и предоставляет полный контроль над всеми параметрами настройки.
Foobar – WordPress Notification Bars Этот обзор не будет полным, если я не упомяну Foobar. Это один из наиболее широко используемых премиум-плагинов этого класса. Он содержит более 30 параметров настройки и, в отличие от многих других, позволяет настраивать панель уведомлений
отдельно для каждой страницы
.
Стоимость: $9
WordPress Notification Bar Бесплатный плагин
, легкий в использовании и активации. Содержимое панели может быть простым текстом, а также содержать кнопку, ассоциированную с определенным действием. Благодаря широким возможностям цветовых настроек, вы сможете идеально адаптировать панель под дизайн вашего сайта.
Royal Footer Bar Royal Footer Bar - плагин высочайшего класса, действительно «королевский». Он выглядит очень профессионально и обладает большим набором всевозможных опций.
Информационная панель может содержать обычный текст, форму для подписки на почтовые рассылки и различные ссылки, в том числе на аккаунты в соцсетях. В панели настроек можно не только установить необходимые настройки, но и получить полную статистику об активности.
Изюминкой этого плагина является то, что разработчики назвали A/B/C тест - вы можете задать несколько вариантов настроек и, оценив их в рабочем окружении, выбрать наиболее соответствующий концепции сайта.
Стоимость: $39
Notification Bar Очень простой плагин, отображающий
панель уведомлений
либо вверху, либо внизу страницы. Включает 5 вариантов цветового оформления для текстового сообщения или
С помощью плагина – WPFront Notification Bar
, вы сможете добавить на свой сайт панель с уведомлением, в верху или внизу сайта wordpress. В панели может отображаться какой-либо текст и кнопка с ссылкой на любую страницу, можно добавлять HTML код. Вы сможете настроить свои цвета для панели уведомления, можно выбрать расположения панели, вверху или внизу сайта. Можно зафиксировать панель, что бы при прокрутки страницы панель всегда была видна на экране. Можно выбрать на каких страницах будет отображаться панель, а на каких не будет и т.д.
Установить плагин вы сможете прямо из админ-панели wordpress. Перейдите по вкладке: Плагины
– Добавить новый
, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
После установки и активации плагина, перейдите на страницу: WPFront
– Notification Bar
, чтобы настроить плагин.
Display
– Enabled,
поставьте здесь галочку, чтобы включить панель уведомления.
– Position,
выберите где будет отображаться панель, Top
– вверху, Bottom
– внизу.
– Fixed at Position,
если поставите здесь галочку, то панель будет всегда видна на экране, да же при прокрутки страницы.
– Display on Scroll,
если поставите здесь галочку, то панель будет появляться при прокрутке страницы.
– Scroll Offset,
здесь можно указать на сколько пикселей должна быть прокручена страница до появления панели с уведомлением.
– Bar Height,
можете здесь указать высоту панели в пикселях.
– Position Offset,
здесь можно задать расстояние от верхней части сайта до панели.
– Display After,
можно задать время по истечении которого будет появляться панель, не работает для функции – Display on Scroll
.
– Animation Duration,
можно задать длительность анимации, когда панель выезжает на экран.
– Display Close Button,
поставьте галочку, чтобы показывать кнопку с крестиком для закрытия панели.
– Auto Close After,
можете указать через сколько секунд панель будет закрываться автоматически, не работает для функции – Display on Scroll
.
– Display Shadow,
показывать тень для панели.
– Display Reopen Button,
если поставить галочку, то после закрытия панели, в углу экрана, будет отображаться кнопка для открытия панели.
– Keep Closed,
если поставить галочку, то при закрытии панели на одной страницы, на других страницах панель уже отображаться не будет.
– Keep Closed For,
здесь можно указать сколько дней не будет показываться панель для пользователя, который закрыл панель.
Content
– Message Text,
укажите здесь текст, который будет отображаться в уведомлении, можно добавлять HTML код.
– Process Shortcode,
поставьте галочку, чтобы можно было добавлять в уведомления шорткоды.
– Display Button,
поставьте галочку, чтобы показывать в панели кнопку.
– Button Text,
укажите здесь текст для кнопки.
– Button Action,
укажите здесь ссылку для кнопки. Open URL in new tab/window
– ссылка будет открываться в новом окне. No follow link
– ссылка не будет индексироваться.
– Close Bar on Button Click,
закрывать бар нажатием на кнопку.
Filter
– Start Date & Time,
можно указать дату и время когда панель начнёт отображаться.
– End Date & Time,
можно указать дату и время когда панель закроется.
– Display on Pages,
выберите на каких страницах будет показываться панель. All pages
– на всех страницах. Include in following pages
– отметьте страницы, на которых будет показываться панель. Exclude in following pages
– исключить страницы.
– Display for User Roles,
здесь можно выбрать для каких ролей пользователей будет показываться панель. All users
– для всех, All logged in users
– только для авторизованных, Guest users
– только гостям, For following user roles
– отметьте галочками роли.
Color
– Bar Color,
выберите цвета для панели.
– Message Text Color,
укажите цвет для текста в панели.
– Button Color,
выберите цвета для кнопки, можно указывать два цвета для отображения градиента.
– Button Text Color,
цвет для текста в кнопке.
– Reopen Button Color,
цвет для кнопки открытия панели.
– Close Button Color,
выберите цвета для кнопки закрытия панели.
– Custom CSS,
можно задать свои CSS стили для панели, но не обязательно.
В конце сохраните сделанные изменения
.
Панель уведомлений вверху или внизу сайта wordpress
обновлено: Июль 25, 2018
автором: Илья Журавлёв
