Build Edge-to-edge Sites using Paragraphs in Drupal 8
⏱1h | 🎥22 Lessons
Learn how to build flexible Drupal sites that editors will love to use.
Over the last couple of years edge-to-edge, or fluid looking websites, have become popular. You just have to look at a few digital agency websites and you’ll notice the common pattern.
With this design, the page is broken out into separate components. A component could be something as simple as a single text field, or something complex like an image gallery. You may also see scrolling animation on these components. As a user scrolls the text could zoom in from the right and an image could fade in from the left.
How would you build this type of website in Drupal?
Let me introduce you to Paragraphs.
The module allows you to build Paragraph types which an editor can then add to a page using a Paragraph field.
On a decent size website, you could have a few paragraph types: one for entering in text and another to display content in a grid, or another which displays a video.
In this course, you’ll learn how to create a Paragraphs powered site using Drupal 8 and Bootstrap.
Course Outline
Introduction
In the introduction section, you’ll learn about the Paragraphs module and what you’ll learn in the whole course.
Getting Started
In this section, we’ll learn about the required modules, create a landing page content type and a Bootstrap sub-theme.
Text Paragraph
In this section, we’ll create our first paragraph type called Text.
Paragraph Field
In this section, you’ll learn about the Paragraph field and how to customize the field widget. Then in the last video, we’ll create a text paragraph item.
Display Paragraphs Edge-to-edge
When it comes to displaying paragraphs edge-to-edge, most if not all of the magic happens in the template. In the section, we’ll customize the Bootstrap theme to handle a dynamic container.