Обзор YOOtheme builder (часть 2). Конструктор контента для Joomla

• Видео обзор.
• Общие настройки YOOtheme Joomla.
  • Стиль.
  • Конструктор.
  • 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 и Mail.ru.

Ссылки из видео:

• «Обзор YOOtheme Pro (часть 1). Конструктор страниц Joomla».

Компонент позволяет гибко сконфигурировать макет страницы и настроить стиль большинства элементов (заголовки, текстовые блоки, картинки, таблицы и т.д.). С ним Вам могут не понадобиться знания CSS, а если используете его вместе с шаблоном от YOOtheme, то вероятность необходимости знаний CSS почти ноль. Правда, за последние лет 7, не помню точно, чтобы делал хотя бы один сайт без правок CSS. Не учитывая, какой шаблон или какой конструктор контента использовал.

В предыдущей статье «Обзор YOOtheme Pro (часть 1). Конструктор страниц Joomla» мы рассмотрели основные возможности и особенности данного расширения, а также поговорили про пункт меню панели управления Макет и шаги, необходимые для изменения языка интерфейса самого расширения. В этой части поговорим про Стиль, Конструктор и Templates (шаблоны).

В обзоре участвует последняя, на момент написания статьи (27.03.2021), русскоязычная версия YOOtheme Pro 2.4.6 в Joomla 3.9.25. Шаблон сайта Kitchen Daily 2.4.3.

Общие настройки YOOtheme Joomla

Стиль

В данном разделе 67 подразделов. Каждый из подразделов позволяет менять настройки стилей (шрифты, цвета, отступы и т.д.) для разных элементов (заголовки, списки, таблицы, лайтбоксы и т.д.). Вы сможете очень тонко настроить каждый отдельный элемент своего сайта (фреймворк UIkit), не прибегая к правке CSS.

На рисунке ниже показан фрагмент раздела Стиль. Обратите внимание, что при наведении курсора мыши на какой-то элемент на странице сайта возле него появляется всплывающая подсказка с указанием, в каком подразделе или в каких подразделах находятся настройки стиля для этого элемента. Это очень упрощает поиск нужного подраздела.

Нажав на спадающий список в верхней части панели (рисунок выше), перед Вами откроется всплывающее окно с возможностью выбора одного из 211 предварительно настроенных стилей – разные сочетания цветов и шрифтов и т.д. (рисунок ниже). Для загрузки стиля Вам нужна активная подписка на YOOtheme page builder, так как загрузка происходит с сайта разработчика.

В этом окне, но на вкладке My styles (мои стили) Вы можете сохранить свой стиль или загрузить существующий из файла.

Если активировать опцию Предпросмотр всех компонентов пользовательского интерфейса, на странице сайта появится тестовая страница с разными элементами интерфейса сайта (рисунок ниже). И Вам будет удобнее менять разные настройки, видя, что именно получается.

Все подпункты стилей разделены на общие подпункты и подпункты компонентов (заголовки, списки, таблицы, лайтбоксы и т.д.).

• Global – Глобальные. Настройка общих стилей элементов интерфейса пользователя (созданных при помощи фреймворка UIkit) (рисунок ниже). Лучше сперва настроить их, а потом перейти к настройкам отдельных элементов (заголовки, списки, таблицы, лайтбоксы и т.д.).
• Theme – Тема. Настройка общих стилей элементов интерфейса пользователя (созданных не при помощи фреймворка UIkit). Например, контейнер страницы, панель меню и т.д.
• Inverse – Инверсия. Настройка общих стилей элементов интерфейса пользователя (созданных при помощи фреймворка UIkit) с инверсированными цветами («выворотка» – белым по чёрному) (рисунок ниже). Очень удобно, если у Вас есть переключатель фона на сайте в «ночной режим».
• Шрифты Google. Настройки шрифтов Google.

По сути, содержимое всех подпунктов схоже. На рисунке ниже показан пример для подпункта Global другие подпункты, включая подпункты компонентов (заголовки, списки, таблицы, лайтбоксы и т.д.). Аналогичны. Можно изменить цвет, размер, отступ и другие стили разных элементов.

В YOOtheme builder предусмотрено 63 подпункта для разных элементов. Каждый из подпунктов содержит настройки для изменения соответствующих стилей, по аналогии с настройками для Global (рисунок выше).

Под списком подпунктов есть кнопки, позволяющие сбросить все настройки стилей в значения по умолчанию, сохранить все изменения в 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). Конструктор страниц».

Настройки секции. Секция – это одна или несколько строк. Настройки секции разделены на три раздела:

1. Контент (рисунок ниже). Позволяет задать фоновое изображение, видео (с YouTube или Vimeo) и декоративный заголовок.
2. Настройки.
3. Еще.

Раздел Настройки (рисунок ниже) позволяет сконфигурировать цвет фона, ширину и высоту секции (родительского контейнера для дочерних колонок), отступы, анимацию появления и задать параметры для заголовка, указанного в разделе Контент.

Раздел Еще (рисунок ниже) позволяет задать имя секции (видно в самом YOOtheme builder), отключить её (не удаляя), добавить динамический контент, присвоить CSS класс, ID и добавить свои собственные стили.

Настройки строки. Строка может состоять из одной или пяти колонок (столбцов). Колонки могут быть разной ширины (фиксированной или нет). Подробнее об особенностях ширины можно узнать в документации к фреймворку UIkit. Настройки строки разделены на два раздела:

1. Настройки.
2. Еще (рисунок ниже). Данный раздел содержит опции аналогичные одноимённому разделу секции.

Раздел Настройки (рисунок ниже) содержит параметры, которые позволяют разделить строку на несколько колонок, задать расстояние между ними, разделитель, общую ширину и высоту всех колонок.

Есть несколько макетов колонок (рисунок ниже). Обратите внимание, что ширина колонок указана не в чётком фиксированном значении в пикселях, а в частях от общей ширины той области, в которой они расположены. Например, «Quarters 2-1-1» – это три колонки, первая (левая) по ширине занимает столько же, сколько занимает вторая и третья колонки вместе взятые, вторая колонка занимает по ширине половину ширины первой колонки, третья – аналогична по ширине второй.

Есть макеты с фиксированной колонкой. Например, «Fixed-Left» – первая (левая) колонка занимает фиксированную ширину, а вторая занимает оставшуюся часть по ширине.

У каждого макета есть свои настройки. Рассмотрим их на примере макета двух колонок с – «Halves» (рисунок ниже). Опции Смартфон в портретном режиме, Смартфон в альбомном режиме, Планшет (Альбомной ориентации), Настольный компьютер и Large Screen позволяют задать ширину каждой колонки в долях или фиксированных значениях для разных экранов.

Например, 1/2 – означает, что колонка будет занимать 50% от доступной ширины (родительского контейнера). А Large – 450 пикселей. Подробнее об этом можно прочесть в документации к фреймворку UIkit.

Обратите внимание, что в сумме все колонки должны занимать всю доступную ширину. То есть, если для первой колонки задано 1/2, то и для второй тоже надо задать 1/2. Также можно для одной колонки задать 1/2 или Small, а для второй – Expand. Expand указывает на то, что колонка должна занять всё оставшееся пространство.

Если значение ширины для какого-то экрана не задано, то применяется значение ширины следующего более маленького экрана.

Опция Order First позволяет указать экран (устройство, точку разрыва) на котором данная колонка будет отображаться перед остальными колонками. На меньших экранах колонка будет отображаться в обычном порядке.

Для каждой из колонок доступны свои настройки, разделённые на три раздела:

1. Контент (рисунок ниже). Позволяет задать фоновое изображение.
2. Настройки.
3. Еще.

Раздел Настройки (рисунок ниже). Позволяет задать вертикальное выравнивание, стиль, цвет текста (только для стиля None) и внутренние отступы (для всех стилей кроме None).

Раздел Еще (рисунок ниже). Позволяет добавить динамический контент, ID, классы или свой собственный CSS код.

Templates (шаблоны)

Шаблоны в YOOtheme page builder – это макет контентной части страницы, применяемый к страницам определённого типа. Вы сможете разместить разные элементы в макете и использовать в них динамический контент. Можно создавать шаблоны для таких типов страниц (типов пунктов меню):

• Материал.
• Блог категории.
• Избранные материалы.
• Список элементов (метки).
• Список всех меток.
• Контакт.
• Форма поиска и список результатов поиска (поиск).
• Форма поиска и список результатов поиска (умный поиск).
• Страница ошибки 404.

Рассмотрим пример шаблонна материала. При создании или редактировании шаблона (рисунок ниже), Вы можете указать его имя, тип страниц, к которым он относится и указать к материалам из каких категорий нужно его применять. Также есть возможность ограничения применения шаблона по меткам и возможность скрыть/отключить шаблон.

Редактировать шаблон YOOtheme Joomla можно тогда, когда Вы находитесь на странице сайта того типа, к которой относится шаблон. В моём случае – материал. Для редактирования шаблона нужно нажать на кнопку Конструктор справа от имени шаблона. На рисунке ниже показан пример моего шаблона для страницы материала. Рисунок слева – это Изображение для полного текста, текст справа – Заголовок, ниже – текст самого материала, а под ним слева – Начало публикации. Все эти данные при помощи динамического контента берутся из материала.

У одной страницы может быть несколько шаблонов. Применяется тот, который стоит в списке выше остальных. Имена шаблонов можно перетаскивать мышью в панели YOOtheme Pro.

Также при редактировании шаблона можно использовать готовый макет (рисунок ниже). Но у Вас должна быть действующая лицензия на YOOtheme Pro. Макет можно вставить вместо Вашего макета или добавить его до/после Вашего макета.

В следующей статье «Обзор YOOtheme Pro Joomla (часть 3). Конструктор страниц» мы поговорим о таких разделах как Меню, Модули и Настройки.

Автор статьи – Хорошевский Алексей

Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Контакты: +38 095 840 24 29 +38 095 840 24 29 +38 095 840 24 29 email@aleksius.com Социальные сети: LinkedIn Facebook YouTube (Twitter) Публикации и работа: Google Академия Scopus Upwork Freelance.ua

Полезные ссылки:

• Официальный сайт (на англ.).
• Документация (на англ.).