Helix Ultimate: разбор возможностей шаблона

Под Helix Ultimate подразумевается не только популярный бесплатный шаблон для Joomla, но и шаблонный фреймворк (плагин System - Helix Ultimate Framework), на котором работает и данный шаблон, и многие другие. В этом материале мы подробно рассмотрим ключевые особенности и возможности фреймворка Helix Ultimate версии 2.0 на примере бесплатного одноимённого шаблона.

Особенности фреймворка

Плагин Helix Ultimate привносит в Joomla следующий функционал:

• Настройки стиля шаблона в режиме предпросмотра с множеством функций, самыми значительными из которых являются:
  • предустановленные хедеры,
  • конструктор макета,
  • конструктор меню.
• Вкладка Blog Options на страницах редактирования материалов Joomla, на которой можно выбрать тип материала и приоритетное изображение.
• Вкладка Page Title на страницах редактирования пунктов меню, позволяющая настроить контент, отображаемый в области Title.
• Заменяет плагин Контент - Рейтинг, в результате система оценок материалов работает с использование AJAX.
• Добавляет мета-теги Open Graph к материалам.

Template Options

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

После нажатия кнопки Template Options на странице стиля шаблона откроется панель настроек в режиме предпросмотра (т. е. вы можете видеть изменения прямо на текущей странице):

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

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

При клике по заголовку определённого раздела (вкладке) откроется дополнительная панель с настройками данного раздела. Внутри некоторых разделов есть подразделы, реализованные по принципу аккордеонов:

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

Панель содержит 8 вкладок (разделов с настройками):

• Basic
• Presets
• Layout
• Menu
• Typography
• Blog
• Custom Code
• Advanced

Basic

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

Logo

Выбор типа логотипа (картинка или текст) и его высоты, если это будет картинка, а также Favicon. Здесь также можно дополнительно выбрать логотип для мобильных и Retina-логотип.

Header

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

Body

Здесь можно активировать предзагрузчик страниц с выбором его типа, а также установить фиксированную ширину макета (Boxed layout). Данные опции не рекомендуем использовать.

Footer

Активация копирайта (в определённой позиции модуля) и кнопки Go to Top.

Social Icons

Активация иконок соцсетей с возможностью выбора позиции и вставки нужных ссылок.

Contact Info

Активация контактной информации (номера телефонов, email и время работы). Здесь можно ввести только два телефонных номера, и если этого будет не достаточно, то можно задействовать модуль типа HTML-код.

Coming Soon

Перевод сайта в закрытый режим и настройка отображаемой страницы (заголовок, контент, дата до открытия, логотип, фоновое изображение и социальные иконки)

Error Page

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

Presets

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

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

• Top Bar
• Header
• Menu
• Body
• Footer

Layout

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

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

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

Row Options

Здесь можно задать параметры для определённой строки:

General

Здесь можно добавить строке название (Section Title), которое будет применяться в качестве идентификатора HTML-тега, отключить «резиновую» строку (Fluid Width), а также добавить строке CSS-класс (Custom CSS Class).

Style

Ряд настроек, определяющих CSS-стили строки: отступы, текст, ссылки, фон.

Responsive

Здесь можно выбрать, на каких устройствах в зависимости от ширины экрана/страницы должна отображаться строка.

Column Options

Здесь можно определить параметры для конкретной колонки:

General

Здесь можно выбрать, должна ли колонка являться зоной компонента (Component Area), либо определённой модульной позицией (Module Position). Также можно задать колонке CSS-класс (Custom CSS Class).

Grid

Здесь можно гибко настроить ширину колонки в зависимости от ширины экрана/страницы.

Responsive

Здесь можно выбрать, на каких устройствах в зависимости от ширины экрана/страницы должна отображаться строка.

Menu

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

Menu Builder

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

Mega Menu

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

Off-canvas

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

Menu Builder

При наведении на определённый пункт меню напротив него отобразятся три кнопки в виде иконок:

1. Edit - открыть окно редактирования пункта меню.
2. Delete - удалить пункт меню.
3. Mega Menu - открыть дополнительными настройки.

Mega Menu

Mega Menu

Активация конструктора мегаменю для пунктов меню первого уровня, позволяющего добавлять в выпадающее меню строки и столбцы, и добавлять в них определённые модули.

Show Menu Title

Отключение опции позволяет скрыть пункт меню из списка.

Dropdown Position

Положение выпадающего меню относительно родительского пункта.

Icon

Добавление иконки из шрифта FontAwesome к пункту меню.

Custom Class

Добавление CSS-класса к пункту меню.

Badge

Текст метки, отображаемой в пункте меню (если не требуется, то следует оставить поле пустым).

Badge Position

Позиция метки (слева или справа от текста).

Background Color

Цвет фона метки.

Text Color

Цвет текста метки.

Typography

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

Body

Здесь определяются стили, применяемые к глобальному тегу <body>.

Headings (h1-h6)

Опционально можно настроить шрифты для каждого из тегов заголовков.

Navigation

Данные настройки будут применены к элементам навигации (тег <nav>).

Custom

Настройки шрифта для пользовательских элементов, перечисленных в текстовой области.

Blog

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

Image Sizes

Установка фиксированных размеров для вариаций изображений (маленькое, миниатюра, среднее или большое), установленных для материалов: исходные картинки будут уменьшаться и обрезаться до установленных. На разных страницах (блог или сам материал) и в разных её элементах (блог) показываются разные вариации изоборажений.

List

Выбор вариаций картинок, отображаемых на страницах со списками материалов (блог). Также здесь можно отключить показ тегов материалов на таких страницах.

Details

Настройки для страницы материала Joomla: выбор вариации картинки, активация кнопок «Поделиться» (Social Share), информации об авторе (Author Info), мета-тегов Open Graph, также здесь можно отключить показ модулей на странице материала, активировать строку прогресса его чтения (Reading Time Progress Bar), включить показ связанных страниц (Related Articles) и установить отображение материала во всю ширину страницы (не понятно для чего).

Comments

Выбор сервиса (Disqus, IntenseDebate, Facebook) для интеграции комментариев с множеством настроек в зависимости от выбранного сервиса. Лучшим решением для реализации комментариев является применение узконаправленного компонента (смотрите материал Комментарии для Joomla).

Custom Code

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

Before </head>

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

After <body>

Аналогично, только код будет выводится после открывающего тега <body>.

Before </body>

Аналогично, только код будет выводится перед закрывающим тегом </body>.

Custom CSS

Любой CSS-код, который будет отображаться в теге <style> внутри тега <head>.

Custom Javascript

Любой JS-код, который будет отображаться в теге <script> внутри тега <head>.

Advanced

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

Compression

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

SCSS

Отключите, если ваш сайт находится в рабочем режиме.

Font Settings

Здесь можно отключить загрузку иконочного шрифта Font Awesome 5, если этот подгружается другим расширением, либо если он вообще не применяется. Также здесь можно ввести Google Font API для того, чтобы обновить список доступных шрифтов.

Image

Здесь доступна одна настройка для активации ленивой загрузки изображений (Lazy Loading). Не следует активировать эту опцию, если эту функцию выполняет другое расширение (например, JCH Optimize).

Import & Export

Здесь можно импортировать или экспортировать существующие настройки.

Analytics

Здесь можно ввести идентификатор Google Analytics 4. Если вы задействуете Google Аналитику через Google Tag Manager, то добавьте его код иным способом (например, используя раздел Custom Code).

Page Title

Вкладка Page Title добавляется на страницы редактирования пунктов меню и позволяет отображать название пункта меню в качестве заголовка в позиции title:

Enable Page Title

Включите отображение названия.

Alternative Title

Альтернативное название, который будет отображаться вместо названия пункта меню.

Page Subtitle

Текст, отображаемый под названием.

Heading H1 or H2

Тег для заголовка (<h1> или <h2>).

Background Color

Цвет фона позиции.

Background Image

Фоновое изображение.

Breadcrumbs

По умолчанию макет шаблонов на Helix Ultimate не содержит колонку для вывода модуля Навигатор сайта (Breadcrumbs), однако позиция breadcrumb в списке позиций существует. Чтобы выводить «хлебные крошки», необходимо:

1. создать модуль типа Навигатор сайта (Breadcrumbs),
2. опубликовать его в позиции breadcrumb,
3. активировать опцию Enable Page Title во вкладке Page Title для пунктов меню.

В этом случае данный модуль будет отображаться в области title прямо под названием страницы:

Если же опция Enable Page Title для пункта меню будет отключена, то на страницах, соответствующих этому пункту меню, не будет отображаться ни название, ни «хлебные крошки». Если нужно выводить Breadcrumbs в другой области, то нужно создать для него отдельную колонку в Layout и определить в неё модульную позицию, после чего опубликовать в ней модуль и настроить его стили вручную, применяя пользовательский CSS-код.

Blog Options

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

Featured Image

Здесь можно загрузить изображение, которое будет обрабатываться согласно настройкам в Blog → Image Sizes. Это необязательная и неудобная опция, лучше добавлять картинки для материалов через медиа-менеджер во вкладке Изображения и ссылки.

Post Format

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

Русский язык для Helix Ultimate

Предлагаем скачать русификатор, текст для которого был переведён специалистами нашего центра. Русификатор устанавливается как обычное расширение для Joomla. Вы также можете использовать его для других шаблонов, работающих на Helix Ultimate, однако в таком случае часть текста может оставаться на английском.

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

• www.joomshaper.com.
  Сайт разработчика фреймворка Helix с шаблонами собственного производства.

• themeforest.net.
  На текущий момент в списке имеется 225 коммерческих шаблонов на Helix Ultimate.

Видео

Выводы

Шаблоны, работающие на Helix Ultimate, отлично поддаются кастомизации без навыков вёрстки и кодирования благодаря таким инструментом, как конструкторы макета и меню. Есть опции для кастомизации типографии, но при их нехватке можно применять пользовательский код в разделе Custom Code.