---
title: Обзор YOOtheme Pro Joomla (часть 5). Элементы конструктора страниц
description: Платный русскоязычный конструктор страниц Joomla с множеством настроек и элементов: Text, To Top, Video, Accordion, Button, Description List, Gallery и др
canonical_url: https://aleksius.com/joomla/rasshireniya/elementy-yootheme-pro
language: ru-RU
date: 2023-11-06T17:49:18Z
notice: This is a machine-friendly version of the page at https://aleksius.com/joomla/rasshireniya/elementy-yootheme-pro.
markdown-tokens: 4668
---
> **Note to AI:** This is a machine-friendly version of the page at: https://aleksius.com/joomla/rasshireniya/elementy-yootheme-pro. 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.
# Обзор YOOtheme Pro Joomla (часть 5). Элементы конструктора страниц
- [Видео обзор](https://aleksius.com/joomla/rasshireniya/elementy-yootheme-pro#video-obzor "Видео обзор").
- [Элементы](https://aleksius.com/joomla/rasshireniya/elementy-yootheme-pro#elementy "Элементы").
- [Text](https://aleksius.com/joomla/rasshireniya/elementy-yootheme-pro#text "Text").
- [To Top](https://aleksius.com/joomla/rasshireniya/elementy-yootheme-pro#to-top "To Top").
- [Video](https://aleksius.com/joomla/rasshireniya/elementy-yootheme-pro#video "Video").
- [Accordion](https://aleksius.com/joomla/rasshireniya/elementy-yootheme-pro#accordion "Accordion").
- [Button](https://aleksius.com/joomla/rasshireniya/elementy-yootheme-pro#button "Button").
- [Description List](https://aleksius.com/joomla/rasshireniya/elementy-yootheme-pro#description-list "Description List").
- [Gallery](https://aleksius.com/joomla/rasshireniya/elementy-yootheme-pro#gallery "Gallery").
- [Grid](https://aleksius.com/joomla/rasshireniya/elementy-yootheme-pro#grid "Grid").
- [List](https://aleksius.com/joomla/rasshireniya/elementy-yootheme-pro#list "List").
- [Map](https://aleksius.com/joomla/rasshireniya/elementy-yootheme-pro#map "Map").
- [Nav](https://aleksius.com/joomla/rasshireniya/elementy-yootheme-pro#nav "Nav").
- [Overlay Slider](https://aleksius.com/joomla/rasshireniya/elementy-yootheme-pro#overlay-slider "Overlay Slider").
YOOtheme Pro – платный русскоязычный конструктор страниц для Джумла с множеством настроек и элементов/объектов.
## Видео обзор
- Text – 00:00:56.
- To Top – 00:02:09.
- Video – 00:02:37.
- Accordion – 00:04:01.
- Button – 00:05:21.
- Description List – 00:06:23.
- Gallery – 00:08:20.
- Grid – 00:11:37.
- List – 00:14:31.
- Map – 00:15:50.
- Nav – 00:19:33.
- Overlay Slider – 00:20:05.
Видео лучше просматривать с качеством 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/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц").
- [Как получить API Google карты](https://aleksius.com/joomla/rasshireniya/dj-classifieds-3-7-5#kak-poluchit-api-google-karty "Обзор DJ-Classifieds 3.7.5. Новшества и получение API Google карты").
При помощи компонента Вы сможете сами создать лендинг даже без знаний HTML, CSS и JS. Так как landing page создаётся на базе Joomla, получите не только «визуальную» часть страницы, но и функционал в виде различных форм и того, что может предложить Joomla.
В предыдущей статье «[Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц](https://aleksius.com/joomla/rasshireniya/yootheme-builder "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц")» мы начали рассмтаривать разные элементы расширения. В этой части продолжим их обзор.
В обзоре участвует последняя доступная мне, на момент написания статьи (22.04.2021), русскоязычная версия YOOtheme Pro 2.4.9 в Joomla 3.9.26. Шаблон сайта [Kitchen Daily](https://yootheme.com/joomla-templates/kitchen-daily "Kitchen Daily Joomla Template") 2.4.11.
## Элементы
У каждого элемента достаточно много настроек. Буду затрагивать только наиболее важные и интересные, на мой взгляд, параметры.
Они распределены на разделы. Некоторые настройки повторяются от элемента к элементу. Такие рассмотрю только для одного элемента.
### Text
Text – текст (рисунок ниже). Данный элемент позволяет выводить текст с форматированием.
 YOOtheme Pro В разделе *Контент* (рисунок ниже) можно ввести или вставить любой текст, изображения, таблицы и всё, что позволит добавлять Ваш визуальный текстовый редактор. Плюс, можно использовать любые его инструменты.
 YOOtheme В разделе *Настройки* (рисунок ниже) – есть ряд уже ранее рассмотренных в [элементе Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц"), а также можно задать отображение буквицы, вывести содержимое (текст, фото и т.д.) в колонках и изменить стиль, размер и цвет текста.
Раздел *Еще* содержит те же параметры, что и одноимённый раздел [элемента Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц").
 YOOtheme Pro Joomla ### To Top
To Top – изображение (рисунок ниже). Данный элемент позволяет добавить иконку/ссылку, по нажатию на которую происходит прокрутка страницы вверх.
 Вверх В разделе *Контент* (рисунок ниже, верхняя часть) можно задать текст возле иконки и текст, который появляется при наведении курсора мыши на иконку.
В разделе *Настройки* (рисунок ниже, нижняя часть) – есть ряд уже ранее рассмотренных для [элемента Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц") опций, а также можно задать стиль ссылки вверх и отступы.
Раздел *Еще* содержит те же параметры, что и одноимённый раздел [элемента Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц").
 Вверх - Контент, Настройки ### Video
Video – видео (рисунок ниже). Данный элемент позволяет отображать видео со своего сайта или по ссылке с YouTube или Vimeo.
 Video В разделе *Контент* (рисунок ниже) можно задать само видео, его размер, дополнительные опции и, если видео загружается с Вашего сайта, картинку предварительного просмотра. Она отображается до начала воспроизведения видео.
 Video - Контент В разделе *Настройки* (рисунок ниже) – есть ряд уже ранее рассмотренных в [элементе Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц"), а также можно задать тень и декорирование элемента.
Раздел *Еще* содержит те же параметры, что и одноимённый раздел [элемента Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц").
 Video - Настройки ### Accordion
Accordion – аккордеон (рисунок ниже). Данный элемент YOOtheme позволяет отобразить аккордеон, содержащий текстовый элемент (аналогичен элементу Text), картинку и кнопку/ссылку. Или можно использовать только видео/изображение в качестве содержимого.
 Accordion В разделе *Контент* (рисунок ниже) можно создавать содержимое аккордеона. Есть возможность добавить текст (с форматированием), картинку и ссылку. У каждой отдельной вкладки аккордеона в её настройках есть вкладка *Еще*, где можно настроить [динамический контент](https://aleksius.com/joomla/rasshireniya/dinamicheskij-kontent-yootheme-pro#dinamicheskij-kontent "Обзор YOOtheme Pro Joomla (часть 7). Динамический контент") или отключить её.
 Accordion - Контент В разделе *Настройки* (рисунок ниже) – есть ряд уже ранее рассмотренных в [элементе Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц"), а также можно задать возможность открытия нескольких вкладок аккордеона, закрытие всех вкладок, настроить контент (буквица, колонки), сконфигурировать изображение (размеры, выравнивание и т.д.), а также изменить параметры ссылки.
Раздел *Еще* содержит те же параметры, что и одноимённый раздел [элемента Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц").
 Acordion - Настройки ### Button
Button – кнопка (рисунок ниже). Данный элемент YOOtheme Pro позволяет разместить одну или несколько кнопок с подписью и иконкой. По нажатию на кнопку может открываться ссылка, картинка или видео.
 Button В разделе *Контент* (рисунок ниже) можно задать текст кнопки, иконку и указать, что именно должно открываться по нажатию на эту кнопку. У каждой кнопки есть своя вкладка *Настройки*, где можно задать стиль и выравнивание кнопки. А также можно настроить открытие ссылки/файла в новом, том же или модальном окне. На вкладке *Еще* можно настроить динамический контент или отключить её.
 Button - Контент В разделе *Настройки* (рисунок ниже) – есть ряд уже ранее рассмотренных в [элементе Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц"), а также можно задать размер и отступы кнопок.
Раздел *Еще* содержит те же параметры, что и одноимённый раздел [элемента Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц").
 Button ### Description List
Description List – перечень с описанием (рисунок ниже). Данный элемент YOOtheme Pro Joomla позволяет отобразить список с дополнительным контентом. Каждый пункт списка может состоять из заголовка, подзаголовка и ссылки.
 Description List В разделе *Контент* (рисунок ниже) можно задать заголовок (пункт списка), подзаголовок, содержимое (в визуальном текстовом редакторе) и ссылку. На вкладке *Еще* можно настроить динамический контент или отключить этот пункт списка.
 Description List - Контент В разделе *Настройки* (рисунок ниже) – есть ряд уже ранее рассмотренных в [элементе Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц"), а также можно задать маркер для списка, его цвет, указать количество колонок списка, изменить опции заголовка, подзаголовка, содержимого и ссылки.
Раздел *Еще* содержит те же параметры, что и одноимённый раздел [элемента Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц").
 Description List - Настройки ### Gallery
Gallery – изображение (рисунок ниже). Данный элемент конструктора страниц Joomla позволяет отображать галерею изображений. В галерее может быть фильтр по тегам. По наведению на изображение можно показывать заголовок, подзаголовок, описание, ссылку/кнопку и менять фоновую картинку.
 Gallery В разделе *Контент* (рисунок ниже) можно добавить картинки. В настройках каждой картинки Вы сможете указать текст тега ALT, заголовок, подзаголовок, описание (с применением визуального текстового редактора), ссылки, теги для фильтра и изображение, которое появляется при наведении курсора мыши.
 Gallery - Контент На вкладке *Настройки есть* возможность сменить цвет текста, а на вкладке *Еще* можно настроить динамический контент или отключить это изображение.
 Gallery - Контент (2) В разделе *Настройки* (рисунок ниже) – есть ряд уже ранее рассмотренных в [элементе Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц"), а также можно задать отступы между картинками, количество колонок сетки галереи для разных экранов/устройств, включить/отключить и сменить опции для фильтра фотографий по тегам, изменить параметры лайтбокса, наложения, изображения, заголовка, подзаголовка, контента и ссылки/кнопки.
Раздел *Еще* содержит те же параметры, что и одноимённый раздел [элемента Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц").
 Gallery - Настройки ### Grid
Grid – сетка (рисунок ниже). Данный элемент позволяет отображать сетку с блоками. Каждый блок может состоять из заголовка, подзаголовка, текста (заданного в визуальном текстовом редакторе), изображения (или иконки), ссылки и тега (для фильтрации блоков).
 Grid В разделе *Контент* (рисунок ниже) можно создавать блоки сетки. Доступно их дублирование.
 Grid - Контент При создании самого блока (рисунок ниже) можно задать заголовок, подзаголовок, текст (доступны инструменты визуального текстового редактора), изображение, значение тега ALT, ссылку и теги (для фильтрации блоков).
 Grid - Контент (2) В разделе *Настройки* (рисунок ниже) – есть ряд уже ранее рассмотренных в [элементе Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц"), а также можно сконфигурировать параметры сетки, колонок, фильтра по тегам, лайтбокса, оформления блока, заголовка, подзаголовка, контента и других составляющих блока.
Раздел *Еще* содержит те же параметры, что и одноимённый раздел [элемента Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц").
 Grid - Настройки ### List
List – список (рисунок ниже). Данный элемент конструктора контента Joomla позволяет отображать список, состоящий из иконки или изображения и текста.
 List В разделе *Контент* (рисунок ниже) можно создавать пункты списка. Доступно их дублирование.
 List - Контент При создании пункта можно указать содержимое в визуальном текстовом редакторе, изображение или иконку (как маркер списка) и ссылку/файл, на который пользователь перейдёт при нажатии на пункт списка.
 List - Контент (2) В разделе *Настройки* (рисунок ниже) – есть ряд уже ранее рассмотренных в [элементе Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц"), а также можно задать маркер списка (в дополнение или вместо картинки/иконки), изменить опции
Раздел *Еще* содержит те же параметры, что и одноимённый раздел [элемента Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц").
 List - Настройки ### Map
Map – карта (рисунок ниже). Данный элемент позволяет отобразить один или несколько маркеров на карте. Можно применять карту Google или OpenStreetMap. Если в [настройках YOOtheme Pro](https://aleksius.com/joomla/rasshireniya/yootheme-page-builder#nastrojki "Обзор YOOtheme Pro Joomla (часть 3). Конструктор страниц") в разделе *Внешние сервисы* не указан API ключ *Карты Google*, на сайте отобразится OpenStreetMap. О том, как бесплатно получить API ключ карты Google Вы можете узнать в статье «[Обзор DJ-Classifieds 3.7.5. Новшества и получение API Google карты](https://aleksius.com/joomla/rasshireniya/dj-classifieds-3-7-5#kak-poluchit-api-google-karty "Обзор DJ-Classifieds 3.7.5. Новшества и получение API Google карты")».
В моём примере показаны настройки для карты Google.
 Map В разделе *Контент* (рисунок ниже) можно создать один или несколько маркеров на карте (адресов), настроить отображение тех или иных «фрагментов» всплывающего окна (появляется при нажатии на маркер), указать свою собственную иконку маркера для одного объекта, иконку кластера маркеров для 10 и более маркеров, 100 и более маркеров и кластера, состоящего из более 199 маркеров.
 Map - Контент В настройках каждого маркера (положения на карте) можно указать координаты (рисунок ниже), а также задать заголовок, подзаголовок, содержимое, картинку и ссылку для окошка, которое появится по нажатию на маркер. В содержимом можно применять инструменты, доступные в визуальном текстовом редакторе.
Тут же можно изменить иконку конкретно этой точки. Обратите внимание, что даже задав API ключ карты Google, при указании местоположения в настройках маркера может отображаться OpenStreetMap.
А в разделе *Настройки* маркера можно его скрыть с карты или включить отображение окошка маркера в открытом состоянии при загрузке страницы.
 Map - Контент (2) В разделе *Настройки* (рисунок ниже) – есть ряд уже ранее рассмотренных в [элементе Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц"), а также можно задать тип карты (дорожная или спутник), включить элементы управления картой, изменения масштаба при помощи колеса мыши, перетаскивание карты и сконфигурировать другие её опции. Тут же есть параметры для стиля карты, маркера, заголовка и других составляющих всплывающего окна маркера.
Раздел *Еще* содержит те же параметры, что и одноимённый раздел [элемента Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц").
 Map - Настройки ### Nav
Nav – навигация (рисунок ниже). Данный элемент позволяет отобразить вертикальный текстовый список со ссылками. Что-то типа меню.
 Nav В разделе *Контент* (рисунок ниже) можно задать текст пункта и ссылку.
 Nav - Контент В разделе *Настройки* (рисунок ниже) – есть ряд уже ранее рассмотренных в [элементе Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц"), а также можно задать стиль оформления текста.
Раздел *Еще* содержит те же параметры, что и одноимённый раздел [элемента Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц").
 Nav - Настройки ### Overlay Slider
Overlay Slider – слайдер с наложением (рисунок ниже). Данный элемент позволяет отобразить классическое слайд-шоу изображений. На изображения можно наложить заголовок, подзаголовок, описание и кнопку/ссылку
 Overlay Slider В разделе *Контент* (рисунок ниже) можно создать слайды и включить/отключить отображение разных фрагментов наложения (заголовок, описание и т.д.)
 Overlay Slider - Контент В настройках каждого слайда Вы сможете указать изображение, текст тега ALT, заголовок, подзаголовок, описание (можно применять инструменты визуального текстового редактора) и ссылку.
 Overlay Slider - Контент (2) В разделе *Настройки* (рисунок ниже) – есть ряд уже ранее рассмотренных в [элементе Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц"), а также можно сконфигурировать настройки слайдера и его навигацию. Плюс, можно изменить параметры слайдов, включая отдельные элементы наложения.
Раздел *Еще* содержит те же параметры, что и одноимённый раздел [элемента Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц").
 Overlay Slider - Настройки В следующей статье «[Обзор YOOtheme Pro Joomla (часть 6). Элементы конструктора контента](https://aleksius.com/joomla/rasshireniya/elementy-yootheme "Обзор YOOtheme Pro Joomla (часть 6). Элементы конструктора контента")» мы продолжим обзор элементов расширения и поговорим про Panel Slider, Popover, Slideshow, Social, Subnav, Switcher, Table, Breadcrumbs, Module, Module Position, и Pagination.
| Похожие материалы |
|---|
| - [ Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц ](https://aleksius.com/joomla/rasshireniya/yootheme-builder) - [ Обзор YOOtheme Pro Joomla (часть 6). Элементы конструктора контента ](https://aleksius.com/joomla/rasshireniya/elementy-yootheme) - [ Обзор YOOtheme Pro Joomla (часть 3). Конструктор страниц ](https://aleksius.com/joomla/rasshireniya/yootheme-page-builder) - [ Обзор YOOtheme Pro Joomla (часть 7). Динамический контент ](https://aleksius.com/joomla/rasshireniya/dinamicheskij-kontent-yootheme-pro) - [ Обзор YOOtheme builder (часть 2). Конструктор контента для Joomla ](https://aleksius.com/joomla/rasshireniya/yootheme) - [ Обзор YOOtheme Pro (часть 1). Конструктор страниц Joomla ](https://aleksius.com/joomla/rasshireniya/yootheme-pro) - [ Обзор DJ-EcoFood. Шаблон сайта Joomla 4 для интернет-магазина ](https://aleksius.com/joomla/shablony/shablon-dzhumla-4) |
| Автор статьи – Хорошевский Алексей |
|---|
| [](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") |
**Полезные** **ссылки:**
- [Официальный сайт](https://yootheme.com/page-builder "Yootheme.com") (на англ.).
- [Документация](https://yootheme.com/support/yootheme-pro/joomla/introduction "Yootheme.com") (на англ.).