Для более красивого отображения контента на сайте добавлена возможность установки аккордеона на страницу. По умолчанию закрыты все элементы, по клику на них можно их раскрыть.
Для скрытия всех элементов нужно добавить класс:
js-close-all к comp-list. Пример <ul class="comp-list js-close-all">
Для добавления аккордеона на страницу используется следующий шаблон кода:
нажмите кнопку "Сохранить" и проверьте отображение контента на сайте. Скриншот
Плагин "Генератор форм"
Плагин предназначен для установки в тексте ссылки на форму.
Чтобы вывести форму с помощью плагина ее необходимо предварительно вывести в разделе. Подробнее.
Механика
откройте нужный раздел, перейдите на вкладку "Редактор", установите курсор, там, где должна быть ссылка на форму и нажмите на иконку генератора форм. Скриншот
в открывшемся интерфейсе заполните поля (скриншот):
текстссылки - текст, на котором будет ссылка на форму
заданиеширины - выбираем в какой величине будет задаваться ширина формы.
ширинаформы - указывается ширина формы в пикселях. По умолчанию 60% от размера экрана.
ID раздела с формой - указываем id раздела с формой.
нажмите ОК, после чего появляется ссылка на форму.
нажмите "Сохранить" и проверьте работу формы на сайте.
Плагин «Подсказки»
Плагин предназначен для добавления к тексту/изображению дополнительной информации, выводящейся во всплывающем окне. Скриншот.
Интерфейсы модуля
Интерфейс модуля представляет собой всплывающее окно со следующими параметрами.
кнопка "Добавить" - при нажатии на кнопку появляется интерфейс добавления подсказки
колонка "ID" - в ней указывается ID для подсказки
колонка "Название подсказки" - в ней выводиться название подсказки
колонка "Статус" - в ней выводится статус подсказки, значение можно изменять в списке
колонка "Иконки" - в данной колонке 2 иконки - редактировать и удалить.
кнопка "OK" - при нажатии на нее сохраняются изменения, и подключается подсказка.
кнопка "Отмена" - при ее нажатии изменения не сохраняются, и закрывается интерфейс.
Интерфейс добавления подсказки
Интерфейс состоит из следующих элементов:
кнопка "Сохранить" - при нажатии сохраняются изменения, и подсказка добавляется в список
кнопка "Отмена" - при нажатии изменения не сохраняются, и осуществляется переход в предыдущий интерфейс
поле "Название" - в поле вводиться название подсказки
поле "Текст подсказки" - в поле вводиться текст подсказки
Механика работы модуля
перейдите в нужный раздел, выберите вкладку "Редактор". Скриншот
в поле "Текстраздела" выберите слово, к которому будет добавлена подсказка, выделите его и нажмите на иконку плагина "Подсказки". Скриншот
в открывшемся интерфейсе нажмите на кнопку "Добавить". Скриншот
в новом интерфейсе заполните поля и нажмите "Сохранить". Скриншот
в списке подсказок установите галочку "Статус" и нажмите "ОК". Скриншот
нажмите кнопку "Сохранить".
после установки подсказки слово в редакторе подсветится (скриншот), а при наведении на слово на сайте выведется подсказка. Скриншот.
Типограф Лебедева в wysiwyg-редакторе
Типограф (инструмент) — это инструмент автоматизированной подготовки текста к публикации на сайте. Такая подготовка требуется, чтобы текст хорошо смотрелся на экране браузера и был удобен для восприятия. Он помогает избежать монотонной корректировки, расстановки кавычек, неразрывных пробелов, специальных символов. Обработка текста в онлайн-типографе – одно из правил хорошего тона в работе контент-менеджера.
В Canape CMS используется типограф Студии Артемия Лебедева.
Интерфейсы модуля
Интерфейс модуля представляет собой 2 кнопки на панели в редакторе раздела:
При клике на 1ю кнопку выводится всплывающее окно, в которое можно вставить текст для прогонки его через типограф:
По клику на 2ю кнопку можно оттипографить текст, уже вставленный ранее через редактор.
Механика работы модуля
перейдите в нужный раздел, выберите вкладку «Редактор»;
на панели инструментов выберите иконку «Вставка нового текста, прогнанного через типограф»;
в открывшемся окне введите вручную или вставьте текст, который необходимо оттипографить. Скриншот;
нажмите «ОК»;
введенный текст готов к публикации.
Для того, чтобы отформатировать уже существующий текст нужно:
перейдите в нужный раздел, выберите вкладку «Редактор»;
на панели инструментов выберите иконку «Форматирование текущего текста через типограф»;
ваш текст готов к публикации.
Блокирование всплывающих изображений в редакторе
В Canape CMS добавлен спец класс, который блокирует работу всплывающих окон, и изображение при клике по нему не всплывает.
Отключить всплытие изображения можно двумя способами:
1. Через интерфейс «Свойства изображения»:
перейти в раздел с изображением и открыть вкладку «Редактор»;
дважды нажать на изображение, откроется интерфейс «Свойства изображения».Скриншот
переходим на вкладку «Дополнительно» и в поле «Класс CSS» прописываем sk-block-crop. Нажимаем «ОК». Скриншот
нажимаем «Сохранить». Проверяем на сайте блокирование изображения.
2. Через функционал «Источник»:
перейти в раздел с изображением и открыть вкладку «Редактор»;
Шаблон для изображений, состоит из 8 изображений по 4 штуки в ряд. Под изображением выводится заголовок. В дизайнерском режиме можно изменить ширину блока и настроить вывод заголовка (вкл/выкл).
Данный шаблон можно использовать для отображения разводки, решений клиентов, примеров.
Шаблон для изображений, состоит из 4 изображений в 1 ряд. Под изображением выводится заголовок. В дизайнерском режиме можно изменить ширину блока и настроить вывод заголовка (вкл/выкл).
Данный шаблон можно использовать для отображения разводки, решений клиентов, примеров.
Шаблон для изображений, состоит из 6 изображений по 3 штуки в ряд. Под изображением выводится заголовок. В дизайнерском режиме можно изменить ширину блока и настроить вывод заголовка (вкл/выкл).
Данный шаблон можно использовать для отображения разводки, решений клиентов, примеров.
Шаблон для изображений, состоит из 2 изображений в 1 ряду. Под изображением выводится заголовок. В дизайнерском режиме можно изменить ширину блока и настроить вывод заголовка (вкл/выкл).
Данный шаблон можно использовать для отображения разводки, решений клиентов, примеров.
Шаблон для отображения видео, с фоновой подложкой. Фон образует минимальную рамку вокруг видео. В дизайнерском режиме можно изменить цвет фона.
Данный шаблон можно использовать для отображения видео на сайте.
Шаблон для отображения видео, с фоновой подложкой. Фон образует широкую рамку вокруг видео. В дизайнерском режиме можно изменить цвет фона.
Данный шаблон можно использовать для отображения видео на сайте.
Шаблон для отображения текста с изображениями. Изображения располагаются в правой колонке, образуя ровный, вертикальный ряд.
Данный шаблон можно использоваться для оформления текста на странице сайта
Группа "Таблицы"
В группе доступно 3 адаптивных (33 версия) шаблона:
Простой шаблон отображения таблицы. В дизайнерском режиме доступны различные настройки.
Данный шаблон можно использовать для добавления таблиц в тексты сайта.
Шаблон отображения таблицы раскрашенный в полоску. В дизайнерском режиме можно раскрасить строчки, и сделать другие различные настройки
Данный шаблон можно использовать для добавления таблиц в тексты сайта.
Шаблон отображения таблицы с выделенной колонкой заголовком (левая колонка) и колонкой с иконками. В дизайнерском режиме можно изменить цвет иконок, и сделать другие различные настройки
Данный шаблон можно использовать для добавления таблиц в тексты сайта.
Группа "Блок преимуществ"
В группе доступно 6 адаптивных (36 версия) шаблона:
Шаблон представляет собой текстовые блоки с иконками, расположенных по 3 штуки в 2 ряда. Иконка расположена слева, текст справа. В дизайнерском режиме можно настроить цвет, размер иконки и ширину колонки.
Данный шаблон можно использовать для выделения в текст различных аспектов компании, создания текстовой разводки.
Шаблон представляет собой текстовые блоки с иконками, 5 штук в ряду. Иконка расположена над текстом. В дизайнерском режиме можно настроить цвет, размер иконки и ширину колонки.
Данный шаблон можно использовать для выделения в текст различных аспектов компании, создания текстовой разводки.
Шаблон представляет собой текстовые блоки с заглушками под изображения, 5 штук в ряду. Текст расположен под изображением. При добавлении изображения на нее накладывается круглая рамка.
Данный шаблон можно использовать для создания описания работников компании, отзывов, текстовой разводки.
Шаблон представляет собой текстовые блоки с заглушками под изображения, 4 штуки в ряду и фоновой картинкой. Текст расположен под изображением. При добавлении изображения на нее накладывается круглая рамка.
Данный шаблон можно использовать для создания описания работников компании, отзывов, текстовой разводки.
Шаблон представляет собой текстовые блоки с заглушками под изображения, 3 штуки в ряду и индивидуальной фоновой картинкой для каждого блока. Текст расположен под изображением. При добавлении изображения на нее накладывается круглая рамка.
Данный шаблон можно использовать для создания описания работников компании, отзывов, текстовой разводки.
Группа "Промо блок"
В группе доступно 7 адаптивных (с 36 версии) шаблонов:
Шаблон представляет собой текстовый блок с заглушкой для изображения, заголовком, текстом с фоновой подложкой и кнопкой. В дизайнерском режиме можно настроить цвет фона подложки, цвет кнопки.
Данный шаблон можно использовать для создания блоков с описанием услуги, промо блоков для товара или оформления заявки.
Шаблон представляет собой текстовый блок с иконкой, заголовком и кнопкой. В дизайнерском режиме можно настроить цвет фона подложки, цвет кнопки, цвет иконки.
Данный шаблон можно использовать для создания блока типа "Заказать обратный звонок", блока с описанием услуги и возможность перейти на форму заявки.
Шаблон представляет собой текстовый блок с иконкой, заголовком и текстом. В дизайнерском режиме можно настроить цвет фона подложки, иконки, фона под иконкой и ее размер.
Данный шаблон можно использовать для создания блока типа "Заказать обратный звонок", "Свяжитесь с нами"
Шаблон представляет собой блок с иконкой, и контактными данными. В дизайнерском режиме можно настроить цвет фона подложки, иконки, фона под иконкой и ее размер.
Данный шаблон можно использовать для создания блока типа "Заказать обратный звонок", "Свяжитесь с нами", блока с контактными данными.
Шаблон представляет собой блок с иконкой, контактными данными и кнопкой. В дизайнерском режиме можно настроить цвет фона подложки, иконки, фона под иконкой и ее размер, цвет кнопки
Данный шаблон можно использовать для создания блока типа "Заказать обратный звонок", "Свяжитесь с нами".
Шаблон представляет собой блок с иконкой, заголовком и кнопкой. В дизайнерском режиме можно настроить цвет фона подложки, иконки, фона под иконкой и ее размер, цвет кнопки
Данный шаблон можно использовать для создания блока типа "Заказать товар", или "Закажите услугу", располагая их на странице сайта.
Шаблон представляет собой блок текста с вынесенной иконкой. В дизайнерском режиме можно настроить цвет фона подложки, иконки, фона под иконкой и ее размер.
Данный шаблон можно использовать для создания сносок, выделения текста.
Группа "Баннер"
Данная группа представлена 3 шаблонами:
Шаблон представляет собой текстовый блок с заглушкой для изображения, заголовком, текстом с фоновой подложкой и кнопкой. В дизайнерском режиме можно настроить цвет фона подложки, цвет кнопки.
Данный шаблон можно использовать для создания блоков с описанием услуги, промо блоков для товара или оформления заявки.
Шаблон представляет собой текстовый блок с заглушкой для изображения, заголовком, текстом с фоновой подложкой и кнопкой. В дизайнерском режиме можно настроить цвет фона подложки, цвет кнопки.
Данный шаблон можно использовать для создания блоков с описанием услуги, товара, баннера с рекламным предложением.
Шаблон представляет собой текстовый блок с заглушкой для изображения, заголовком, текстом с фоновой подложкой и кнопкой. В дизайнерском режиме можно настроить цвет фона подложки, цвет кнопки, прозрачность тени и ее цвет.
Данный шаблон можно использовать для создания блоков с описанием услуги, товара, баннера с рекламным предложением.