Подробное руководство по Helix 3 Layout Manager


Менеджер макетов Helix 3.

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

Ядро Helix 3.

Ниже приведен скриншот верхней части страницы, использующей фреймворк Helix3.

скриншот верхней части страницы, использующей фреймворк Helix3

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

Очень просто. Социальные ссылки, контактная информация и логотип могут быть добавлены из настроек Основного стиля фреймворка Helix 3. Зайдите в панель управления администратора Joomla и перейдите в раздел Расширения > Шаблоны (Extensions > Templates). Откройте 'shaper_helix3 - Default'. Вы получите страницу, как показано на следующем скрине.

настройки Основного стиля фреймворка Helix 3

Здесь есть возможность сделать раздел заголовка "липким", чтобы он оставался наверху даже при прокрутке страницы вниз. Здесь также есть функция загрузки/установки логотипа, страницы coming soon, фонового изображения, блочного макета, нижнего колонтитула и т.д.

Если прокрутить страницу дальше вниз, то появятся поля для ввода ссылок на социальные сети и контактной информации.

Ввод ссылок на социальные сети и контактной информации

После настройки основных параметров страницы в Helix 3 можно перейти к конструктору макетов. Ниже приведен скриншот менеджера макетов Helix3.

настройка основных параметров страницы в Helix 3

Интерфейс Helix 3 довольно прост и понятен. В любое время можно вставить новую строку, которая впоследствии может быть разделена на несколько столбцов.

Заголовок строки также используется как заголовок раздела или название раздела. Фреймворк Helix 3 можно использовать для создания основного макета сайта, где размещаются верхняя панель, заголовок, панель меню, нижние модули и нижний колонтитул. Можно назначить блок для компонента, который может быть использован для размещения более специфического содержимого страницы, включая тексты, изображения и другие материалы мультимедиа. Помните, что здесь можно назначить только один компонент в одном макете, и этого более чем достаточно для создания современного сайта. Так что не беспокойтесь. Просто убедитесь, что в качестве шаблона сайта по умолчанию используется Helix 3 (shaper_helix3 - Default), и все будет работать.

Верхняя строка меню встроена. Ее можно редактировать из Панели управления администратора > Меню > Главное меню (Admin Control Panel > Menus > Main Menu).

Работа с модулями и позициями в Helix 3.

Менеджер макетов Helix 3 выводит содержимое на основе позиций модулей. Чтобы показать модуль элемента через макет фреймворка Helix 3, необходимо создать позицию. Создать позицию довольно просто. Сначала войдите на свой хостинг-сервер. Перейдите в публичную директорию html. Перейдите к templates > shaper_helix3. Откройте файл templateDetails.xml.

Менеджер макетов Helix 3 выводит содержимое на основе позиций модулей

Там находятся записи позиций. Например, для размещения логотипа в заголовке используется позиция 'logo'. Код позиции для логотипа - 'logo'. Можно добавить позицию для модуля 'example', просто добавив 'example' (с тегом <position>) под остальными кодами позиций.

Ввод новой позиции модуля в шаблоне Helix 3

Теперь можно приступить к созданию модуля. Зайдите в админ-панель Joomla и перейдите в Расширения > Модули > Создать (Extensions > Modules > New). Появится список различных модулей.

Как выбрать модуль Joomla в шаблоне Helix 3

Выберите один из них и назначьте для него созданную ранее позицию. Затем сохраните модуль.

пример выбора позиции модуля Joomla в шаблоне Helix 3

Теперь модуль готов. Теперь вставим его в строку. Вставим модуль Example в секцию Bottom. Для этого нужно нажать на значок шестеренки, чтобы открыть меню выбора позиции модуля шаблона станицы Helix 3.

Как открыть меню выбора позиции модуля шаблона станицы Helix 3

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

Выбрать позицию модуля Helix 3 из выпадающего списка

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

Если обновить главную страницу (или любую другую страницу, на которой отображается модуль Example) тестового сайта, то можно увидеть только что добавленный элемент.

показан модуль шаблона Helix 3

Работа со строками, столбцами и другими инструментами в Helix 3.

Добавление строки одним кликом мыши. Нажмите кнопку Add Row, расположенную в другой строке. Это сразу же создаст новую строку.

Как добавить строку в шаблон страницы Helix 3

Это новая строка. В строки можно добавлять столбцы.

Выбор количества столбцов в шаблоне страницы Helix 3

В настройках строки доступно множество параметров настройки. Задайте ей имя, установите цвет фона/изображение, управляйте видимостью для различных типов устройств, установите padding-margin, используйте пользовательский CSS-класс и т.д. Просто нажмите кнопку "Настройки" на целевой строке и выполните настройки. Примените эти настройки и, наконец, сохраните макет.

Настройки параметров строки в шаблоне страницы Helix 3

Помимо позиций, можно настраивать типографику, отображать иконки, добавлять мультимедийные элементы и новые модули, чтобы создать эффективную структуру страниц сайта Joomla, используя фреймворк JoomShaper Helix 3. Существует множество инструментов, которые можно использовать для создания информативного, чистого и красивого сайта. Испытай это сегодня. Это совершенно бесплатно.

Перевод с английского:
https://www.joomshaper.com/blog/a-detailed-guide-to-the-helix3-layout-manager

Заберите ссылку на статью к себе, чтобы потом легко её найти ;)

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

Войдите чтобы комментировать

Обсудить эту статью

INFO: Вы отправляете сообщение как 'Гость'