---
title: Обзор YOOtheme builder (часть 2). Конструктор контента для Joomla
description: Платный русскоязычный конструктор контента Джумла. Огромное количество настроек, позволяющих тонко сконфигурировать как контент страницы, так и шаблон сайта
canonical_url: https://aleksius.com/joomla/rasshireniya/yootheme
language: ru-RU
date: 2023-11-06T17:47:45Z
notice: This is a machine-friendly version of the page at https://aleksius.com/joomla/rasshireniya/yootheme.
markdown-tokens: 3561
---
> **Note to AI:** This is a machine-friendly version of the page at: https://aleksius.com/joomla/rasshireniya/yootheme. 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 builder (часть 2). Конструктор контента для Joomla
- [Видео обзор](https://aleksius.com/joomla/rasshireniya/yootheme#video-obzor "Видео обзор").
- [Общие настройки YOOtheme Joomla](https://aleksius.com/joomla/rasshireniya/yootheme#obshchie-nastrojki-yootheme-joomla "Общие настройки YOOtheme Joomla").
- [Стиль](https://aleksius.com/joomla/rasshireniya/yootheme#stil "Стиль").
- [Конструктор](https://aleksius.com/joomla/rasshireniya/yootheme#konstruktor "Конструктор").
- [Templates (шаблоны)](https://aleksius.com/joomla/rasshireniya/yootheme#templates-shablony "Templates (шаблоны)").
YOOtheme Pro – русскоязычный платный конструктор страниц для Joomla с очень большим количеством настроек.
## Видео обзор
- Стиль – 00:00:52.
- Конструктор – 00:06:32.
- Настройки секций – 00:08:25.
- Настройки строк – 00:11:02.
- Настройки колонок – 00:12:08.
- Templates (шаблоны) – 00:16:29.
- Динамический контент – 00:22:25.
Видео лучше просматривать с качеством 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").
Ссылки из видео:
- «[Обзор YOOtheme Pro (часть 1). Конструктор страниц Joomla](https://aleksius.com/joomla/rasshireniya/yootheme-pro "Обзор YOOtheme Pro (часть 1). Конструктор страниц Joomla")».
Компонент позволяет гибко сконфигурировать макет страницы и настроить стиль большинства элементов (заголовки, текстовые блоки, картинки, таблицы и т.д.). С ним Вам могут не понадобиться знания CSS, а если используете его вместе с шаблоном от YOOtheme, то вероятность необходимости знаний CSS почти ноль. Правда, за последние лет 7, не помню точно, чтобы делал хотя бы один сайт без правок CSS. Не учитывая, какой [шаблон](https://aleksius.com/joomla/shablony/ "Шаблоны Joomla") или какой [конструктор контента](https://aleksius.com/konstruktor-kontenta "Конструкторы контента для Joomla") использовал.
В предыдущей статье «[Обзор YOOtheme Pro (часть 1). Конструктор страниц Joomla](https://aleksius.com/joomla/rasshireniya/yootheme-pro "Обзор YOOtheme Pro (часть 1). Конструктор страниц Joomla")» мы рассмотрели основные возможности и особенности данного расширения, а также поговорили про пункт меню панели управления *[Макет](https://aleksius.com/joomla/rasshireniya/yootheme-pro#maket "Обзор YOOtheme Pro (часть 1). Конструктор страниц Joomla")* и шаги, необходимые для [изменения языка интерфейса самого расширения](https://aleksius.com/joomla/rasshireniya/yootheme-pro#russkij-yazyk-dlya-yootheme-pro "Обзор YOOtheme Pro (часть 1). Конструктор страниц Joomla"). В этой части поговорим про *Стиль,* *Конструктор* и *Templates* (шаблоны).
В обзоре участвует последняя, на момент написания статьи (27.03.2021), русскоязычная версия YOOtheme Pro 2.4.6 в Joomla 3.9.25. Шаблон сайта [Kitchen Daily](https://yootheme.com/joomla-templates/kitchen-daily "Kitchen Daily Joomla Template") 2.4.3.
## Общие настройки YOOtheme Joomla
### Стиль
В данном разделе 67 подразделов. Каждый из подразделов позволяет менять настройки стилей (шрифты, цвета, отступы и т.д.) для разных элементов (заголовки, списки, таблицы, лайтбоксы и т.д.). Вы сможете очень тонко настроить каждый отдельный элемент своего сайта ([фреймворк UIkit](https://getuikit.com/ "UIkit")), не прибегая к правке CSS.
На рисунке ниже показан фрагмент раздела *Стиль*. Обратите внимание, что **при наведении курсора мыши на какой-то элемент на странице сайта возле него появляется всплывающая подсказка** с указанием, в каком подразделе или в каких подразделах находятся настройки стиля для этого элемента. Это очень упрощает поиск нужного подраздела.
 YOOtheme Pro Нажав на спадающий список в верхней части панели (рисунок выше), перед Вами откроется всплывающее окно с возможностью выбора одного из 211 предварительно настроенных стилей – разные сочетания цветов и шрифтов и т.д. (рисунок ниже). Для загрузки стиля Вам нужна активная подписка на YOOtheme page builder, так как загрузка происходит с сайта разработчика.
В этом окне, но на вкладке *My styles* (мои стили) Вы можете сохранить свой стиль или загрузить существующий из файла.
 YOOtheme page builder Если активировать опцию *Предпросмотр всех компонентов пользовательского интерфейса*, на странице сайта появится тестовая страница с разными элементами интерфейса сайта (рисунок ниже). И Вам будет удобнее менять разные настройки, видя, что именно получается.
 YOOtheme builder Все подпункты стилей разделены на общие подпункты и подпункты компонентов (заголовки, списки, таблицы, лайтбоксы и т.д.).
- *Global* – Глобальные. Настройка общих стилей элементов интерфейса пользователя (созданных при помощи фреймворка UIkit) (рисунок ниже). Лучше сперва настроить их, а потом перейти к настройкам отдельных элементов (заголовки, списки, таблицы, лайтбоксы и т.д.).
- *Theme* – Тема. Настройка общих стилей элементов интерфейса пользователя (созданных **не** при помощи фреймворка UIkit). Например, контейнер страницы, панель меню и т.д.
- *Inverse* – Инверсия. Настройка общих стилей элементов интерфейса пользователя (созданных при помощи фреймворка UIkit) с инверсированными цветами («выворотка» – белым по чёрному) (рисунок ниже). Очень удобно, если у Вас есть переключатель фона на сайте в «ночной режим».
- *Шрифты Google*. Настройки шрифтов Google.
 YOOtheme Joomla По сути, содержимое всех подпунктов схоже. На рисунке ниже показан пример для подпункта *Global* другие подпункты, включая подпункты компонентов (заголовки, списки, таблицы, лайтбоксы и т.д.). Аналогичны. Можно изменить цвет, размер, отступ и другие стили разных элементов.
 Global В YOOtheme builder предусмотрено 63 подпункта для разных элементов. Каждый из подпунктов содержит настройки для изменения соответствующих стилей, по аналогии с настройками для *Global* (рисунок выше).
- *Accordion* – Аккордеон
- *Alert* – Предупреждение
- *Align* – Выравнивание
- *Animation* – Анимация
- *Article* – Статья
- *Background* – Фон
- *Badge* – Бейдж
- *Base* – Основа
- *Breadcrumb* – Хлебные крошки
- *Button* – Кнопка
- *Card* – Карточка (небольшая область с текстом, изображением)
- *Close* – Элемент управления для закрытия чего-то
- *Column* – Столбец
- *Comment* – Комментарий
- *Container* – Контейнер
- *Countdown* – Обратный отсчёт
- *Description list* – Список описаний
- *Divider* – Делитель
- *Dotnav* – Точки навигации
- *Drop* – Выпадающий элемент
- *Dropdown* – Спадающий список
- *Form* – Форма
- *Grid* – Сетка
- *Heading* – Заголовок
- *Height* – Высота
- *Icon* – Значок
- *Iconnav* – Иконки навигации
- *Label* – Подпись поля
- *Leader*
- *Lightbox* – Лайтбокс
- *Link* – Ссылка
- *List* – Список
- *Margin* – Внешний отступ
- *Marker* – Маркер
- *Modal* – Модальное окно
- *Nav* – Навигация
- *Navbar* – Панель навигации
- *Notification* – Уведомление
- *Offcanvas*
- Overlay – Оверлей
- *Padding* – Внутренний отступ
- *Pagination* – Пагинация
- *Placeholder* – Заполнитель
- *Position* – Позиция
- *Progress* – Прогресс
- *Search* – Поиск
- *Section* – Раздел
- *Slidenav* – Навигация слайдера
- *Slider* – Слайдер
- *Sortable* – Сортировка
- *Spinner* – Анимация загрузки
- *Sticky* – Закреплённый элемент
- *Subnav* – Подменю
- *Tab* – Вкладка
- *Table* – Таблица
- *Text* – Текст
- *Thumbnav* – Навигация миниатюр
- *Tile* – Заголовок
- *Tooltip* – Всплывающая подсказка
- *Totop* – Кнопка перемещения вверх страницы
- *Transition* – Эффект перехода
- *Utility* – Утилита
- *Width* – Ширина
Под списком подпунктов есть кнопки, позволяющие сбросить все настройки стилей в значения по умолчанию, сохранить все изменения в LESS файл и скачать его себе на компьютер, а также перекомпилировать стили, чтобы они применились на сайте (нужно в редких случаях).
### Конструктор
В этом разделе YOOtheme Joomla (рисунок ниже) Вы будете проводить большую часть времени при работе над страницей, так как именно тут Вы создаёте модульную сетку и наполняете её элементами (текстовыми блоками, картинками, видео, слайдерами и т.д.). На рисунке ниже отмечены некоторые основные инструменты и пиктограммы.
1. Название страницы (имя пункта меню).
2. Название секции.
3. Редактирование секции.
4. Дублировать секции.
5. Сохранение секции в библиотеке. Потом можно использовать на других страницах или скачать в виде файла для использования на другом сайте.
6. Удалить секцию.
7. Добавить элемент (текстовыми блоками, картинками, видео, слайдерами и т.д.).
8. Название элемента.
9. Дублировать элемент.
10. Сохранение элемента в библиотеке. Потом можно использовать на других страницах или скачать в виде файла для использования на другом сайте.
11. Удалить элемент.
12. Редактировать строку.
13. Дублировать строку.
14. Удалить строку.
15. Добавить строку.
16. Иконка, указывающая, что в элементе используется динамический контент.
17. Иконка, указывающая, что элемент отображается на планшетах в ландшафтной (альбомной/горизонтальной) ориентации и на экранах с бóльшим разрешением.
18. Иконка, указывающая, что элемент скрыт на планшетах в ландшафтной (альбомной/горизонтальной) ориентации и на экранах с бóльшим разрешением.
19. Добавить раздел.
 Конструктор У секции, строки и элемента есть свои настройки. Элементы и их настройки будут рассмотрены в статье «[Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц](https://aleksius.com/joomla/rasshireniya/yootheme-builder#elementy "Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц")».
**Настройки секции**. Секция – это одна или несколько строк. Настройки секции разделены на три раздела:
1. *Контент* (рисунок ниже). Позволяет задать фоновое изображение, видео (с YouTube или Vimeo) и декоративный заголовок.
2. *Настройки.*
3. *Еще.*
 Настройки секции (Контент) Раздел *Настройки* (рисунок ниже) позволяет сконфигурировать цвет фона, ширину и высоту секции (родительского контейнера для дочерних колонок), отступы, анимацию появления и задать параметры для заголовка, указанного в разделе *Контент*.
 Настройки секции (Настройки) Раздел *Еще* (рисунок ниже) позволяет задать имя секции (видно в самом YOOtheme builder), отключить её (не удаляя), добавить [динамический контент](https://aleksius.com/joomla/rasshireniya/dinamicheskij-kontent-yootheme-pro#dinamicheskij-kontent "Обзор YOOtheme Pro Joomla (часть 7). Динамический контент"), присвоить CSS класс, ID и добавить свои собственные стили.
 Настройки секции (Еще) **Настройки строки**. Строка может состоять из одной или пяти колонок (столбцов). Колонки могут быть разной ширины (фиксированной или нет). Подробнее об особенностях ширины можно узнать [в документации к фреймворку UIkit](https://getuikit.com/docs/width "Width"). Настройки строки разделены на два раздела:
1. *Настройки.*
2. *Еще* (рисунок ниже)*.* Данный раздел содержит опции аналогичные одноимённому разделу секции.
 Настройки строки (Еще) Раздел *Настройки* (рисунок ниже) содержит параметры, которые позволяют разделить строку на несколько колонок, задать расстояние между ними, разделитель, общую ширину и высоту всех колонок.
 Настройки строки (Настройки) Есть несколько макетов колонок (рисунок ниже). Обратите внимание, что ширина колонок указана не в чётком фиксированном значении в пикселях, а в частях от общей ширины той области, в которой они расположены. Например, «Quarters 2-1-1» – это три колонки, первая (левая) по ширине занимает столько же, сколько занимает вторая и третья колонки вместе взятые, вторая колонка занимает по ширине половину ширины первой колонки, третья – аналогична по ширине второй.
Есть макеты с фиксированной колонкой. Например, «Fixed-Left» – первая (левая) колонка занимает фиксированную ширину, а вторая занимает оставшуюся часть по ширине.
 Варианты колонок **У каждого макета есть свои настройки.** Рассмотрим их на примере макета двух колонок с – «Halves» (рисунок ниже). Опции *Смартфон в портретном режиме, Смартфон в альбомном режиме, Планшет (Альбомной ориентации)*, *Настольный компьютер* и *Large Screen* позволяют задать ширину каждой колонки в долях или фиксированных значениях для разных экранов.
Например, 1/2 – означает, что колонка будет занимать 50% от доступной ширины (родительского контейнера). А *Large* – 450 пикселей. Подробнее об этом можно прочесть [в документации к фреймворку UIkit](https://getuikit.com/docs/width#fixed-width "Fixed width").
Обратите внимание, что в сумме все колонки должны занимать всю доступную ширину. То есть, если для первой колонки задано *1/2*, то и для второй тоже надо задать *1/2*. Также можно для одной колонки задать *1/2* или *Small*, а для второй – *Expand*. *Expand* указывает на то, что колонка должна занять всё оставшееся пространство.
Если значение ширины для какого-то экрана не задано, то применяется значение ширины следующего более маленького экрана.
Опция *Order First* позволяет указать экран (устройство, точку разрыва) на котором данная колонка будет отображаться перед остальными колонками. На меньших экранах колонка будет отображаться в обычном порядке.
 Настройки макета **Для каждой из колонок доступны свои настройки**, разделённые на три раздела:
1. *Контент* (рисунок ниже). Позволяет задать фоновое изображение.
2. *Настройки.*
3. *Еще.*
 Настройки колонки (Контент) Раздел *Настройки* (рисунок ниже). Позволяет задать вертикальное выравнивание, стиль, цвет текста (только для стиля *None*) и внутренние отступы (для всех стилей кроме *None*).
 Настройки колонки (Настройки) Раздел *Еще* (рисунок ниже). Позволяет добавить динамический контент, ID, классы или свой собственный CSS код.
 Настройки колонки (Еще) ### Templates (шаблоны)
Шаблоны в YOOtheme page builder – это макет контентной части страницы, применяемый к страницам определённого типа. Вы сможете разместить разные элементы в макете и использовать в них динамический контент. Можно создавать шаблоны для таких типов страниц (типов пунктов меню):
- *Материал.*
- *Блог категории.*
- *Избранные материалы.*
- *Список элементов* (метки).
- *Список всех меток.*
- *Контакт.*
- *Форма поиска и список результатов поиска* (поиск).
- *Форма поиска и список результатов поиска* (умный поиск).
- *Страница ошибки 404.*
Рассмотрим пример шаблонна материала. При создании или редактировании шаблона (рисунок ниже), Вы можете указать его имя, тип страниц, к которым он относится и указать к материалам из каких категорий нужно его применять. Также есть возможность ограничения применения шаблона по [меткам](https://aleksius.com/joomla/rasshireniya/com-tags "Обзор Joomla com_tags. Добавление меток материалов") и возможность скрыть/отключить шаблон.
 Редактирование шаблона Редактировать шаблон YOOtheme Joomla можно тогда, когда Вы находитесь на странице сайта того типа, к которой относится шаблон. В моём случае – материал. Для редактирования шаблона нужно нажать на кнопку *Конструктор* справа от имени шаблона. На рисунке ниже показан пример моего шаблона для страницы материала. Рисунок слева – это *Изображение для полного текста*, текст справа – *Заголовок*, ниже – текст самого материала, а под ним слева – *Начало публикации*. Все эти данные при помощи динамического контента берутся из материала.
[](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/shablon-materiala-b.png "Шаблон материала") Шаблон материала У одной страницы может быть несколько шаблонов. Применяется тот, который стоит в списке выше остальных. Имена шаблонов можно перетаскивать мышью в панели YOOtheme Pro.
Также при редактировании шаблона можно использовать готовый макет (рисунок ниже). Но у Вас должна быть действующая лицензия на YOOtheme Pro. Макет можно вставить вместо Вашего макета или добавить его до/после Вашего макета.
 Готовые макеты В следующей статье «[Обзор YOOtheme Pro Joomla (часть 3). Конструктор страниц](https://aleksius.com/joomla/rasshireniya/yootheme-page-builder "Обзор YOOtheme Pro Joomla (часть 3). Конструктор страниц")» мы поговорим о таких разделах как *Меню, Модули* и *Настройки*.
| Похожие материалы |
|---|
| - [ Обзор YOOtheme Pro Joomla (часть 5). Элементы конструктора страниц ](https://aleksius.com/joomla/rasshireniya/elementy-yootheme-pro) - [ Обзор YOOtheme Pro Joomla (часть 6). Элементы конструктора контента ](https://aleksius.com/joomla/rasshireniya/elementy-yootheme) - [ Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц ](https://aleksius.com/joomla/rasshireniya/yootheme-builder) - [ Обзор YOOtheme Pro Joomla (часть 7). Динамический контент ](https://aleksius.com/joomla/rasshireniya/dinamicheskij-kontent-yootheme-pro) - [ Обзор YOOtheme Pro Joomla (часть 3). Конструктор страниц ](https://aleksius.com/joomla/rasshireniya/yootheme-page-builder) - [ Обзор 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") (на англ.).