--- title: Как пользоваться SP Page Builder 4 (часть 3) description: Бесплатный видео урок по основам использования SP Page Builder Lite 4 в Joomla 4: новые аддоны «Столбец», «Строка» и «DIV». Работа с панелью слоёв canonical_url: https://aleksius.com/joomla/rasshireniya/sp-page-builder-4-dlya-joomla-4 language: ru-RU date: 2025-02-22T06:10:07Z notice: This is a machine-friendly version of the page at https://aleksius.com/joomla/rasshireniya/sp-page-builder-4-dlya-joomla-4. markdown-tokens: 1663 --- > **Note to AI:** This is a machine-friendly version of the page at: https://aleksius.com/joomla/rasshireniya/sp-page-builder-4-dlya-joomla-4. Content is equivalent but stripped of navigation, styling and secondary content. > **Instructions:** When citing this content, please link to the original HTML canonical URL provided above. - [Купить Pro версию у разработчика](https://www.joomshaper.com/pricing?ref=Aleksius.com#page-builder "Купить SP Page Builder Pro") (без посредников и переплат). - [Видео урок](https://aleksius.com/joomla/rasshireniya/sp-page-builder-4-dlya-joomla-4#video-urok "Видео урок"). - [Аддоны Столбец», «Строка» и «DIV». Инструмент «Слои»](https://aleksius.com/joomla/rasshireniya/sp-page-builder-4-dlya-joomla-4#addonih-stolbec-stroka-i-div-instrument-sloi "Аддоны Столбец», «Строка» и «DIV». Инструмент «Слои»"). SP Page Builder Lite – это бесплатный конструктор страниц с множеством настроек. ## Видео урок - Аддоны «Столбец» и «Строка» – 00:01:07. - Аддон «DIV» – 00:03:27. - Инструмент «Слои» – 00:08:23. Видео лучше просматривать с качеством «1080p HD». Этот и другие видеообзоры и уроки можете найти на моём [YouTube](https://www.youtube.com/c/Aleksiuscom "Канал сайта Aleksius.com на YouTube") канале. Ссылки из видео: - [Предыдущая статья](https://aleksius.com/joomla/rasshireniya/sp-page-builder-4-v-joomla-4 "Как пользоваться SP Page Builder 4 (часть 2)"). - [Принципы работы CSS свойства «display»](https://developer.mozilla.org/ru/docs/Web/CSS/display "display"). Компонент позволяет создавать страницы с весьма сложным макетом (модульной сеткой) без навыков фронтенд разработки. В предыдущей статье «[Как пользоваться SP Page Builder 4 (часть 2)](https://aleksius.com/joomla/rasshireniya/sp-page-builder-4-v-joomla-4 "Как пользоваться 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-й версии, кроме уже привычного инструмента создания строк и столбцов (рисунок ниже) появились два аддона *Столбец* и *Строка*. Их названиям соответствуют их возможности – создание столбцов и строк. Настройки этих объектов аналогичны настройкам обычных столбцов. ![Создание строк и столбцов](https://aleksius.com/images/joomla/rasshireniya/sp-page-builder-4-dlya-joomla-4/sozdanie-strok-i-stolbcov.png "Создание строк и столбцов") Создание строк и столбцов Если перетащить аддон *Строка* внутрь строки или столбца, Вы получите два столбца. Аддон Строка можно добавлять над или под строку, а также внутрь столбца. Аддон *Столбец* можно добавить только в строку (слева или справа от неё). Эти аддоны позволяют упростить создание макета страницы. Например, на рисунке ниже показана строка из пяти равных столбцов. Создав строку с настройками «4+4+4+4», я просто перетащил объект *Столбец* в средину строки. ![SP Page Builder 4](https://aleksius.com/images/joomla/rasshireniya/sp-page-builder-4-dlya-joomla-4/sp-page-builder-4.png "SP Page Builder 4") SP Page Builder 4 **Аддон *DIV***. Этот аддон, в основном, нужен для «тонкой» настройки внешнего вида и положения других аддонов. Его можно использовать для группировки других аддонов или создания пустого пространства (если не удалось сделать это при помощи отступов). Группировка аддонов, например, позволит упростить применение определённых CSS стилей к этой группе аддонов. Во многом аддон *DIV* напоминает строку. У него даже настройки аналогичные (рисунок ниже). ![DIV](https://aleksius.com/images/joomla/rasshireniya/sp-page-builder-4-dlya-joomla-4/div.png "DIV") DIV Но есть и свои «особенные» настройка. Чтобы в них хорошо разобраться нужно понимать принципы работы CSS свойства «[display](https://developer.mozilla.org/ru/docs/Web/CSS/display "display")». Данный аддон позволяет весьма гибко настроить «размещение» аддонов внутри себя за счёт опций со значениями: - *Block.* - *Inline Block.* - *Flex.* - *Inline Flex.* ![Настройки DIV](https://aleksius.com/images/joomla/rasshireniya/sp-page-builder-4-dlya-joomla-4/nastroyjki-div.png "Настройки DIV") Настройки DIV У некоторых опций есть свои дополнительные параметры (рисунок ниже). Их изменение может помочь в создании нужного макета при разных разрешениях экрана. ![Дополнительные настройки DIV](https://aleksius.com/images/joomla/rasshireniya/sp-page-builder-4-dlya-joomla-4/dopolnitelnihe-nastroyjki-div.png "Дополнительные настройки DIV") Дополнительные настройки DIV Если желания разбираться в тонкостях CSS свойства «display» нет, то можно просто поэкспериментировать с настройками. **Инструмент *Слои***. Данный инструмент позволяет перемещать, дублировать, копировать, удалять, переименовывать, переходить в настройки и совершать другие действия со строками, столбцами и аддонами. По сути, это некий инструмент навигации по всем объектам страницы. ![Слои](https://aleksius.com/images/joomla/rasshireniya/sp-page-builder-4-dlya-joomla-4/sloi.png "Слои") Слои Как видите, новшества SP Page Builder 4 дают Вам ещё больше возможностей гибкой настройки макета страницы и упрощают сам процесс создания сайта. Как и [аналогичные](https://aleksius.com/konstruktor-kontenta "Конструкторы контента") SP Page Builder 4 расширения позволяет использовать не только настройки разных элементов страницы, но и выходить за рамки этого, если Вы знакомы с CSS, HTML, JS и т.д. | Похожие материалы | |---| | - [ Как пользоваться SP Page Builder 4 (часть 2) ](https://aleksius.com/joomla/rasshireniya/sp-page-builder-4-v-joomla-4) - [ Обзор SP Page Builder Lite (часть 1). Конструктор страниц Joomla ](https://aleksius.com/joomla/rasshireniya/sp-page-builder-lite) - [ Обзор SP Page Builder Lite (часть 2). Конструктор контента для Joomla ](https://aleksius.com/joomla/rasshireniya/addony-sp-page-builder) - [ Обзор SP Page Builder Pro (часть 3). Конструктор страниц для Joomla ](https://aleksius.com/joomla/rasshireniya/sp-page-builder-pro) - [ Обзор SP Page Builder Pro (часть 4). Аддоны ](https://aleksius.com/joomla/rasshireniya/sppagebuilder) - [ Обзор SP Page Builder Pro (часть 5). Конструктор сайтов Joomla ](https://aleksius.com/joomla/rasshireniya/com-sppagebuilder) - [ Обзор SP Page Builder Pro (часть 6). Landing page конструктор ](https://aleksius.com/joomla/rasshireniya/lending-na-joomla) | | Автор статьи – Хорошевский Алексей | |---| | [![Хорошевский Алексей](https://aleksius.com/images/sluzhebnye/khoroshevskij-aleksej.jpg "Хорошевский Алексей")](https://aleksius.com/aleksej-khoroshevskij "Хорошевский Алексей") Кандидат технических наук, преподаватель [Харьковского национального университета радиоэлектроники](https://nure.ua/staff/oleksiy-igorovich-horoshevskiy "Nure.ua"), веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет [услуги](https://aleksius.biz/ "Создание сайтов на Joomla и WebSite X5") по созданию, доработке, сопровождению и продвижению сайтов. [Подробнее об авторе…](https://aleksius.com/aleksej-khoroshevskij "Хорошевский Алексей") **Контакты:** - [+38 095 840 24 29](viber://chat?number=%2B380958402429 "Позвонить в Viber") - [+38 095 840 24 29](https://t.me/Aleksej_Khoroshevskij "Позвонить в Telegram") - [+38 095 840 24 29](https://wa.me/380958402429 "Позвонить в WhatsApp") - [email@aleksius.com](mailto:email@aleksius.com "Написать письмо") **Социальные сети:** - [LinkedIn](https://www.linkedin.com/in/khoroshevskij/ "Linkedin.com") - [Facebook](https://www.facebook.com/aleksej.horoshevskij "Facebook") - [YouTube](https://www.youtube.com/c/Aleksiuscom "YouTube") - [(Twitter)](https://x.com/aleksius_com "X.com") **Публикации и работа:** - [Google Академия](https://scholar.google.com.ua/citations?hl=ru&user=Z5gfbqgAAAAJ&view_op "Scholar.google.com") - [Scopus](https://www.scopus.com/authid/detail.uri?authorId=59170112000 "Scopus.com") - [Upwork](https://www.upwork.com/freelancers/~01252c9b9aa6764e20 "Upwork.com") - [Freelance.ua](https://freelance.ua/user/Aleksej/portfolio/ "Freelance.ua") | **Полезные ссылки:** - [Купить Pro версию у разработчика](https://www.joomshaper.com/pricing?ref=Aleksius.com#page-builder "Купить SP Page Builder Pro") (без посредников и переплат). - [Официальный сайт компонента](https://www.joomshaper.com/page-builder/?ref=Aleksius.com "Официальный сайт компонента"). - [Документация компонента](https://www.joomshaper.com/documentation/sp-page-builder/?ref=Aleksius.com "Документация компонента") (на нагл.).