Helix 3 — популярный фреймворк от JoomShaper, применяемый в шаблонах Joomla от многих разработчиков. Helix 3 Framework позволяет быстро и гибко настраивать стиль шаблонов, что и сделало его особенно популярным. В материале рассмотрены возможности фреймворка на примере шаблона Helix3.
Содержание
- Описание и возможности Helix 3
- Настройка шаблона на Helix 3
- Дополнительные настройки пунктов меню
- Дополнительные настройки материалов
- Мета-теги Open Graph
- Где скачать шаблоны на Helix 3
Описание и возможности 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 в CSS и экспорта / импорта настроек. Не следует применять эти настройки, если на сайте уже используется расширение для оптимизации скорости загрузки (например, JCH Optimize).
Blog
Вкладка содержит следующие разделы:
- Post Format.
Опция Show Icon включает или отключает отображение иконки напротив названия материала. Иконка зависит от типа контента, присвоенного материалу (об этом ниже). - Comments Settings.
Подключение комментариев Disqus, IntenseDebate или Facebook. Для интеграции требуется ввести необходимые данные. - Social Share.Иконки для расшаривания материалов в социальных сетях.
- Image Sizes.
Определение размеров картинок для материалов.
Assigments
Определение заданных настроек шаблона к определенным страницам сайта.
Важно знать!
Здесь приведен базовый список настроек, предоставленных для шаблона Helix3. Другие шаблоны могут иметь более широкий список опций в каждой из вкладок.
Дополнительные настройки пунктов меню
Фреймворк 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, могут иметь более широкий список опций как в данных вкладках, так и в настройках самого шаблона.
Дополнительные настройки материалов
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, влияющие на формирование постов в социальных сетях. При этом фреймворк позволяет управлять добавлением мета-тегов (отключать эту функцию или самостоятельно выбирать значения): они будут добавляться в соответствии со значением мета-тега Description, тега Title и картинки, присвоенной материалу. Если эти значения не указаны, то OG-теги будут заполнены из контента страницы.
Важно знать!
Если вместе с фреймворком Helix 3 используется отдельное расширение, формирующие мета-теги Open Graph, то лучше его отключить, т. к. мета-теги будут дублироваться.
Где скачать шаблоны на Helix 3
Существует огромное количество бесплатных и платных шаблонов, базирующихся на фреймворке Helix3. Подобрать подходящий шаблон вы сможете на следующих сайтах:
- www.joomshaper.com.
Сайт разработчика рассматриваемого фреймворка. На момент написания данного материала в списке имелось 6 бесплатных шаблонов.
Источник: Центр обучения Joomla