Кнопки и всплывающие окна

В шаблоне 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 нужного всплывающего окна:

Сохраните.Теперь при клике на этот пункт будет всплывать окно с информацией.