Helix 3 — популярный фреймворк от JoomShaper, применяемый в шаблонах Joomla от многих разработчиков. Helix 3 Framework позволяет быстро и гибко настраивать стиль шаблонов, что и сделало его особенно популярным. В материале рассмотрены возможности фреймворка на примере шаблона Helix3.
Описание и возможности Helix 3
На момент написания данного материала уже существует Helix Ultimate Framework, но шаблоны на Helix 3 по-прежнему выпускаются и остаются популярными благодаря простоте и гибкости.
Helix3 Framework позволяет управлять следующими параметрами шаблона прямо из панели управления Joomla:
- активация и настройка стиля предзагрузчика страниц (Preloader);
- активация кнопки Наверх (Go To Top);
- закрепление шапки сайта при прокрутке страницы (Sticky Header);
- изменение иконки сайта Favicon;
- активация «коробочного» или полноэкранный макета сайта;
- логотип в различных вариациях;
- установка и настройка стиля фонового изображения для сайта;
- активация и редактирование копирайта;
- активация и редактирование социальных иконок;
- активация и редактирование контактных данных;
- активация режима закрытого сайта;
- настройка внешниго вида страницы 404;
- 4 предустановленных стиля с возможностью изменения цвета для фона и текста;
- конструктор макета позволяет гибко управлять позициями модулей с применением функции перетаскивания (Drag & Drop) и сохранять полученные макеты;
- настройка мега-меню;
- выбор и настройка шрифтов для тегов Body, H1-H6, Nav;
- текстовые области для пользовательского кода;
- активировать режим сжатия CSS- и JS-файлов;
- импортировать / экспортировать настройки шаблона;
- активация иконки для заголовков материалов;
- подключение комментариев Disqus, IntenseDebate или Facebook;
- активация социальных кнопок для расшаривания материалов;
- настройка размеров изображений для материалов;
- возможность определения типа контента для материала Joomla;
- добавление мета-тегов Open Graph на страницы материалов Joomla;
- дополнительные настройки для пунктов меню.
Настройка шаблона на Helix 3
Рассмотрим возможности фреймворка на примере бесплатного шаблона Helix3 (скачать можно бесплатно с официального сайта) от JoomShaper.
Страница настройки шаблона на Helix3 имеют следующий набор вкладок:
- Basic
- Presets
- Layout
- Menu
- Typography
- Custom Code
- Advanced
- Blog
- Assigments
Эти вкладки и их настройки являются базовыми для фреймворка Helix 3, но разработчики могут добавлять новые опции в свои шаблоны.
Вкладка Basic
Активация и настройка предзагрузчика, фавиконки, закрепления шапки, «коробочного» макета, логотипа, фонового изображения, копирайта, социальных иконок, контактной информации, режима отключенного сайта и страницы 404.
Вкладка включает следующие разделы:
- Global,
- Header,
- Boxed Layout,
- Logo,
- Body Background Image,
- Footer,
- Social Icons,
- Contact Information,
- Coming Soon,
- Error Page.
Global
Опции раздела:
Preloader.
Активация предзагрузчика, отображаемого до момента полной загрузки страницы. Можно установить тип анимации, цвет фона и текста предзагрузчика.
- Go To Top.
Активация кнопки Наверх.
Header
Опции раздела:
Sticky Header.
Закрепление строки Header при скроллинге страницы.
- Favicon.
Выбор картинки в качестве фавиконки (16 x 16 px, формат PNG или GIF).
Boxed Layout
Активация «коробочного» макета (с отступами по краям при широком формате).
Logo
Опции раздела:
Logo Type.
Выбор формата логотипа: изображение или текст. В зависимости от формата будут доступны соответствующие поднастройки.
- Module Position.
Выбор модульной позиции для вывода логотпа.
Body Background Image
Опции раздела:
Select Image.
Выбор картинки для фона.
Background Repeat.
Повтор картинки.
Background Size.
Масштабирование картинки: Inherit (исходный размер картинки), Cover (картинка отображается во всю ширину или высоту страницы), Contain (картинка отображается полностью).
Background Attachment.
Привязка картинки: Inherit (унаследованное значение, как правило это Scroll), Fixed (картинка не прокручивается при скроллинге), Scroll (картинка прокручивается при скроллинге).
Background Position.
Базовая позиция картинки.
Footer
Опции раздела:
Copyright.
Показать или скрыть текст копирайта.
Module Position.
Выбор позиции для вывода копирайта.
Copyright Notice.
Текст копирайта.
Social Icons
Опции раздела:
Social Icons.
Показать или скрыть социальные иконки.
Module Position.
Выбор позиции для вывода социальных иконок.
Facebook URL, Twitter URL, Google Plus URL и т. д.
URL-адреса страниц в социальных сетях.
Custom.
Сюда можно добавить любую недостающую иконку (CSS-класс иконки и ссылка, разделенные пробелом, например
fa-vk vk.com.
Contact Information
Контактная информация
Опции раздела:
Enable.
Показать или скрыть контактную информацию.
Module Position.
Выбор позиции для вывода контактной информации.
Phone.
Номер телефона
Mobile.
Номер мобильного
Email.
Адрес электронной почты
Open Hours.
Время работы.
Coming Soon
Активация режима закрытого сайта с возможностью кастомизации страницы (фон, логотип, заголовок, текст и дата открытия).
Error Page
Настройки страницы 404-й ошибки
Опции раздела:
- Backgound Image.
Выбор фоновой картинки для страницы 404.
- Error Page Logo.
Выбор картинки логотипа для страницы 404.
Presets
Переключение стилей с предустановленным цветом для текста и фона.
Можно вносить постоянные изменения в имеющиеся стили.
- Background Color.
Цвет фона.
- Text Color.
Цвет текста.
- Major Color.
Цвет ссылок, кнопок и т. д.
- Dropdown Background Color.
Цвет фона выпадающих пунктов меню.
- Dropdown Text Color.
Цвет текста выпадающих пунктов меню.
Layout
Конструктор макета модулей и позиций.
В конструкторе можно создавать строки (Add Row) и колонки (Add Column), и назначать для них модульный позиции.
Строки и колонки можно удалять (Remove) и менять местами с помощью перетягивания (Drag & Drop).
Для разных колонок можно назначать одинаковые модульные позиции, чтобы выводить один модуль в нескольких позициях на странице.
Настройки строк
Нажав на кнопку Settings, относящейся к строке, откроется всплывающее окно с большим количеством опций: настройка фона, цвета текста, ссылок, значения отступов, установка размера строки во всю ширину экрана, возможность отключения строки на мобильных, планшетах и десктопах. Также здесь можно задать строке CSS-класс.
Настройки колонок
Настройки колонки также открываются во всплывающем окне при клике по иконке с шестеренками. Доступны следующие настройки: назначение колонке области компонента или модульной позиции, возможность отключения колонки на мобильных, планшетах и десктопах, адаптивность колонки и назначение CSS-класса.
Menu
Настройки Mega Menu:
- Select Menu.
Выбор главного меню.
- Menu Type.
Вариации вывода меню: Mega Menu (стандарт), Off Canvas (отобразится при клике по иконке), Mega Menu и Off Canvas.
- Dropdown Width.
Ширина выпадающих пунктов меню.
- Dropdown background color.
Цвет фона выпадающих пунктов меню.
- Dropdown Animation.
Анимация выпадающих пунктов меню.
- Off canvas Animation.
Анимация меню, отображаемого при клике по иконке.
Typography
Определение и настройка шрифтов для основных тегов (Body, H1-H6, Nav).
Чтобы избежать существенного увеличения времени загрузки страницы не рекомендуем задействовать более 2-х типов шрифтов.
Custom Code
Текстовые области для вставки пользовательского кода:
Before </head>
Указанный код будет отображаться перед закрывающимся тегом </head>. Это может быть мета-тег или подключение файла стилей.Before </body>
Указанный код будет отображаться перед закрывающимся тегом </body>. Например, это может быть код счетчика веб-аналитики.Custom CSS.
Пользовательские CSS-свойства.Custom Javascript.
Пользовательский JavaScript.
Advanced
Функции сжатия кода, компиляции LESS в расширение для оптимизации скорости загрузки (например, JCH Optimize).
Blog
Вкладка содержит следующие разделы:
Post Format.
Опция Show Icon включает или отключает отображение иконки напротив названия материала. Иконка зависит от типа контента, присвоенного материалу (об этом ниже).
Comments Settings.
Подключение комментариев Disqus, IntenseDebate или Facebook. Для интеграции требуется ввести необходимые данные.
- Social Share.
Иконки для расшаривания материалов в социальных сетях.
Image Sizes.
Определение размеров картинок для материалов.
Assigments
Определение заданных настроек шаблона к определенным страницам сайта.
Дополнительные настройки пунктов меню
Фреймворк Helix3 добавляет новые вкладки с дополнительными настройками для пунктов меню:
- Helix Megamenu Options
- Helix Menu Options
- Helix Page Title
Helix Megamenu Options
Эта вкладка отображается на страницах редактирования пунктов меню перового уровня и имеет следующие настройки:
Drag Module.
Позволяет размещать модули из списка в выпадающем меню. Здесь можно установить ширину, а также определить макет (количество строк и колонок) выпадающего меню.Show Menu Title.
Позволяет скрыть название пункта меню.Menu Icon.
Добавление иконки из выпадающего списка, которая будет отображаться слева от названия пункта меню.Custom CSS Class.
Добавление CSS-класса к пункту меню для кастомизации его стиля.
Helix Menu Options
Эта вкладка отображается на страницах редактирования пунктов меню 2-го уровня и ниже. Настройки вкладки:
Dropdown Position.
Позиция выпадающего меню (слева или справа), если есть вложенные пункты.Show Menu Title.
Позволяет скрыть название пункта меню.Menu Icon.
Добавление иконки из выпадающего списка, которая будет отображаться слева от названия пункта меню.Custom CSS Class.
Добавление CSS-класса к пункту меню для кастомизации его стиля.
Helix Page Title
Настройки в этой вкладке позволяют выводить заголовок пункта меню в отдельной модульной позиции, предусмотренной в шаблонах на Helix3. Опции во вкладке:
Enable Page Title.
Активация отображения заголовка.Alternative Title.
Если заполнять, то текст в этом поле заменит исходный заголовок пункта меню.Page Subtitle.
Текст подзаголовка.Background Color.
Цвет фона.Background Image.
Фоновое изображение.
Дополнительные настройки материалов
Helix 3 Framework добавляет новую вкладку Helix Blog Options с дополнительными опциями на странице редактирования материалов Joomla. Вкладка имеет 2 опции:
Featured Image.
Дополнительная картинка, заменяющая изображение, указанное во вкладке Изображения и ссылки. Сомнительная опция.Post Format.
Позволяет определить формат материала (Standart, Video, Gallery, Audio, Link, Quote, Status) и выбрать дополнительный контент.
Это интересная и годная к использованию опция. Например, если задать материалу тип Video, то вместо картинки материала будет отображаться видеоролик (нужно указать URL). Также от типа контента будет зависеть иконка возле заголовка.
Мета-теги Open Graph
Помимо всего вышеописанного, Helix 3 добавляет к материалам мета-теги Open Graph, влияющие на формирование постов в социальных сетях. При этом фреймворк позволяет управлять добавлением мета-тегов (отключать эту функцию или самостоятельно выбирать значения): они будут добавляться в соответствии со значением мета-тега Descriptio, тега Title и картинки, присвоенной материалу. Если эти значения не указаны, то OG-теги будут заполнены из контента страницы.
Где скачать шаблоны на Helix 3
Существует огромное количество бесплатных и платных шаблонов, базирующихся на фреймворке Helix3. Подобрать подходящий шаблон вы сможете на следующих сайтах:
www.joomshaper.com.
Сайт разработчика рассматриваемого фреймворка. На момент написания данного материала в списке имелось 6 бесплатных шаблонов.themeforest.net.
В списке имеется почти 200 коммерческих шаблонов на Helix 3.
Упоминаемые термины:
CSS, Joomla, Админка, Кастомизация, Компонент, Материал, Меню сайта, Модуль, Расширение, Шаблон, JavaScript, Favicon, Helix Ultimate, Open Graph, Title, JCH Optimize