JL Slideshow

  • Эффект появления при "скролле" мышью

    AOS - анимация

    далее...

  • Возможность доп. анимации

    title - meta - description

    далее...

  • Слайд-шоу имеет несколько режимов

    push - pull - slide - fade - scale

    далее...

Для создания новых секций воспользуемся шаблоном 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 появятся новые поля.

ШАГ 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 2. Система предупредит, что секция  aside пропадет на макете Base Outline (её нет на новом макете). После чего надо сохраниться, нажав  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/: {  }
  /copyright/: {  }
  /offcanvas/: {  }
    

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 - иначе добиться схожести с исходником будет очень трудно.