Примерно год назад я познакомился с довольно занятным компонентом Joomla, который представляет собой конструктор страницы - не то, чтобы создавать материал и при помощи табличной или блочной верстки располагать на нем элементы. Это, в принципе, тоже вариант, но довольно долгий и муторный. Именно тогда мне и повстречался SP Page Builder, при помощи которого все это делается намного проще.

Вот пример страницы, созданной в SP Page Builder - http://kb52.ru/goszakupki/bankovskie-garantii

Это типичная посадочная страница под рекламу в Директе или лендинг. Примечательно то, что страницы, созданные в SP Page Builder корректно отображаются в любом шаблоне Joomla - фиксированном, резиновом, одно- и несколькоколоночном. Я успешно использую данный компонент с шаблоном Protostar.

В сети есть множество видеоруководств по работе с SP Page Builder, но лично я не могу долго смотреть видео - голос спикера убаюкивает, сановится скучно. К сожалению, я не нашел в сети более-менее краткой и вменяемой инструкции по использованию SP Page Builder, поэтому привожу ее здесь. 

Где скачать SP Page Builder?

Я рекомендую качать с официального сайта - https://www.joomshaper.com/page-builder. Компонент имеет 2 версии - бесплатную с ограниченной функциональностью и полнофункциональную платную (за $39). Я на одном проекте использовал полную версию SP Page Builder, на остальных - бесплатную и могу сказать, что для большинства задач вполне можно обойтись бесплатной версией.

Установка SP Page Builder

Установка SP Page Builder не отличается от установки любого другого компонента Joomla и выполняется через менеджер расширений.

После успешной установки в главном меню админки появляется новый пункт - SP Page Builder. Под ним - выпадающее меню, через которое можно посмотреть имеющиеся страницы, создать новую и почитать документацию (на английском языке).

Создание страницы на SP Page Builder

Выбираем пункт меню Add New Page. При этом открывается конструктор страницы. Вид его может показаться странным, поскольку он не содержит визуального редактора. Выглядит он так:

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

Row - горизонтальная строка. В этой строке есть Columns, то есть, столбцы. В столбцы, в свою очередь, вставляются элементы - аддоны. Принцип вложенности показан на картинке ниже:

То есть, вначале создаем новую строку (row), затем разбиваем его на колонки (columns), и уже в них добавляем аддоны (addon).

SP Page Builder предлагает разные варианты разбиения строки на колонки. Они могут быть разной ширины и число колонок - до 12. 

Когда колонки созданы, жмем кнопку Add Addon. Аддоны в бесплатной версии следующие:

1. Joomla Module - вставляет в страницу любой модуль. Например, список последних новостей или форму обратной связи.
2. Accordion - вставляет так называемый "аккордеон", такая штука часто используется в разделах FAQ. На странице список вопросов, кликаем по воросу, под ним появляется ответ. Кликаем по другому вопросу - предыдущий ответ закрывается, открывается новый. 
3. Alert - предупреждение с кнопкой закрытия. Пример ниже: 

1. Button - кнопка на странице. Можно выбрать размер и настроить внешний вид. По нажатию кнопки осуществляется переход по указанной ссылке.
2. Carousel - слайдер с картинками и надписями. Слайды могут листаться вручную и автоматически. Со слайда возможен переход на заданный URL.
3. Divider - горизонтальная черта, отделяющая строки друг от друга
4. Empty Space - пустое пространство, чтобы разнести строки чуть дальше друг от друга
5. Feature Box - полезная фишка для перечисления, например, направлений деятельности, преимуществ или порядка каких-то действий. Выглядит примерно так: 
6. Icon - иконка, пиктограмма из состава иконочного шрифта Font Awesome (в Feature Box-ах использованы как раз иконки из Awesome).
7. Image - произвольное изображение.
8. Tabs - набор вкладок. 

1. Testimonials - инструмент для размещении на сайте отзывов клиентов. Выглядит так:

1. Text Block - произвольный текст, в который можно вставлять картинки, списки, все остальное, кроме скриптов.
2. Video - видео с Youtube или Vimeo Video.

После вставки и настройки всех аддонов нужно нажать кнопку "Сохранить" вверху слева. Чтобы вывести страницу на сайт, создаем новый пункт меню, выбираем для него тип SP Page Builder и указываем нужную страницу.

Для каждой строки, колонки и аддона можно настраивать цвета текста и фона, отступы (margin, padding), фоновые изображения, даже фоновое видео. Также можно настроить анимацию, чтобы элементы появлялись на странице с задержкой и спецэффектами.

То есть, если поразбираться с компонентом SP Page Builder, можно создавать вполне качественные презентационные страницы даже в бесплатной версии. 

Чем платная версия лучше?

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

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

Выводы

Как видите, SP Page Builder - достаточно мощный инструмент для создания презентационных страниц, который хорошо дополнит практически любой сайт. Нужно потратить некоторое время на освоение компонента, но когда вы привыкнете к его особенностям, уверен, он станет одним из ваших любимых инструментов.

Важное замечание от 29.11.2016 г.

Не повторяйте мою ошибку! В конце ноября 2016 года вышел SP Page Builder версии 2.0. В связи с этим система обновления Joomla предложила мне обновить платную версию 1.2 до 2.0, на что я согласился. В итоге, старая, но полная версия была обновлена до новой урезанной. При этом половина аддонов перестала работать. Пришлось делать откат сайта до прежнего состояния.