Содержание
SP Page Builder — мощный конструктор посадочных страниц (лендингов) на CMS Joomla. Из данного обзора вы узнаете о возможностях платной и бесплатной версии компонента SP Page Builder, а также о его функциональных особенностях.
Возможности SP Page Builder
Joomla является универсальной системой управления контентом, одинаково подходящая для создания любых типов сайтов, будь то блоги, интернет-магазины, а также лендинги (Landing Page), также известные как станицы захвата или посадочные страницы.
В целом понятие лендинга является достаточно абстрактным, и по большому счету в формате Landing Page можно оформлять любую веб-страницу коммерческой или информационной направленности, и в полной мере это осуществить позволяет компонент SP Page Builder, признанный лучшим среди аналогичных расширений по итогам битвы конструкторов Landing Page на Joomla.
Перечень функциональных возможностей компонента SP Page Builder действительно впечатляющий:
- генерация элементов веб-страниц во внешнем интерфейсе;
- настройка внешнего вида элементов без знания HTML и CSS;
- система перетаскивания элементов (Drag & Drop);
- элементы управления размером окна браузера (устройства вывода);
- 40+ (13 в бесплатной версии) элементов (аддонов);
- продвинутый медиа-менеджер;
- создание сложных структур элементов с помощью секций, строк и колонок;
- управление адаптивностью элементов в зависимости от типа устройства вывода;
- дублирование созданных элементов (аддонов);
- изменение отступов между элементами во внешнем интерфейсе;
- включение или отключение элементов в один клик;
- русский язык и другие локализации;
- возможность добавления пользовательского CSS-кода и добавления классов к элементам;
- сохранение созданных страниц в виде шаблонов;
- совместимость со сторонними компонентам K2 и J2Store;
- выставление прав доступа к отдельным элементам (аддонам);
- заполнение мета-тегов Open Graph для социальных сетей;
- возможность использования редактора JCE вместо TinyMCE;
- дополнительные элементы (аддоны) от других расширений;
- эффекты анимации для строк, колонок и отдельных аддонов.
Слишком хорошо расписано, чтобы быть правдой? На самом деле все заявленные выше возможности не голословны и в полной мере соответствуют действительности. Разработчик даже создал демо-страницу, на которой вы лично можете прощупать богатый функционал компонента.
Pro vs Lite
Компонент распространяется в 2-х версиях:
- Lite — бесплатная.
- Pro — платная (от $49).
| Возможности | Lite | Pro |
|---|---|---|
|
Количество аддонов |
13 | 49 |
|
Адаптивные макеты |
✔️ | ✔️ |
|
Шаблоны страниц |
❌ | ✔️ |
|
Аддон для модуля Joomla |
✔️ | ✔️ |
|
Медиа-менеджер |
✔️ | ✔️ |
|
Кнопки Отменить и Повторить |
✔️ | ✔️ |
|
Настройки Open Graph |
✔️ | ✔️ |
|
Совместимость со всеми фреймворками |
✔️ | ✔️ |
|
Редактор во внешнем интерфейсе |
❌ | ✔️ |
|
Отключение строк, колонок и аддонов |
❌ | ✔️ |
|
Отключение строк, колонок и аддонов |
❌ | ✔️ |
|
Вложенные строки |
❌ | ✔️ |
|
Импорт и экспорт страниц |
❌ | ✔️ |
|
Права доступа к аддонам |
❌ | ✔️ |
|
Специальные модули SP Page Builder |
❌ | ✔️ |
|
Интеграция с материалами Joomla |
❌ | ✔️ |
|
Интеграция с материалами K2 |
❌ | ✔️ |
|
Интеграция с товарами J2Store |
❌ | ✔️ |
|
Поддержка плагинов сторонних разработчиков |
❌ | ✔️ |
|
Поддержка разработчика на форуме |
❌ | ✔️ |
Аддоны SP Page Builder
Количество аддонов (элементов) на момент написания данного обзора составляет 14 для бесплатной (Lite) и более 40 для платной (Pro) версии компонента.
Каждый из аддонов являются гибко настраиваемыми, что позволяет реализовать огромное множество задумок:
| № | Аддон | Lite | Pro |
|---|---|---|---|
| 1 |
Модуль Joomla (Joomla Module) |
✔️ | ✔️ |
| 2 |
Аккордеон (Accordion) |
✔️ | ✔️ |
| 3 |
Уведомление (Alert Message) |
✔️ | ✔️ |
| 4 |
Карусель (Carousel) |
✔️ | ✔️ |
| 5 |
Разделитель (Divider) |
✔️ | ✔️ |
| 6 |
Пустой промежуток (Empty Space) |
✔️ | ✔️ |
| 7 |
Блок особенностей (Feature Box) |
✔️ | ✔️ |
| 8 |
Иконка (Icon) |
✔️ | ✔️ |
| 9 |
Изображение |
✔️ | ✔️ |
| 10 |
Вкладки (Tabs) |
✔️ | ✔️ |
| 11 |
Отзывы (Testimonials) |
✔️ | ✔️ |
| 12 |
Текстовый блок (Text Block) |
✔️ | ✔️ |
| 13 |
Видео (Video) |
✔️ | ✔️ |
| 14 |
Кнопка (button) |
✔️ | ✔️ |
| 15 |
Анимированный номер (Animated Number) |
❌ | ✔️ |
| 16 |
Материалы (Article) |
❌ | ✔️ |
| 17 |
Аудио (Audio Player) |
❌ | ✔️ |
| 18 |
Блок с номером (Block Number) |
❌ | ✔️ |
| 19 |
Группа кнопок (Button Group) |
❌ | ✔️ |
| 20 |
Карусель Pro (Carousel Pro) |
❌ | ✔️ |
| 21 |
Контактная форма (Contact Form) |
❌ | ✔️ |
| 22 |
Клиенты (Clients) |
❌ | ✔️ |
| 23 |
Обратный отсчет (Countdown) |
❌ | ✔️ |
| 24 |
Галерея Flickr (Flickr Gallery) |
❌ | ✔️ |
| 25 |
Вращающийся блок (Flip Box) |
❌ | ✔️ |
| 26 |
Галерея (Gallery) |
❌ | ✔️ |
| 27 |
Карты Google (Google Map) |
❌ | ✔️ |
| 28 |
Заглавие (Heading) |
❌ | ✔️ |
| 29 |
Группа иконок (Icons Group) |
❌ | ✔️ |
| 30 |
Изображение с текстом (Image Content) |
❌ | ✔️ |
| 31 |
Instagram галерея (Instagramm Galley) |
❌ | ✔️ |
| 32 |
Всплывающее окно (Modal Popup) |
❌ | ✔️ |
| 33 |
Навигация (Navigation) |
❌ | ✔️ |
| 34 |
Форма подписки (Opt-in Form) |
❌ | ✔️ |
| 35 |
Персона (Person/Team) |
❌ | ✔️ |
| 36 |
Круговая шкала (Pie Progress) |
❌ | ✔️ |
| 37 |
Стоимость услуг (Pricing Table) |
❌ | ✔️ |
| 38 |
Индикатор выполнения (Progress Bar) |
❌ | ✔️ |
| 39 |
HTML код (Raw HTML) |
❌ | ✔️ |
| 40 |
Социальные сети (Social Share) |
❌ | ✔️ |
| 41 |
Soundcloud (Soundcloud) |
❌ | ✔️ |
| 42 |
Отзывы Pro (Testimonials Pro) |
❌ | ✔️ |
| 43 |
Временная шкала (Timeline) |
❌ | ✔️ |
| 44 |
Лента Twitter (Twitter Feed) |
❌ | ✔️ |
Создание лендингов в SP Page Builder
Представленные ниже видеоролики наглядно демонстрируют процесс создания лендингов разного уровня сложности с помощью SP Page Builder во внешнем интерфейсе, подтверждая высокую функциональность компонента.
Процесс генерации лендингов в SP Page Builder через панель управления также прост и достаточно увлекателен. Условно можно разделить его на следующие этапы:
- Добавление строки
Сразу предлагается разбить строку на определённое количество колонок с заданными пропорциями. Делается в пару кликов:
- Добавление аддонов или новых строк в колонки
- Настройка элементов: строк, колонок и аддонов
Здесь к вашим услугам все возможности по настройке стилей отображения: от размеров шрифта и отступов до эффектов анимации.
Адаптивность элементов в SP Page Builder
Функционал SP Page Builder позволяет производить следующие настройки адаптивности отдельно для мобильных устройств, десктопов и планшетов:
- отключать любые элементы (строки, колонки и аддоны):
- устанавливать размеры колонок:
- определять стили для аддонов:
Недостаёт, пожалуй, только возможности настройки эффектов анимации в зависимости от устройства вывода. Будем надеяться, что руки разработчиков дотянуться и до этого.
В качестве заключения
SP Page Builder небезосновательно заслуживает звание лучшего генератора лэндингов для Joomla 3 и выше, с каждой новой версией оставляя конкурентов всё дальше позади.
Упоминаемые термины:
CSS, HTML, Joomla, Модуль, Внешний интерфейс, Медиа-менеджер, Open Graph, JCE, K2, SP Page Builder
Подскажите такой вопрос: связка Helix Ultimate 2.0 + SP Page Builder 4. Например, я настроил все основные стили (шрифты, размер шрифтов, заголовки, цвет ссылок и т.п.) в Helix, как можно эти настройки использовать, создавая страницы в SP Page Builder или придется в SP Page Builder, заново указанные настройки настраивать?
Внутри аддонов SPPB есть свои настройки, у которых приоритет. Если, например, в каком-нибудь аддоне установлен размер шрифта, то будет применяться он, а не тот, который вы указали в настройках шаблона. Если хотите, чтобы применялись преимущественно настройки шаблона, то используйте аддон HTML-код, в нём нет настроек стилей 🙂
Вот еще, не могу никак понять, работаю в SP PB (указанная выше связка установлена локально) :
1. Все очень медленно работает;
2. Некоторые стили аддонов не применяются, т.е. в режиме редактирования они применились, а в режиме просмотра эти стили отсутствуют (для примера, цвет bullets в аддоне Slider);
3. Некоторые настройки стилей могут включиться только с 3-го или 4-го раза;
4. SP PB не хочет заходить в раздел folders (видит только свои папки что-ли) и как настроить, чтобы он складывал файлы в одно место (папку), а не раскидывал по папкам с номером года, месяца и т.д.?
1. Медленно работать может по самым разным причинам.
2. Проблема, вероятно, в конфликтах стилей. В этом случае проблема решается добавлением кастомных стилей в настройках аддона.
3. Причин также может быть много. Возможно, дело в кэшировании и оптимизации файлов, всё это нужно отключить, если сайта находится в разработке. В настройках SPPB убедитесь, что отключен Production Mode, и в настройках шаблона во вкладке Advanced → Compression настройки должны быть отключены, а в Advanced → SCSS опцию Compile SCSS to CSS следует включить.
4. Когда открывается медиа-менеджер SPPB, перейдите в Browse folders, это корневая папка /images/. Туда можете предварительно загружать картинки, а потом применять.
Понятно, спасибо. Вообще SPPB 3 более стабильная версия.
Как лучше обновиться? Не хочется вручную все страницы переносить.
SPPB 3 работает на Joomla 4, в том числе на данном сайте. Можете заказать услугу по обновлению Joomla у нас, если вдруг не справитесь самостоятельно.
Я пытался учтановить его из дистрибутива на 4 джумлу. Не хочет - виснет джумла.
Можно ли на 4-ю перейти с такой старой версией SPPB?
И, кстати, сколько ваша услуга по переносу стоит?
Разумеется, нужно использовать актуальные версии расширений. Стоимость услуги по переносу зависит от множества факторов, в основном от количества и версий применяемых расширений, которые нам будет необходимо обновить вместе с самой CMS. Вы можете заполнить заявку на обновление Joomla здесь, и мы рассмотрим её.