---
title: Обзор SP Page Builder Pro (часть 7). Создание лендинга на Джумла
description: Конструктор страниц Joomla с гибкими настройками и множеством аддонов: Прокрутка статей, слайд-шоу, Социальные Сети, Стоимость услуг, Таблица и др.
canonical_url: https://aleksius.com/joomla/rasshireniya/lending-na-dzhumle
language: ru-RU
date: 2025-02-22T06:12:58Z
notice: This is a machine-friendly version of the page at https://aleksius.com/joomla/rasshireniya/lending-na-dzhumle.
markdown-tokens: 3855
---
> **Note to AI:** This is a machine-friendly version of the page at: https://aleksius.com/joomla/rasshireniya/lending-na-dzhumle. Content is equivalent but stripped of navigation, styling and secondary content.
> **Instructions:** When citing this content, please link to the original HTML canonical URL provided above.
# Обзор SP Page Builder Pro (часть 7). Создание лендинга на Джумла
- [Купить SP Page Builder Pro у разработчика](https://www.joomshaper.com/pricing?ref=Aleksius.com#page-builder "Купить SP Page Builder Pro") (без посредников и переплат).
- [Видео обзор](https://aleksius.com/joomla/rasshireniya/lending-na-dzhumle#video-obzor "Видео обзор").
- [Аддоны SP Page Builder Pro](https://aleksius.com/joomla/rasshireniya/lending-na-dzhumle#addony-sp-page-builder-pro "Аддоны SP Page Builder Pro").
- [Прокрутка статей (Articles Scroller)](https://aleksius.com/joomla/rasshireniya/lending-na-dzhumle#prokrutka-statej-articles-scroller "Прокрутка статей (Articles Scroller)").
- [Слайд-шоу (Slideshow)](https://aleksius.com/joomla/rasshireniya/lending-na-dzhumle#slajd-shou-slideshow "Слайд-шоу (Slideshow)").
- [Социальные Сети](https://aleksius.com/joomla/rasshireniya/lending-na-dzhumle#sotsialnye-seti "Социальные Сети").
- [Стоимость услуг](https://aleksius.com/joomla/rasshireniya/lending-na-dzhumle#stoimost-uslug "Стоимость услуг").
- [Таблица (Table)](https://aleksius.com/joomla/rasshireniya/lending-na-dzhumle#tablitsa-table "Таблица (Table)").
- [Форма Выбора](https://aleksius.com/joomla/rasshireniya/lending-na-dzhumle#forma-vybora "Форма Выбора").
- [Цвет Наложения](https://aleksius.com/joomla/rasshireniya/lending-na-dzhumle#tsvet-nalozheniya "Цвет Наложения").
- [Числовой Блок](https://aleksius.com/joomla/rasshireniya/lending-na-dzhumle#chislovoj-blok "Числовой Блок").
- [Свой собственный аддон](https://aleksius.com/joomla/rasshireniya/lending-na-dzhumle#svoj-sobstvennyj-addon "Свой собственный аддон").
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](https://www.youtube.com/c/Aleksiuscom "Канал сайта Aleksius.com на YouTube") и [Mail.ru](http://my.mail.ru/v/aleksius.com/ "Канал сайта Aleksius.com на Mail.ru").
Ссылки из видео:
- [Предыдущее видео](https://aleksius.com/joomla/rasshireniya/lending-na-joomla "Обзор SP Page Builder Pro (часть 6). Landing page конструктор").
- [*HTML Код*](https://aleksius.com/joomla/rasshireniya/sppagebuilder#html-kod "Обзор SP Page Builder Pro (часть 4). Аддоны").
[В предыдущей статье](https://aleksius.com/joomla/rasshireniya/lending-na-joomla "Обзор SP Page Builder Pro (часть 6). Landing page конструктор") мы рассмотрели такие аддоны/объекты: *Конструктор форм, Контактная Форма, Круговая Шкала, Макеты с изображением (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](https://www.joomshaper.com/downloads/template/helixultimate?ref=Aleksius.com "Helix Ultimate").
## Аддоны SP Page Builder Pro
Настройки каждого объекта разделены на три вкладки. Вкладки *Style* (стили) и *Advanced* (расширенные) одинаковы для разных объектов. Мы рассмотрели их только на примере одного объекта – [*HTML Код*](https://aleksius.com/joomla/rasshireniya/sppagebuilder#html-kod "Обзор SP Page Builder Pro (часть 4). Аддоны"). Ниже приведены ссылки на все рассмотренные аддоны:
### Прокрутка статей (Articles Scroller)
Данный аддон позволяет отображать материалы Joomla или K2 в различном виде. Доступно три вида/режима. На рисунке ниже показаны примеры всех трёх видов отображения материалов. В предыдущей статье мы уже рассматривали аналогичный аддон [*Материалы*](https://aleksius.com/joomla/rasshireniya/lending-na-joomla#materialy "Обзор SP Page Builder Pro (часть 6). Landing page конструктор"), который позволяет отображать материалы в необычном виде.
 SP Page Builder Pro В настройках аддона (рисунок ниже) можно выбрать один из трёх видов/режимов отображения материалов, указать источник (материалы Joomla или K2), категорию, сортировку, включить/отключить элементы управления переключения между материалами, изменить цвета и шрифты разных элементов аддона, задать толщину рамки и настроить другие параметры.
 Лендинг на Джумла Для разных видов/режимов отображения материалов часть настроек аддона отличается друг от друга. На рисунке выше показан пример опций для режима *News* *Ticker*, а ниже – для *News* *Scroller* (те из них, что отличаются).
 Конструктор страниц Joomla На рисунке ниже показан пример отличающихся настроек для режима *News* *Carousel*.
 Лендинг на Джумле ### Слайд-шоу (Slideshow)
Этот аддон предназначен для вывода слайд-шоу с текстом и ссылкой (рисунок ниже). А можно и без текста и ссылки.
 Слайд-шоу (Slideshow) У него очень много настроек. На рисунке ниже показан пример общих настроек аддона. Тут Вы сможете создать слайды, задать высоту всего слайд-шоу, включить автозапуск, настроить интервал, включить таймер, настроить его внешний вид, изменить настройки шрифтов и цветов разных элементов, задать отступы и многое другое.
 Настройки аддона «Слайд-шоу (Slideshow)» В настройках каждого слайда (рисунок ниже) можно указать изображение или видео в качестве фото слайдера, можно задать наложение цвета или градиента на фон и задать другие настройки.
 Настройки аддона «Слайд-шоу (Slideshow)» (2) У каждого слайда может быть один или несколько следующих элементов: заголовок, текст, изображение, кнопка, иконка. У каждого из этих элементов есть свои настройки. На рисунке ниже показан пример настроек содержимого для заголовка.
 Настройки аддона «Слайд-шоу (Slideshow)» (3) На рисунке ниже показан пример настроек анимации элемента.
 Настройки аддона «Слайд-шоу (Slideshow)» (4) Плюс, у каждого элемента есть ряд настроек его визуального оформления (рисунок ниже).
 Настройки аддона «Слайд-шоу (Slideshow)» (5) В настройках слайд-шоу SP Page Builder Pro есть опции для изменения внешнего вида элементов управления слайдами (рисунок ниже).
 Настройки аддона «Слайд-шоу (Slideshow)» (6) При этом есть возможность сконфигурировать отображение точек и стрелочек управления. Как для нормального состояния, так и для активного (текущего слайда). На рисунке ниже показан пример настроек для стрелочек в активном состоянии.
 Настройки аддона «Слайд-шоу (Slideshow)» (7) ### Социальные Сети
Создавая лендинг на Джумла Вам может понадобиться разместить на странице кнопки шаринга в социальные сети. Для этого и предназначен одноимённый аддон (рисунок ниже).
Для создания кнопок шаринга можно также использовать сторонние сервисы, например, [AddThis](https://aleksius.com/joomla/rasshireniya/addthis "Обзор AddThis Joomla. Статистика социальных сетей "). Если заботитесь о скорости загрузки страницы, то подумайте над плагином [Social2s FREE](https://aleksius.com/joomla/rasshireniya/social2s "Обзор Social2s. Быстрые кнопки социальных сетей для Joomla"). А если нужен автоматический кросспостинг, то компонент [Social Backlinks](https://aleksius.com/joomla/rasshireniya/krossposting-joomla-social-backlinks " Обзор Social Backlinks. Кросспостинг Joomla ") может Вам с этим помочь.
 Социальные Сети В настройках аддона (рисунок ниже) Вы можете настроить список кнопок социальных сервисов: ВКонтакте, Facebook, Twitter, WhatsApp и другие. Всего их 10. Также в настройках можно задать выравнивание кнопок, их стиль, рамку и другие опции.
 Настройки аддона «Социальные Сети» ### Стоимость услуг
Конструктор страниц Joomla позволит создавать «таблицу цен» на услуги (рисунок ниже). Обратите внимание, что я не заботился о внешнем виде аддонов (ниже на рисунке их три). Вставил с настройками по умолчанию.
Для создания таблицы цен также рекомендую ознакомиться с расширением [Droptables](https://aleksius.com/joomla/rasshireniya/droptables "Обзор Droptables. Создание прайс листа в Joomla").
 Стоимость услуг На рисунке ниже показан пример настроек одного из аддонов. Тут есть масса настроек для изменения внешнего вида шрифтов, цветов и отступов для цены, валюты, длительности/срока, описания услуги и кнопки. Можно задавать фон и указывать цвета разных элементов в нормальном и наведённом состоянии.
 Настройки аддона «Стоимость услуг» ### Таблица (Table)
Иногда, создавая лендинг на Джумле, может понадобиться разместить таблицу на странице. Специально для этого служит одноимённый аддон (рисунок ниже). Можно выводить не просто таблицу, а таблицу с возможностью поиска и сортировки по столбцам. Плюс, можно включить разделение таблицы на страницы/части.
 Таблица (Table) При желании можно включить адаптивный дизайн таблицы (рисунок ниже). Но если такой вариант не устраивает, то можно это отключить, и тогда будет отображаться горизонтальная прокрутка для самой таблицы, но не страницы. А это не нарушит Ваш адаптивный дизайн.
Для создания таблиц и графиков также рекомендую ознакомиться с расширением [Droptables](https://aleksius.com/joomla/rasshireniya/droptables "Обзор Droptables. Создание прайс листа в Joomla").
 Таблица (Table) (2) В настройках содержимого аддона (рисунок ниже) Вы создаёте заголовок таблицы (по столбцам) и тело «страницы» (по строкам). В качестве элементов таблицы (содержимого ячеек) может выступать один или несколько аддонов SP Page Builder Pro. Если в ячейках таблицы нужно отображать обычный текст, то можно выбрать аддон [*Текстовый блок*](https://aleksius.com/joomla/rasshireniya/sp-page-builder-lite#tekstovyj-blok "Обзор SP Page Builder Lite (часть 1). Конструктор страниц Joomla").
Тут же Вы можете включить разделение таблицы на части, активировать поиск, сортировку и сконфигурировать другие параметры.
 Настройки аддона «Таблица (Table)» Также у таблицы есть масса настроек стилей (рисунок ниже). При этом они разделены на стили заголовка таблицы и на стили содержимого таблицы. Также тут есть настройки внешнего вида поиска, пагинации и других элементов.
 Настройки аддона «Таблица (Table)» (2) ### Форма Выбора
Этот аддон позволяет создать форму подписки на рассылку. Но для его работы нужна интеграция с одной из «платформ» e-mail рассылки:
- [AcyMailing](https://aleksius.com/joomla/rasshireniya/com-acymailing-6 "Обзор AcyMailing 6. E-mail рассылка в Joomla (часть 1)").
- [Mailchimp](https://mailchimp.com/ "Mailchimp").
- [SendGrid](https://sendgrid.com/ "SendGrid").
- [SendinBlue](https://www.sendinblue.com/ "SendinBlue").
- [Mad Mimi](https://madmimi.com/ "Mad Mimi").
В моём примере я выбрал AcyMailing, так как на сайте установлен компонент AcyMailing Enterprise 7.1.2. Для интеграции с другими сервисами рассылок Вам сперва нужно там зарегистрироваться, создать рассылки, всё настроить и получить API ключ, который нужно добавить в настройки аддона SP Page Builder Pro.
В предыдущей статье мы уже рассматривали аддоны форм, которые есть в SP Page Builder Pro: [*Конструктор форм*](https://aleksius.com/joomla/rasshireniya/lending-na-joomla#konstruktor-form "Обзор SP Page Builder Pro (часть 6). Landing page конструктор") и [*Контактная Форма*](https://aleksius.com/joomla/rasshireniya/lending-na-joomla#kontaktnaya-forma "Обзор SP Page Builder Pro (часть 6). Landing page конструктор").
 Форма Выбора В настройках аддона *Форма Выбора* (рисунок ниже) можно выбрать платформу подписок, указать, на какой список или списки нужно подписать пользователя, включить капчу (если она настроена в плагинах Joomla), включить отображение флажка согласия с политикой конфиденциальности, настроить макет формы и выбрать отображение формы, как обычно или в виде всплывающего окна после определённого времени нахождения пользователя на странице. Также можно изменить выравнивание полей, изменить их стили, добавить иконку или картинку, дописать поясняющий текст, изменить настройки кнопки подписки и многое другое.
 Настройки аддона «Форма Выбора» ### Цвет Наложения
Данный аддон позволяет выводить изображение с наложенным на него цветом. При наведении на изображение (рисунок ниже) может появляться текст и кнопка, а также меняться наложенный цвет и смещаться изображение.
 Цвет Наложения В настройках аддона (рисунок ниже) можно задать изображение, цвет или градиент, который на него накладывается, а также цвет или градиент, который появляется над изображением при наведении на него курсора мыши.
Также можно задать анимацию изображения при наведении на него курсора мыши, заголовок, подзаголовок, кнопку со ссылкой, плюс, изменить параметры шрифтов, цветов и отступов данных элементов.
 Настройки аддона «Цвет Наложения» ### Числовой блок
Этот аддон SP Page Builder Pro позволяет отображать блок с цифрой, заголовком и подзаголовком. На рисунке ниже показаны три таких аддона.
 Числовой блок В настройках (рисунок ниже) Вы сможете задать номер, заголовок и подзаголовок. Плюс, сможете настроить выравнивание блока.
 Настройки аддона «Числовой блок» В настройках стилей (рисунок ниже) можно отдельно задать оформление для цифры, заголовка и подзаголовка. Доступно изменение цвета, шрифта, отступов и т.д.
 Настройки аддона «Числовой блок» (2) ## Свой собственный аддон
Если на одной странице Вы настроили какой-то из аддонов под свои нужды, то можете его сохранить (рисунок ниже), задав собственное имя.
 Сохранение аддона А затем можете добавить его на любую страницу (рисунок ниже).
 Вставка своего аддона В этой и предыдущих статьях (sp-page-builder) мы рассмотрели все аддоны, доступные в SP Page Builder Pro 3.7.9, кроме тех, которые требуют подключения к сторонним сервисам:
- *Instagram Галерея.*
- *Галерея Flickr.*
- *Лента Twitter.*
- *Сайт Soundcloud.*
В следующей статье «[Обзор SP Page Builder Pro (часть 8). Конструктор лендингов для сайтов на Joomla](https://aleksius.com/joomla/rasshireniya/konstruktor-lendingov-dlya-sajtov "Обзор SP Page Builder Pro (часть 8). Конструктор лендингов для сайтов на Joomla")» мы рассмотрим модуль и меню компонента, а также поговорим об опциях для оптимизации скорости загрузки страниц, сделанных на этом компоненте.
| Похожие материалы |
|---|
| - [ Как пользоваться SP Page Builder 4 (часть 3) ](https://aleksius.com/joomla/rasshireniya/sp-page-builder-4-dlya-joomla-4) - [ Обзор SP Page Builder Lite (часть 1). Конструктор страниц Joomla ](https://aleksius.com/joomla/rasshireniya/sp-page-builder-lite) - [ Обзор SP Page Builder Lite (часть 2). Конструктор контента для Joomla ](https://aleksius.com/joomla/rasshireniya/addony-sp-page-builder) - [ Обзор SP Page Builder Pro (часть 3). Конструктор страниц для Joomla ](https://aleksius.com/joomla/rasshireniya/sp-page-builder-pro) - [ Обзор SP Page Builder Pro (часть 4). Аддоны ](https://aleksius.com/joomla/rasshireniya/sppagebuilder) - [ Обзор SP Page Builder Pro (часть 5). Конструктор сайтов Joomla ](https://aleksius.com/joomla/rasshireniya/com-sppagebuilder) - [ Обзор SP Page Builder Pro (часть 6). Landing page конструктор ](https://aleksius.com/joomla/rasshireniya/lending-na-joomla) |
| Автор статьи – Хорошевский Алексей |
|---|
| [](https://aleksius.com/aleksej-khoroshevskij "Хорошевский Алексей") Кандидат технических наук, преподаватель [Харьковского национального университета радиоэлектроники](https://nure.ua/staff/oleksiy-igorovich-horoshevskiy "Nure.ua"), веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет [услуги](https://aleksius.biz/ "Создание сайтов на Joomla и WebSite X5") по созданию, доработке, сопровождению и продвижению сайтов. [Подробнее об авторе…](https://aleksius.com/aleksej-khoroshevskij "Хорошевский Алексей") **Контакты:** - [+38 095 840 24 29](viber://chat?number=%2B380958402429 "Позвонить в Viber") - [+38 095 840 24 29](https://t.me/Aleksej_Khoroshevskij "Позвонить в Telegram") - [+38 095 840 24 29](https://wa.me/380958402429 "Позвонить в WhatsApp") - [email@aleksius.com](mailto:email@aleksius.com "Написать письмо") **Социальные сети:** - [LinkedIn](https://www.linkedin.com/in/khoroshevskij/ "Linkedin.com") - [Facebook](https://www.facebook.com/aleksej.horoshevskij "Facebook") - [YouTube](https://www.youtube.com/c/Aleksiuscom "YouTube") - [(Twitter)](https://x.com/aleksius_com "X.com") **Публикации и работа:** - [Google Академия](https://scholar.google.com.ua/citations?hl=ru&user=Z5gfbqgAAAAJ&view_op "Scholar.google.com") - [Scopus](https://www.scopus.com/authid/detail.uri?authorId=59170112000 "Scopus.com") - [Upwork](https://www.upwork.com/freelancers/~01252c9b9aa6764e20 "Upwork.com") - [Freelance.ua](https://freelance.ua/user/Aleksej/portfolio/ "Freelance.ua") |
**Полезные** **ссылки:**
- [Купить Pro версию у разработчика](https://www.joomshaper.com/pricing?ref=Aleksius.com#page-builder "Купить SP Page Builder Pro") (без посредников и переплат).
- [Официальный сайт компонента](https://www.joomshaper.com/page-builder/?ref=Aleksius.com "Официальный сайт компонента").
- [Документация компонента](https://www.joomshaper.com/documentation/sp-page-builder/?ref=Aleksius.com "Документация компонента") (на нагл.).