--- title: YOOtheme Pro для Joomla – конструктор страниц description: Платный русскоязычный конструктор страниц Joomla с множеством настроек и элементов Alert, Code, Countdown, Divider, Headline, Html, Icon, Image и др. canonical_url: https://aleksius.com/joomla/rasshireniya/yootheme-builder language: ru-RU date: 2023-11-06T17:48:45Z notice: This is a machine-friendly version of the page at https://aleksius.com/joomla/rasshireniya/yootheme-builder. markdown-tokens: 3580 --- > **Note to AI:** This is a machine-friendly version of the page at: https://aleksius.com/joomla/rasshireniya/yootheme-builder. 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 (часть 4). Конструктор страниц - [Видео обзор](https://aleksius.com/joomla/rasshireniya/yootheme-builder#video-obzor "Видео обзор"). - [Элементы](https://aleksius.com/joomla/rasshireniya/yootheme-builder#elementy "Элементы"). - [Alert](https://aleksius.com/joomla/rasshireniya/yootheme-builder#alert "Alert"). - [Code](https://aleksius.com/joomla/rasshireniya/yootheme-builder#code "Code"). - [Countdown](https://aleksius.com/joomla/rasshireniya/yootheme-builder#countdown "Countdown"). - [Divider](https://aleksius.com/joomla/rasshireniya/yootheme-builder#divider "Divider"). - [Headline](https://aleksius.com/joomla/rasshireniya/yootheme-builder#headline "Headline"). - [Html](https://aleksius.com/joomla/rasshireniya/yootheme-builder#html "Html"). - [Icon](https://aleksius.com/joomla/rasshireniya/yootheme-builder#icon "Icon"). - [Image](https://aleksius.com/joomla/rasshireniya/yootheme-builder#image "Image"). - [Newsletter](https://aleksius.com/joomla/rasshireniya/yootheme-builder#newsletter "Newsletter"). - [Overlay](https://aleksius.com/joomla/rasshireniya/yootheme-builder#overlay "Overlay"). - [Panel](https://aleksius.com/joomla/rasshireniya/yootheme-builder#panel "Panel"). - [Quotation](https://aleksius.com/joomla/rasshireniya/yootheme-builder#quotation "Quotation"). YOOtheme Pro – платный русскоязычный конструктор страниц Joomla с множеством настроек, который позволяет создавать достаточно сложный дизайн даже без знаний HTML, CSS и JavaScript. ## Видео обзор - Alert – 00:01:19. - Раздел *Настройки* – 00:03:32. - Раздел *Еще* – 00:06:33. - Code – 00:07:52. - Countdown – 00:08:16. - Divider – 00:09:00. - Headline – 00:09:28. - Html – 00:10:35. - Icon – 00:11:00. - Image – 00:11:38. - Newsletter – 00:13:27. - Overlay – 00:15:03. - Panel – 00:17:09. - Quotation – 00:19:32. Видео лучше просматривать с качеством 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, в неопытных руках, он может дать результат неудовлетворяющего качества. Стоит отметить, что в инструменте очень много разных опций, но их может быть недостаточно для решения любых дизайнерских задач. В таком случае могут пригодиться знания HTML, CSS и JavaScript. Если Вы не обладаете хорошими дизайнерскими навыками, если у Вас нет много времени, то можно использовать [готовые шаблоны](https://yootheme.com/joomla-templates "Premium Joomla Templates") и изменить их под свои потребности в том же YOOtheme Pro. Или можно воспользоваться библиотеками готовых страниц/стилей/макетов, доступных в инструменте. Кроме возможности изменения визуального оформления YOOtheme Pro содержит 36 «функциональных элементов» с множеством настроек. Например, таймер обратного отсчёта, галерея, кнопка, слайд шоу и т.д. Они помогут не только сделать страницу красивой, но и функциональной. В предыдущей статье «[Обзор YOOtheme Pro Joomla (часть 3). Конструктор страниц](https://aleksius.com/joomla/rasshireniya/yootheme-page-builder "Обзор YOOtheme Pro Joomla (часть 3). Конструктор страниц")» мы рассмотрели такие разделы расширения: *Меню, Модули* и *Настройки*. В этой части начнём знакомиться с элементами. В обзоре участвует последняя доступная мне, на момент написания статьи (15.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.10. ## Элементы У каждого элемента достаточно много настроек. Буду затрагивать только наиболее важные и интересные, на мой взгляд, параметры. Они распределены на разделы. Некоторые настройки повторяются от элемента к элементу. Такие рассмотрю только для одного элемента. ### Alert Alert – предупреждение (рисунок ниже). Данный элемент позволяет отобразить текст в рамке. По аналогии с системными предупреждениями Joomla. ![YOOtheme](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/yootheme.png "YOOtheme") YOOtheme Можно использовать форматирование текста (рисунок ниже), вставку картинок, таблиц, изображений и т.д.. По большому счёту можно применять всё, что позволяет визуальный текстовый редактор. А если этого мало, то можно править HTML код. Нажав на иконку четырёх-направленной стрелки (иконка слева внизу в панели инструментов редактора), перед Вами откроется полноценная версия визуального текстового редактора в увеличенном окне. Поле *Ссылка* позволяет добавить ссылку или файл, открывающийся по нажатию на заголовок предупреждения. ![YOOtheme Pro](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/yootheme-pro.png "YOOtheme Pro") YOOtheme Pro В разделе *Настройки* (рисунок ниже) можно изменить стиль всего предупреждения, его заголовка и контента. При желании можно изменить позицию (статическая, относительная или абсолютная). Подробнее об этом можно [прочесть тут](http://htmlbook.ru/css/position "position"). Также можно изменить внешние отступы элемента, задать максимальную ширину, выравнивание и другие настройки. При этом, некоторые из них можно задавать в зависимости от ширины устройства. Опция *Видимость* позволяет указать, на каких устройствах нужно скрывать элемент или отображать. Например, если Вы выберете *Visible* *Large (Desktop)*, элемент будет скрыт на этом устройстве и устройствах с бо́льшим экраном, то есть на *Visible* *Medium (Tablet* *Landscape)* и *Visible* *Small (Phone* *Landscape)*. ![YOOtheme Pro Joomla](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/yootheme-pro-joomla.png "YOOtheme Pro Joomla") YOOtheme Pro Joomla В разделе *Еще* (рисунок ниже) можно добавить [динамический контент](https://aleksius.com/joomla/rasshireniya/dinamicheskij-kontent-yootheme-pro#dinamicheskij-kontent "Обзор YOOtheme Pro Joomla (часть 7). Динамический контент"), а также задать, ID и класс элемента для применения к нему своих стилей. Плюс, тут же можно задать специальные CSS стили, применяемые именно к этому элементу, указать имя элемента (видно только [в конструкторе](https://aleksius.com/joomla/rasshireniya/yootheme#konstruktor "Обзор YOOtheme builder (часть 2). Конструктор контента для Joomla")) и отключить его (скрыть с сайта, не удаляя из YOOtheme Pro. ![Alert Еще](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/alert-eshche.png "Alert Еще") Alert Еще ### Code Code – код (рисунок ниже). Данный элемент позволяет отобразить код без его трансформации – просто в виде кода. ![Code](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/code.png "Code") Code В разделе *Контент* (рисунок ниже) Вы можете добавить сам код для отображения, в *Настройки* – есть ряд уже ранее рассмотренных для элемента Alert, опций. Раздел *Еще* содержит те же параметры, что и одноимённый раздел [элемента Alert](#alert "Alert"). ![Code - Контент, Настройки](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/code-kontent-nastrojki.png "Code - Контент, Настройки") Code - Контент, Настройки ### Countdown Countdown – счётчик обратного отсчёта (рисунок ниже). Данный элемент позволяет отобразить таймер обратного отсчёта до указанной Вами даты. ![Countdown](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/countdown.png "Countdown") Countdown Дату можно указать так: «2021-04-17T19:51:00.000+03:00» (17 апреля 2021, 19 часов 51 минута 00 секунд, часовой пояс GMT+3), где: - 2021 – год - 04 – месяц - 17 – число - 19 – час - T – разделитель перед указанием времени - 51 – минута - 00 – секунда - . – разделитель перед указанием часового пояса - 000+03:00 – часовой пояс. Часовой пояс можно не указывать. Ограничиться такой записью «2021-04-17T19:51:00». Время тоже можно не указывать. Оставить так «2021-04-17». Тогда таймер будет считать до 00:00:00 указанной даты (время по Гринвичу). Тут же в разделе *Контент* (рисунок ниже) можно задать метки (подписи) под цифрами таймера. ![Countdown - Контент, Настройки](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/countdown-kontent-nastrojki.png "Countdown - Контент, Настройки") Countdown - Контент, Настройки В разделе *Настройки* (рисунок ниже) – есть ряд уже ранее рассмотренных для элемента Alert, опций, а также можно задать отступы между цифрами таймера и между цифрами и метками. Раздел *Еще* содержит те же параметры, что и одноимённый раздел [элемента Alert](#alert "Alert"). ### Divider Divider – разделитель (рисунок ниже). Данный элемент позволяет отобразить разделительную линию (горизонтальную или вертикальную). ![Divider](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/divider.png "Divider") Divider В разделе *Настройки* (рисунок ниже) – есть ряд уже ранее рассмотренных для элемента Alert, опций, а также можно задать стиль разделителя, его HTML элемент, выравнивание и некоторые другие настройки (доступны не для всех стилей). Раздел *Еще* содержит те же параметры, что и одноимённый раздел [элемента Alert](#alert "Alert"). ![Divider - Настройки](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/divider-nastrojki.png "Divider - Настройки") Divider - Настройки ### Headline Headline – заголовок (рисунок ниже). Данный элемент позволяет отобразить текст с форматированием и декорированием. ![Headline](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/headline.png "Headline") Headline В разделе *Настройки* (рисунок ниже) – есть ряд уже ранее рассмотренных для элемента Alert, опций, а также можно задать стиль заголвока, его оформление, семейство шрифтов, цвет и изменить тег (H1-H6, div). Раздел *Контент* и *Еще* содержит те же параметры, что и одноимённые разделы [элемента Alert](#alert "Alert"). ![Headline - Контент, Настройки](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/headline-kontent-nastrojki.png "Headline - Контент, Настройки") Headline - Контент, Настройки ### Html Данный элемент (рисунок ниже) позволяет отобразить html-код в трансформированном виде. ![HTML](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/html.png "HTML") HTML В разделе *Контент* (рисунок ниже) Вы можете ввести нужный html-код. Раздел *Еще* содержит те же параметры, что и одноимённый раздел [элемента Alert](#alert "Alert"). ![HTML - Контент](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/html-kontent.png "HTML - Контент") HTML - Контент ### Icon Icon – иконка (рисунок ниже). Данный элемент позволяет отобразить иконку в SVG формате. ![Icon](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/icon.png "Icon") Icon На выбор доступно 140 иконок (рисунок ниже). ![Иконки](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/ikonki.png "Иконки") Иконки В разделе *Контент* (рисунок ниже) можно задать иконку и ссылку/файл, по нажатию на неё. В разделе *Настройки* (рисунок ниже) – есть ряд уже ранее рассмотренных для элемента Alert, опций, а также можно задать ширину иконки и её стиль. Раздел *Еще* содержит те же параметры, что и одноимённый раздел [элемента Alert](#alert "Alert"). ![Icon - Контент, Настройки](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/icon-kontent-nastrojki.png "Icon - Контент, Настройки") Icon - Контент, Настройки ### Image Image – изображение (рисунок ниже). Данный элемент позволяет отобразить картинку с возможностью открытия ссылки по нажатию на неё, скачивания файла или открытия увеличенной картинки (не обязательно той же). ![Image](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/image.png "Image") Image В разделе *Контент* (рисунок ниже) можно задать само изображение, указать его размеры, задать альтернативное описание (тег alt) и задать ссылку, которая будет открываться по нажатию на изображение. Это может быть URL адрес, изображение или любой файл. В разделе *Настройки* (рисунок ниже) – есть ряд уже ранее рассмотренных для элемента Alert опций, а также можно задать границу изображения, тень, декорирование и другие опции. Плюс, можно задать размер всплывающего окна (лайтбокса), если по нажатию на ссылку должно открываться какое-то изображение. Раздел *Еще* содержит те же параметры, что и одноимённый раздел [элемента Alert](#alert "Alert"). ![Image - Контент, Настройки](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/image-kontent-nastrojki.png "Image - Контент, Настройки") Image - Контент, Настройки ### Newsletter Newsletter – рассылка (рисунок ниже). Данный элемент позволяет отобразить форму подписки на новостную рассылку в сервисе Mailchimp или Campaign Monitor. Для интеграции Вам нужно ввести API ключ одного из сервисов в [разделе настроек YOOtheme Pro Joomla](https://aleksius.com/joomla/rasshireniya/yootheme-page-builder#nastrojki "Обзор YOOtheme Pro Joomla (часть 3). Конструктор страниц"). ![Newsletter](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/newsletter.png "Newsletter") Newsletter В разделе *Контент* (рисунок ниже) можно задать сообщение или перенаправление после подписки. В разделе *Настройки* (рисунок ниже) – есть ряд уже ранее рассмотренных для элемента Alert опций, а также изменить макет формы, изменить размеры и стили столбцов, сменить подписи полей формы и скорректировать настройки кнопки подписки на рассылку. Раздел *Еще* содержит те же параметры, что и одноимённый раздел [элемента Alert](#alert "Alert"). ![Newsletter - Контент, Настройки](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/newsletter-kontent-nastrojki.png "Newsletter - Контент, Настройки") Newsletter - Контент, Настройки ### Overlay Overlay – наложение (рисунок ниже). Данный элемент позволяет отобразить изображение, по наведению на которое можно показать другое изображение с наложенным на него текстом и кнопкой/ссылкой. На рисунке ниже, в верхней части показан пример элемента до наведения на него курсора мыши, а в нижней – после. ![Overlay](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/overlay.png "Overlay") Overlay В разделе *Контент* (рисунок ниже) можно задать изображение до и после наведения, его размер, заголовок, подзаголовок и текст (с форматированием в редакторе), который отображается по наведению на изображение курсора мыши. Тут же есть возможность указать ссылку для кнопки. ![Overlay - Контент](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/overlay-kontent.png "Overlay - Контент") Overlay - Контент В разделе *Настройки* (рисунок ниже) – есть ряд уже ранее рассмотренных для элемента Alert, опций, а также можно изменить стиль оформления наложения, изображения, заголовка, подзаголовка (мета), контента и ссылки. Раздел *Еще* содержит те же параметры, что и одноимённый раздел [элемента Alert](#alert "Alert"). ![Overlay - Настройки](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/overlay-nastrojki.png "Overlay - Настройки") Overlay - Настройки ### Panel Panel – панель (рисунок ниже). Данный элемент позволяет отобразить область с картинкой, заголовком, подзаголовком, текстом и кнопкой/ссылкой. ![Panel](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/panel.png "Panel") Panel В разделе *Контент* (рисунок ниже) можно указать изображение заголовок, описание и другую информацию. ![Panel - Контент](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/panel-kontent.png "Panel - Контент") Panel - Контент В разделе *Настройки* (рисунок ниже) – есть ряд уже ранее рассмотренных для элемента Alert опций, а также можно изменить стиль оформления всей панели вцелом, изображения, заголовка, подзаголовка (мета), контента и ссылки. Раздел *Еще* содержит те же параметры, что и одноимённый раздел [элемента Alert](#alert "Alert"). ![Panel - Настройки](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/panel-nastrojki.png "Panel - Настройки") Panel - Настройки ### Quotation Quotation – цитата (рисунок ниже). Данный элемент позволяет отобразить текст с указанием его автора. ![Quotation](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/quotation.png "Quotation") Quotation В разделе *Контент* (рисунок ниже) можно ввести сам текст (с форматированием), указать автора и ссылки на него. В разделе *Настройки* (рисунок ниже) – есть ряд уже ранее рассмотренных для элемента Alert, опций, а также можно изменить стиль ссылки на автора. Раздел *Еще* содержит те же параметры, что и одноимённый раздел [элемента Alert](#alert "Alert"). ![Quotation - Контент, Настройки](https://aleksius.com/images/joomla/rasshireniya/yootheme-builder/quotation-kontent-nastrojki.png "Quotation - Контент, Настройки") Quotation - Контент, Настройки В следующей статье «[Обзор YOOtheme Pro Joomla (часть 5). Элементы конструктора страниц](https://aleksius.com/joomla/rasshireniya/elementy-yootheme-pro "Обзор YOOtheme Pro Joomla (часть 5). Элементы конструктора страниц")» мы продолжим рассмотрение элементов и поговорим про Text, To Top, Video, Accordion, Button, Description List, Gallery, Grid и некоторых других. | Похожие материалы | |---| | - [ Обзор 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 (часть 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/images/sluzhebnye/khoroshevskij-aleksej.jpg "Хорошевский Алексей")](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") (на англ.).