Gantry 5  - это новая, революционная система управления контентом,  созданная для облегчения работы веб-разработчиков сайтов. За счет великолепной интеграции может работать с популярными движками CMS - Joomla, WordPress и Grav. Gantry5 использует удобный графический интерфейс и функцию перетаскивания мышью, которые позволяют изменить макет вашего сайта за считанные секунды.

Любой шаблон от Gantry5 имеет, как правило, несколько предустановленных секций <section> и стилей <styles>, идущих дополнительно с базовым стилем (backgroundimage-backgroundoverlay-backgroundclippingvideo-background). При этом простые секции шаблона, как правило, имеют 2 встроенных стиля (background и image-background). Увеличить количество встроенных стилей для <section> достаточно просто. В Gantry5 это можно осуществить с помощью yaml- и scss- файлов. Yaml позволяет создать в административной панели блок с заданными цветовыми решениями, а scss отобразить все это на стороне браузера пользователя.

По сути есть два варианта создания секции: это создание совершенно новой секции (с новым названием) или модернизация старой (дополнение новыми аттрибутами)

В Gantry5 все операции по созданию и модернизации следует проводить (рекомендуется) в папке custom, созданную специально разработчиками Gantry5 для этих целей. Иначе при обновлении шаблона все Ваши изменения, которые Вы внесли в шаблон просто исчезнут !!!

 Для примера создания и модернизации секции воспользуемся бесплатным шаблоном от студии Rockettheme - Helium. В стандартном шаблоне Helium установлены секции с заранее установленными стилями:

К сожалению, заранее установленных секций на шаблоне очень мало и  поэтому хочется увеличить их количество.  И здесь огромное подспорье Вам окажет документация по Gantry5 - как создавать новые секции, как добавлять новые аттрибуты для неё, как автоматизировать выбор стиля для секции, за счет чего может измениться стиль частицы, расположенных в разных секциях - все это можно найти на портале Gantry5

На данный момент в коммерческих шаблона от Rockettheme используют 5-6 разработанных стилей, работающих одновременно и по отдельности:

Стили секции

background

image-background

overlay-background

clipping

video-background

подробнее...

Для пользователей, которые только приступили к изучению Gantry5 для Joomla, и тех, кто не может понять и разобраться самостоятельно с этим вопросом, я постараюсь доходчиво объяснить, как это можно сделать быстро и без ошибок. 

Шаблоны Hydrogen и Helium универсальны и легко поддаются модернизации и корректировке. Все осуществляется через папку custom, специально созданную разработчиками шаблона.

{module Custom HTML _ плавные повороты }

Единственное, что Вы должны знать - что, где и как поменять в шаблоне, чтобы осуществить эту модернизацию. И здесь появляется понятие  переопределения - что, где и как создать, чтобы при обновлении шаблона разработчиками (а это бывает регулярно) эти изменения не потерялись.

Основы метода переопределения изложены в статье "Три золотых правила при модернизации шаблона".

Так как сейчас мы рассматриваем секцию шаблона, то общий план по модернизации шаблона будет следующий:

Добавим в шаблон 6 новых секций.
Добавим для каждой новой и старой секции к имеющемуся аттрибуту background новые аттрибуты - например, аттрибуты image background (изображение на заднем фоне) и overlay (затемнение изображения спецэффектами).
Добавим новое поле variations с выпадающим списком стилей, которые можно применить к секции

Решение

  1. Для создания новых секций воспользуемся шаблоном Antares - скопируем названия и стили (возьмем готовые) - Bottom, Extension, Fixedside, Showcase, Slideshow, Top, Overlay, Старые и новые секции (*) разместим в нужном для нас порядке. Новые секции позволят нам добавить стили от коммерческих шаблонов от  Rockettheme, которые мы видели, например, на шаблоне Antares(фиксированный слева или справа модуль социальных иконок) - подробно, как это сделать, изложено в статье "Создание новых секций в шаблоне Helium"
  2. Добавление новых аттрибутов связано с изменением файлов section.html.twig и section.yaml - подробно, как это сделать, изложено в статье "Добавляем фон Image Background для секции глобально и локально".

  1. Новое поле Variations с выпадающим списком стилей появилось на шаблоне Helium и Hydrogen совсем недавно и инициализируется при обновлении шаблона автоматически, но принцип такой же как и изложенный в пункте 2. Особенность - в дублировании некоторого кода по активации поля в файле theme.yaml, позволяющего добиться эффекта выпадающего списка и в файлах section.html.twig и section.yaml, чтобы сохранить ранее внесенные изменения, связанные с аттрибутами image background и overlay.