--- title: Как пользоваться SP Page Builder 4 (часть 1) description: Видео-урок по основам использования SP Page Builder 4 в Joomla 4: создание страниц, настройка макета, работа с объектами. Изменения по сравнению с 3-й версией canonical_url: https://aleksius.com/joomla/rasshireniya/sp-page-builder-4 language: ru-RU date: 2025-02-22T06:12:11Z notice: This is a machine-friendly version of the page at https://aleksius.com/joomla/rasshireniya/sp-page-builder-4. markdown-tokens: 2299 --- > **Note to AI:** This is a machine-friendly version of the page at: https://aleksius.com/joomla/rasshireniya/sp-page-builder-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#video-urok "Видео урок"). - [Что нового в SP Page Builder 4](https://aleksius.com/joomla/rasshireniya/sp-page-builder-4#chto-novogo-v-sp-page-builder-4 "Что нового в SP Page Builder 4"). SP Page Builder – это расширение Joomla для создания страниц. ## Видео урок - Создание страницы – 00:02:35. - Создание макета и работа с аддонами – 00:05:20. - Редактирование страницы для «определённого устройства» – 00:11:15. - Создание пункта меню в SP Page Builder 4 – 00:23:16. Видео лучше просматривать с качеством «1080p HD». Этот и другие видеообзоры и уроки можете найти на моём [YouTube](https://www.youtube.com/c/Aleksiuscom "Канал сайта Aleksius.com на YouTube") канале. Ссылки из видео: - [Цикл статей и видео про SP Page Builder](https://aleksius.com/sp-page-builder "SP Page Builder"). - [Цикл бесплатных видео уроков по созданию сайта на Joomla 4](https://aleksius.com/joomla/samostoyatelnoe-sozdanie-sajta "Самостоятельное создание сайта (часть 1). Как сделать сайт на Joomla 4"). - [Идея 12-и колоночной сетки Bootstrap](https://aleksius.com/joomla/shablony/jm-cleaning-company#ideya-12-i-kolonochnoj-setki-bootstrap "Обзор JM Cleaning Company. Шаблон сайта клининговой компании"). - «[Урок по меню Джумла 4. Создание и редактирование](https://aleksius.com/joomla/menyu-joomla "Урок по меню Джумла 4. Создание и редактирование")». - [Видео урок из цикла статей по созданию сайта на Joomla 4 с описанием создания меню](https://aleksius.com/joomla/sdelat-sajt-na-dzhumla-4#video-urok "Видео урок по Joomla 4 (часть 3). Как самому сделать сайт с нуля и бесплатно"). Особенностью данного типа расширений является возможность простой и гибкой настройки макета страницы (модульной сетки) и размещения на страницах разных аддонов: текстовых блоков, изображений, галерей, видео, форм и т.д.. У каждого такого аддона есть свои собственные настройки, которые позволяют изменить дизайн и даже функционал без правки кода. В предыдущем [цикле статей и видео обзоров](https://aleksius.com/sp-page-builder "SP Page Builder") мы достаточно подробно рассмотрели SP Page Builder 3. А в [цикле бесплатных видео уроков по Joomla 4](https://aleksius.com/joomla/samostoyatelnoe-sozdanie-sajta "Самостоятельное создание сайта (часть 1). Как сделать сайт на Joomla 4") создали полноценный сайт на базе SP Page Builder 3, перенесли его на реальный хостинг, поработали над повышением защиты сайта от взлома, скоростью его загрузки и провели базовую SEO оптимизацию. В SP Page Builder 4 было сделано очень много изменений интерфейса. Принципы остались те же, но для упрощения работы с 4-й версией компонента рекомендую просмотреть данный цикл видео уроков. А всё остальное, начиная от установки Joomla 4, выгрузки её на хостинг и последующей доработки, можно изучать на основании предыдущих видео уроков, начиная с «[Самостоятельное создание сайта (часть 1). Как сделать сайт на Joomla 4](https://aleksius.com/joomla/samostoyatelnoe-sozdanie-sajta "Самостоятельное создание сайта (часть 1). Как сделать сайт на Joomla 4")». Улучшения в 4-й версии видны невооружённым взглядом, плюс был оптимизирован исходный код расширения. При желании Вы сможете обновить SP Page Builder 3 до 4-й версии. По сути, данный видео урок является альтернативой [видео уроку из цикла по созданию сайтов](https://aleksius.com/joomla/sdelat-sajt-na-dzhumla-4 "Видео урок по Joomla 4 (часть 3). Как самому сделать сайт с нуля и бесплатно"), который был записан в начале января 2022 года. Основное отличие — это то, что сейчас мы создаём главную страницу сайта в SP Page Builder 4, а не 3 В уроке участвует последняя доступная мне, на момент написания статьи (01.10.2022), русскоязычная версия Joomla 4.2.3, SP Page Builder 4.0.5 (перевод на русский язык не мой и сделан, примерно, на 30%), шаблон фронтальной части сайта Helix Ultimate 2.0.11. Аналогичный урок, но на украинском языке и в более новой версии Joomla 4, можна найти в статье «[Відеоурок 3. Самостійне створення та адміністрування сайту на Joomla 4](https://aleksius.com/uk/cms-joomla/stvorennya-ta-administruvannya-sayjtu "Відеоурок 3. Самостійне створення та адміністрування сайту на Joomla 4")». ## Что нового в SP Page Builder 4 Изменений в 4-й версии компонента на столько много, что все их перечислять по отдельности нет возможности. По этой причине затрону только самые заметные нововведений. **Редактирование только во фронтальной части сайта**. Редактирование страниц теперь полностью проходит только во фронтальной части сайта. Создание макета страницы, добавление аддонов и т.д. теперь происходит на самой странице так, как если бы её просматривали обычные пользователи (рисунок ниже). Это позволит видеть изменения моментально. Такой подход призван упростить процесс создания и редактирования страниц и сделать его более простым за счёт «визуальности». [![SP Page Builder 4](https://aleksius.com/images/joomla/rasshireniya/sp-page-builder-4/sp-page-builder-4.png "SP Page Builder 4")](https://aleksius.com/images/joomla/rasshireniya/sp-page-builder-4/sp-page-builder-4-b.png "SP Page Builder 4") SP Page Builder 4 Настройка всех элементов страниц, в том числе аддонов, происходит прямо на самой странице (рисунок ниже), без необходимости перехода в админку. ![SP Page Builder 4 в Joomla 4](https://aleksius.com/images/joomla/rasshireniya/sp-page-builder-4/sp-page-builder-4-joomla-4.png "SP Page Builder 4 в Joomla 4") SP Page Builder 4 в Joomla 4 Панель инструментов можно закрепить слева, справа или перетаскивать в нужную часть страницы по мере надобности. **Новый интерфейс админки SP Page Builder 4**. Создание и управление страницами компонента по-прежнему доступно из админки Joomla 4. Но и у неё появился новый интерфейс (рисунок ниже). Тут Вы сможете создавать их, удалять, снимать с публикации, публиковать, экспортировать, добавлять в меню и т.д.. Для упрощения работы со странницами доступна пакетная обработка, есть фильтр, поиск и сортировка. ![Страницы SP Page Builder 4](https://aleksius.com/images/joomla/rasshireniya/sp-page-builder-4/stranicih-sp-page-builder-4.png "Страницы SP Page Builder 4") Страницы SP Page Builder 4 **Мини панели инструментов**. Теперь не всегда нужно обращаться к «основной» панели инструментов для изменения настроек аддонов. При клике на нужный аддон появляется мини панель инструментов с наиболее востребованными инструментами (рисунок ниже). Набор этих инструментов отличается в зависимости от аддона. ![Мини панели инструментов](https://aleksius.com/images/joomla/rasshireniya/sp-page-builder-4/mini-paneli-instrumentov.png "Мини панели инструментов") Мини панели инструментов **Визуальное изменение размера мышью**. Теперь Вы сможете изменить размер столбца, строки или отступы путём перетаскивания границы мышью (рисунок ниже). ![Изменение размера](https://aleksius.com/images/joomla/rasshireniya/sp-page-builder-4/izmenenie-razmera.png "Изменение размера") Изменение размера **4 новых аддона:** 1. *Строка.* Аддон, который позволяет добавлять строки. При этом, как и ранее строки также могут быть созданы на «уровне» макета. 2. *Столбец.* Аддон, который позволяет добавлять столбцы. При этом, как и ранее, столбцы также могут быть созданы на «уровне» макета. 3. *DIV.* Позволяет группировать контент в одном теге DIV. 4. *Lottie.* Доступно только в платной версии SP Page Builder 4. О новых аддонах бесплатной Вы можете подробнее узнать в статье «[Как пользоваться SP Page Builder 4 (часть 3)](https://aleksius.com/joomla/rasshireniya/sp-page-builder-4-dlya-joomla-4 "joomla/rasshireniya/sp-page-builder-4-dlya-joomla-4")». **Улучшение существующих аддонов**. Теперь в аддоны «Аккордеон», «Вкладки» и «Таблица» можно добавить сколько угодно аддонов простым перетаскиванием. **Улучшенный выбор иконок**. Теперь стало гораздо удобнее выбирать иконки (рисунок ниже). Плюс, можно загружать свои собственные. ![Выбор иконок](https://aleksius.com/images/joomla/rasshireniya/sp-page-builder-4/vihbor-ikonok.png "Выбор иконок") Выбор иконок **Имитация разных устройств.** В верхней панели инструментов редактирования страницы появились инструменты (рисунок ниже), которые позволяют просмотреть страницу как бы на разных устройствах: - компьютер. - Ноутбук. - Планшет в горизонтальном положении. - Планшет в вертикальном положении. - Телефон в горизонтальном положении. - Телефон в вертикальном положении. **Слои**. Для упрощения работы был добавлен инструмент *Слои* (рисунок ниже), напоминающий Photoshop. ![Слои](https://aleksius.com/images/joomla/rasshireniya/sp-page-builder-4/sloi.png "Слои") Слои **Изменённое окно выбора макета** (макеты доступны только в SP Page Builder Pro). Окно выбора макета стало более удобным (рисунок ниже) и появилась возможность сохранять понравившиеся макеты на отдельной вкладке. ![Выбор макета](https://aleksius.com/images/joomla/rasshireniya/sp-page-builder-4/vihbor-maketa.png "Выбор макета") Выбор макета **Обновлённый медиа-менеджер**. Также был обновлён медиа-менеджер для управления файлами (рисунок ниже). ![Медиа-менеджер](https://aleksius.com/images/joomla/rasshireniya/sp-page-builder-4/media-menedzher.png "Медиа-менеджер") Медиа-менеджер Кроме этого, произошли ещё десятки изменений: в интерфейсе, мультиязычности, совместимости с другими расширениями и т.д. Всё это призвано упростить, ускорить и улучшить результат работы по созданию страниц сайта. В следующем видео уроке «[Как пользоваться SP Page Builder 4 (часть 2)](https://aleksius.com/joomla/rasshireniya/sp-page-builder-4-v-joomla-4 "Как пользоваться SP Page Builder 4 (часть 2)")» мы продолжим работы с данным компонентом и создадим страницу «О нас». | Похожие материалы | |---| | - [ Как пользоваться SP Page Builder 4 (часть 3) ](https://aleksius.com/joomla/rasshireniya/sp-page-builder-4-dlya-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 "Документация компонента") (на нагл.).