---
title: Обзор SP Page Builder Pro (часть 4). Аддоны
description: Русскоязычный конструктор страниц Joomla с гибкими настройками и множеством аддонов: HTML Код, Open Street Map, Анимированный заголовок, Анимированный Номер
canonical_url: https://aleksius.com/joomla/rasshireniya/sppagebuilder
language: ru-RU
date: 2025-02-22T06:13:56Z
notice: This is a machine-friendly version of the page at https://aleksius.com/joomla/rasshireniya/sppagebuilder.
markdown-tokens: 3164
---
> **Note to AI:** This is a machine-friendly version of the page at: https://aleksius.com/joomla/rasshireniya/sppagebuilder. 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 (часть 4). Аддоны
- [Купить SP Page Builder Pro у разработчика](https://www.joomshaper.com/pricing?ref=Aleksius.com#page-builder "Купить SP Page Builder Pro") (без посредников и переплат).
- [Видео обзор](https://aleksius.com/joomla/rasshireniya/sppagebuilder#video-obzor "Видео обзор").
- [Аддоны SP Page Builder Pro](https://aleksius.com/joomla/rasshireniya/sppagebuilder#addony-sp-page-builder-pro "Аддоны SP Page Builder Pro").
- [HTML Код](https://aleksius.com/joomla/rasshireniya/sppagebuilder#html-kod "HTML Код").
- [Open Street Map](https://aleksius.com/joomla/rasshireniya/sppagebuilder#open-street-map "Open Street Map").
- [Анимированный заголовок (Animated Heading)](https://aleksius.com/joomla/rasshireniya/sppagebuilder#animirovannyj-zagolovok-animated-heading "Анимированный заголовок (Animated Heading)").
- [Анимированный Номер](https://aleksius.com/joomla/rasshireniya/sppagebuilder#animirovannyj-nomer "Анимированный Номер").
- [Аудио](https://aleksius.com/joomla/rasshireniya/sppagebuilder#audio "Аудио").
- [Вращающийся Блок](https://aleksius.com/joomla/rasshireniya/sppagebuilder#vrashchayushchijsya-blok "Вращающийся Блок").
- [Временная Шкала](https://aleksius.com/joomla/rasshireniya/sppagebuilder#vremennaya-shkala "Временная Шкала").
- [Всплывающее окно](https://aleksius.com/joomla/rasshireniya/sppagebuilder#vsplyvayushchee-okno "Всплывающее окно").
- [Галерея](https://aleksius.com/joomla/rasshireniya/sppagebuilder#galereya "Галерея").
- [Группа иконок](https://aleksius.com/joomla/rasshireniya/sppagebuilder#gruppa-ikonok "Группа иконок").
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](https://www.youtube.com/c/Aleksiuscom "Канал сайта Aleksius.com на YouTube") и [Mail.ru](http://my.mail.ru/v/aleksius.com/ "Канал сайта Aleksius.com на Mail.ru").
Ссылки из видео:
- «[Обзор SP Page Builder Pro (часть 3). Конструктор страниц для Joomla](https://aleksius.com/joomla/rasshireniya/sp-page-builder-pro "Обзор SP Page Builder Pro (часть 3). Конструктор страниц для Joomla")».
- [Аддоны, доступные в бесплатной версии компонента](https://aleksius.com/joomla/rasshireniya/sp-page-builder-lite#addony "Обзор SP Page Builder Lite (часть 1). Конструктор страниц Joomla").
- [Галереи для Joomla](https://aleksius.com/joomla/galereya "Галерея").
Компонент позволяет создавать страницы со сложным макетом, анимацией и различными интерактивными объектами без знаний программирования или вёрстки. Это достигается за счёт большого количества разных опций. Есть возможность добавления собственного CSS кода.
[В предыдущей статье](https://aleksius.com/joomla/rasshireniya/sp-page-builder-pro "Обзор SP Page Builder Pro (часть 3). Конструктор страниц для Joomla") мы рассмотрели параметры, доступные для страниц, строк и столбцов в платной версии компонента. В этой части поговорим о его аддонах.
В обзоре участвует последняя, на момент написания статьи (16.01.2021), русскоязычная версия SP Page Builder Pro 3.7.8 в 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). Аддоны"). Ниже приведены ссылки на все рассмотренные аддоны:
### HTML Код
Данное дополнение/объект (аддон) позволяет вставлять произвольный HTML код. Настройки этого и других аддонов разделены на три вкладки.
1. *General* (основное). На этой вкладке (рисунок ниже) собраны основные настройки объекта. Основная их часть отличается в зависимости от каждого объекта. В основном, у каждого объекта на этой вкладке можно задать заголовок объекта для админки сайта, заголовок объекта для фронтальной части сайта и CSS класс, чтобы применить к нему какие-то специальные стили.
2. *Style* (стили).
3. *Advanced* (расширенные).
 SP Page Builder Pro **Вкладка *Style* (стили)**, как правило, одинакова для разных объектов и содержит общие настройки стилей (рисунок ниже): цвет текста, ссылок, фоновое изображение/цвет/градиент и эффект наложения цвета/градиента/изображения. Также можно задать рамку, тень, внутренний и внешний отступы, настроить анимацию появления объекта и задать свой собственный CSS код.
 SPPageBuilder **Вкладка *A**dvanced* (расширенные)**, так же, как и предыдущая вкладка, содержит настройки, которые повторяются для разных объектов. Тут (рисунок ниже) Вы сможете задать позицию объекта (абсолютную, фиксированную или относительную), смещение объекта относительно своей начальной позиции (по оси X и Y) и его положение в плане наложения на другие объекты (при смещении позиции). Данные настройки рекомендую использовать только в крайних случаях, так как они могут «поломать» макет страницы и могут вести себя не так, как Вы ожидаете на мобильных устройствах.
Также на этой вкладке можно настроить ширину объекта, скрыть его на компьютерах, планшетах или телефонах и задать уровень доступа пользователей фронтальной части сайта к этому объекту. То есть, можно, например, скрыть какой-то объект от незарегистрированных пользователей.
 Конструктор Джумла На рисунке ниже показан пример изменения позиции объекта на странице.
 Изменение позиции объекта Ниже на рисунке представлены настройки позиции.
 Настройки позиции На рисунке ниже показан пример объекта *HTML Код* на странице сайта.
 Аддоны SP Page Builder Pro ### Open Street Map
Данный аддон позволяет добавить карту Open Street Map с указанием одной или нескольких точек на ней (рисунок ниже).
 Open Street Map В настройках аддона (рисунок ниже) Вы сможете выбрать стиль карты (доступно 18), задать высоту карты, создать точки на ней (с возможностью указания текстовых подписей), указать изображение маркера точки, установить начальный масштаб карты и включить разные элементы управления картой.
 Настройки аддона Open Street Map Как видите, конструктор Джумла предоставляет достаточно много настроек для объекта. Что позволяет более гибко его сконфигурировать без применения CSS.
### Анимированный заголовок (Animated Heading)
Этот объект позволяет создать текст, часть которого может быть статичной, а часть анимированной (рисунок ниже). Статическая часть может быть до и/или после анимированной.
 Анимированный заголовок (Animated Heading) В настройках данного аддона SP Page Builder (рисунок ниже) можно задать анимированный и не анимированный текст, его HTML тег (H1-H6, P, DIV, SPAN) и изменить стили: размер шрифта, цвет, семейство, начертание и т.д. Настройки стилей доступны отдельно для анимированного и не анимированного текста.
 Настройки аддона Анимированный заголовок (Animated Heading) ### Анимированный Номер
Данный аддон позволяет создавать «бегущие» цифры (рисунок ниже).
 Анимированный Номер В его настройках (рисунок ниже) Вы задаёте конечное число, длительность анимации и аддон автоматически ведёт отсчёт от 0 до заданного конечного числа в течение заданного времени. Также можно добавить к числу единицы измерения, текст, символ и т.д. В настройках можно изменить цвет цифры, размер её шрифта, семейство шрифтов, толщину, позицию по отношению к заголовку цифры и настройки оформления самого заголовка цифры.
 Настройки аддона Анимированный Номер ### Аудио
Для размещения на странице плеера с возможностью прослушивания музыки прямо в окне браузера служит объект *Аудио* (рисунок ниже). Обратите внимание, что внешний вид и функциональность плеера зависит от браузера.
 Аудио В настройках аддона (рисунок ниже) можно указать ссылку на OGG файл или закачать свой собственный MP3 файл. Плюс, есть возможность активировать автовоспроизведение, что я бы не рекомендовал, и повторение трека.
 Настройки аддона Аудио ### Вращающийся Блок
Данный объект позволяет создать прямоугольник с контентом с двух сторон. Лицевая сторона отображается сразу при появлении объекта, а оборотная – при наведении или нажатии на объект. На рисунке ниже показаны три состояния объекта.
 Вращающийся Блок В настройках объекта (рисунок ниже) Вы можете выбрать действие, при котором нужно поворачивать прямоугольник, задать содержимое лицевой и обратной стороны (можно применять HTML теги), указать стиль и направление вращения, а также задать фоновое изображение или цвет лицевой и обратной стороны прямоугольника.
 Настройки аддона Вращающийся Блок ### Временная Шкала
Этот аддон позволит создать «временную шкалу» или красиво представить поэтапный процесс (рисунок ниже).
 Временная Шкала В настройках объекта (рисунок ниже) можно задать цвет шкалы и создать «этапы». Каждый «этап» состоит из названия, описания (тестовый редактор или HTML теги) и даты (можно указать не дату, а любой текст).
 Настройки аддона Временная шкала ### Всплывающее окно
Данное дополнение позволяет разместить кнопку на странице, по нажатию на которую появится всплывающее окно (рисунок ниже).
 Всплывающее окно В настройках дополнения (рисунок ниже) Вы сможете задать метку кнопки, её стиль, положение, размер, форму и иконку для неё. Также можно указать, что именно хотите отображать во всплывающем окне: текст, изображение или видео (с YouTube или Vimeo).
 Настройки аддона Всплывающее окно ### Галерея
Если Вам нужно создать небольшую галерею, то одноимённый объект отлично для этого подойдёт (рисунок ниже). Если изображений много, и они часто будут меняться/добавляться, то я бы рекомендовал рассмотреть какой-то специализированный [компонент галереи](https://aleksius.com/joomla/galereya "Галерея") с модулем.
 Галерея В настройках аддона (рисунок ниже) Вы сможете указать ширину и высоту миниатюр изображений и добавить сами изображения. Добавление изображений происходит по одному. Можно сделать так, что по нажатию на миниатюру будет открываться увеличенное изображение (не обязательно то же, что и на миниатюре).
 Настройки аддона Галерея ### Группа иконок
Данный аддон предназначен для создания одной или нескольких иконок (не изображений) с текстом (рисунок ниже).
 Группа иконок В настройках аддона можно задать размер шрифта текста и иконки, саму иконку, ссылку по нажатию на неё, цвет иконки, шрифта и фона иконки, рамку, отступы и другие параметры, включая цвета элементов при наведении на блок иконки.
 Настройки аддона Группа иконок В следующей статье «[Обзор SP Page Builder Pro (часть 5). Конструктор сайтов Joomla](https://aleksius.com/joomla/rasshireniya/com-sppagebuilder "Обзор SP Page Builder Pro (часть 5). Конструктор сайтов 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 (часть 5). Конструктор сайтов Joomla ](https://aleksius.com/joomla/rasshireniya/com-sppagebuilder) - [ Обзор SP Page Builder Pro (часть 6). Landing page конструктор ](https://aleksius.com/joomla/rasshireniya/lending-na-joomla) - [ Обзор SP Page Builder Pro (часть 7). Создание лендинга на Джумла ](https://aleksius.com/joomla/rasshireniya/lending-na-dzhumle) |
| Автор статьи – Хорошевский Алексей |
|---|
| [](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 "Документация компонента") (на нагл.).