Подробное руководство по Менеджеру макетов для шаблонов Helix 3

• Менеджер макетов Helix 3
• Ядро Helix 3
• Работа с модулями и позициями в Helix 3
• Работа со строками, столбцами и другими инструментами в Helix 3

Честный VDS/VPS, на котором «Лунная База» живет уже 20+ лет

Задумываетесь о том, чтобы поднять свой pet-проект, сайт клиента или настроить окружение для разработки? Уже пора подумать, где арендовать железо.

Лунная База хостится на FirstVDS более 20 лет. Мыслей о том, чтобы перебраться на другой хостинг, не было ни разу (хотя опыт работы с другими вариантами, конечно, есть).

Бывали разные ситуации, но они бывают на любом железе. Главное, что нужно понять: здесь нет маркетинговой шелухи и сказок про «мы всё сделаем за вас». Если вы берете VDS — вам дают полный root, возможность накатить любую ОС и не лезут в ваши конфиги.

Если в саппорт написать с вопросом по вашему коду и получить ответ: «Читайте документацию и разбирайтесь сами» или «Обратитесь к профильному специалисту» — это не повод обижаться. Это повод углубить свои знания в DevOps и сайтостроении! Бегите от тех, кто пообещает: «Мы всё чиним и настраиваем абсолютно бесплатно!». Никто никогда не работает «по доброте душевной» в ущерб себе, а бесплатный сыр в администрировании обычно заканчивается сломанной базой данных.

Что по факту: Гибкое масштабирование ядер и RAM, экономия по сравнению с физическими серверами и адекватная панель ispmanager, если она вам нужна.

Посмотреть тарифы VDS/VPS

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

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

Ядро Helix 3.

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

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

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

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

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

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

Интерфейс 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

Самый честный хостинг за 20+ лет существования Лунной Базы

Задумываешься о том, чтобы поднять свой сайт в Интернете? Уже пора подумать о том, какой хостинг выбрать?

Лунная База хостится 20+ лет на firstDVS. При этом, мыслей о том, чтобы перебраться на другой хостинг не было. (Но, при этом есть опыт работы с другими вариантами.)

Бывали с firstDVS разные ситуации, но, они бывают на всех хостингах. Единственное, что тут важно понять, - это то, что никто ничего тебе не будет впаривать... Но, и работать за тебя тоже никто не станет. Если в саппорт ответили: «Читайте по ссылке и разбирайтесь сами...» или вообще «Обратитесь за помощью к специалисту», - это повод углубить свои знания в области сайтостроения, а не бежать к тем, что пообещают: «Мы всё чиним и всё делаем за своих клиентов абсолютно бесплатно!» Никто никогда ничего ни за кого "по доброте душевной" не делал, не делает и не будет делать!

Выбрать