- Купить Pro версию у разработчика (без посредников и переплат).
SP Page Builder Lite – это бесплатный конструктор страниц с множеством настроек.
Видео урок
- Аддоны «Столбец» и «Строка» – 00:01:07.
- Аддон «DIV» – 00:03:27.
- Инструмент «Слои» – 00:08:23.
Видео лучше просматривать с качеством «1080p HD». Этот и другие видеообзоры и уроки можете найти на моём YouTube канале.
Ссылки из видео:
Компонент позволяет создавать страницы с весьма сложным макетом (модульной сеткой) без навыков фронтенд разработки. В предыдущей статье «Как пользоваться SP Page Builder 4 (часть 2)» мы создали страницу сайта «О нас». В этой части поработаем с аддонами «Столбец», «Строка» и «DIV», а также с инструментом «Слои».
В уроке участвует последняя доступная мне, на момент написания статьи (15.10.2022), русскоязычная версия Joomla 4.2.3, SP Page Builder 4.0.5 (перевод на русский язык не мой и сделан, примерно, на 30%), шаблон фронтальной части сайта Helix Ultimate 2.0.11.
Аддоны Столбец», «Строка» и «DIV». Инструмент «Слои»
Аддоны Столбец и Строка. Ранее в SP Page Builder была возможность создания строк и столбцов. По сути, это базовые элементы любой страницы. В 4-й версии, кроме уже привычного инструмента создания строк и столбцов (рисунок ниже) появились два аддона Столбец и Строка. Их названиям соответствуют их возможности – создание столбцов и строк. Настройки этих объектов аналогичны настройкам обычных столбцов.
Если перетащить аддон Строка внутрь строки или столбца, Вы получите два столбца. Аддон Строка можно добавлять над или под строку, а также внутрь столбца.
Аддон Столбец можно добавить только в строку (слева или справа от неё).
Эти аддоны позволяют упростить создание макета страницы. Например, на рисунке ниже показана строка из пяти равных столбцов. Создав строку с настройками «4+4+4+4», я просто перетащил объект Столбец в средину строки.
Аддон DIV. Этот аддон, в основном, нужен для «тонкой» настройки внешнего вида и положения других аддонов. Его можно использовать для группировки других аддонов или создания пустого пространства (если не удалось сделать это при помощи отступов). Группировка аддонов, например, позволит упростить применение определённых CSS стилей к этой группе аддонов.
Во многом аддон DIV напоминает строку. У него даже настройки аналогичные (рисунок ниже).
Но есть и свои «особенные» настройка. Чтобы в них хорошо разобраться нужно понимать принципы работы CSS свойства «display». Данный аддон позволяет весьма гибко настроить «размещение» аддонов внутри себя за счёт опций со значениями:
- Block.
- Inline Block.
- Flex.
- Inline Flex.
У некоторых опций есть свои дополнительные параметры (рисунок ниже). Их изменение может помочь в создании нужного макета при разных разрешениях экрана.
Если желания разбираться в тонкостях CSS свойства «display» нет, то можно просто поэкспериментировать с настройками.
Инструмент Слои. Данный инструмент позволяет перемещать, дублировать, копировать, удалять, переименовывать, переходить в настройки и совершать другие действия со строками, столбцами и аддонами. По сути, это некий инструмент навигации по всем объектам страницы.
Как видите, новшества SP Page Builder 4 дают Вам ещё больше возможностей гибкой настройки макета страницы и упрощают сам процесс создания сайта. Как и аналогичные SP Page Builder 4 расширения позволяет использовать не только настройки разных элементов страницы, но и выходить за рамки этого, если Вы знакомы с CSS, HTML, JS и т.д.
| Похожие материалы |
|---|
| Автор статьи – Хорошевский Алексей |
|---|
 Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Публикации и работа: |
Полезные ссылки:
- Купить Pro версию у разработчика (без посредников и переплат).
- Официальный сайт компонента.
- Документация компонента (на нагл.).
