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

Блочный редактор Апекс позволит создавать сложные макеты страниц с анимацией с помощью визуального интерфейса. Блоки — это отдельные элементы (текст, заголовки, изображения и др.), каждый с собственными настройками. Контент собирается из этих блоков и сохраняется в базу данных.

Апекс обладает преимуществами пред аналогами.

• Значительно меньше элементов DOM у блоков. Это улучшает скорость работу сайта и улучшает позицию сайта в поиске, так как поисковикам важно уровень вложения для элементов DOM. Например, можно применять стили к каждой колонки у блока «Колонки».
• Вы можете гибко настраивать отображение блоков. Доступно множество вариантов отображения блока. Например, показать блок если посетитель из г. Москва, если товар в наличии или отсутствует и другие варианты.
• Гибкая работа с блоками, например, копирование и сортировка, можно переносить блоки между вложениями, если вы хотите обернуть блоки в контейнер.
• Связанные блоки позволяют настраивать качественный и сложный контент. Например, вам нужно вывести несколько блоков, если есть акционные товары, а если нет, скрыть их. Связанные блоки помогут это сделать.
• Разные варианты выгрузки блоков в json-файл для хранения или переноса на другие сайты. Можно сохранить как все блоки на странице, так и отдельный блок.
• Конструктор Апекс включен в платформу и его не надо покупать отдельно.

Каждый блок имеет свои настройки о которых можно прочитать на отдельной странице в этой документации нужного блока.

Основные элементы редактора:

1. Панель вставки блоков;
2. Контент — редактируемая зона блоков;
3. Настройки — панель параметров блока или записи.
4. Панель управления — панель слева, в которой есть разделы: слои, страницы, цвета и стили.

Сохранение макета в файл и перенос на другой сайт

Макет страницы можно сохранить в json-файл и использовать для загрузки на другой сайт. Для этого нажмите на кнопку «Выгрузить в json». Чтобы загрузить json-файл нажмите «Загрузить из json».

Редактирование блока

Чтобы изменить блок наведите на него и нажмите на иконку карандаша.

Откроется панель редактирования блока. В ней сверху есть кнопки.

Кнопка плюс откроет панель с добавлением нового блока.

«Включен» и «Выключен» — статус активности блока. Если нажать на статус, то его можно менять. Статус активности «Выключен» скрывает блок на сайте.

Кнопка json позволит выгрузить настройки блока в файл для переноса в другой макет.

Крестик справа закроет панель редактирования.

Дизайн контейнера

Каждый блок состоит из двух DOM элементов. Им можно задавать стили. Для этого в панели настройки блока откройте вкладку «Контейнер».

На этой вкладке два раздела:

• Стиль контейнера
• Анимация контейнера

Раздел стиль контейнера

Если раскрыть раздел стиль блока, то станут доступны все настройки раздела.

В разделе стиль контейнера можно задать ширину блока в настройке «Ширина» по заданным настройкам ширины сайта.

Опция «Внешние отступы»(css margin) позволяет задать внешние отступы для блока. Ее используйте, чтобы задать расстояние между блоками.

Опция «Внутренние отступы»(css padding) позволяет задать внутренние отступы для блока. Ее используйте чтобы содержимое блока имело отступы от края, если указан фоновый цвет или есть фоновая картинка.

Опция «Максимальная ширина» позволит задать максимальную ширину блока. Это полезно, например, если текст хочется разместить на определённую ширину, чтобы он был не в одну строку. На мобильном устройстве блок автоматически уменьшится по новым размерам.

Опция «Высота» позволит задать высоту блока.

Опция «Фоновый цвет» позволит задать фоновый цвет для блока. Фоновый цвет можно задавать из настроек цветовой палитры. И при изменении настроек, цвет блока так же будет меняться. Так же полезно при экспорте блоков для использования на других сайтах с другой цветовой палитрой. Блок автоматически поменяет цвет на новый, указанный в настройках сайта.

Опция «Фоновое изображение» позволит задать фоновую картинку для блока.

Опция «Затемнение фона» позволит затемнить фон, если, например, картинка сильно яркая и текст плохо читается.

Опция «Масштабирование фонового изображения» позволит масштабировать фоновое изображение. Доступны варианты:

• Вписать в блок. Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
• Вместить. Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
• Значение. Можно задать свое значение.
• Автоматически. Размеры фона остаются исходными.

Опция «Повторение фонового изображения» позволит указать необходимо ли фоновое изображение повторять.

Опция «Позиция фонового изображения» позволит указать позицию фонового изображения. Например, его можно сместить вправо или влево. Доступны и другие варианты.

Опция «Прокрутка фонового изображения» определяет будет ли фон прокручиваться вместе со страницей или будет зафиксирован на одном месте.

• Фиксирован — фон фиксируется и не прокручивается вместе с элементом.
• Скрол — фон перемещается вместе с содержимым элемента.

Опция «Рамка» позволит задать рамку вокруг блока. Вы можете указать цвет, размер и стиль рамки.

Опция «Скругление углов» позволит скруглить углы вокруг блока.

Раздел анимация контейнера

В разделе «Анимация контейнера» вы можете выбрать анимацию для блока.

Вкладка управление блоком

Во вкладке есть 3 раздела:

• Ограничения отображения
• HTML
• Информация

Раздел ограничения отображения

Раскрыв этот раздел вы сможете указать при каких условиях отображать блок.

Опция «Активность» позволит скрыть блок, не удаляя его из макета. Например, если это акция и она закончилась, но будет в будущем.

Опция «Роли пользователей» позволит показать блок, для определенных пользователей. Если ничего не выбрано, то будет показан всем пользователям.

Опция «Показывать на экранах шириной» позволит показать блок, для определенных размеров экрана. Для не выбранных размеров экрана блок будет скрыт. Если ничего не выбрано, то будет показана на всех экранах.

Опция «Показывать на устройствах» позволит выбрать устройства для отображения. Тип устройства проверяется на сервере и это позволяет не рассчитывать блок и не делать запросы в SQL, что уменьшает нагрузку на сервер. Если ничего не выбрано, то будет показана на всех устройствах.

Опция «По наличию товара» позволит показать блок, по выбранному статусу наличия. Важно! Если вы используете это ограничение, блок должен быть добавлен в карточку товара. Ограничение «Товар в наличии» покажет блок, если остаток товара положителен. Ограничение «Товар в отсутствует» покажет блок, если нет запаса. Это удобно если вы хотите вывести какую то форму или текст если товара нет в наличии.

Опция «Загрузка» позволит загружать блок сразу или по видимости. Это может снизить нагрузку на сервер, но не все блоки могут корректно работать.

Раздел HTML

Позволяет настроить семантическую верстку, выбирая тег блока. А так же указать классы и собственный css.

Чтобы указать собственный css укажите класс, который используется в блоке, а id блока будет указано автоматически при отображении его на сайте. Например, укажите так:

.view_form__name{margin-bottom:40px}

На примере указан нижний внешний отступ для названия поля.

ID блока будет добавлен автоматически и по итогу на сайте будет выведен такой код

#html_block_1767560498755 .view_form__name{margin-bottom:40px}

Вы так же можете использовать @media, для указания адаптивной верстки.

@media (max-width: 480px) {
    .view_form__name{margin-bottom:40px}
};

Раздел информация

Это технический раздел для разработчиков. В нем можно узнать ID блока и его код.

Панель управления

Панель управления, которая находится слева, содержит следующие разделы:

• Слои;
• Страницы;
• Цвета и стили.

Раздел слои

Этот раздел позволяет выбирать блок для редактирования, сортировать их или удалять.

Чтобы выбрать блок для редактирования, нажмите его в панели со слоями. Так же вы можете сортировать блоки, потащив их. Нажав правой кнопкой на слое, откроется меню.

В меню есть следующие действия:

• Переименовать
• Дублировать
• Удалить

Раздел страницы

Этот раздел позволяет выбрать страницу для редактирования на холсте.

Раздел цвета и стили

Этот раздел позволяет менять глобальные цвета и стили для сайта прямо в редакторе.

Чтобы сохранить изменения нажмите кнопку Сохранить в редакторе Апекс.