Компоненты шаблона
Layout Text
Шаблон для верстки сайтов на Drupal Paragraphs призван помочь веб-разработчикам и верстальщикам быстро создавать сайты; быть своего рода pagebuilder'ом для верстки и быстрой разработки на Drupal 8. Он состоит из макетов для текста, изображений, слайдеров, веб-форм и других элементов. Элементы в свою очередь состоят из полей для контента и CSS классов. В поля для контента загружается информация, а в поля для классов CSS вводятся классы, через которые оформляется все содержимое.
Сложно? Вовсе нет! Оставайтесь на этой странице и вам понравится эта идея!
Эта страница создана для того, чтобы показать текущие возможности шаблона для верстки сайтов на Drupal Paragraphs. Здесь вы можете увидеть типы параграфа с помощью которых формируется содержимое. Основные из них: текст, изображение, слайдер, веб-форма, карусельная галерея, колонки и т.п. Все они имеют собственные twig-шаблоны и выводятся на всех страницах, где используются. Каждому шаблону "выдан" свой файл CSS для того чтобы оформление не превратилось в большую кучу... кода.
Layout Image
Layout Image & Text
Изображение + Текст
Помимо изображения и текста есть макет объединяющих их в один: Image + Text. Он хорошо подходит, как для создания одностраничников, так и для контентных сайтов. По-умолчанию, соотношение сторон изображения и текста 50% на 50%, но вы легко можете задать свой класс CSS для виджета и установить индивидуальное соотношение блоков. Так же в макете Image + Text доступна опция позиционирования изображения, дающая выбор расположения элемента справа или слева.
Почему для этого и других виджетов нет других заранее заданных настроек соотношения, размеров, цвета, отступов и т.п.? Потому что данный шаблон для верстки сайтов на Drupal 8 Paragraph заточен под максимально "чистую" разработку с минимальным количеством классов и предустановок. Это инструмент для разработчиков со знанием HTML и CSS, а не конструктор сайтов типа Tilda.cc или Wix.
Без конструктора, впрочем, не обойтись, но замысел шаблона в том, чтобы дать разработчику инструмент для верстки, который был бы удобен, гибок и прост в использовании. Чтобы зная основы CSS специалист мог сам произвести детальную разметку и оформление, создавая свой, уникальный сайт.
Layout Owl Carousel
Layout Slider
Layout Columns
Макет колонок задается по принципам bootstrap 3.
Зайдите на официальный сайт bootstrap и ознакомьтесь с framework'ом если для вас это что-то новенькое. Это очень распространенный framework, на котором делается львиная доля сайтов в интернете. Он удобен, универсален, достаточно прост в освоении и легок в освоении для начинающих.
Базовым параграфом для создания колонок является Columns paragraph. В Columns paragraph в свою очередь есть поле Сolumn content в котором и формируются нужные колонки. Иначе говоря - все элементы макета вложены друг в друга, как матрешка.
По-началу это все может показаться запутанным, но когда вы создадите свою первую страницу параграф - вы поймете, что все довольно просто!
Columns - Columns content - Column - Column content.
Размер колонок задается через ввод класса в поле class при создании параграфа. Классы автоматически подставляются в шаблон и задает размер колонки. Это могут быть классы col-xs-12 col-sm-6 col-md-4 и другие.
Таким образом кнопка Add column добавляет колонку (в параграфе Columns), а кнопка Add column content позволяет создать контент внутри нее.
Информация в колонках может быть любого характера. От текста и изображения до веб-форм и других колонок. Все зависит от вашей фантазии и знаний CSS для оформления и разметки.
Layout Webform
Layout Video
А так же:
Несколько видов макетов Header которые можно не глядя использовать для одностраничной верстки. Они созданы специально для первого экрана и именно их будет видеть пользователь как только зайдет на сайт. Шапка в виде слайдера или заголовок с описанием и кнопкой, вы можете использовать готовые templates или придумать свои.
