- Купить Pro версию у разработчика (без посредников и переплат).
SP Page Builder – это расширение Joomla для создания страниц.
Видео урок
- Создание страницы – 00:02:35.
- Создание макета и работа с аддонами – 00:05:20.
- Редактирование страницы для «определённого устройства» – 00:11:15.
- Создание пункта меню в SP Page Builder 4 – 00:23:16.
Видео лучше просматривать с качеством «1080p HD». Этот и другие видеообзоры и уроки можете найти на моём YouTube канале.
Ссылки из видео:
- Цикл статей и видео про SP Page Builder.
- Цикл бесплатных видео уроков по созданию сайта на Joomla 4.
- Идея 12-и колоночной сетки Bootstrap.
- «Урок по меню Джумла 4. Создание и редактирование».
- Видео урок из цикла статей по созданию сайта на Joomla 4 с описанием создания меню.
Особенностью данного типа расширений является возможность простой и гибкой настройки макета страницы (модульной сетки) и размещения на страницах разных аддонов: текстовых блоков, изображений, галерей, видео, форм и т.д.. У каждого такого аддона есть свои собственные настройки, которые позволяют изменить дизайн и даже функционал без правки кода. В предыдущем цикле статей и видео обзоров мы достаточно подробно рассмотрели SP Page Builder 3. А в цикле бесплатных видео уроков по Joomla 4 создали полноценный сайт на базе SP Page Builder 3, перенесли его на реальный хостинг, поработали над повышением защиты сайта от взлома, скоростью его загрузки и провели базовую SEO оптимизацию.
В SP Page Builder 4 было сделано очень много изменений интерфейса. Принципы остались те же, но для упрощения работы с 4-й версией компонента рекомендую просмотреть данный цикл видео уроков. А всё остальное, начиная от установки Joomla 4, выгрузки её на хостинг и последующей доработки, можно изучать на основании предыдущих видео уроков, начиная с «Самостоятельное создание сайта (часть 1). Как сделать сайт на Joomla 4».
Улучшения в 4-й версии видны невооружённым взглядом, плюс был оптимизирован исходный код расширения. При желании Вы сможете обновить SP Page Builder 3 до 4-й версии.
По сути, данный видео урок является альтернативой видео уроку из цикла по созданию сайтов, который был записан в начале января 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».
Что нового в SP Page Builder 4
Изменений в 4-й версии компонента на столько много, что все их перечислять по отдельности нет возможности. По этой причине затрону только самые заметные нововведений.
Редактирование только во фронтальной части сайта. Редактирование страниц теперь полностью проходит только во фронтальной части сайта. Создание макета страницы, добавление аддонов и т.д. теперь происходит на самой странице так, как если бы её просматривали обычные пользователи (рисунок ниже). Это позволит видеть изменения моментально. Такой подход призван упростить процесс создания и редактирования страниц и сделать его более простым за счёт «визуальности».
Настройка всех элементов страниц, в том числе аддонов, происходит прямо на самой странице (рисунок ниже), без необходимости перехода в админку.
Панель инструментов можно закрепить слева, справа или перетаскивать в нужную часть страницы по мере надобности.
Новый интерфейс админки SP Page Builder 4. Создание и управление страницами компонента по-прежнему доступно из админки Joomla 4. Но и у неё появился новый интерфейс (рисунок ниже). Тут Вы сможете создавать их, удалять, снимать с публикации, публиковать, экспортировать, добавлять в меню и т.д.. Для упрощения работы со странницами доступна пакетная обработка, есть фильтр, поиск и сортировка.
Мини панели инструментов. Теперь не всегда нужно обращаться к «основной» панели инструментов для изменения настроек аддонов. При клике на нужный аддон появляется мини панель инструментов с наиболее востребованными инструментами (рисунок ниже). Набор этих инструментов отличается в зависимости от аддона.
Визуальное изменение размера мышью. Теперь Вы сможете изменить размер столбца, строки или отступы путём перетаскивания границы мышью (рисунок ниже).
4 новых аддона:
- Строка. Аддон, который позволяет добавлять строки. При этом, как и ранее строки также могут быть созданы на «уровне» макета.
- Столбец. Аддон, который позволяет добавлять столбцы. При этом, как и ранее, столбцы также могут быть созданы на «уровне» макета.
- DIV. Позволяет группировать контент в одном теге DIV.
- Lottie. Доступно только в платной версии SP Page Builder 4.
О новых аддонах бесплатной Вы можете подробнее узнать в статье «Как пользоваться SP Page Builder 4 (часть 3)».
Улучшение существующих аддонов. Теперь в аддоны «Аккордеон», «Вкладки» и «Таблица» можно добавить сколько угодно аддонов простым перетаскиванием.
Улучшенный выбор иконок. Теперь стало гораздо удобнее выбирать иконки (рисунок ниже). Плюс, можно загружать свои собственные.
Имитация разных устройств. В верхней панели инструментов редактирования страницы появились инструменты (рисунок ниже), которые позволяют просмотреть страницу как бы на разных устройствах:
- компьютер.
- Ноутбук.
- Планшет в горизонтальном положении.
- Планшет в вертикальном положении.
- Телефон в горизонтальном положении.
- Телефон в вертикальном положении.
Слои. Для упрощения работы был добавлен инструмент Слои (рисунок ниже), напоминающий Photoshop.
Изменённое окно выбора макета (макеты доступны только в SP Page Builder Pro). Окно выбора макета стало более удобным (рисунок ниже) и появилась возможность сохранять понравившиеся макеты на отдельной вкладке.
Обновлённый медиа-менеджер. Также был обновлён медиа-менеджер для управления файлами (рисунок ниже).
Кроме этого, произошли ещё десятки изменений: в интерфейсе, мультиязычности, совместимости с другими расширениями и т.д. Всё это призвано упростить, ускорить и улучшить результат работы по созданию страниц сайта.
В следующем видео уроке «Как пользоваться SP Page Builder 4 (часть 2)» мы продолжим работы с данным компонентом и создадим страницу «О нас».
| Похожие материалы |
|---|
| Автор статьи – Хорошевский Алексей |
|---|
 Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Публикации и работа: |
Полезные ссылки:
- Купить Pro версию у разработчика (без посредников и переплат).
- Официальный сайт компонента.
- Документация компонента (на нагл.).
