- Купить SP Page Builder Pro у разработчика (без посредников и переплат).
SP Page Builder Pro – платный русскоязычный конструктор сайта для Джумла с множеством аддонов.
Видео обзор
- Группа Кнопок – 00:01:08.
- Заглавие – 00:02:44.
- Изображение с Текстом – 00:03:59.
- Индикатор Выполнения – 00:05:07.
- Карты Google – 00:05:55.
- Карусель Pro – 00:10:14.
- Карусель изображений (Image Carousel) – 00:12:15.
- Карусель отзывов (Testimonial Carousel) – 00:15:1
- Карусель сотрудников (Team Carousel) – 00:17:1
- Клиенты – 00:19:48.
Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки можете найти на каналах сайта Aleksius.com в YouTube и Mail.ru.
Ссылки из видео:
- «Обзор SP Page Builder Pro (часть 4). Аддоны».
- Объект HTML Код.
- Аддон Open Street Map.
- Получить API ключ Карт Google.
- Cервис «Google Мои карты».
- Отзывы для Joomla.
Аддон – это объект/элемент на странице, например, картинка, текст, форма, видео, кнопка и т.д. У каждого аддона, как и у строк, столбцов и страниц компонента есть масса настроек. Благодаря этому можно создать страницу со сложным макетом, не прибегая к вёрстке или программированию.
Отдельно стоит отметить наличие десятков готовых шаблонов страниц, строк и даже сайтов.
В предыдущей статье мы уже говорили о нескольких аддонах компонента. В этой части продолжим их рассматривать.
В обзоре участвует последняя, на момент написания статьи (22.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 Код. Ниже приведены ссылки на все рассмотренные аддоны:
Группа Кнопок
Данный аддон позволяет разместить на странице одну или несколько кнопок (рисунок ниже).
В настройках (рисунок ниже) можно задать выравнивание кнопкам и расстояние между ними. Для каждой кнопки можно задать ссылку, текст, стиль, размер, форму, иконку и её позицию. Плюс, можно задать начертание шрифта подписи.
Заглавие
Этот аддон позволяет создавать заголовки в разных тегах (H1-H6, P, SPAN, DIV). У заголовков может быть иконка (рисунок ниже).
В настройках объекта (рисунок ниже) можно задать текст заголовка, его HTML тег, ссылку по нажатию на заголовок, настройки шрифтов, внешние и внутренние отступы, иконку, её позицию, цвет и другие опции.
Изображение с Текстом
При помощи данного объекта/аддона можно создать блок (рисунок ниже), содержащий текст, изображение, заголовок и кнопку (в любом сочетании).
В настройках данного аддона SP Page Builder Pro (рисунок ниже) можно задать изображение, заголовок (с указанием его HTML тега (H1-H6)), его размер, шрифт, начертание, цвет и т.д.. Также можно задать сам текст (с применением визуального текстового редактора) и кнопку со ссылкой и иконкой. Для кнопки можно настроить размер, форму и другие параметры.
Индикатор Выполнения
Конструктор сайта Джумла содержит объект, который позволяет разместить на «странице полосу прогресса» (рисунок ниже).
В настройках этого объекта (рисунок ниже) можно задать процент заполнения шкалы, её высоту, стиль, текстовую подпись и включить отображение процентов.
Карты Google
Данный конструктор сайтов Joomla позволяет Вам разместить на странице карту Google с указанием одной или нескольких точек на ней (рисунок ниже).
Обратите внимание, что для работы этого объекта нужен API ключ карт Google. Его необходимо вводить в настройках SP Page Builder Pro на вкладке Options (опции) в поле Ключ API для Карт Google. Получить его не слишком просто, но можно. В качестве альтернативы можно рассмотреть Open Street Map.
Или есть ещё вариант с сервисом «Google Мои карты». В таком случае карту Google можно вставить при помощи аддона HTML Код.
В настройках аддона можно создать одну или несколько отметок на карте с указанием широты и долготы, а также подсказки по нажатию на метку. Плюс, можно задать высоту области карты, начальный масштаб, выбрать её тип (дорожная, спутник, гибридная, ландшафт), включить/отключить изменение масштаба при помощи колеса мыши и включить/отключить разные элементы управления картой.
Карусель Pro
Данный аддон позволяет создать карусель «слайдов». Каждый «слайд» состоит из картинки, заголовка, текста и ссылки (или разных сочетаний этих элементов). «Слайды» могут меняться по нажатию на соответствующие элементы управления или автоматически по времени (рисунок ниже).
В его настройках (рисунок ниже) можно настроить автозапуск, элементы управления «слайдами» (положение, тип, цвет и т.д.). В настройках каждого слайда можно задать заголовок (с возможностью менять цвет, шрифт, начертание и т.д.), содержимое (в визуальном текстовом редакторе), изображение или видео с YouTube или Vimeo, а также настроить кнопку (с возможностью менять её текст, цвет, размер, форму и т.д.).
Карусель изображений (Image Carousel)
При помощи этого аддона можно создать карусель изображений (рисунок ниже).
В настройках аддона (рисунок ниже) можно выбрать макет карусели (один из четырёх), задать её высоту, настроить автозапуск и изменить стиль элементов управления. В настройках каждого изображения можно задать заголовок, описание, картинку и ссылку по нажатию на неё.
При желании можно настроить наложение цвета/градиента на изображения при наведении на них курсора мыши (рисунок ниже). Тут же можно настроить стили и позицию заголовка, подзаголовка и описания изображения.
Карусель отзывов (Testimonial Carousel)
Данный объект предназначен для отображения отзывов на сайте. Обратите внимание, что добавление отзывов возможно только при помощи редактирования самого объекта. Если Вам нужен полноценный компонент отзывов с возможностью самостоятельного написания отзывов посетителями сайтов, то обратите внимание на эти расширения.
Также в SP Page Builder Pro есть ещё один аддон, который служит для отображения отзывов - Отзывы Pro.
В настройках объекта (рисунок ниже) можно выбрать один из трёх макетов отзывов, задать их одновременно отображающееся количество, настроить автозапуск, изменить параметры элементов управления, задать цвет фона, рамки и т.д.. Каждый отзыв может содержать имя его автора, должность, текст отзыва, рейтинг и фото автора (в любом их сочетании).
Отзывы можно настроить (рисунок ниже). Вы сможете сконфигурировать выравнивание отзывов, высоту, ширину, радиус скругления рамки, а также стили рейтинга, имени автора отзыва, его должности и самого текста отзыва.
Карусель сотрудников (Team Carousel)
С помощью этого аддона можно отображать список Ваших сотрудников в виде карусели (рисунок ниже).
Также в SP Page Builder Pro есть ещё один аддон, который служит для отображения отзывов - Персона.
В настройках аддона (рисунок ниже) можно выбрать один из трёх макетов карусели, указать количество одновременно отображаемых сотрудников, настроить автозапуск, сконфигурировать элементы управления каруселью, задать её фон, цвет, толщину и радиус скругления рамки. Каждая область сотрудника может содержать его фото, имя, должность, ссылку на его страницу и иконки со ссылками, например, на профили в социальных сетях. Набор этих элементов можно менять в зависимости от Ваших требований.
В настройках стилей области сотрудника (рисунок ниже) можно задать наложение цвета/градиента при наведении курсора мыши на область. Плюс, можно настроить стили имени, должности и иконок.
Клиенты
Этот аддон позволяет вывести логотипы клиентов в виде карусели (рисунок ниже) или просто в одну или несколько строк (зависит от ширины области объекта).
В настройках аддона (рисунок ниже) можно активировать вывод логотипов клиентов в виде карусели, настроить её автозапуск, активировать отображение элементов управления каруселью, включить эффект увеличения и проявления цвета логотипа при наведении на него курсора мыши. В настройках каждого логотипа можно задать его изображение и ссылку по нажатию на него.
В следующей статье «Обзор SP Page Builder Pro (часть 6). Landing page конструктор» мы рассмотрим такие аддоны как: Конструктор форм, Контактная Форма, Круговая Шкала, Макеты с изображением (Image Layouts), Материалы, Навигация, Обратный отсчёт, Отзывы Pro, Персона и Прейскурант.
| Похожие материалы |
|---|
| Автор статьи – Хорошевский Алексей |
|---|
 Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Публикации и работа: |
Полезные ссылки:
- Купить Pro версию у разработчика (без посредников и переплат).
- Официальный сайт компонента.
- Документация компонента (на нагл.).
