Использование шаблонов в визуальном редакторе

Визуальный редактор CKEditor в конструкторе сайтов «Нубекс» позволяет оформлять страницы без знания программирования. Но иногда стандартных кнопок не хватает: нужно поставить две колонки рядом, выровнять текст по центру по высоте, сделать аккуратную таблицу или добавить кнопку. Для таких случаев есть готовые HTML-шаблоны — фрагменты кода, которые достаточно выбрать в редакторе и вставить на страницу.

Ниже собраны все доступные классы и шаблоны с примерами. Сначала показано, как блок выглядит на странице, затем — сам HTML-код, который можно скопировать.

Что такое шаблон и как его вставить

Шаблон — это просто кусочек HTML-кода, который описывает готовый блок: сетку, таблицу, карточку или кнопку. Никакой магии в нём нет: это те же теги <div><p><table> с определёнными классами, которые уже оформлены стилями сайта.

Вставить шаблон в CKEditor можно так:

1. Откройте страницу для редактирования в админке.
2. На панели инструментов нажмите кнопку «Шаблоны» (Templates) — она находится рядом с кнопкой «Источник» (Source).
   
3. В открывшемся окне выберите нужный шаблон и нажмите «Вставить».
   
4. Шаблон появится в редакторе в визуальном режиме — дальше можно править текст прямо в нём.

Если нужно доработать структуру (поменять классы, добавить атрибуты, вложить один блок в другой), переключитесь в режим «Источник», отредактируйте HTML вручную и вернитесь обратно. Редактирование HTML требует минимальных знаний о том что это такое. Именно «Источник» — инструмент тонкой настройки, а «Шаблоны» — быстрый способ вставить готовый блок в один клик.

Шаблоны чувствительны к кавычкам. Классы и атрибуты пишутся строчными латинскими буквами, а значения атрибутов — в двойных кавычках. Если при ручной правке удалить кавычку или изменить регистр, стиль может не сработать.

Сетка из двух колонок: cnt-two-col

Контейнер cnt-two-col создаёт две равные колонки, между которыми автоматически появляется отступ. На узких экранах (мобильных) колонки схлопываются в одну — лишнего отступа при этом не остаётся.

Базовый пример: две колонки 50/50

Так это выглядит на странице:

А вот сам HTML-код блока:

<div class="cnt-two-col">
  <div class="cnt-col">
    <p>Текст левой колонки.</p>
  </div>
  <div class="cnt-col">
    <p>Текст правой колонки.</p>
  </div>
</div>

Пропорции колонок: cnt-col--1, cnt-col--2, cnt-col--3, cnt-col--4

По умолчанию каждая колонка (cnt-col) занимает одну часть ширины. Чтобы сделать колонки неравными, добавьте к нужной колонке класс cnt-col--N, где N — количество частей.

Класс ставится только на ту колонку, которую нужно расширить. Вторая колонка может оставаться с классом cnt-col (это тоже одна часть).

Таблица пропорций

Если поставить cnt-col--3 на обе колонки, они снова станут равными (3 к 3 = 50/50). Пропорция работает как отношение чисел.

Пример: 25% / 75%

<div class="cnt-two-col">
  <div class="cnt-col cnt-col--1">
    <p>Узкая колонка (25%).</p>
  </div>
  <div class="cnt-col cnt-col--3">
    <p>Широкая колонка (75%).</p>
  </div>
</div>

Пример: 40% / 60%

<div class="cnt-two-col">
  <div class="cnt-col cnt-col--2">
    <p>Колонка 40%.</p>
  </div>
  <div class="cnt-col cnt-col--3">
    <p>Колонка 60%.</p>
  </div>
</div>

Пример: 20% / 80%

<div class="cnt-two-col">
  <div class="cnt-col cnt-col--1">
    <p>20%.</p>
  </div>
  <div class="cnt-col cnt-col--4">
    <p>80%.</p>
  </div>
</div>

Вертикальное выравнивание: v-top, v-center, v-bottom

Если одна колонка выше другой, содержимое короткой колонки по умолчанию прижимается к верху. Классы v-* позволяют выровнять его по верху, центру или низу относительно высокой соседней колонки.

Пример: текст по центру по высоте

<div class="cnt-two-col">
  <div class="cnt-col v-center">
    <p>Этот текст будет по центру по высоте.</p>
  </div>
  <div class="cnt-col">
    <h3>Высокая колонка</h3>
    <p>Много текста, чтобы эта колонка стала выше соседней.</p>
  </div>
</div>

Пример: текст прижат к низу

<div class="cnt-two-col">
  <div class="cnt-col">
    <h3>Высокая колонка</h3>
    <p>Длинный текст, который делает колонку высокой.</p>
  </div>
  <div class="cnt-col v-bottom">
    <p>Этот текст прижат к низу.</p>
  </div>
</div>

Горизонтальное выравнивание: h-left, h-center, h-right

Классы h-* управляют выравниванием содержимого по горизонтали внутри колонки.

Пример: по центру и по правому краю

<div class="cnt-two-col">
  <div class="cnt-col h-center">
    <p>По центру.</p>
  </div>
  <div class="cnt-col h-right">
    <p>По правому краю.</p>
  </div>
</div>

Комбинирование: центр по высоте и по горизонтали

Классы v-* и h-* можно совмещать на одной колонке:

<div class="cnt-two-col">
  <div class="cnt-col v-center h-center">
    <p>По центру и по высоте, и по горизонтали.</p>
  </div>
  <div class="cnt-col">
    <h3>Высокая колонка</h3>
    <p>Текст для создания высоты.</p>
  </div>
</div>

Комбинирование: низ + правый край

<div class="cnt-two-col">
  <div class="cnt-col">
    <h3>Высокая колонка</h3>
    <p>Длинный текст.</p>
  </div>
  <div class="cnt-col v-bottom h-right">
    <p>Внизу справа.</p>
  </div>
</div>

Готовый шаблон: название организации и телефон с кнопкой

Этот блок удобен для шапки страницы или раздела с контактами. Слева — крупное название, справа — телефон и кнопка записи. Пропорция 2:1 (название шире).

<div class="cnt-two-col">
  <div class="cnt-col cnt-col--2 v-center h-center">
    <p style="font-size: 1.8em;">Название вашей организации</p>
  </div>
  <div class="cnt-col cnt-col--1 v-center h-center">
    <p><a href="tel:79991234567">+7 (999) 123-45-67</a></p>
    <a class="btn btn-primary btn-md" href="#">ЗАПИСАТЬСЯ</a>
  </div>
</div>

Готовый шаблон: карточки сотрудников (таблица с фото)

Если нужно показать список людей с фотографиями и подписями, удобно использовать простую таблицу без рамок. Отступ между фото и текстом создаётся пустой ячейкой с неразрывными пробелами.

<table cellspacing="0" cellpadding="0" border="0">
  <tbody>
    <tr>
      <td><p><img src="https://via.placeholder.com/100" width="100" height="100" alt=""></p></td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <h4>Иванов Иван Иванович</h4>
        <p>директор по маркетингу</p>
      </td>
    </tr>
    <tr>
      <td><p><img src="https://via.placeholder.com/100" width="100" height="100" alt=""></p></td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
        <h4>Петров Петр Петрович</h4>
        <p>заместитель директора по внешним связям</p>
      </td>
    </tr>
  </tbody>
</table>

Таблицы с оформлением

Класс styled: таблица с заголовком и границами

Подходит для списков сотрудников, расписаний, характеристик.

<table class="styled" cellspacing="0" border="0">
  <tbody>
    <tr>
      <th align="left">Фамилия, Имя, Отчество</th>
      <th align="left">Отдел</th>
      <th align="left">Телефон</th>
    </tr>
    <tr>
      <td>Иванов Иван Иванович</td>
      <td>Маркетинговый отдел</td>
      <td>(8142) 55-66-77 (доб. 234)</td>
    </tr>
    <tr>
      <td>Петров Петр Петрович</td>
      <td>Маркетинговый отдел</td>
      <td>(8142) 55-66-77 (доб. 235)</td>
    </tr>
  </tbody>
</table>

Класс price: прайс-лист с шириной колонок

Удобен для списков товаров и услуг. Ширина задаётся в процентах прямо в ячейках.

<table class="price" width="90%" cellspacing="0" border="0">
  <caption style="text-align:left">Название группы</caption>
  <tbody>
    <tr><td width="80%">Название товара 1</td><td width="20%">Цена 1</td></tr>
    <tr><td width="80%">Название товара 2</td><td width="20%">Цена 2</td></tr>
    <tr><td width="80%">Название товара 3</td><td width="20%">Цена 3</td></tr>
  </tbody>
</table>

Изображения с обтеканием текстом

Классы left и right заставляют текст обтекать картинку слева или справа.

Картинка слева, текст справа

<img class="left" src="https://via.placeholder.com/160" width="160" height="160" alt="">
<p>Текст документа, который обтекает изображение с левой стороны.</p>

Картинка справа, текст слева

<img class="right" src="https://via.placeholder.com/160" width="160" height="160" alt="">
<p>Текст документа, который обтекает изображение с правой стороны.</p>

Отступы внутри блока

Если нужно добавить пустые поля вокруг текста или картинки, используйте встроенный стиль padding. В примере ниже отступ сверху 10px, слева и справа — по 15px.

<div style="padding-top:10px; padding-left:15px; padding-right:15px;">
  <p>Текст с отступами по краям.</p>
</div>

Что важно помнить

• Вставка — через «Шаблоны». Кнопка «Шаблоны» (Templates) стоит рядом с «Источник» (Source). Через неё шаблон вставляется в один клик, без ручного копирования HTML.
• Правка — через «Источник». Если нужно поменять классы, атрибуты или вложенность, переключитесь в режим HTML, отредактируйте и вернитесь обратно.
• Кавычки. Все значения атрибутов — в двойных кавычках. Если копируете код вручную, не заменяйте их на «ёлочки» или одинарные.
• Регистр классов. Классы всегда пишутся строчными латинскими буквами.
• Два дефиса в пропорциях. Класс пропорции пишется именно как cnt-col--3 (два дефиса), а не cnt-col-3.
• Замена заглушек. В примерах используется примеры текстов, заголовков, картинок и телефонов. Замените их на свои. У телефона есть ссылка на номер, ее тоже надо изменить.
• Телефонные ссылки. В href="tel:79991234567" номер пишется слитно, без пробелов и скобок. Отображаемый текст ссылки может быть любым, например +7 (999) 123-45-67.

Все шаблоны можно комбинировать. Например, поместить таблицу с классом price внутрь широкой колонки cnt-two-col, а рядом в узкой колонке разместить кнопку или картинку с обтеканием. Главное — вставлять блок через «Шаблоны» и при необходимости уточнять структуру в «Источнике».