Helix Ultimate

Helix Ultimate

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

1. Возможности 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 без перезагрузки страницы нельзя назвать «козырной» фишкой, но лишней она уж точно не является.
Сжатие CSS- и JS-кода
С учетом того, что для максимального ускорения сайта на Joomla принято применять JCH Optimize, данная функция не теряет смысл.
Интеграция комментариев
Действительно, в настройках шаблона можно активировать комментарии через IntenseDebate, Facebook или Disqus, однако лучшим решением является применение узконаправленного компонента (смотрите материал Комментарии в Joomla 3).
Социальные иконки
В настройках шаблона можно указать ссылки на 11 социальных сетей с выводом соответствующих иконок.
Поделиться в соцсетях
Можно активировать кнопки расшаривания в материалах Joomla.
Пользовательские CSS-стили
Возможность добавлять пользовательский CSS-код имеется в каждом современном фреймворке.
Пользовательский код
Предусмотрена текстовая область для вставки любого пользовательского кода, но в этом нет ничего удивительного.
Адаптивный дизайн
Этим уже никого не удивишь, хотя возможности по кастомизации адаптивности здесь несколько шире, чем у предшествующего фреймворка.
Страница ошибки
На страницу 404 можно добавить логотип, выбрать фоновое изображение и опубликовать модуль, но этого явно не достаточно (смотрите Страница ошибки 404 в Joomla 3.x).
Резиновая или фиксированная ширина
Имеется возможность выбора между резиновой и фиксированной шириной макета.

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

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

2.1. Интерфейс Helix Ultimate

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

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

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

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

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

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

2.3. Basic

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

  • Logo

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

  • Header

    Установка высоты хедера, его «залипания» при скролинге, а также выбор фавикон.

  • Body

    Активация предзагрузчика (без доп. настроек) и фиксированной ширины макета (Boxed layout) с настройками.

  • Footer

    Активация копирайта (с возможностью выбора позиции и текста) и кнопки Go to Top (без доп. настроек).

  • Social Icons

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

  • Contact Info

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

  • Coming Soon

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

  • Error Page

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

2.4. Presets

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

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

  • Body
  • Header
  • Top Bar
  • Menu
  • Footer

2.5. Layout Builder

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

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

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

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

2.6. Navigation

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

  • Mega Menu

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

  • Off-canvas

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

2.7. Typography

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

  • Body

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

  • Headings (h1-h6)

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

  • Navigation

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

  • Custom

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

  • Update Font List

    Здесь можно ввести Google Font API, чтобы быстро обновлять список шрифтов Google.

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

2.8. Blog

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

  • Images

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

  • List

    Выбор вариаций картинок, отображаемых в списке материалов.

  • Details

    Выбор вариации картинки, отображаемой на странице материала, а также активация кнопок «Поделиться» (Social Share), информации об авторе (Author Info) и мета-тегов Open Graph.

  • Comments

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

2.9. Custom Code

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

  • Before </head>

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

  • Before </body>

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

  • Custom CSS

    Любой CSS-код.

  • Custom Javascript

    Любой JS-код.

2.10. Advanced

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

  • Compression

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

  • SCSS

    Здесь можно активировать опцию Compile SCSS to CSS.

  • Import & Export

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

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

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

  • Mega Menu
  • Page Title

3.1. Mega Menu

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

  • Mega Menu

    Активация расширенных параметров (только для пунктов меню первого уровня):

    • Width - фиксированная ширина выпадающего меню.
    • Align - выравнивание текста в выпадающем меню.
  • Show Menu Title

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

  • Dropdown Position

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

  • Icon

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

  • Custom Class

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

  • Badge

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

  • Badge Position

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

  • Background Color

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

  • Text Color

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

3.2. Page Title

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

  • Enable Page Title

    Активация опции.

  • Alternative Title

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

  • Page Subtitle

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

  • Heading H1 or H2

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

  • Background Color

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

  • Background Image

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

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

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

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

  • Featured Image

    Позволяет определить формат материала (Standart, Video, Gallery, Audio) и выбрать дополнительный контент.

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

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

Добавить комментарий

Отправить