Центр обучения Joomla
    Helix 3 Framework

    Helix 3 Framework: возможности и настройки фреймворка

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

    Содержание

    1. Описание и возможности Helix 3
    2. Настройка шаблона на Helix 3
    3. Дополнительные настройки пунктов меню
    4. Дополнительные настройки материалов
    5. Мета-теги Open Graph
    6. Где скачать шаблоны на 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 имеют следующий набор вкладок:

    1. Basic
    2. Presets
    3. Layout
    4. Menu
    5. Typography
    6. Custom Code
    7. Advanced
    8. Blog
    9. Assigments
    Настройки шаблона Helix3

    Эти вкладки и их настройки являются базовыми для фреймворка 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.

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

    Footer

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

    1. Copyright.

      Показать или скрыть текст копирайта.

    2. Module Position.

      Выбор позиции для вывода копирайта.

    3. Copyright Notice.

      Текст копирайта.

    Копирайт

    Social Icons

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

    1. Social Icons.

      Показать или скрыть социальные иконки.

    2. Module Position.

      Выбор позиции для вывода социальных иконок.

    3. Facebook URL, Twitter URL, Google Plus URL и т. д.

      URL-адреса страниц в социальных сетях.

    4. Custom.

      Сюда можно добавить любую недостающую иконку (CSS-класс иконки и ссылка, разделенные пробелом, например fa-vk vk.com.

    Социальные иконки со ссылками

    Contact Information

    Контактная информация

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

    1. Enable.

      Показать или скрыть контактную информацию.

    2. Module Position.

      Выбор позиции для вывода контактной информации.

    3. Phone.

      Номер телефона

    4. Mobile.

      Номер мобильного

    5. Email.

      Адрес электронной почты

    6. Open Hours.

      Время работы.

    Контактная информация

    Coming Soon

    Активация режима закрытого сайта с возможностью кастомизации страницы (фон, логотип, заголовок, текст и дата открытия).

    Страница, отображаемая в режиме закрытого сайта

    Error Page

    Настройки страницы 404-й ошибки

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

    1. Backgound Image.

      Выбор фоновой картинки для страницы 404.

    2. Error Page Logo.

      Выбор картинки логотипа для страницы 404.

    Страница 404

    Presets

    Переключение стилей с предустановленным цветом для текста и фона.

    Вкладка «Presets»

    Можно вносить постоянные изменения в имеющиеся стили.

    1. Background Color.

      Цвет фона.

    2. Text Color.

      Цвет текста.

    3. Major Color.

      Цвет ссылок, кнопок и т. д.

    4. Dropdown Background Color.

      Цвет фона выпадающих пунктов меню.

    5. Dropdown Text Color.

      Цвет текста выпадающих пунктов меню.

    Preset 1
    Preset 2
    Preset 3

    Layout

    Конструктор макета модулей и позиций.

    • В конструкторе можно создавать строки (Add Row) и колонки (Add Column), и назначать для них модульный позиции.

    • Строки и колонки можно удалять (Remove) и менять местами с помощью перетягивания (Drag & Drop).

    • Для разных колонок можно назначать одинаковые модульные позиции, чтобы выводить один модуль в нескольких позициях на странице.

    Настройки строк

    Нажав на кнопку Settings, относящейся к строке, откроется всплывающее окно с большим количеством опций: настройка фона, цвета текста, ссылок, значения отступов, установка размера строки во всю ширину экрана, возможность отключения строки на мобильных, планшетах и десктопах. Также здесь можно задать строке CSS-класс.

    Настройки строки (Row Settings)

    Настройки колонок

    Настройки колонки также открываются во всплывающем окне при клике по иконке с шестеренками. Доступны следующие настройки: назначение колонке области компонента или модульной позиции, возможность отключения колонки на мобильных, планшетах и десктопах, адаптивность колонки и назначение CSS-класса.

    Настройки колонки (Column Settings)

    Menu

    Настройки Mega Menu:

    1. Select Menu.

      Выбор главного меню.

    2. Menu Type.

      Вариации вывода меню: Mega Menu (стандарт), Off Canvas (отобразится при клике по иконке), Mega Menu и Off Canvas.

    3. Dropdown Width.

      Ширина выпадающих пунктов меню.

    4. Dropdown background color.

      Цвет фона выпадающих пунктов меню.

    5. Dropdown Animation.

      Анимация выпадающих пунктов меню.

    6. Off canvas Animation.

      Анимация меню, отображаемого при клике по иконке.

    Typography

    Определение и настройка шрифтов для основных тегов (Body, H1-H6, Nav).

    Чтобы избежать существенного увеличения времени загрузки страницы не рекомендуем задействовать более 2-х типов шрифтов.

    Custom Code

    Текстовые области для вставки пользовательского кода:

    1. Before </head>
      Указанный код будет отображаться перед закрывающимся тегом </head>. Это может быть мета-тег или подключение файла стилей.

    2. Before </body>
      Указанный код будет отображаться перед закрывающимся тегом </body>. Например, это может быть код счетчика веб-аналитики.

    3. Custom CSS.
      Пользовательские CSS-свойства.

    4. Custom Javascript.
      Пользовательский JavaScript.

    Advanced

    Функции сжатия кода, компиляции LESS в CSS и экспорта / импорта настроек. Не следует применять эти настройки, если на сайте уже используется расширение для оптимизации скорости загрузки (например, JCH Optimize).

    Blog

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

    1. Post Format.

      Опция Show Icon включает или отключает отображение иконки напротив названия материала. Иконка зависит от типа контента, присвоенного материалу (об этом ниже).

    2. Comments Settings.

      Подключение комментариев Disqus, IntenseDebate или Facebook. Для интеграции требуется ввести необходимые данные.

    3. Social Share.

      Иконки для расшаривания материалов в социальных сетях.

    4. Image Sizes.

      Определение размеров картинок для материалов.

    пп. 1, 3

    Assigments

    Определение заданных настроек шаблона к определенным страницам сайта.

    Важно знать!
    Здесь приведен базовый список настроек, предоставленных для шаблона Helix3. Другие шаблоны могут иметь более широкий список опций в каждой из вкладок.

    Дополнительные настройки пунктов меню

    Фреймворк Helix3 добавляет новые вкладки с дополнительными настройками для пунктов меню:

    Helix Megamenu Options

    Эта вкладка отображается на страницах редактирования пунктов меню перового уровня и имеет следующие настройки:

    • Drag Module.
      Позволяет размещать модули из списка в выпадающем меню. Здесь можно установить ширину, а также определить макет (количество строк и колонок) выпадающего меню.

    • Show Menu Title.
      Позволяет скрыть название пункта меню.

    • Menu Icon.
      Добавление иконки из выпадающего списка, которая будет отображаться слева от названия пункта меню.

    • Custom CSS Class.
      Добавление CSS-класса к пункту меню для кастомизации его стиля.

    Helix Megamenu Options

    Helix Menu Options

    Эта вкладка отображается на страницах редактирования пунктов меню 2-го уровня и ниже. Настройки вкладки:

    • Dropdown Position.
      Позиция выпадающего меню (слева или справа), если есть вложенные пункты.

    • Show Menu Title.
      Позволяет скрыть название пункта меню.

    • Menu Icon.
      Добавление иконки из выпадающего списка, которая будет отображаться слева от названия пункта меню.

    • Custom CSS Class.
      Добавление CSS-класса к пункту меню для кастомизации его стиля.

    Helix Menu Options

    Helix Page Title

    Настройки в этой вкладке позволяют выводить заголовок пункта меню в отдельной модульной позиции, предусмотренной в шаблонах на Helix3. Опции во вкладке:

    • Enable Page Title.
      Активация отображения заголовка.

    • Alternative Title.
      Если заполнять, то текст в этом поле заменит исходный заголовок пункта меню.

    • Page Subtitle.
      Текст подзаголовка.

    • Background Color.
      Цвет фона.

    • Background Image.
      Фоновое изображение.

    Вкладка Page Title
    Helix Page Title на странице сайта
    Важно знать!
    Другие шаблоны, работающие на Helix 3, могут иметь более широкий список опций как в данных вкладках, так и в настройках самого шаблона.

    Дополнительные настройки материалов

    Helix 3 Framework добавляет новую вкладку Helix Blog Options с дополнительными опциями на странице редактирования материалов Joomla. Вкладка имеет 2 опции:

    Вкладка «Helix Blog Options»
    • Featured Image.
      Дополнительная картинка, заменяющая изображение, указанное во вкладке Изображения и ссылки. Сомнительная опция.

    • Post Format.
      Позволяет определить формат материала (Standart, Video, Gallery, Audio, Link, Quote, Status) и выбрать дополнительный контент.
      Это интересная и годная к использованию опция. Например, если задать материалу тип Video, то вместо картинки материала будет отображаться видеоролик (нужно указать URL). Также от типа контента будет зависеть иконка возле заголовка.

    Формат Video и Gallery
    Формат Standart и Audio

    Мета-теги Open Graph

    Помимо всего вышеописанного, Helix 3 добавляет к материалам мета-теги Open Graph, влияющие на формирование постов в социальных сетях. При этом фреймворк позволяет управлять добавлением мета-тегов (отключать эту функцию или самостоятельно выбирать значения): они будут добавляться в соответствии со значением мета-тега Description, тега Title и картинки, присвоенной материалу. Если эти значения не указаны, то OG-теги будут заполнены из контента страницы.

    Мета-теги Open Graph
    Важно знать!
    Если вместе с фреймворком Helix 3 используется отдельное расширение, формирующие мета-теги Open Graph, то лучше его отключить, т. к. мета-теги будут дублироваться.

    Где скачать шаблоны на Helix 3

    Существует огромное количество бесплатных и платных шаблонов, базирующихся на фреймворке Helix3. Подобрать подходящий шаблон вы сможете на следующих сайтах:

    • www.joomshaper.com .
      Сайт разработчика рассматриваемого фреймворка. На момент написания данного материала в списке имелось 6 бесплатных шаблонов.

    • themeforest.net .
      В списке имеется почти 200 коммерческих шаблонов на Helix 3.

    Как быстро разобраться в Joomla?

      Центр Обучения Joomla!

      "Все, что нужно знать о Joomla в одном месте"

      Joomla Последняя версия
      Joomla! — 3.9.1

      Скачать

      Курс "Как создать свой сервис рассылки на Joomla?"

      Чтобы получить бесплатный доступ введите имя и ваш е-маил. Доступ будет выслан на ваш е-маил адрес.

       

      Базовый курс по Joomla 3.9

      В КУРСЕ ВАС ЖДЕТ:

      Видеоуроки по Joomla 3.9

      После уроков вы: зарегистрируете домен и хостинг, установите и правильно настроите CMS Joomla, установите и настроите шаблон, получите понимание как работать с Joomla.

      Лучшие расширения для Joomla

      Вы получите список и описание лучших бесплатных и платных расширений для Joomla.

      Пошаговый процесс создания сайта

      Выполните 22 действия по чек-листу и ваш сайт готов.

      Хостинг в подарок

      3 месяца качественного хостинга в подарок для беззаботного начала работы над своим проектом.
      Введите e-mail для которого нужно выставить доступ к курсу: