Центр обучения Joomla
    YOOtheme Pro

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

    YOOtheme Pro — инновационное расширение для Joomla, сочетающее конструктор страниц (Page Builder) и конфигуратор шаблона. В этом обзоре вы узнаете, насколько качественно это реализовано и как выглядит на практике.

    YOOtheme
    Расширение: YOOtheme Pro
    Категория: мультифункциональное расширение
    Включает: шаблон
    Совместимость: Joomla 3.x
    Версии: платная
    Разработчик: YOOtheme Pro

    Содержание

    1. Принцип
    2. Интерфейс
    3. Функционал
    4. Выводы
    Важно знать:
    В данном обзоре рассматривается YOOtheme Pro версии 1.17.5.

    Как работает 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
    Вход в YOOtheme Pro

    Интерфейс YOOtheme Pro отображается в левой боковой панели страницы, а с правой стороны отображается выбранная страница сайта во внешнем интерфейсе.

    Интерфейс Yootheme Pro
    Интерфейс Yootheme Pro

    Подобный функционал не является ноу-хау и реализован в SP Page Builder (при редактировании из внешнего интерфейса), в кастомизаторе шаблонов на Warp 7, а так же в настройках шаблонов на Helix Ultimate.

    Редактор SP Page Builder во внешнем интерфейсе
    Редактор SP Page Builder во внешнем интерфейсе
    Настройки шаблона на Helix Ultimate
    Настройки шаблона на Helix Ultimate
    Warp 7 Customizer
    Кастомизатор шаблона на Warp 7

    Такой подход позволяет сразу видеть результаты изменений, но кому-то может быть привычнее действовать по старинке: отредактировал в админке → сохранил → проверил во внешнем интерфейсе, и тут обнаружиться, что YOOtheme Pro такой возможности просто не поддерживает. Особенно непривычно в таком формате выполнять настройки, не касающиеся визуальных изменений, вроде вставки пользовательского кода, сжатия данных, изменения фавиконки и т. д. Это не столько неудобно, сколько непривычно относительно классической системы администрирования сайтов на Joomla.

    В интерфейсе имеются иконки для проверки адаптивности, при клике по которым изменяется размер страницы в правой части:

    Проверка адаптивности в YOOtheme Pro
    Проверка адаптивности

    Свернуть панель управления YOOtheme Pro можно с помощью кнопки в левом нижнем углу, что очень удобно.

    Функционал YOOtheme Pro

    Важно знать:
    Русская локализация не успевает обновляться, поэтому часть настроек YOOtheme Pro не переведена. В данном обзоре мы будем приводить как переведённый текст, так и оригинальный, если он не был переведён.

    Рассмотрим функционал, представленный в панели управления YOOtheme Pro.

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

    • Layout (макет),
    • Style (стиль),
    • Builder (конструктор),
    • Menus (меню),
    • Modules (модули),
    • Settings (настройки).
    Главное меню YOOtheme Pro

    За каждым из пунктов меню скрывается большое количество настроек и вложенных меню.

    Layout (макет)

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

    Подменю пункта Layout:

    • Сайт
    • Позиция Header
    • Позиция Mobile
    • Позиция Top
    • Позиция Sidebar
    • Позиция Top
    • Позиция Bottom
    • Позиция Footer
    • Блог
    • Пост/публикация
    YOOtheme Pro Layout

    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 самые лучшие?
    Helix 3 Framework: возможности и настройки
    Warp 7 Framework: возможности и настройки
    Какие шаблоны для Joomla самые быстрые?
    YOOtheme Pro: возможности и настройки
    Helix Ultimate: возможности и настройки
    T3 Framework: возможности и настройки
    Gantry 5 Framework: возможности и настройки
    previous arrow
    next arrow
    Slider
    Как быстро разобраться в Joomla?

      Как быстро разобраться в Joomla