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 и Mail.ru.
Обратите внимание, что это инструмент, облегчающий работу, но не делающий её за Вас. Конечный результат сильно зависит от Ваших дизайнерских навыков, умения работать с этим инструментом, количества потраченного на работу времени и качества контента (фото, видео и т.д.). При всех возможностях YOOtheme Pro, в неопытных руках, он может дать результат неудовлетворяющего качества. Стоит отметить, что в инструменте очень много разных опций, но их может быть недостаточно для решения любых дизайнерских задач. В таком случае могут пригодиться знания HTML, CSS и JavaScript.
Если Вы не обладаете хорошими дизайнерскими навыками, если у Вас нет много времени, то можно использовать готовые шаблоны и изменить их под свои потребности в том же YOOtheme Pro. Или можно воспользоваться библиотеками готовых страниц/стилей/макетов, доступных в инструменте.
Кроме возможности изменения визуального оформления YOOtheme Pro содержит 36 «функциональных элементов» с множеством настроек. Например, таймер обратного отсчёта, галерея, кнопка, слайд шоу и т.д. Они помогут не только сделать страницу красивой, но и функциональной.
В предыдущей статье «Обзор YOOtheme Pro Joomla (часть 3). Конструктор страниц» мы рассмотрели такие разделы расширения: Меню, Модули и Настройки. В этой части начнём знакомиться с элементами.
В обзоре участвует последняя доступная мне, на момент написания статьи (15.04.2021), русскоязычная версия YOOtheme Pro 2.4.9 в Joomla 3.9.26. Шаблон сайта Kitchen Daily 2.4.10.
Элементы
У каждого элемента достаточно много настроек. Буду затрагивать только наиболее важные и интересные, на мой взгляд, параметры.
Они распределены на разделы. Некоторые настройки повторяются от элемента к элементу. Такие рассмотрю только для одного элемента.
Alert
Alert – предупреждение (рисунок ниже). Данный элемент позволяет отобразить текст в рамке. По аналогии с системными предупреждениями Joomla.
Можно использовать форматирование текста (рисунок ниже), вставку картинок, таблиц, изображений и т.д.. По большому счёту можно применять всё, что позволяет визуальный текстовый редактор. А если этого мало, то можно править HTML код. Нажав на иконку четырёх-направленной стрелки (иконка слева внизу в панели инструментов редактора), перед Вами откроется полноценная версия визуального текстового редактора в увеличенном окне.
Поле Ссылка позволяет добавить ссылку или файл, открывающийся по нажатию на заголовок предупреждения.
В разделе Настройки (рисунок ниже) можно изменить стиль всего предупреждения, его заголовка и контента. При желании можно изменить позицию (статическая, относительная или абсолютная). Подробнее об этом можно прочесть тут.
Также можно изменить внешние отступы элемента, задать максимальную ширину, выравнивание и другие настройки. При этом, некоторые из них можно задавать в зависимости от ширины устройства.
Опция Видимость позволяет указать, на каких устройствах нужно скрывать элемент или отображать. Например, если Вы выберете Visible Large (Desktop), элемент будет скрыт на этом устройстве и устройствах с бо́льшим экраном, то есть на Visible Medium (Tablet Landscape) и Visible Small (Phone Landscape).
В разделе Еще (рисунок ниже) можно добавить динамический контент, а также задать, ID и класс элемента для применения к нему своих стилей. Плюс, тут же можно задать специальные CSS стили, применяемые именно к этому элементу, указать имя элемента (видно только в конструкторе) и отключить его (скрыть с сайта, не удаляя из YOOtheme Pro.
Code
Code – код (рисунок ниже). Данный элемент позволяет отобразить код без его трансформации – просто в виде кода.
В разделе Контент (рисунок ниже) Вы можете добавить сам код для отображения, в Настройки – есть ряд уже ранее рассмотренных для элемента Alert, опций. Раздел Еще содержит те же параметры, что и одноимённый раздел элемента Alert.
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 указанной даты (время по Гринвичу).
Тут же в разделе Контент (рисунок ниже) можно задать метки (подписи) под цифрами таймера.
В разделе Настройки (рисунок ниже) – есть ряд уже ранее рассмотренных для элемента Alert, опций, а также можно задать отступы между цифрами таймера и между цифрами и метками. Раздел Еще содержит те же параметры, что и одноимённый раздел элемента Alert.
Divider
Divider – разделитель (рисунок ниже). Данный элемент позволяет отобразить разделительную линию (горизонтальную или вертикальную).
В разделе Настройки (рисунок ниже) – есть ряд уже ранее рассмотренных для элемента Alert, опций, а также можно задать стиль разделителя, его HTML элемент, выравнивание и некоторые другие настройки (доступны не для всех стилей). Раздел Еще содержит те же параметры, что и одноимённый раздел элемента Alert.
Headline
Headline – заголовок (рисунок ниже). Данный элемент позволяет отобразить текст с форматированием и декорированием.
В разделе Настройки (рисунок ниже) – есть ряд уже ранее рассмотренных для элемента Alert, опций, а также можно задать стиль заголвока, его оформление, семейство шрифтов, цвет и изменить тег (H1-H6, div). Раздел Контент и Еще содержит те же параметры, что и одноимённые разделы элемента Alert.
Html
Данный элемент (рисунок ниже) позволяет отобразить html-код в трансформированном виде.
В разделе Контент (рисунок ниже) Вы можете ввести нужный html-код. Раздел Еще содержит те же параметры, что и одноимённый раздел элемента Alert.
Icon
Icon – иконка (рисунок ниже). Данный элемент позволяет отобразить иконку в SVG формате.
На выбор доступно 140 иконок (рисунок ниже).
В разделе Контент (рисунок ниже) можно задать иконку и ссылку/файл, по нажатию на неё. В разделе Настройки (рисунок ниже) – есть ряд уже ранее рассмотренных для элемента Alert, опций, а также можно задать ширину иконки и её стиль. Раздел Еще содержит те же параметры, что и одноимённый раздел элемента Alert.
Image
Image – изображение (рисунок ниже). Данный элемент позволяет отобразить картинку с возможностью открытия ссылки по нажатию на неё, скачивания файла или открытия увеличенной картинки (не обязательно той же).
В разделе Контент (рисунок ниже) можно задать само изображение, указать его размеры, задать альтернативное описание (тег alt) и задать ссылку, которая будет открываться по нажатию на изображение. Это может быть URL адрес, изображение или любой файл.
В разделе Настройки (рисунок ниже) – есть ряд уже ранее рассмотренных для элемента Alert опций, а также можно задать границу изображения, тень, декорирование и другие опции. Плюс, можно задать размер всплывающего окна (лайтбокса), если по нажатию на ссылку должно открываться какое-то изображение.
Раздел Еще содержит те же параметры, что и одноимённый раздел элемента Alert.
Newsletter
Newsletter – рассылка (рисунок ниже). Данный элемент позволяет отобразить форму подписки на новостную рассылку в сервисе Mailchimp или Campaign Monitor. Для интеграции Вам нужно ввести API ключ одного из сервисов в разделе настроек YOOtheme Pro Joomla.
В разделе Контент (рисунок ниже) можно задать сообщение или перенаправление после подписки.
В разделе Настройки (рисунок ниже) – есть ряд уже ранее рассмотренных для элемента Alert опций, а также изменить макет формы, изменить размеры и стили столбцов, сменить подписи полей формы и скорректировать настройки кнопки подписки на рассылку.
Раздел Еще содержит те же параметры, что и одноимённый раздел элемента Alert.
Overlay
Overlay – наложение (рисунок ниже). Данный элемент позволяет отобразить изображение, по наведению на которое можно показать другое изображение с наложенным на него текстом и кнопкой/ссылкой. На рисунке ниже, в верхней части показан пример элемента до наведения на него курсора мыши, а в нижней – после.
В разделе Контент (рисунок ниже) можно задать изображение до и после наведения, его размер, заголовок, подзаголовок и текст (с форматированием в редакторе), который отображается по наведению на изображение курсора мыши. Тут же есть возможность указать ссылку для кнопки.
В разделе Настройки (рисунок ниже) – есть ряд уже ранее рассмотренных для элемента Alert, опций, а также можно изменить стиль оформления наложения, изображения, заголовка, подзаголовка (мета), контента и ссылки.
Раздел Еще содержит те же параметры, что и одноимённый раздел элемента Alert.
Panel
Panel – панель (рисунок ниже). Данный элемент позволяет отобразить область с картинкой, заголовком, подзаголовком, текстом и кнопкой/ссылкой.
В разделе Контент (рисунок ниже) можно указать изображение заголовок, описание и другую информацию.
В разделе Настройки (рисунок ниже) – есть ряд уже ранее рассмотренных для элемента Alert опций, а также можно изменить стиль оформления всей панели вцелом, изображения, заголовка, подзаголовка (мета), контента и ссылки.
Раздел Еще содержит те же параметры, что и одноимённый раздел элемента Alert.
Quotation
Quotation – цитата (рисунок ниже). Данный элемент позволяет отобразить текст с указанием его автора.
В разделе Контент (рисунок ниже) можно ввести сам текст (с форматированием), указать автора и ссылки на него.
В разделе Настройки (рисунок ниже) – есть ряд уже ранее рассмотренных для элемента Alert, опций, а также можно изменить стиль ссылки на автора.
Раздел Еще содержит те же параметры, что и одноимённый раздел элемента Alert.
В следующей статье «Обзор YOOtheme Pro Joomla (часть 5). Элементы конструктора страниц» мы продолжим рассмотрение элементов и поговорим про Text, To Top, Video, Accordion, Button, Description List, Gallery, Grid и некоторых других.
| Похожие материалы |
|---|
| Автор статьи – Хорошевский Алексей |
|---|
 Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Публикации и работа: |
Полезные ссылки:
- Официальный сайт (на англ.).
- Документация (на англ.).
