Helix 3 Framework

Helix 3 Framework

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

1. Описание и возможности 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;
  • дополнительные настройки для пунктов меню.

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

2.1. Вкладка 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.

2.1.1. Global

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

  1. Preloader.

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

  2. Go To Top.

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

2.1.2. Header

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

  1. Sticky Header.

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

  2. Favicon.

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

2.1.3. Boxed Layout

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

2.1.4. Logo

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

  1. Logo Type.

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

  2. Module Position.

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

2.1.5. 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.

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

2.1.6. Footer

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

  1. Copyright.

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

  2. Module Position.

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

  3. Copyright Notice.

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

2.1.7. Social Icons

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

  1. Social Icons.

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

  2. Module Position.

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

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

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

  4. Custom.

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

2.1.8. Contact Information

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

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

  1. Enable.

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

  2. Module Position.

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

  3. Phone.

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

  4. Mobile.

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

  5. Email.

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

  6. Open Hours.

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

2.1.9. Coming Soon

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

2.1.10. Error Page

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

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

  1. Backgound Image.

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

  2. Error Page Logo.

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

2.2. Presets

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

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

  1. Background Color.

    Цвет фона.

  2. Text Color.

    Цвет текста.

  3. Major Color.

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

  4. Dropdown Background Color.

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

  5. Dropdown Text Color.

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

2.3. Layout

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

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

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

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

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

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

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

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

2.4. 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.

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

2.5. Typography

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

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

2.6. Custom Code

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

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

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

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

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

2.7. Advanced

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

2.8. Blog

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

  1. Post Format.

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

  2. Comments Settings.

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

  3. Social Share.

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

  4. Image Sizes.

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

Теги:

Добавить комментарий

Отправить