- Купить SP Page Builder Pro у разработчика (без посредников и переплат).
SP Page Builder Pro – платный русскоязычный компонент, который позволит создать лендинг на Джумла без знаний HTML и CSS. Вам будет доступно множество инструментов и настроек, которые позволят реализовать простой или сложный макет страницы и наполнить его различными объектами.
Видео обзор
- Прокрутка статей (Articles Scroller) – 00:00:52.
- Слайд-шоу (Slideshow) – 00:03:14.
- Социальные Сети – 00:06:20.
- Стоимость услуг – 00:07:33.
- Таблица (Table) – 00:09:54.
- Форма Выбора – 00:14:07.
- Цвет Наложения – 00:17:19.
- Числовой Блок – 00:19:30.
- Свой собственный аддон – 00:20:23.
Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки можете найти на каналах сайта Aleksius.com в YouTube и Mail.ru.
Ссылки из видео:
В предыдущей статье мы рассмотрели такие аддоны/объекты: Конструктор форм, Контактная Форма, Круговая Шкала, Макеты с изображением (Image Layouts), Материалы, Навигация, Обратный отсчёт, Отзывы Pro, Персона и Прейскурант. В этой части закончим обзор доступных в SP Page Builder Pro аддонов.
В обзоре участвует последняя, на момент написания статьи (05.02.2021), русскоязычная версия SP Page Builder Pro 3.7.9 в Joomla 3.9.24. Сайт с быстрым стартом на базе Helix Ultimate 1.1.2.
Аддоны SP Page Builder Pro
Настройки каждого объекта разделены на три вкладки. Вкладки Style (стили) и Advanced (расширенные) одинаковы для разных объектов. Мы рассмотрели их только на примере одного объекта – HTML Код. Ниже приведены ссылки на все рассмотренные аддоны:
Прокрутка статей (Articles Scroller)
Данный аддон позволяет отображать материалы Joomla или K2 в различном виде. Доступно три вида/режима. На рисунке ниже показаны примеры всех трёх видов отображения материалов. В предыдущей статье мы уже рассматривали аналогичный аддон Материалы, который позволяет отображать материалы в необычном виде.
В настройках аддона (рисунок ниже) можно выбрать один из трёх видов/режимов отображения материалов, указать источник (материалы Joomla или K2), категорию, сортировку, включить/отключить элементы управления переключения между материалами, изменить цвета и шрифты разных элементов аддона, задать толщину рамки и настроить другие параметры.
Для разных видов/режимов отображения материалов часть настроек аддона отличается друг от друга. На рисунке выше показан пример опций для режима News Ticker, а ниже – для News Scroller (те из них, что отличаются).
На рисунке ниже показан пример отличающихся настроек для режима News Carousel.
Слайд-шоу (Slideshow)
Этот аддон предназначен для вывода слайд-шоу с текстом и ссылкой (рисунок ниже). А можно и без текста и ссылки.
У него очень много настроек. На рисунке ниже показан пример общих настроек аддона. Тут Вы сможете создать слайды, задать высоту всего слайд-шоу, включить автозапуск, настроить интервал, включить таймер, настроить его внешний вид, изменить настройки шрифтов и цветов разных элементов, задать отступы и многое другое.
В настройках каждого слайда (рисунок ниже) можно указать изображение или видео в качестве фото слайдера, можно задать наложение цвета или градиента на фон и задать другие настройки.
У каждого слайда может быть один или несколько следующих элементов: заголовок, текст, изображение, кнопка, иконка. У каждого из этих элементов есть свои настройки. На рисунке ниже показан пример настроек содержимого для заголовка.
На рисунке ниже показан пример настроек анимации элемента.
Плюс, у каждого элемента есть ряд настроек его визуального оформления (рисунок ниже).
В настройках слайд-шоу SP Page Builder Pro есть опции для изменения внешнего вида элементов управления слайдами (рисунок ниже).
При этом есть возможность сконфигурировать отображение точек и стрелочек управления. Как для нормального состояния, так и для активного (текущего слайда). На рисунке ниже показан пример настроек для стрелочек в активном состоянии.
Социальные Сети
Создавая лендинг на Джумла Вам может понадобиться разместить на странице кнопки шаринга в социальные сети. Для этого и предназначен одноимённый аддон (рисунок ниже).
Для создания кнопок шаринга можно также использовать сторонние сервисы, например, AddThis. Если заботитесь о скорости загрузки страницы, то подумайте над плагином Social2s FREE. А если нужен автоматический кросспостинг, то компонент Social Backlinks может Вам с этим помочь.
В настройках аддона (рисунок ниже) Вы можете настроить список кнопок социальных сервисов: ВКонтакте, Facebook, Twitter, WhatsApp и другие. Всего их 10. Также в настройках можно задать выравнивание кнопок, их стиль, рамку и другие опции.
Стоимость услуг
Конструктор страниц Joomla позволит создавать «таблицу цен» на услуги (рисунок ниже). Обратите внимание, что я не заботился о внешнем виде аддонов (ниже на рисунке их три). Вставил с настройками по умолчанию.
Для создания таблицы цен также рекомендую ознакомиться с расширением Droptables.
На рисунке ниже показан пример настроек одного из аддонов. Тут есть масса настроек для изменения внешнего вида шрифтов, цветов и отступов для цены, валюты, длительности/срока, описания услуги и кнопки. Можно задавать фон и указывать цвета разных элементов в нормальном и наведённом состоянии.
Таблица (Table)
Иногда, создавая лендинг на Джумле, может понадобиться разместить таблицу на странице. Специально для этого служит одноимённый аддон (рисунок ниже). Можно выводить не просто таблицу, а таблицу с возможностью поиска и сортировки по столбцам. Плюс, можно включить разделение таблицы на страницы/части.
При желании можно включить адаптивный дизайн таблицы (рисунок ниже). Но если такой вариант не устраивает, то можно это отключить, и тогда будет отображаться горизонтальная прокрутка для самой таблицы, но не страницы. А это не нарушит Ваш адаптивный дизайн.
Для создания таблиц и графиков также рекомендую ознакомиться с расширением Droptables.
В настройках содержимого аддона (рисунок ниже) Вы создаёте заголовок таблицы (по столбцам) и тело «страницы» (по строкам). В качестве элементов таблицы (содержимого ячеек) может выступать один или несколько аддонов SP Page Builder Pro. Если в ячейках таблицы нужно отображать обычный текст, то можно выбрать аддон Текстовый блок.
Тут же Вы можете включить разделение таблицы на части, активировать поиск, сортировку и сконфигурировать другие параметры.
Также у таблицы есть масса настроек стилей (рисунок ниже). При этом они разделены на стили заголовка таблицы и на стили содержимого таблицы. Также тут есть настройки внешнего вида поиска, пагинации и других элементов.
Форма Выбора
Этот аддон позволяет создать форму подписки на рассылку. Но для его работы нужна интеграция с одной из «платформ» e-mail рассылки:
В моём примере я выбрал AcyMailing, так как на сайте установлен компонент AcyMailing Enterprise 7.1.2. Для интеграции с другими сервисами рассылок Вам сперва нужно там зарегистрироваться, создать рассылки, всё настроить и получить API ключ, который нужно добавить в настройки аддона SP Page Builder Pro.
В предыдущей статье мы уже рассматривали аддоны форм, которые есть в SP Page Builder Pro: Конструктор форм и Контактная Форма.
В настройках аддона Форма Выбора (рисунок ниже) можно выбрать платформу подписок, указать, на какой список или списки нужно подписать пользователя, включить капчу (если она настроена в плагинах Joomla), включить отображение флажка согласия с политикой конфиденциальности, настроить макет формы и выбрать отображение формы, как обычно или в виде всплывающего окна после определённого времени нахождения пользователя на странице. Также можно изменить выравнивание полей, изменить их стили, добавить иконку или картинку, дописать поясняющий текст, изменить настройки кнопки подписки и многое другое.
Цвет Наложения
Данный аддон позволяет выводить изображение с наложенным на него цветом. При наведении на изображение (рисунок ниже) может появляться текст и кнопка, а также меняться наложенный цвет и смещаться изображение.
В настройках аддона (рисунок ниже) можно задать изображение, цвет или градиент, который на него накладывается, а также цвет или градиент, который появляется над изображением при наведении на него курсора мыши.
Также можно задать анимацию изображения при наведении на него курсора мыши, заголовок, подзаголовок, кнопку со ссылкой, плюс, изменить параметры шрифтов, цветов и отступов данных элементов.
Числовой блок
Этот аддон SP Page Builder Pro позволяет отображать блок с цифрой, заголовком и подзаголовком. На рисунке ниже показаны три таких аддона.
В настройках (рисунок ниже) Вы сможете задать номер, заголовок и подзаголовок. Плюс, сможете настроить выравнивание блока.
В настройках стилей (рисунок ниже) можно отдельно задать оформление для цифры, заголовка и подзаголовка. Доступно изменение цвета, шрифта, отступов и т.д.
Свой собственный аддон
Если на одной странице Вы настроили какой-то из аддонов под свои нужды, то можете его сохранить (рисунок ниже), задав собственное имя.
А затем можете добавить его на любую страницу (рисунок ниже).
В этой и предыдущих статьях (sp-page-builder) мы рассмотрели все аддоны, доступные в SP Page Builder Pro 3.7.9, кроме тех, которые требуют подключения к сторонним сервисам:
- Instagram Галерея.
- Галерея Flickr.
- Лента Twitter.
- Сайт Soundcloud.
В следующей статье «Обзор SP Page Builder Pro (часть 8). Конструктор лендингов для сайтов на Joomla» мы рассмотрим модуль и меню компонента, а также поговорим об опциях для оптимизации скорости загрузки страниц, сделанных на этом компоненте.
| Похожие материалы |
|---|
| Автор статьи – Хорошевский Алексей |
|---|
 Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Публикации и работа: |
Полезные ссылки:
- Купить Pro версию у разработчика (без посредников и переплат).
- Официальный сайт компонента.
- Документация компонента (на нагл.).
