Обзор SP Page Builder Lite (часть 1). Конструктор страниц Joomla

• Купить SP Page Builder Pro у разработчика (без посредников и переплат).

• Видео обзор.
• Основные возможности и особенности.
• Сравнение Pro и Lite версий.
• Страницы SP Page Builder.
  • Аддоны.

SP Page Builder Lite – бесплатный русскоязычный конструктор страниц Joomla, который позволяет создавать страницы со сложными макетами (модульные сетки) и разными аддонами (дополнениями) без навыков вёрстки и программирования. Это стало возможным за счёт наличия большого количества инструментов и настроек.

Видео обзор

• Страницы – 00:01:00.
• Создание макета – 00:03:08.
• Настройки строки – 00:04:44.
• Редактирование из фронтальной части сайта – 00:05:33.
• Настройки колонок – 00:10:57.
• Joomla Модуль – 00:14:31.
• Карусель – 00:17:33.
• Текстовый блок – 00:19:41.

Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки можете найти на каналах сайта Aleksius.com в YouTube и Mail.ru.

Ссылки из видео:

• Принцип 12-ти колоночной сетки Bootstrap.

SP Page Builder Lite позволяет создавать и редактировать страницы прямо во фронтальной части сайта. Поддерживает адаптивный дизайн и оснащён своим медиа-менеджером для управления файлами (изображения, видео, аудио и т.д.). Есть пункт меню для вывода созданных страниц. Также есть модуль, внутри которого можно разместить аддоны внутри созданной Вами модульной сетке.

Для примера приведу сайты на SP Page Builder Pro (список неисчерпывающий):

• Edulif.
• Dylan.
• Unei.
• Educon.
• OneClip.
• MegaDeal II.

На сайте разработчика есть ещё много примеров. В цикле уроков по самостоятельному созданию сайтов на Joomla 4 рассмотрен пример работы с SP Page Builder Lite.

В предыдущей статье «Обзор RSPageBuilder. Конструктор страниц Joomla» мы уже рассматривали аналогичное бесплатное расширение. В нём доступно больше аддонов, чем в SP Page Builder Lite, но на данный момент оно менее функциональное, чем SP Page Builder Lite. Также предлагаю познакомиться с ещё одним альтернативным расширением - YOOtheme Pro.

На официальном сайте расширений Joomla 264 отзыва, расширение добавлено 17 декабря 2014 года.

• Общий рейтинг – 5 из 5.
• Функциональность – 5 из 5.
• Простота использования – 5 из 5.
• Поддержка – 4,5 из 5.
• Документация – 4,5 из 5.

В обзоре участвует последняя, на момент написания статьи (28.06.2020), русскоязычная версия SP Page Builder Lite 3.6.7 в Joomla 3.9.19. Шаблон фронтальной части сайта – Helix Ultimate 1.1.2. А если Вас интересует 4-я версия данного расширения, рекомендую ознакомиться со статьёй «Как пользоваться SP Page Builder 4 (часть 1)».

Также есть платная версия SP Page Builder Pro – от 49 $ (на 28.06.2020). У неё гораздо больше возможностей. Подробнее о различиях платной и бесплатной версии можно узнать ниже в статье.

Основные возможности и особенности

Перечень неисчерпывающий и касается бесплатной версии SP Page Builder Lite.

• Редактирование страниц в режиме реального времени во фронтальной части сайта без необходимости переключения на страницу с результатами изменений (рисунок ниже).
• Поддержка адаптивного дизайна (на базе Bootstrap 4). Можно скрывать те или иные элементы страницы для компьютеров, планшетов или смартфонов. Даже админка компонента и инструменты для редактирования страниц во фронтальной части сайта поддерживают адаптивный дизайн.

• Создание сложных, в плане дизайна, страниц без навыков вёрстки и программирования. Просто перетаскивая объекты и меняя их настройки.
• Возможность дублирования строк и аддонов.
• Инструменты отмены и повторения действия.
• Страницы можно разделять по категориям.
• Возможность настройки анимации строк и столбцов макета.
• 14 аддонов (дополнений) (рисунок ниже), включая тот, который позволит вставлять модули Joomla внутрь макета страницы SP Page Builder.

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

• Поддержка шрифтов Google и FontAwesome 4, 5.
• Поддержка мультиязычности Joomla и RTL.
• Поддержка протокола Open Graph.
• Возможность задавать свои CSS стили.
• Поддержка API для Карт Google. Подробнее о том, как можно получить API ключ карт, Вы можете прочесть в статье «Обзор DJ-Classifieds 3.7.5. Новшества и получение API Google карты».
• Поддержка разграничения прав доступа к страницам на базе ACL Joomla.
• Переведён на русский, украинский, английский, немецкий, французский и другие языки.

Сравнение Pro и Lite версий

Список отличий между бесплатной и платной версиями неисчерпывающий. Таблица обновлена 08.01.2021.

Страницы SP Page Builder

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

У страницы SP Page Builder есть свои настройки (рисунок ниже). Тут Вы можете указать заголовок, описание и изображение для Open Graph тегов, можно задать свои CSS стили, которые будут работать в рамках этой страницы, а также можно указать категорию страницы, язык и настроить права доступа.

Создание страниц начинается с модульной сетки –  создания строк и столбцов макета (рисунок ниже). Макет базируется на принципе 12-ти колоночной сетки Bootstrap. Немного подробнее об этом можно прочесть в статье «Обзор JM Cleaning Company. Шаблон сайта клининговой компании».

Создав строку, Вы сможете указать её разделение на колонки. Можно выбрать предварительно заданный макет колонок или указать свой. Например, «3+3+1+5» означает, что в строке будет 4 колонки. Первая и вторая будут занимать по 3 части от общей ширины строки, третья – одну, а 4-я – пять частей. Фактическая ширина колонки зависит от ширины строки. Если ширина строки недостаточно большая, то колонки могут выстраиваться одна под другой.

Внутри колонок можно разместить один или несколько дополнений/аддонов. Дополнения располагаются друг под другом (в рамках одной колонки).

Конструктор контента позволяет дублирования строк. Очень удобно, если надо создать аналогичную строку с похожим набором столбцов и дополнений.

У каждой строки есть свои параметры, разделённые на несколько вкладок.

Вкладка General (основная) (рисунок ниже). Конструктор страниц Joomla позволяет задать заголовок, подзаголовок строки, их выравнивание, выравнивание строки, сделать строку «резиновой» (ширина зависит от ширины окна браузера или области основного контента шаблона), а также задать ID или CSS класс. За счёт CSS класса можно применить стили конкретно к элементам и дополнениям этой строки.

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

Вкладка Responsive (адаптивный) (рисунок ниже). Конструктор контента даёт возможность отключить отображение строки и всех её дополнений на мобильном, планшете или компьютере.

Вкладка Animation (анимация) (рисунок ниже). Тут есть опции для настройки анимации строки (эффект для её появления на странице).

У колонок тоже есть свои параметры, разделённые на несколько вкладок.

Вкладка General (основная) (рисунок ниже). Конструктор страниц Joomla содержит настройки цвета текста, фона, фонового изображения, отступов тени, а также можно задать CSS класс колонки.

Обратите внимание на иконку компьютера, планшета и телефона рядом с опциями внутренних отступов. Нажимая на разные иконки Вы сможете вводить отступы для разных устройств.

Вкладка Responsive (адаптивный) (рисунок ниже). Аналогична одноимённой вкладке строки, но также содержит опции, которые позволяют указать на сколько «под колонок» должна делиться колонка на мобильном или планшете.

Это удобно, когда в коленке на компьютере красиво отображается дополнение, так как оно ограничено шириной с учётом рядом стоящих колонок строки. А когда сайт отображается, например, на планшете, дополнения в нём могут стать один под другим. Это происходит по причине того, что ширины строки становится недостаточно. При этом дополнения в нём будут растянуты по ширине всей строки. Вот тут и приходят на помощь опции Планшетный макет и Мобильный макет.

Вкладка Animation (анимация). Аналогична одноимённой вкладке настроек строки, но относится к колонке.

Аддоны

В строках и колонках макета страницы располагаются аддоны/дополнения (рисунок ниже). В бесплатной версии конструктора контента их 14:

1. Joomla Модуль.
2. Карусель.
3. Текстовый блок.
4. Отзывы.
5. Вкладки.
6. Аккордеон.
7. Иконка.
8. Блок особенностей.
9. Пустой промежуток.
10. Разделитель.
11. Изображение.
12. Видео.
13. Кнопка.
14. Уведомление.

У каждого из дополнений достаточно много настроек. Некоторые из них аналогичны для каждого из объектов. Это касается опций на вкладках Style и Advanced. Рассмотрим только наиболее интересные, на мой взгляд, настройки каждого из дополнений.

Joomla Модуль. Это дополнение, которое позволяет выводить один из модулей Joomla (или позицию модулей), который Вы должны предварительно создать в менеджере модулей. В настройках, на вкладке General (основная) (рисунок ниже) Вы сможете изменить стиль заголовка, отступы и другие параметры оформления. Но самое главное, Вы сможете указать, какой модуль или позицию модулей необходимо отображать.

Также как для строк и колонок, тут можно задать свой CSS класс и применять стили только к конкретному дополнению. Обратите внимание, что в настройках модулей тоже можно задавать классы для указания стилей содержимого модуля.

На вкладке Style (стиль) (рисунок ниже) Вы сможете задать фон, рамку, изменить внешние и внутренние отступы, настроить тень, анимацию и изменить другие параметры дополнения.

Вкладка Advanced (расширенная) (рисунок ниже) предоставляет опции для скрытия дополнения на тех или иных устройствах и возможность задавать ширину дополнения в зависимости от устройства. Тут же можно задать ограничение по уровню доступа к дополнению, тем самым скрыв его, например, от незарегистрированных пользователей.

Карусель. При помощи этого дополнения можно отображать карусель изображений с заголовком, подписью и кнопкой (рисунок ниже).

В настройках дополнения (рисунок ниже) Вы можете задать опции всей карусели в целом: автозапуск, скорость смены слайдов, элементы навигации и т.д.. Также тут можно создать и настроить отдельные элементы – слайды (их можно дублировать, менять порядок следования и удалять). Для каждого слайда отдельно конструктор контента позволяет задать ряд параметров: заголовок, описание, кнопку со ссылкой по её нажатию (внешний вид кнопки тоже можно настроить), шрифты разных элементов (цвет, начертание, гарнитура), поля, отступы и т.д.. При создании описания доступен визуальный текстовый редактор.

Опции на вкладках Style и Advanced аналогичны опциям на этих же вкладках, которые мы рассмотрели для дополнения Joomla Модуль.

Текстовый блок. При помощи этого дополнения конструктор страниц Joomla позволяет размещать текстовые области. Текст можно форматировать при помощи визуального текстового редактора (рисунок ниже).

В настройках дополнения можно менять почти все те же параметры, что и в рассмотренных ранее дополнениях. Отличительной особенностью является опция Буквица. Пример работы опции показан на рисунке выше (красная большая буква «I» в начале абзаца).

В следующей статье «Обзор SP Page Builder Lite (часть 2). Конструктор контента для Joomla» мы рассмотрим оставшиеся аддоны, категории, настройки самого компонента и его медиа менеджер.

Автор статьи – Хорошевский Алексей

Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Контакты: +38 095 840 24 29 +38 095 840 24 29 +38 095 840 24 29 email@aleksius.com Социальные сети: LinkedIn Facebook YouTube (Twitter) Публикации и работа: Google Академия Scopus Upwork Freelance.ua

Полезные ссылки:

• Официальный сайт SP Page Builder.
• Скачать SP Page Builder Lite.
• Документация SP Page Builder (на нагл.).
• Купить SP Page Builder Pro у разработчика (без посредников и переплат).