- Купить SP Page Builder Pro у разработчика (без посредников и переплат).
SP Page Builder Pro – платный русскоязычный конструктор страниц Джумла с множеством аддонов (объектов) и настроек.
Видео обзор
- HTML Код – 00:01:19.
- Вкладка Style (стили) – 00:02:37.
- Вкладка Advanced (расширенные) – 00:04:2
- Анимированный заголовок (Animated Heading) – 00:07:17.
- Анимированный Номер – 00:09:18.
- Аудио – 00:10:37.
- Вращающийся Блок – 00:11:38.
- Временная Шкала – 00:13:33.
- Всплывающее окно – 00:14:34.
- Галерея – 00:15:58.
- Группа иконок – 00:17:39.
- Open Street Map – 00:19:26.
Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки можете найти на каналах сайта Aleksius.com в YouTube и Mail.ru.
Ссылки из видео:
- «Обзор SP Page Builder Pro (часть 3). Конструктор страниц для Joomla».
- Аддоны, доступные в бесплатной версии компонента.
- Галереи для Joomla.
Компонент позволяет создавать страницы со сложным макетом, анимацией и различными интерактивными объектами без знаний программирования или вёрстки. Это достигается за счёт большого количества разных опций. Есть возможность добавления собственного CSS кода.
В предыдущей статье мы рассмотрели параметры, доступные для страниц, строк и столбцов в платной версии компонента. В этой части поговорим о его аддонах.
В обзоре участвует последняя, на момент написания статьи (16.01.2021), русскоязычная версия SP Page Builder Pro 3.7.8 в Joomla 3.9.24. Сайт с быстрым стартом на базе Helix Ultimate 1.1.2.
Аддоны SP Page Builder Pro
Настройки каждого объекта разделены на три вкладки. Вкладки Style (стили) и Advanced (расширенные) одинаковы для разных объектов. Мы рассмотрели их только на примере одного объекта – HTML Код. Ниже приведены ссылки на все рассмотренные аддоны:
HTML Код
Данное дополнение/объект (аддон) позволяет вставлять произвольный HTML код. Настройки этого и других аддонов разделены на три вкладки.
- General (основное). На этой вкладке (рисунок ниже) собраны основные настройки объекта. Основная их часть отличается в зависимости от каждого объекта. В основном, у каждого объекта на этой вкладке можно задать заголовок объекта для админки сайта, заголовок объекта для фронтальной части сайта и CSS класс, чтобы применить к нему какие-то специальные стили.
- Style (стили).
- Advanced (расширенные).
Вкладка Style (стили), как правило, одинакова для разных объектов и содержит общие настройки стилей (рисунок ниже): цвет текста, ссылок, фоновое изображение/цвет/градиент и эффект наложения цвета/градиента/изображения. Также можно задать рамку, тень, внутренний и внешний отступы, настроить анимацию появления объекта и задать свой собственный CSS код.
Вкладка Advanced (расширенные), так же, как и предыдущая вкладка, содержит настройки, которые повторяются для разных объектов. Тут (рисунок ниже) Вы сможете задать позицию объекта (абсолютную, фиксированную или относительную), смещение объекта относительно своей начальной позиции (по оси X и Y) и его положение в плане наложения на другие объекты (при смещении позиции). Данные настройки рекомендую использовать только в крайних случаях, так как они могут «поломать» макет страницы и могут вести себя не так, как Вы ожидаете на мобильных устройствах.
Также на этой вкладке можно настроить ширину объекта, скрыть его на компьютерах, планшетах или телефонах и задать уровень доступа пользователей фронтальной части сайта к этому объекту. То есть, можно, например, скрыть какой-то объект от незарегистрированных пользователей.
На рисунке ниже показан пример изменения позиции объекта на странице.
Ниже на рисунке представлены настройки позиции.
На рисунке ниже показан пример объекта HTML Код на странице сайта.
Open Street Map
Данный аддон позволяет добавить карту Open Street Map с указанием одной или нескольких точек на ней (рисунок ниже).
В настройках аддона (рисунок ниже) Вы сможете выбрать стиль карты (доступно 18), задать высоту карты, создать точки на ней (с возможностью указания текстовых подписей), указать изображение маркера точки, установить начальный масштаб карты и включить разные элементы управления картой.
Как видите, конструктор Джумла предоставляет достаточно много настроек для объекта. Что позволяет более гибко его сконфигурировать без применения CSS.
Анимированный заголовок (Animated Heading)
Этот объект позволяет создать текст, часть которого может быть статичной, а часть анимированной (рисунок ниже). Статическая часть может быть до и/или после анимированной.
В настройках данного аддона SP Page Builder (рисунок ниже) можно задать анимированный и не анимированный текст, его HTML тег (H1-H6, P, DIV, SPAN) и изменить стили: размер шрифта, цвет, семейство, начертание и т.д. Настройки стилей доступны отдельно для анимированного и не анимированного текста.
Анимированный Номер
Данный аддон позволяет создавать «бегущие» цифры (рисунок ниже).
В его настройках (рисунок ниже) Вы задаёте конечное число, длительность анимации и аддон автоматически ведёт отсчёт от 0 до заданного конечного числа в течение заданного времени. Также можно добавить к числу единицы измерения, текст, символ и т.д. В настройках можно изменить цвет цифры, размер её шрифта, семейство шрифтов, толщину, позицию по отношению к заголовку цифры и настройки оформления самого заголовка цифры.
Аудио
Для размещения на странице плеера с возможностью прослушивания музыки прямо в окне браузера служит объект Аудио (рисунок ниже). Обратите внимание, что внешний вид и функциональность плеера зависит от браузера.
В настройках аддона (рисунок ниже) можно указать ссылку на OGG файл или закачать свой собственный MP3 файл. Плюс, есть возможность активировать автовоспроизведение, что я бы не рекомендовал, и повторение трека.
Вращающийся Блок
Данный объект позволяет создать прямоугольник с контентом с двух сторон. Лицевая сторона отображается сразу при появлении объекта, а оборотная – при наведении или нажатии на объект. На рисунке ниже показаны три состояния объекта.
В настройках объекта (рисунок ниже) Вы можете выбрать действие, при котором нужно поворачивать прямоугольник, задать содержимое лицевой и обратной стороны (можно применять HTML теги), указать стиль и направление вращения, а также задать фоновое изображение или цвет лицевой и обратной стороны прямоугольника.
Временная Шкала
Этот аддон позволит создать «временную шкалу» или красиво представить поэтапный процесс (рисунок ниже).
В настройках объекта (рисунок ниже) можно задать цвет шкалы и создать «этапы». Каждый «этап» состоит из названия, описания (тестовый редактор или HTML теги) и даты (можно указать не дату, а любой текст).
Всплывающее окно
Данное дополнение позволяет разместить кнопку на странице, по нажатию на которую появится всплывающее окно (рисунок ниже).
В настройках дополнения (рисунок ниже) Вы сможете задать метку кнопки, её стиль, положение, размер, форму и иконку для неё. Также можно указать, что именно хотите отображать во всплывающем окне: текст, изображение или видео (с YouTube или Vimeo).
Галерея
Если Вам нужно создать небольшую галерею, то одноимённый объект отлично для этого подойдёт (рисунок ниже). Если изображений много, и они часто будут меняться/добавляться, то я бы рекомендовал рассмотреть какой-то специализированный компонент галереи с модулем.
В настройках аддона (рисунок ниже) Вы сможете указать ширину и высоту миниатюр изображений и добавить сами изображения. Добавление изображений происходит по одному. Можно сделать так, что по нажатию на миниатюру будет открываться увеличенное изображение (не обязательно то же, что и на миниатюре).
Группа иконок
Данный аддон предназначен для создания одной или нескольких иконок (не изображений) с текстом (рисунок ниже).
В настройках аддона можно задать размер шрифта текста и иконки, саму иконку, ссылку по нажатию на неё, цвет иконки, шрифта и фона иконки, рамку, отступы и другие параметры, включая цвета элементов при наведении на блок иконки.
В следующей статье «Обзор SP Page Builder Pro (часть 5). Конструктор сайтов Joomla» мы рассмотрим ещё несколько аддонов данного компонента.
| Похожие материалы |
|---|
| Автор статьи – Хорошевский Алексей |
|---|
 Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Публикации и работа: |
Полезные ссылки:
- Купить Pro версию у разработчика (без посредников и переплат).
- Официальный сайт компонента.
- Документация компонента (на нагл.).
