Блог Дмитрия Дисмов

Интересные новости о моих разработках и увлечениях.

Обзор структуры компонента ABC Page Builder

Обзор структуры компонента ABC Page Builder

​Сегодня я расскажу вам о структуре компонента ABC Page Builder и его основных настройках.

Первым делом нужно создать хотя бы одну категорию, чтобы мы могли создавать в ней страницы. И можем переходить к рассмотрению настроек страницы.
Кликаем кнопку создать и сразу переходим к настройкам страницы. Добавим заголовок и алиас (алиас можно не указывать, будет добавлен автоматически). Во вкладке настройки заполняем всю нужную информацию о странице: категория, краткое описание, ключевые слова, язык и т.д. можно указать сначала только категорию, а после создания указать все нужные данные. После этого нажмите "сохранить". Теперь вы сможете использовать просмотр страницы.

Далее давайте разберёмся со структурой компонента.

Каждая страница созданная вами в компоненте будет иметь следующую структуру и настройки:



BODY

Это основной блок любой страницы. Мы можем изменить стиль этого блока, при этом не важно какой шаблон у вас установлен по умолчанию, вы можете изменить стиль прямо из компонента. Под стилем я подразумеваю, что вы можете изменить: цвет фона, задать фоновое изображение, добавить или убрать отступы, добавить рамку или убрать её и т.д.


ОСНОВНОЙ КОНТЕЙНЕР

Блок который находится внутри BODY, в нём располагаются все остальные блоки. Мы так же можем задать для него стили, но кроме этого есть возможность ограничить ширину блока, это вам пригодится, если вы создаёте Landing Page и вам нужно, чтобы контент не растягивался на всю ширину страницы.


СТРОКИ

Внутри основного контейнера можно вставить любое количество строк. У строк намного больше настроек чем у предыдущих 2 блоков. 



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

Заголовок позволяет добавить заголовок  блоку. Его можно разместить внутри блока либо снаружи, придать нужный размер, стиль, шрифт и т.д.

Стили аналогично предыдущим блокам, можно оформить блок, как вам угодно.

Анимация - вы можете задать анимацию блоку, анимация имеет довольно гибкие настройки. Можно указать направление, продолжительность, задержку и т.д.

Адаптивность - позволяет задать на каких устройствах данная строка будет отображаться а на каких нет.


СТОЛБЦЫ

Внутри каждой строки находятся блоки с колонками или столбцами. Столбцы настраиваются по принципу модульной сетки. Количество столбцов от 1 до 12.

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


СЕКЦИИ

Внутри каждого столбца находятся блоки-секции. Они группируют аддоны в строку.

У этих блоков тоже есть настройки заголовка, стилей, анимации и адаптивности.


АДДОНЫ

И наконец - аддоны. Аддоны находятся внутри секций и кроме настроек заголовка, стилей, анимации и адаптивности, имеют ещё возможность быстрого предпросмотра.

Также вы можете менять ширину этого блока произвольно. Часто бывает, что нужно подобрать ширину и такая возможность у вас есть.


Все элементы, за исключением BODY и ОСНОВНОГО мы можем перемещать, дублировать, удалять и даже можем скрыть на время ( допустим вы подготовили какую-то акцию и в нужное время просто включили видимость блоков).  Вся эта структура адаптивна и меняет свой вид в зависимости от размера девайса.

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

Наверное на сегодня хватит информации.

И ещё хорошая новость, я начал серию видео о том как работать с компонентом. Видео смотрите ниже...

Будьте счастливы, несмотря ни на что.
Подписывайтесь на блог, пишите комментарии.
А с вами был, Дмитрий Дисмов.
Всего доброго.

Новый компонент ABC PageBuilder доступен каждому.
Как сделать из обычной страницы лендинг (Landing P...

Читайте также:

Комментарии

 
Еще нет комментариев