YOOtheme Pro - революционное расширение для Joomla 3!

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'а во всю ширину и по центру.
  • Навигатор сайта (хлебные крошки)
    Здесь можно активировать показ навигатора.
YOOtheme Pro → Макет → Сайт
YOOtheme Pro → Макет → Сайт

Казалось бы, всё просто и понятно: логотипы, тип макета, хлебные крошки и их детальная настройка. Однако на практике возникает вопрос: а где определяется позиция для логотипов, тулбара и навигатора? Интуитивно найти ответ на этот вопрос пользователю, привыкшему управлять модулями Joomla через соответствующий менеджер, к сожалению, не получится: десктопный лого и тулбар выводятся в позиции Header (следующий пункт меню).

Позиция Header

Здесь всё куда менее очевидно, чем в предыдущем пункте, поэтому придется осваиваться.

YOOtheme Pro → Макет → Позиция Header
YOOtheme Pro → Макет → Позиция Header

Первой опцией является Макет со схемой для хедера, при клике по которой отображается всплывающее окно и целых 16 вариаций расположения элементов:

Выбор макета для хедера
Выбор макета для хедера

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

Опции в данном разделе позволяют:

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

Если разобраться во всём этом непривычно представленном функционале, то он начнёт впечатлять: лично мне до этого не приходилось видеть опцию выравнивания выпадающего меню и автоматического подбора соответствующих иконок для социальных ссылок, определяемых по URL-адресу.

Позиция Sidebar

Настройки позиции для боковой панели, как и положено, кардинально отличаются от настроек хедера.

YOOtheme Pro → Макет → Позиция Sidebar
YOOtheme Pro → Макет → Позиция Sidebar

В этом разделе можно:

  • установить ширину сайдбара в процентах;
  • установить контрольную ширину страницы, при которой сайдбар и контент будут располагаться друг над другом;
  • определить, с какой стороны должен располагаться сайдбар;
  • установить фиксированное расстояние между сайдбаром и контентом;
  • отобразить разделитель между сайдбаром и контентом.

И снова напрашивается вывод: непривычно, но все настройки актуальны.

Style (стиль)

Данный раздел является аналогом кастомизатора шаблонов на Warp 7, только для UIkit 3: здесь можно очень тонко настраивать стили для всех элементов, определённых CSS-фреймворком. Отобразить все эти элементы на экране можно с помощью чекбокса Просмотр всех компонентов пользовательского интерфейса под названием стиля:

YOOtheme Pro → Стиль
YOOtheme Pro → Стиль

При клике по названию стиля откроется модальное окно для выбора предустановленных стилей из любой существующей для YOOtheme Pro темы, где также можно сохранить свой собственный стиль, нажав Save customization:

Выбор стилей
Выбор стилей

В дальнейшем сохраненные наборы стилей будут доступны во вкладке My customizations данного модального окна.

Для кастомизации элементов выбираем нужный из представленного списка и настраиваем.

При активированном чекбоксе Просмотр всех компонентов пользовательского интерфейса в правой части будет наглядно отображаться выбранный элемент:

Выбор элемента Accordion
Выбор элемента Accordion
 Кастомизация Accordion
Кастомизация Accordion

Настройка стилей действительно очень гибкая, максимально точная и очень удобная.

Builder (конструктор)

Да-да, YOOtheme Pro включает в себя полноценный мощный конструктор страниц, аналогичный SP Page Builder. Данный конструктор не принимал участие в Битве конструкторов лендингов по тем соображениям, что YOOtheme Pro являет собой мультифункциональное расширение, уходящее далеко за пределы узконаправленных компонентов. Тем не менее, если рассматривать данный Builder в отдельности, то он выглядит более чем достойно на фоне того же SP Page Builder, даже местами его опережая (например, в YOOtheme Builder можно полноценно применять редактор TinyMCE).

Конструктор страниц
Конструктор страниц

Принцип работы является классическим для подобных конструкторов: создание строк, столбцов, копирование, функция перетаскивания и более 30-ти элементов в арсенале, содержащих огромное количество настроек.

Элементы конструктора страниц
Элементы конструктора страниц

Переключаться на нужную для редактирования страницу можно по ссылкам во внешнем интерфейсе в правой части. Также переходить к билдеру можно непосредственно со страниц редактирования материалов в менеджере Joomla:

Переход к билдеру со страницы редактирования
Переход к билдеру со страницы редактирования

К несущественным недостаткам можно отнести отсутствие возможности конструировать страницу с сеткой во весь экран.

Menus (меню)

Данный раздел позволяет создавать и редактировать существующие пункты меню, открывая соответствующие страницы Менеджера меню Joomla во всплывающем окне.

YOOtheme Pro → Menus
YOOtheme Pro → Menus

Здесь же можно определить, какие меню должны выводиться в позициях Navbar и Mobile.

Modules (модули)

Этот раздел, как и предыдущий, предназначен для того, чтобы не выходить из YOOtheme Pro для просмотра и создания существующих модулей. Здесь отображаются существующие модули и можно создавать новые.

YOOtheme Pro → Modules
YOOtheme Pro → Modules

Следует отметить, что YOOtheme Pro добавляет возможность создания модулей через свой конструктор страниц (аналогично SP Page Builder).

Settings (настройка)

В этом разделе можно найти глобальные настройки, не связанные с внешним интерфейсом сайта:

YOOtheme Pro → Settings
YOOtheme Pro → 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