YOOtheme Pro — инновационное расширение для Joomla, сочетающее конструктор страниц (Page Builder) и конфигуратор шаблона. В этом обзоре вы узнаете, насколько качественно это реализовано и как выглядит на практике.
Содержание
- Принцип
- Интерфейс
- Функционал
- Выводы
Как работает YOOtheme Pro?
Формально YOOtheme Pro является наследником фреймворка Warp, но на выходе данные программы имеют мало общего: Warp является лишь шаблонным фреймворком, а YOOtheme Proпытается сломать все устоявшиеся принципы при создании сайтов на CMS Joomla.
Данное расширение может оказаться настоящим «взрывом мозга» для пользователей Joomla, привыкших к классическим шаблонам, компонентам, модулям и плагинам, т. к. оно не относится ни к одному из этих типов, при этом сочетая функции как отдельных компонентов, так и различных менеджеров ядра Joomla.
Через YOOtheme Pro можно:
- настраивать стили шаблона,
- кастомизировать модульные позиции,
- редактировать страницы через Page Builder,
- создавать пункты меню и модули,
- осуществлять другие глобальные и точечные настройки.
Интерфейс YOOtheme Pro
Вход в YOOtheme Pro осуществляется через кнопку в сайдбаре на главной странице админки Joomla, или через Расширения → Шаблоны → Стили → yootheme - Default:
Интерфейс YOOtheme Pro отображается в левой боковой панели страницы, а с правой стороны отображается выбранная страница сайта во внешнем интерфейсе.
Подобный функционал не является ноу-хау и реализован в SP Page Builder (при редактировании из внешнего интерфейса), в кастомизаторе шаблонов на Warp 7, а так же в настройках шаблонов на Helix Ultimate.
Такой подход позволяет сразу видеть результаты изменений, но кому-то может быть привычнее действовать по старинке: отредактировал в админке → сохранил → проверил во внешнем интерфейсе, и тут обнаружиться, что YOOtheme Pro такой возможности просто не поддерживает. Особенно непривычно в таком формате выполнять настройки, не касающиеся визуальных изменений, вроде вставки пользовательского кода, сжатия данных, изменения фавиконки и т. д. Это не столько неудобно, сколько непривычно относительно классической системы администрирования сайтов на Joomla.
В интерфейсе имеются иконки для проверки адаптивности, при клике по которым изменяется размер страницы в правой части:
Свернуть панель управления YOOtheme Pro можно с помощью кнопки в левом нижнем углу, что очень удобно.
Функционал YOOtheme Pro
Важно знать:
Русская локализация не успевает обновляться, поэтому часть настроек YOOtheme Pro не переведена. В данном обзоре мы будем приводить как переведённый текст, так и оригинальный, если он не был переведён.
Рассмотрим функционал, представленный в панели управления YOOtheme Pro.
Меню включает следующие пункты:
- Layout (макет),
- Style (стиль),
- Builder (конструктор),
- Menus (меню),
- Modules (модули),
- Settings (настройки).
За каждым из пунктов меню скрывается большое количество настроек и вложенных меню.
Layout (макет)
Здесь скрываются настройки модульных позиций и глобальных элементов. С этого момента для пользователя, привыкшего к традиционным шаблонам и позициям модулей, становится ничего не ясно.
Подменю пункта Layout:
- Сайт
- Позиция Header
- Позиция Mobile
- Позиция Top
- Позиция Sidebar
- Позиция Top
- Позиция Bottom
- Позиция Footer
- Блог
- Пост/публикация
YOOtheme Pro ломает привычную систему шаблона с позициями для модулей: в подменю Layoutперечислены позиции, однако если мы заглянем внутрь отдельных пунктов меню, то увидим, что в некоторых из них определяются настройки и показ отдельных элементов, которые принято создавать в менеджере модулей, например строка поиска, социальные иконки и т. д.
Рассмотрим на примере 3-х пунктов.
Сайт
Здесь находятся настройки глобальных элементов макета:
- Текст логотипа
Этот текст будет отображаться, если не было выбрано изображение. - Изображение логотипа
Выбор изображения логотипа. Под текстовым полем с выбранным файлом можно указать его ширину и высоту. Установка только одного значения сохраняет оригинальные пропорции. Изображение будет изменено и обрезано автоматически и, где это возможно, изображения с высоким разрешением будут сформированы автоматически. - Инвертированный логотип
Альтернативный логотип с инвертированными цветами, например белый, для лучшей видимости на темном фоне. Он будет автоматически появляться в зависимости от цвета фона. - Логотип для мобильного устройства
Альтернативный логотип, который будет использоваться на мобильных устройствах. - Макет
Full Width (в ширину экрана) или Boxed Page (ограниченная). - Позиция Toolbar
Здесь можно активировать показ Toolbar'а во всю ширину и по центру. - Навигатор сайта (хлебные крошки)
Здесь можно активировать показ навигатора.
Казалось бы, всё просто и понятно: логотипы, тип макета, хлебные крошки и их детальная настройка. Однако на практике возникает вопрос: а где определяется позиция для логотипов, тулбара и навигатора? Интуитивно найти ответ на этот вопрос пользователю, привыкшему управлять модулями Joomla через соответствующий менеджер, к сожалению, не получится: десктопный лого и тулбар выводятся в позиции Header (следующий пункт меню).
Позиция Header
Здесь всё куда менее очевидно, чем в предыдущем пункте, поэтому придется осваиваться.
Первой опцией является Макет со схемой для хедера, при клике по которой отображается всплывающее окно и целых 16 вариаций расположения элементов:
С первого взгляда не ясно, какие элементы подразумеваются на схеме в виде толстой горизонтальной черты и трех черточек поменьше, но если просмотреть представленные ниже опции, то становится понятно, что подразумевается расположение логотипа, тулбара с иконками социальных сетей и строки поиска.
Опции в данном разделе позволяют:
- растянуть хедер в полную ширину,
- закрепить хедер в верхней части при скроллинге,
- редактировать макет вывода для отдельных пунктов меню,
- определить выравнивание выпадающего меню,
- определить стиль выпадающего меню,
- активировать опцию поиска,
- выбрать стиль опции поиска (строка или модальное окно),
- активировать и настроить показ социальных ссылок (иконки подбираются автоматически).
Если разобраться во всём этом непривычно представленном функционале, то он начнёт впечатлять: лично мне до этого не приходилось видеть опцию выравнивания выпадающего меню и автоматического подбора соответствующих иконок для социальных ссылок, определяемых по URL-адресу.
Позиция Sidebar
Настройки позиции для боковой панели, как и положено, кардинально отличаются от настроек хедера.
В этом разделе можно:
- установить ширину сайдбара в процентах;
- установить контрольную ширину страницы, при которой сайдбар и контент будут располагаться друг над другом;
- определить, с какой стороны должен располагаться сайдбар;
- установить фиксированное расстояние между сайдбаром и контентом;
- отобразить разделитель между сайдбаром и контентом.
И снова напрашивается вывод: непривычно, но все настройки актуальны.
Style (стиль)
Данный раздел является аналогом кастомизатора шаблонов на Warp 7, только для UIkit 3: здесь можно очень тонко настраивать стили для всех элементов, определённых CSS-фреймворком. Отобразить все эти элементы на экране можно с помощью чекбокса Просмотр всех компонентов пользовательского интерфейса под названием стиля:
При клике по названию стиля откроется модальное окно для выбора предустановленных стилей из любой существующей для YOOtheme Pro темы, где также можно сохранить свой собственный стиль, нажав Save customization:
В дальнейшем сохраненные наборы стилей будут доступны во вкладке My customizations данного модального окна.
Для кастомизации элементов выбираем нужный из представленного списка и настраиваем.
При активированном чекбоксе Просмотр всех компонентов пользовательского интерфейса в правой части будет наглядно отображаться выбранный элемент:
Настройка стилей действительно очень гибкая, максимально точная и очень удобная.
Builder (конструктор)
Да-да, YOOtheme Pro включает в себя полноценный мощный конструктор страниц, аналогичный SP Page Builder. Данный конструктор не принимал участие в Битве конструкторов лендингов по тем соображениям, что YOOtheme Pro являет собой мультифункциональное расширение, уходящее далеко за пределы узконаправленных компонентов. Тем не менее, если рассматривать данный Builder в отдельности, то он выглядит более чем достойно на фоне того же SP Page Builder, даже местами его опережая (например, в YOOtheme Builder можно полноценно применять редактор TinyMCE).
Принцип работы является классическим для подобных конструкторов: создание строк, столбцов, копирование, функция перетаскивания и более 30-ти элементов в арсенале, содержащих огромное количество настроек.
Переключаться на нужную для редактирования страницу можно по ссылкам во внешнем интерфейсе в правой части. Также переходить к билдеру можно непосредственно со страниц редактирования материалов в менеджере Joomla:
К несущественным недостаткам можно отнести отсутствие возможности конструировать страницу с сеткой во весь экран.
Menus (меню)
Данный раздел позволяет создавать и редактировать существующие пункты меню, открывая соответствующие страницы Менеджера меню Joomla во всплывающем окне.
Здесь же можно определить, какие меню должны выводиться в позициях Navbar и Mobile.
Modules (модули)
Этот раздел, как и предыдущий, предназначен для того, чтобы не выходить из YOOtheme Pro для просмотра и создания существующих модулей. Здесь отображаются существующие модули и можно создавать новые.
Следует отметить, что YOOtheme Pro добавляет возможность создания модулей через свой конструктор страниц (аналогично SP Page Builder).
Settings (настройка)
В этом разделе можно найти глобальные настройки, не связанные с внешним интерфейсом сайта:
- Фавикон
Здесь можно выбрать изображение для favicon и apple-touch-icon. - Cookie banner
Активация и настройка оповещения пользователей об использовании на сайте Cookies. - Пользовательский код
Текстовые области для вставки пользовательcкого CSS- и JS-кода. - API Key
Лицензионный ключ для обновления YOOtheme Pro. - Дополнительно
Сжатие, отложенная загрузка, подключение jQuery, выбор директории для файлов и определение поискового модуля. - External Services
Ввод API-ключей для сервисов Google Maps, Google Analytics, Mailchimp и Campaign Monitor. - System Check
Определение проблем в системе управления. - О шаблоне
Используемая версия YOOtheme Pro и копирайты.
Выводы
Подводя итоги можно сказать, что YOOtheme Pro действительно сильно отличается от традиционных расширений для Joomla тем, что сочетает в себе очень мощный набор функций. Формально являясь шаблоном, YOOtheme Pro включает в себя мощный Page Builder, превосходный кастомизатор стилей, новейший CSS-фреймворк UIkit 3, позволяет создавать модули и пункты меню, не входя в соответствующие менеджеры Joomla и предоставляет множество других возможностей. Подобный функционал можно получить, например, в связке компонента SP Page Builder и фреймворка Helix Ultimate, но YOOtheme Pro — это всё в одном.
Источник: Центр обучения Joomla