Кнопки и всплывающие окна
В шаблоне Ocean есть два типа кнопок. Первый тип — это по факту просто стилизованные ссылки, которые ведут на другие страницы или сайты, а второй — кнопки для всплывающих окон.
Оба варианта задаются шорткодами [button]
или [popup]
.
1. Добавление кнопок-ссылок
Итак, чтобы вставить на страницу обычную кнопку-ссылку, нужно написать такой шорткод:
[button class="my-button" name="Кнопка" url="ссылка"]
class — это класс кнопки для ее стилизации (для гибкой кастомизации)
name — название кнопки
url — ссылка на страницу или сайт
К шорткоду можно применить выравнивание, размер и шрифт:
Но я бы рекомендовал использовать для этого код.
Как видно выше, у нашей кнопки мы написали класс my-button. Теперь зададим CSS-код для этого класса. Обратите внимание, что здесь к названию класса в начале добавляется точка:
.my-button { color: #ffffff; background-color: rgba(0,0,0,1); border-width: 1px; border-color: rgba(0,0,0,1); border-radius: 0px; } .my-button:hover { color: #000000; background-color: rgba(255,0,0,1); border-color: rgba(255,0,0,1); }
color — цвет текста на кнопке
background-color — цвет фона и прозрачность
border-width — ширина обводки, можно сделать 0px
border-color — цвет обводки и прозрачность
border-radius — скругление уголков
:hover — стиль кнопки при наведении мышкой, здесь пишем только те параметры, которые хотим менять при наведении.
Итого этот код делает нашу кнопкой черной в покое, а при наведении красной.
CSS-код вставляется в админке сайта по адресу «Внешний вид > Настроить > Дополнительные стили»:
Узнать цвет в формате RGBA или в шестнадцатеричном просто в фотошопе. Открываем панельку выбора цвета:
Код цвета:
rgba(56,173,75,1), где последняя цифра — это прозрачность от 0 до 1.
#38ad4b — цвет в в шестнадцатеричном формате.
Итого, чтобы сделать полупрозрачную скругленную зеленую кнопку, и чтобы при наведении цвет текста менялся с белого на зеленый, а фон на прозрачный:
.my-button-green { color: #ffffff; background-color: rgba(56,173,75,0.5); border-width: 1px; border-color: rgba(56,173,75,0); border-radius: 20px; } .my-button-green:hover { color: #38ad4b; background-color: rgba(56,173,75,0); border-color: rgba(56,173,75,1); }
Вы можете играть с цветом кнопки и прозрачностью фона, обводки, ее толщиной в любых сочетаниях. Можно использовать неограниченное количество классов, чтобы задать кнопкам разные стили.
Я бы рекомендовал использовать my-button-black, my-button-green и тп, чтобы не запутаться потом в стилях.
Дополнительные значения:
font-family — назание шрифта в кавычках. Список шрифтов можно глянуть в настройках внешнего вида.
font-size — размер шрифта
width — ширина кнопки
letter-spacing — межбуквенный интервал
Пример:
.my-button-red { color: #ffffff; background-color: rgba(255,0,0,1); border-width: 0px; font-family: 'Bad Script'; font-size: 30px; letter-spacing: 2px; width: 300px; }
Вы можете использовать одинаковые классы для кнопок-ссылок и кнопок, которые вызывают всплывающие окна.
2. Всплывающие окна
В шаблоне Ocean есть возможность сделать три таких окна. Переходим в «Ocean > Окна по клику».
Заполним первое окно. Вставим туда картинки, шорткод контактной формы и другой нужный контент. Не используйте большое количество тяжелых изображений.
Над каждым полем указан ID окна, который будем использовать в шорткоде кнопки-попапа, который вставим в нужное место на сайте:
[popup class="my-button" name="Открой меня" id="popup1"]
class - рассмотрели выше
name - название кнопки
id - ID нужного окна, которое будет появляться при клике на эту кнопку.
Можно «повесить» всплывающее окно не только на кнопку, но и на пункт меню.
Перейдите в "Внешний вид > Меню" и добавьте произвольную ссылку в меню навигации. Вместо ссылки впишите #, а в поле ID окна укажите id нужного всплывающего окна:
Сохраните.Теперь при клике на этот пункт будет всплывать окно с информацией.