YOOtheme Pro: возможности и настройки

Как работает 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.

Меню включает следующие пункты:

• 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 и копирайты.