Visual Composer

Для редактирования страниц в шаблонах Temdo используется визуальный редактор Visual Composer. Он позволяет создавать веб-страницы любой сложности с помощью Drad-n-Drop, без необходимости написания HTML кода. Visual Composer может работать в любом из трех режимов: Визуальный редактор, Блочный редактор и Стандартный режим. Переключаться между этими режимами можно в любой момент с помощью соответствующих кнопок:

Визуальный редактор позволяет редактировать страницы сайта в режиме «реального времени» – вы можете сразу видеть изменения в том виде, как они будут выглядеть на страницах сайта. Блочный редактор отображает схематическую структуру страницы в виде иерархии блоков и элементов. В стандартном режиме контент страницы отображается текстом – в виде макросов, которые в WorPress называются шорткоды (shortcodes).

Элементы в Visual Composer группируются с помощью рядов и колонок. На любой странице всегда находится как минимум один ряд и одна колонка. Они добавляются автоматически при добавлении первого элемента на страницу. Другие элементы можно добавлять в ту же колонку, либо создавать более сложные макеты из нескольких рядов и колонок.

Визуальный редактор

Визуальный редактор позволяет редактировать страницы сайта в режиме «реального времени» – вы можете сразу видеть изменения в том виде, как они будут выглядеть на страницах сайта. Редактор только добавляет сверху над страницей небольшую панель управления, а при наведении курсора на элементы страницы вы увидите появляющиеся панели с кнопками управления для конкретного элемента:

Как видите, интерфейс визуального редактора очень простой. Слева в шапке редактора находятся следующие кнопки:

  • Открыть домашнюю страницу Visual Composer
  • Добавить элемент на страницу
  • Шаблоны страниц

Кнопки в правой части шапки:

  • Настрйки страницы
  • Просмотр страницы на мобильных устройствах
  • Перейти в блочный редактор
  • Обновить (сохранить изменения)
  • Выйти из режима редактирования (вернуться в Консоль WordPress)

Кроме того, при наведении курсора на контент страницы появляются небольшие панели управления для того элемента, над которым находится курсор. Все элементы можно перетаскивать по странице, клонировать, удалять и редактировать.

Каждый элемент имеет свой интерфейс для редактирования. Например, редактор элемента «Текст» выглядит так:

Для добавления нового элемента на страницу нажмите на кнопку «+» в шапке редактора:

В открывшемся диалоге выберите нужный элемент:

По окончании редактирования страницы нажмите кнопку «Обновить» в шапке редактора:

Блочный редактор

Блочный редактор встраивается в стандартный интерфейс консоли WordPress. В отличие от визуального редактора, он дает более наглядное представление о структуре элементов, поскольку в этом режиме отображаются в том числе невидимые элементы – ряды, колонки и отступы. Кроме того, в этом режиме доступны различные настройки страницы: постоянная ссылка, параметры боковой панели, параметры публикации и многое другое:

В остальном принцип работы блочного редактора абсолютно идентичен режиму визуального редактора. Элементы можно добавлять на страницу, удалять, клонировать, редактировать и перетаскивать в любое место страницы.

Стандартный режим

В этом режиме контент страницы отображается в виде шорткодов. Шорткоды – это специальные команды WordPress, позволяющие добавлять на страницу сайта или в запись блога готовые функциональные элементы и управлять их внешним видом:

Более подробно прочитать о шорткодах и узнать, как создавать простые шорткоды, вы можете из документации WordPress.

По сути, Visual Composer в режиме Визуального редактора или Блочного редактора автоматизирует создание шорткодов для соответствующих элементов, и в большинстве случаев нет необходимости использовать Стандартный режим. Однако, иногда бывает удобно переключиться в Стандартный режим, например для того, чтобы быстро скопировать весь контент страницы или его часть.