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
В данном разделе представлены базовые настройки шаблона:
- Logo
Выбор типа логотипа (картинка или текст) и его высоты, если это будет картинка. Также можно отдельно выбрать логотип для мобильных. - Header
Установка высоты хедера, его «залипания» при скролинге, а также выбор фавикон. - Body
Активация предзагрузчика (без доп. настроек) и фиксированной ширины макета (Boxed layout) с настройками. - Footer
Активация копирайта (с возможностью выбора позиции и текста) и кнопки Go to Top (без доп. настроек). - Social Icons
Активация иконок соцсетей с возможностью выбора позиции и вставки нужных ссылок. - Contact Info
Активация контактной информации (номера телефонов, email и время работы). Сомнительная опция из-за ограниченного количества номеров телефонов, которую лучше реализовать другим способом. - Coming Soon
Перевод сайта в закрытый режим и настройка отображаемой страницы (заголовок, контент, дата, логотип, фоновое изображение и социальные иконки) - Error Page
Настройка страницы, отображаемой при ошибке 404 (выбор логотипа и фонового изображения).
Presets
Здесь мы увидим список предустановленных стилей с возможностью их кастомизации:
После активации переключателя Custom Style можно будет кастомизировать цвета в позициях:
- Body
- Header
- Top Bar
- Menu
- Footer
Layout Builder
Это всё тот же конструктор макета модулей и позиций из Helix 3, представленный в новом интерфейсе:
Конструктор позволяет создавать адаптивные макеты страниц с расстановкой модульных позиций:
Как и прежде, макеты формируются по-принципу 12-колоночной сетки Bootstrap. По умолчанию используются предустановленные настройки, но всегда можно их переопределить: макет будет реагировать на изменение размеров экрана по определённым вами условиям.
- Каждая строка и колонка может быть настроена индивидуально (резиновая или фиксированная ширина строк, отображение на разных типах устройств, отступы, фон, цвет текста и другие стили). Настройки открываются при клике на соответствующую иконку внутри строки или колонки.
- Можно менять местами строки и колонки, используя функцию перетаскивания (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).
- 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
Активация расширенных параметров (только для пунктов меню первого уровня): - Width - фиксированная ширина выпадающего меню.
- Align - выравнивание текста в выпадающем меню.
- Show Menu Title
Отключение опции позволяет скрыть пункт меню из списка. - Dropdown Position
Положение выпадающего меню относительно родительского пункта. - Icon
Добавление иконки из шрифта FontAwesome к пункту меню. - Custom Class
Добавление CSS-класса к пункту меню. - Badge
Текст метки, отображаемой в пункте меню (если не требуется, то следует оставить поле пустым).
- Badge Position
Позиция метки (слева или справа от текста). - Background Color
Цвет фона метки. - Text Color
Цвет текста метки.
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, в которой содержатся дополнительные настройки, определяющие тип материала:
- Featured Image
Позволяет определить формат материала (Standart, Video, Gallery, Audio) и выбрать дополнительный контент.
Это интересная иполезная опция. Например, если задать материалу тип Video, то вместо картинки материала будет отображаться видеоролик (нужно указать URL). Также от типа контента будет зависеть иконка возле заголовка. - Post Format
Важно знать:
Эта опция практически полностью идентична аналогичной из Helix 3, лишь с тем исключением, что были удалены невостребованные вариации из Post Format.
Где скачать шаблоны на Helix Ultimate?
Шаблонов на новом фреймворке на момент написания данного обзора не много, но это лишь вопрос времени: Helix 3 больше не обновляется разработчиком, а Bootstrap 4 постепенно заменяет предыдущую версию.
Выводы
Фреймворк Helix Ultimate является обновлённой и усовершенствованной версией Helix 3. В первую очередь различия кроются в интерфейсе и некоторых новых настройках шаблона, а также в применении последней версии Bootstrap.
Источник: Центр обучения Joomla