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 и Mail.ru.
Ссылки из видео:
При помощи компонента Вы сможете сами создать лендинг даже без знаний HTML, CSS и JS. Так как landing page создаётся на базе Joomla, получите не только «визуальную» часть страницы, но и функционал в виде различных форм и того, что может предложить Joomla.
В предыдущей статье «Обзор YOOtheme Pro Joomla (часть 4). Конструктор страниц» мы начали рассмтаривать разные элементы расширения. В этой части продолжим их обзор.
В обзоре участвует последняя доступная мне, на момент написания статьи (22.04.2021), русскоязычная версия YOOtheme Pro 2.4.9 в Joomla 3.9.26. Шаблон сайта Kitchen Daily 2.4.11.
Элементы
У каждого элемента достаточно много настроек. Буду затрагивать только наиболее важные и интересные, на мой взгляд, параметры.
Они распределены на разделы. Некоторые настройки повторяются от элемента к элементу. Такие рассмотрю только для одного элемента.
Text
Text – текст (рисунок ниже). Данный элемент позволяет выводить текст с форматированием.
В разделе Контент (рисунок ниже) можно ввести или вставить любой текст, изображения, таблицы и всё, что позволит добавлять Ваш визуальный текстовый редактор. Плюс, можно использовать любые его инструменты.
В разделе Настройки (рисунок ниже) – есть ряд уже ранее рассмотренных в элементе Alert, а также можно задать отображение буквицы, вывести содержимое (текст, фото и т.д.) в колонках и изменить стиль, размер и цвет текста.
Раздел Еще содержит те же параметры, что и одноимённый раздел элемента Alert.
To Top
To Top – изображение (рисунок ниже). Данный элемент позволяет добавить иконку/ссылку, по нажатию на которую происходит прокрутка страницы вверх.
В разделе Контент (рисунок ниже, верхняя часть) можно задать текст возле иконки и текст, который появляется при наведении курсора мыши на иконку.
В разделе Настройки (рисунок ниже, нижняя часть) – есть ряд уже ранее рассмотренных для элемента Alert опций, а также можно задать стиль ссылки вверх и отступы.
Раздел Еще содержит те же параметры, что и одноимённый раздел элемента Alert.
Video
Video – видео (рисунок ниже). Данный элемент позволяет отображать видео со своего сайта или по ссылке с YouTube или Vimeo.
В разделе Контент (рисунок ниже) можно задать само видео, его размер, дополнительные опции и, если видео загружается с Вашего сайта, картинку предварительного просмотра. Она отображается до начала воспроизведения видео.
В разделе Настройки (рисунок ниже) – есть ряд уже ранее рассмотренных в элементе Alert, а также можно задать тень и декорирование элемента.
Раздел Еще содержит те же параметры, что и одноимённый раздел элемента Alert.
Accordion
Accordion – аккордеон (рисунок ниже). Данный элемент YOOtheme позволяет отобразить аккордеон, содержащий текстовый элемент (аналогичен элементу Text), картинку и кнопку/ссылку. Или можно использовать только видео/изображение в качестве содержимого.
В разделе Контент (рисунок ниже) можно создавать содержимое аккордеона. Есть возможность добавить текст (с форматированием), картинку и ссылку. У каждой отдельной вкладки аккордеона в её настройках есть вкладка Еще, где можно настроить динамический контент или отключить её.
В разделе Настройки (рисунок ниже) – есть ряд уже ранее рассмотренных в элементе Alert, а также можно задать возможность открытия нескольких вкладок аккордеона, закрытие всех вкладок, настроить контент (буквица, колонки), сконфигурировать изображение (размеры, выравнивание и т.д.), а также изменить параметры ссылки.
Раздел Еще содержит те же параметры, что и одноимённый раздел элемента Alert.
Button
Button – кнопка (рисунок ниже). Данный элемент YOOtheme Pro позволяет разместить одну или несколько кнопок с подписью и иконкой. По нажатию на кнопку может открываться ссылка, картинка или видео.
В разделе Контент (рисунок ниже) можно задать текст кнопки, иконку и указать, что именно должно открываться по нажатию на эту кнопку. У каждой кнопки есть своя вкладка Настройки, где можно задать стиль и выравнивание кнопки. А также можно настроить открытие ссылки/файла в новом, том же или модальном окне. На вкладке Еще можно настроить динамический контент или отключить её.
В разделе Настройки (рисунок ниже) – есть ряд уже ранее рассмотренных в элементе Alert, а также можно задать размер и отступы кнопок.
Раздел Еще содержит те же параметры, что и одноимённый раздел элемента Alert.
Description List
Description List – перечень с описанием (рисунок ниже). Данный элемент YOOtheme Pro Joomla позволяет отобразить список с дополнительным контентом. Каждый пункт списка может состоять из заголовка, подзаголовка и ссылки.
В разделе Контент (рисунок ниже) можно задать заголовок (пункт списка), подзаголовок, содержимое (в визуальном текстовом редакторе) и ссылку. На вкладке Еще можно настроить динамический контент или отключить этот пункт списка.
В разделе Настройки (рисунок ниже) – есть ряд уже ранее рассмотренных в элементе Alert, а также можно задать маркер для списка, его цвет, указать количество колонок списка, изменить опции заголовка, подзаголовка, содержимого и ссылки.
Раздел Еще содержит те же параметры, что и одноимённый раздел элемента Alert.
Gallery
Gallery – изображение (рисунок ниже). Данный элемент конструктора страниц Joomla позволяет отображать галерею изображений. В галерее может быть фильтр по тегам. По наведению на изображение можно показывать заголовок, подзаголовок, описание, ссылку/кнопку и менять фоновую картинку.
В разделе Контент (рисунок ниже) можно добавить картинки. В настройках каждой картинки Вы сможете указать текст тега ALT, заголовок, подзаголовок, описание (с применением визуального текстового редактора), ссылки, теги для фильтра и изображение, которое появляется при наведении курсора мыши.
На вкладке Настройки есть возможность сменить цвет текста, а на вкладке Еще можно настроить динамический контент или отключить это изображение.
В разделе Настройки (рисунок ниже) – есть ряд уже ранее рассмотренных в элементе Alert, а также можно задать отступы между картинками, количество колонок сетки галереи для разных экранов/устройств, включить/отключить и сменить опции для фильтра фотографий по тегам, изменить параметры лайтбокса, наложения, изображения, заголовка, подзаголовка, контента и ссылки/кнопки.
Раздел Еще содержит те же параметры, что и одноимённый раздел элемента Alert.
Grid
Grid – сетка (рисунок ниже). Данный элемент позволяет отображать сетку с блоками. Каждый блок может состоять из заголовка, подзаголовка, текста (заданного в визуальном текстовом редакторе), изображения (или иконки), ссылки и тега (для фильтрации блоков).
В разделе Контент (рисунок ниже) можно создавать блоки сетки. Доступно их дублирование.
При создании самого блока (рисунок ниже) можно задать заголовок, подзаголовок, текст (доступны инструменты визуального текстового редактора), изображение, значение тега ALT, ссылку и теги (для фильтрации блоков).
В разделе Настройки (рисунок ниже) – есть ряд уже ранее рассмотренных в элементе Alert, а также можно сконфигурировать параметры сетки, колонок, фильтра по тегам, лайтбокса, оформления блока, заголовка, подзаголовка, контента и других составляющих блока.
Раздел Еще содержит те же параметры, что и одноимённый раздел элемента Alert.
List
List – список (рисунок ниже). Данный элемент конструктора контента Joomla позволяет отображать список, состоящий из иконки или изображения и текста.
В разделе Контент (рисунок ниже) можно создавать пункты списка. Доступно их дублирование.
При создании пункта можно указать содержимое в визуальном текстовом редакторе, изображение или иконку (как маркер списка) и ссылку/файл, на который пользователь перейдёт при нажатии на пункт списка.
В разделе Настройки (рисунок ниже) – есть ряд уже ранее рассмотренных в элементе Alert, а также можно задать маркер списка (в дополнение или вместо картинки/иконки), изменить опции
Раздел Еще содержит те же параметры, что и одноимённый раздел элемента Alert.
Map
Map – карта (рисунок ниже). Данный элемент позволяет отобразить один или несколько маркеров на карте. Можно применять карту Google или OpenStreetMap. Если в настройках YOOtheme Pro в разделе Внешние сервисы не указан API ключ Карты Google, на сайте отобразится OpenStreetMap. О том, как бесплатно получить API ключ карты Google Вы можете узнать в статье «Обзор DJ-Classifieds 3.7.5. Новшества и получение API Google карты».
В моём примере показаны настройки для карты Google.
В разделе Контент (рисунок ниже) можно создать один или несколько маркеров на карте (адресов), настроить отображение тех или иных «фрагментов» всплывающего окна (появляется при нажатии на маркер), указать свою собственную иконку маркера для одного объекта, иконку кластера маркеров для 10 и более маркеров, 100 и более маркеров и кластера, состоящего из более 199 маркеров.
В настройках каждого маркера (положения на карте) можно указать координаты (рисунок ниже), а также задать заголовок, подзаголовок, содержимое, картинку и ссылку для окошка, которое появится по нажатию на маркер. В содержимом можно применять инструменты, доступные в визуальном текстовом редакторе.
Тут же можно изменить иконку конкретно этой точки. Обратите внимание, что даже задав API ключ карты Google, при указании местоположения в настройках маркера может отображаться OpenStreetMap.
А в разделе Настройки маркера можно его скрыть с карты или включить отображение окошка маркера в открытом состоянии при загрузке страницы.
В разделе Настройки (рисунок ниже) – есть ряд уже ранее рассмотренных в элементе Alert, а также можно задать тип карты (дорожная или спутник), включить элементы управления картой, изменения масштаба при помощи колеса мыши, перетаскивание карты и сконфигурировать другие её опции. Тут же есть параметры для стиля карты, маркера, заголовка и других составляющих всплывающего окна маркера.
Раздел Еще содержит те же параметры, что и одноимённый раздел элемента Alert.
Nav
Nav – навигация (рисунок ниже). Данный элемент позволяет отобразить вертикальный текстовый список со ссылками. Что-то типа меню.
В разделе Контент (рисунок ниже) можно задать текст пункта и ссылку.
В разделе Настройки (рисунок ниже) – есть ряд уже ранее рассмотренных в элементе Alert, а также можно задать стиль оформления текста.
Раздел Еще содержит те же параметры, что и одноимённый раздел элемента Alert.
Overlay Slider
Overlay Slider – слайдер с наложением (рисунок ниже). Данный элемент позволяет отобразить классическое слайд-шоу изображений. На изображения можно наложить заголовок, подзаголовок, описание и кнопку/ссылку
В разделе Контент (рисунок ниже) можно создать слайды и включить/отключить отображение разных фрагментов наложения (заголовок, описание и т.д.)
В настройках каждого слайда Вы сможете указать изображение, текст тега ALT, заголовок, подзаголовок, описание (можно применять инструменты визуального текстового редактора) и ссылку.
В разделе Настройки (рисунок ниже) – есть ряд уже ранее рассмотренных в элементе Alert, а также можно сконфигурировать настройки слайдера и его навигацию. Плюс, можно изменить параметры слайдов, включая отдельные элементы наложения.
Раздел Еще содержит те же параметры, что и одноимённый раздел элемента Alert.
В следующей статье «Обзор YOOtheme Pro Joomla (часть 6). Элементы конструктора контента» мы продолжим обзор элементов расширения и поговорим про Panel Slider, Popover, Slideshow, Social, Subnav, Switcher, Table, Breadcrumbs, Module, Module Position, и Pagination.
| Похожие материалы |
|---|
| Автор статьи – Хорошевский Алексей |
|---|
 Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Публикации и работа: |
Полезные ссылки:
- Официальный сайт (на англ.).
- Документация (на англ.).
