Helix Ultimate - новейший фреймворк шаблонов для Joomla 3

Helix Ultimate — шаблонный фреймворк для Joomla последнего поколения, являющийся прямым наследником популярного Helix 3. В этом обзоре мы подробно рассмотрим ключевые особенности и возможности данного фреймворка.

Содержание

  • Возможности фреймворка
  • Настройки шаблона
  • Настройки пунктов меню
  • Настройки материалов
  • Где скачать шаблоны?
  • Выводы

Возможности Helix Ultimate

Перечень возможностей, перечисленных на странице разработчика с нашими комментариями:

Инновационный интерфейс

Интерфейс настроек шаблона кардинально отличается от того, что мы видели в Helix 3: теперь все настройки доступны в режиме совмещения внешнего интерфейса и панели управления (в точности как в YOOtheme Pro).

Bootstrap 4

Фактически, шаблоны на Helix Ultimate — первые шаблоны для Joomla, применяющие последнюю версию CSS-фреймворка Bootstrap.

Конструктор мега-меню

Конструировать мега-меню можно было и в Helix 3, но в Ultimateданный процесс был изменён и доработан.

Функциональный медиа-менеджер

В настройках шаблона применяется свой медиа-менеджер, перекочевавший из Helix 3.

Режим закрытого сайта

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

Вариации хедеров

Фреймворк поддерживает различные вариации хедеров («шапок») с возможностью сохранять свои. Эта фишка явно перенята из YOOtheme Pro, но заметно уступает последнему в отношении реализации и количества вариаций.

Опции предустановленных стилей

Относительно Helix 3 данная функция действительно сильно ушла вперёд за счет дополнительных настроек, но она очень далеко позади аналогичной функции в YOOtheme Pro и даже в Warp 7.

Поддержка SP Page Builder

JoomShaper рекламируют свой конструктор страниц везде, где это возможно. По существу же SP Page Builder отлично совмещается с шаблонами на других современных фреймворках, хотя настройки Helix Ultimate и внешний редактор SP Page Builder'а имеют схожий интерфейс.

SVG-логотип

Через медиа-менеджер Helix Ultimate можно выбирать и загружать SVG-файлы.

Ajax-рейтинг

Возможность оценивать материалы Joomla без перезагрузки страницы нельзя назвать «козырной» фишкой, но лишней она уж точно не является.

Настройки блога

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

Сжатие CSS- и JS-кода

С учетом того, что для максимального ускорения сайта на Joomla принято применять JCH Optimize, данная функция не теряет смысл.

Интеграция комментариев

Действительно, в настройках шаблона можно активировать комментарии через IntenseDebate, Facebook или Disqus, однако лучшим решением является применение узконаправленного компонента (смотрите материал Комментарии в Joomla 3).

Социальные иконки

В настройках шаблона можно указать ссылки на 11 социальных сетей с выводом соответствующих иконок.

Поделиться в соцсетях

Можно активировать кнопки расшаривания в материалах Joomla.

Пользовательские CSS-стили

Возможность добавлять пользовательский CSS-код имеется в каждом современном фреймворке.

Пользовательский код

Предусмотрена текстовая область для вставки любого пользовательского кода, но в этом нет ничего удивительного.

Адаптивный дизайн

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

Страница ошибки

На страницу 404 можно добавить логотип, выбрать фоновое изображение и опубликовать модуль, но этого явно не достаточно (смотрите Страница ошибки 404 в Joomla 3.x).

Резиновая или фиксированная ширина

Имеется возможность выбора между резиновой и фиксированной шириной макета.

Настройки шаблона на Helix Ultimate

Рассмотрим возможности фреймворка на примере бесплатного шаблона Helix Ultimate (скачать бесплатно можно с официального сайта) от JoomShaper.

Интерфейс Helix Ultimate

Важно знать:
Все настройки шаблонов, предоставляемые фреймворками, находятся на странице Расширения → Шаблоны → Стили → [Нужный шаблон]

После нажатия кнопки Template Options на странице стиля шаблона откроется режим, совмещающий панель опций и внешний интерфейс сайта, в котором и осуществляются все настройки:

Данный интерфейс схож с интерфейсом YOOtheme Pro, однако здесь нельзи ни сворачивать панель опций, ни изменять размер страницы, отображаемой в правой части. Если заглянуть внутрь разделов с настройками, то мы увидим, что вложенные настройки представлены по принципу аккордеонов, что достаточно удобно.

Список настроек

В панели опций имеется 8 разделов с настройками:

  • Basic
  • Presets
  • Layout Builder
  • Navigation
  • Typography
  • Blog
  • Custom Code
  • Advanced

Basic

В данном разделе представлены базовые настройки шаблона:

Helix Ultimate → Basic
Helix Ultimate → Basic
  • Logo
    Выбор типа логотипа (картинка или текст) и его высоты, если это будет картинка. Также можно отдельно выбрать логотип для мобильных.
  • Header
    Установка высоты хедера, его «залипания» при скролинге, а также выбор фавикон.
  • Body
    Активация предзагрузчика (без доп. настроек) и фиксированной ширины макета (Boxed layout) с настройками.
  • Footer
    Активация копирайта (с возможностью выбора позиции и текста) и кнопки Go to Top (без доп. настроек).
  • Social Icons
    Активация иконок соцсетей с возможностью выбора позиции и вставки нужных ссылок.
  • Contact Info
    Активация контактной информации (номера телефонов, email и время работы). Сомнительная опция из-за ограниченного количества номеров телефонов, которую лучше реализовать другим способом.
  • Coming Soon
    Перевод сайта в закрытый режим и настройка отображаемой страницы (заголовок, контент, дата, логотип, фоновое изображение и социальные иконки)
  • Error Page
    Настройка страницы, отображаемой при ошибке 404 (выбор логотипа и фонового изображения).

Presets

Здесь мы увидим список предустановленных стилей с возможностью их кастомизации:

Раздел Presets
Раздел Presets

После активации переключателя Custom Style можно будет кастомизировать цвета в позициях:

  • Body
  • Header
  • Top Bar
  • Menu
  • Footer

Layout Builder

Это всё тот же конструктор макета модулей и позиций из Helix 3, представленный в новом интерфейсе:

Layout Builder в интерфейсе Helix Ultimate
Layout Builder в интерфейсе Helix Ultimate

Конструктор позволяет создавать адаптивные макеты страниц с расстановкой модульных позиций:

Макет шаблона в Layout Builder
Макет шаблона в Layout Builder

Как и прежде, макеты формируются по-принципу 12-колоночной сетки Bootstrap. По умолчанию используются предустановленные настройки, но всегда можно их переопределить: макет будет реагировать на изменение размеров экрана по определённым вами условиям.

В Helix Ultimate можно использовать предустановленные хедеры (Predifinied Headers). На текущий момент имеется две вариации с предустановленной схемой. Можно не применять эти вариации, а просто создать свою строку (строки) с нужными модульными позициями.Predifinied Headers
В Helix Ultimate можно использовать предустановленные хедеры (Predifinied Headers). На текущий момент имеется две вариации с предустановленной схемой. Можно не применять эти вариации, а просто создать свою строку (строки) с нужными модульными позициями.Predifinied Headers
Каждая строка имеет собственную структуру колонок.Определение структуры строки
Каждая строка имеет собственную структуру колонок.Определение структуры строки
  • Каждая строка и колонка может быть настроена индивидуально (резиновая или фиксированная ширина строк, отображение на разных типах устройств, отступы, фон, цвет текста и другие стили). Настройки открываются при клике на соответствующую иконку внутри строки или колонки.
  • Можно менять местами строки и колонки, используя функцию перетаскивания (Drag & Drop).
  • Добавлять новые строки можно при клике на иконку «+», которая появляется при наведении на существующую строку (новая строка появится под ней).
Добавление новой строки
Добавление новой строки
  • На каждую колонку можно назначать одну модульную позицию.
  • Одна модульная позиция может быть назначена в одну и более колонок (в таком случае позиция и модули в ней будут дублироваться на странице).

Navigation

Раздел настроек меню с двумя подразделами:

  • Mega Menu
    Здесь выбирается меню, которое размещается в позиции Menu по умолчанию. Также здесь можно установть фиксированную ширину и тип анимации для выпадающих подменю.
  • Off-canvas
    Здесь можно выбрать, с какой стороны будет открываться и отображаться мобильное меню.

Typography

Раздел с настройками шрифтов (шрифт, размер, насыщенность и начертание) для разных элементов типографии.

  • Body
    Здесь определяются стили, применяемые к глобальному тегу <body>.
  • Headings (h1-h6)
    Опционально можно настроить шрифты для каждого из тегов заголовков.
  • Navigation
    Данные настройки будут применены к элементам навигации (тег <nav>).
  • Custom
    Настройки шрифта для пользовательских элементов, перечисленных в текстовой области.
  • Update Font List
    Здесь можно ввести Google Font API, чтобы быстро обновлять список шрифтов Google.

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

Blog

Здесь скрываются дополняющие настройки для материалов Joomla (com_content).

Images
Установка фиксированных размеров для вариаций изображений (маленькое, миниатюра, среднее или большое), установленных для материалов: исходные картинки будут уменьшаться и обрезаться до установленных. На разных страницах (блог или сам материал) и в разных её элементах (блог) показываются разные вариации изоборажений.
Images Установка фиксированных размеров для вариаций изображений (маленькое, миниатюра, среднее или большое), установленных для материалов: исходные картинки будут уменьшаться и обрезаться до установленных. На разных страницах (блог или сам материал) и в разных её элементах (блог) показываются разные вариации изоборажений.
List
Выбор вариаций картинок, отображаемых в списке материалов.
List Выбор вариаций картинок, отображаемых в списке материалов.
  • Details
    Выбор вариации картинки, отображаемой на странице материала, а также активация кнопок «Поделиться» (Social Share), информации об авторе (Author Info) и мета-тегов Open Graph.
  • Comments
    Выбор сервиса (Disqus, IntenseDebate, Facebook) для интеграции комментариев с множеством настроек в зависимости от выбранного сервиса.

Custom Code

Здесь имеется целых 4 текстовых поля для ввода пользовательского кода:

  • Before </head>
    Любой код, который будет вставлен перед закрывающим тегом </head>. Это может быть мета-тег, CSS, JS или код подключения файла (файлов)
  • Before </body>
    Аналогично, только код будет выводится перед закрывающим тегом </body>.
  • Custom CSS
    Любой CSS-код.
  • Custom Javascript
    Любой JS-код.

Advanced

Дополнительные настройки шаблона:

  • Compression
    Здесь можно активировать сжатие и объединение в один файл CSS- и JS-кода. Не следует включать эти опции, если аналогичные функции выполняет другое расширение (например, JCH Optimize).
  • SCSS
    Здесь можно активировать опцию Compile SCSS to CSS.
  • Import & Export
    Здесь можно импортировать или экспортировать существующие настройки.

Настройки пунктов меню

Фреймворк Helix Ultimate добавляет 2 дополнительные вкладки на страницы редактирования пунктов меню:

  • Mega Menu
  • Page Title

Mega Menu

В этой вкладке находятся дополнительные настройки пунктов меню, добавляемые фреймворком Helix Ultimate.

Настройки Mega Menu для вложенных пунктов
Настройки Mega Menu для вложенных пунктов
  • Mega Menu
    Активация расширенных параметров (только для пунктов меню первого уровня):
  • Width - фиксированная ширина выпадающего меню.
  • Align - выравнивание текста в выпадающем меню.
  • Show Menu Title
    Отключение опции позволяет скрыть пункт меню из списка.
  • Dropdown Position
    Положение выпадающего меню относительно родительского пункта.
  • Icon
    Добавление иконки из шрифта FontAwesome к пункту меню.
  • Custom Class
    Добавление CSS-класса к пункту меню.
  • Badge
    Текст метки, отображаемой в пункте меню (если не требуется, то следует оставить поле пустым).
  • Badge Position
    Позиция метки (слева или справа от текста).
  • Background Color
    Цвет фона метки.
  • Text Color
    Цвет текста метки.

Page Title

Эта опция позволяет отображать название пункта меню в качестве заголовка в специальной позиции шаблона:

Вкладка Page Title
Вкладка Page Title
Отображение Page Title
Отображение Page Title
  • Enable Page Title
    Активация опции.
  • Alternative Title
    Альтернативный заголовок, который будет отображаться вместо названия пункта меню.
  • Page Subtitle
    Текст, отображаемый под заголовком.
  • Heading H1 or H2
    Тег для заголовка (<h1> или <h2>).
  • Background Color
    Цвет фона позиции.
  • Background Image
    Фоновое изображение.

Важно знать:
С точки зрения SEO применять опцию Page Title некорректно, т. к. теги заголовков должны быть в пределах основного контента. К тому же на странице крайне не желательно размещать более одного тега <h1>, а заголовки <h2> должны быть под ним.

Настройки материалов

Helix Ultimate добавляет вкладку Blog Options, в которой содержатся дополнительные настройки, определяющие тип материала:

Вкладка Blog Options
Вкладка Blog Options
  • Featured Image
    Позволяет определить формат материала (Standart, Video, Gallery, Audio) и выбрать дополнительный контент.
    Это интересная иполезная опция. Например, если задать материалу тип Video, то вместо картинки материала будет отображаться видеоролик (нужно указать URL). Также от типа контента будет зависеть иконка возле заголовка.
  • Post Format

Важно знать:
Эта опция практически полностью идентична аналогичной из Helix 3, лишь с тем исключением, что были удалены невостребованные вариации из Post Format.

Где скачать шаблоны на Helix Ultimate?

Шаблонов на новом фреймворке на момент написания данного обзора не много, но это лишь вопрос времени: Helix 3 больше не обновляется разработчиком, а Bootstrap 4 постепенно заменяет предыдущую версию.

  • www.joomshaper.com.
    Сайт разработчика фреймворка Helix с шаблонами собственного производства.
  • themeforest.net.
    На текущий момент в списке имеется 29 коммерческих шаблонов на Helix Ultimate.

Выводы

Фреймворк Helix Ultimate является обновлённой и усовершенствованной версией Helix 3. В первую очередь различия кроются в интерфейсе и некоторых новых настройках шаблона, а также в применении последней версии Bootstrap.

Источник: Центр обучения Joomla