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 имеют следующий набор вкладок:

  1. Basic
  2. Presets
  3. Layout
  4. Menu
  5. Typography
  6. Custom Code
  7. Advanced
  8. Blog
  9. Assigments

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

Вкладка Basic

Активация и настройка предзагрузчика, фавиконки, закрепления шапки, «коробочного» макета, логотипа, фонового изображения, копирайта, социальных иконок, контактной информации, режима отключенного сайта и страницы 404.

Вкладка включает следующие разделы:

  1. Global,
  2. Header,
  3. Boxed Layout,
  4. Logo,
  5. Body Background Image,
  6. Footer,
  7. Social Icons,
  8. Contact Information,
  9. Coming Soon,
  10. Error Page.

Global

Опции раздела:

  1. Preloader.

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

  2. Go To Top.

    Активация кнопки Наверх.

Header

Опции раздела:

  1. Sticky Header.

    Закрепление строки Header при скроллинге страницы.

  2. Favicon.

    Выбор картинки в качестве фавиконки (16 x 16 px, формат PNG или GIF).

Boxed Layout

Активация «коробочного» макета (с отступами по краям при широком формате).

Logo

Опции раздела:

  1. Logo Type.

    Выбор формата логотипа: изображение или текст. В зависимости от формата будут доступны соответствующие поднастройки.

  2. Module Position.

    Выбор модульной позиции для вывода логотпа.

Body Background Image

Опции раздела:

  1. Select Image.

    Выбор картинки для фона.

  2. Background Repeat.

    Повтор картинки.

  3. Background Size.

    Масштабирование картинки: Inherit (исходный размер картинки), Cover (картинка отображается во всю ширину или высоту страницы), Contain (картинка отображается полностью).

  4. Background Attachment.

    Привязка картинки: Inherit (унаследованное значение, как правило это Scroll), Fixed (картинка не прокручивается при скроллинге), Scroll (картинка прокручивается при скроллинге).

  5. Background Position.

    Базовая позиция картинки.