Одним из самых простых, на мой взгляд, способов самостоятельной разработки качественного сайте на сегодняшний день, является использование фреймворка для 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