Одним из самых простых, на мой взгляд, способов самостоятельной разработки качественного сайте на сегодняшний день, является использование фреймворка для Joomla 3 - Helix 3 Framework.

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

Описание и возможности 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, то лучше его отключить, т. к. мета-теги будут дублироваться.

Источник: Центр обучения Joomla