Для создания новых секций воспользуемся шаблоном Antares - названия и стили возьмем готовые - Bottom, Extension, Fixedside, Showcase, Slideshow, Top, Overlay, Старые и новые секции (*) разместим в следующем порядке 

  • overlay *
  • fixedside *
  • top *
  • navigation
  • header
  • slideshow *
  • intro
  • features
  • utility
  • above
  • testimonials
  • expanded
  • container
  • mainbottom *
  • bottom *
  • footer
  • copyright *
  • offganvas section 

Новые секции позволят нам добавить стили от коммерческих шаблонов от  Rockettheme, которые мы видели например на шаблоне Antares (фиксированный слева или справа модуль социальных иконок) 

ШАГ 1

При копировании воспользуемся 1 правилом переопределения: т.к. все секции с установочными данными (default) каждой секции находятся в папке [шаблон/bluprints/styles/****.yaml] , тогда установочные данные новых секций разместим по пути (custom/bluprints/styles/****.yaml) 

Уже сразу после переноса (копирования) файлов ****.yaml на административной вкладке Styles шаблона Helium появятся новые поля.

Обязательным условием будет прописать новые стили в файле color.scss и  название_section.scss, а затем их активировать через Recompile CSS - без этого новые стили на Вашем шаблоне не отразятся.

  

 

ШАГ 2 (не терпит суеты)

Чтобы новые секции появились на вкладке Layout административной панели сделаем следующее. Согласно правилу переопределения -  для папок, находящихся в шаблоне в корневом каталоге, и имеющим 0 уровень вложенности действует правило №1 - создадим путь для модернизации  (custom/layout/default_2.yaml), внеся требуемые изменения в файл default.yaml

К сожалению, такой подход только добавляет новый шаблон, например Test, к уже имеющимся - Helium (По умолчанию) и Helium (Home - Particles), не меняя базовый шаблон Base Outline . Правда на нем будут присутствовать наши новые секции, но хотелось бы большего - чтобы изменился Base Outline.

Чтобы наш макет появился на Base Outline, надо всего лишь нажать на кнопку Load в административной панели на вкладке Layout и выбрать новый макет, например Default 3. Система предупредит, что вкладка aside пропадет (её нет на новом макете). После чего надо сохраниться, нажав  Save Layout

Разделим все коды нового файла defaul_2.yaml  на разделы

 1 раздел - layout (базовый)

layout:
  /overlay/: {  }
  /fixedside/: {  }
  /top/: {  }
  /navigation/:{  }    
  /header/: {  }
  /slideshow/: {  }
  /intro/: {  }
  /features/: {  }
  /utility/: {  }
  /above/: {  }
  /showcase/: {  }
  /testimonials/: {  }
  /expanded/: {  }
  /container-main/: {  }
    -
      -
        'mainbar 80':
          -            
      -
        'sidebar 20':
          -            
  /mainbottom/: {  }
  /bottom/: {  }
  /footer/: {  }
    -
      - 'logo-9571 20'
      - 'copyright-1736 60'
      - 'totop-8670 20'
  /copyright/: {  }
  /offcanvas/: {  }
    

 При такой записи кода на шаблоне Test появятся  все новые секции, но они будут пустыми (кроме секции footer). Поэтому файл defaul_2.yaml можно дополнить 2 группой кода.

2 раздел - structure (определяет название, наличие вкладок, стилей и анимацию по умолчанию)

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

Структура позволяет изменить поведение раздела, используя структурные свойства, такие как изменение типа раздела на div, а не на его поведение по умолчанию: section.

Существует пять различных типов свойств:  id, title, type, subtype и attributes. Идентификатор назначенного раздела определяет его теги. 

Свойство title позволяет указать заголовок для секвенции (переименования). Например, вы можете установить секцию mainbotton следующим образом:

structure:
 mainbottom:
 title: super                            /*меняет название секции с mainbotton на super
 type: section                           /* другие типы - block, container, grid, offcanvas, wrapper
 subtupe: footer                         /* другие типы - article, aside, div, header, main, nav, section
 attributes:
   boxed: '0'                            /* заполняет по умолчанию поля секции layout - inherit from page setting
   class: foo                            /* устанавливает по умолчанию поле css класс вкладки section - foo
   exstra: -data-sr: over 1.3s           /* заполняет по умолчанию поля Tag Attributes  - анимация продолжительностью 1.3 секунды
 block: id: block-9999                   /* название блока уникальное, в шаблоне может использоваться многократно - содержание описывается в разделе content
        class: g-bold                    /*заполняет по умолчанию поле css класс на вкладке block - g-bold
        fixed: '1'                       /*очень важно - - включает в секции вкладку Block (отключение - '0' или отсутствие block)
		exstra:                          /* при наличии параметра заполняет по умолчанию поле Tag Attributes вкладки Block 
 Основная проблема написания код в стилистике : в наличии связей (отступов) - без них при рекомпиляции возникает ошибка 500
 
 
Если вы просто напишите в коде после слов boxed нуль в одинарных кавычках  -  '0 ', 
structure:
  overlay:
    type: section
    attributes:
      boxed: '0'
 
 
то  при входе в секцию Overlay (нажимаем настроичное колесо) на вкладке Section по умолчанию  будет стоять значение  Fullwidht (Boxed Content) - ( ' 0 ')
 
 
 
 
В Gantry5 в шаблоне Helium в разделах Section вкладка Block по умолчанию отсутствует (в коммерческих шаблонах вкладка Block включена). Вкладка Block есть только в секции Container - для задания стилистики размещенных материалов, аттрибут включения вкладки Block - fixed : '1'
aside:
    type: section
    subtype: aside
    attributes:
      class: ''
    block:
      fixed: '1'
  mainbar:
    type: section
    subtype: main
  sidebar:
    type: section
    subtype: aside
    attributes:
      class: ''
    block:
      fixed: '1'
  container-main:
    attributes:
      boxed: ''
 На сайте docs.gantry.org рассмотрены различные приемы добавления секций на шаблон - изучайте, ничего трудного нету.
 

3 раздел -  content

Раздел позволяет разместить внутри секции поля по умолчанию. Пример создания - нижестоящий код 

content:
  date-1446:
    title: 'My Date'
    attributes:
      css:
        class: foo
      date:
        formats: 'l, d F'
    block:
      variations: box2

  обеспечивает отображение на вкладке частицы соответствующие классы и форматы

Другой вариант кода в файле default_home.yaml в макете шаблона home_particles (раздел Outlines  административной панели) обеспечит заполнение предустановленными аттрибутами частицы simplecontent  на вкладке Particle Defaults административной панели шаблона

content:
  simplecontent-8476:
    title: 'Simple Content'
    attributes:
      class: ''
      title: 'WE ARE CITADEL'
      items:
        -
          layout: header
          created_date: ''
          content_title: 'VIDEO SUPPORTED THEME'
          author: ''
          leading_content: 'Build a unique cinematic experience.'
          main_content: ''
          readmore_label: ''
          readmore_link: ''
          readmore_class: ''
          readmore_target: _self
          title: 'New item'
    block:
      class: fp-slideshow-simplecontent

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

Именно эта вкладка обеспечивает управление стилями - блокирует или разрешает использовать частицу, как модуль Joomla с соответствующими классами - title, box и т.п., что бывает очень полезно.

P.S.

Чтобы новые секции заработали нормально, небходимо перенести скопированные стили для секций от другого шаблона  в папку custom/scss/... и провести процедуру активации стиля.

В новых скопированных с коммерческих шаблонов секциях , как правило, есть несколько вариантов вывода контента (default- , fp-, g-) , могут быть даже псевдоселекторы ( # ) со своими стилями - вам выбирать, что использовать. 

Все коммерческие шаблоны идут с "индивидуальным" стилем - внимательно просматривайте файл _*****_style.scss и utilities.scss - иначе добиться схожести с исходником будет очень трудно.

Скошенные углы

Этот код написан Friday. От бельгийца, живущего в Лондоне. Специально для Вас. Поддержка Google Chrome и Firefox

"Если я мог разобраться - сможет каждый"

Петров Сергей
Петров Сергей консультант по Gantry5
Частицы для Gantry 5 - бесплатно скачиваем, настраиваем, вместе решаем проблемы.
Настройка частиц Gantry5 на практических примерах.
klimat678110@yandex.ru

Pattern SVG #2 Aurora