Content creation using the Paragraphs module is a completely different approach compared to the "standard" content creation in Drupal.
In short: we prepare the components (paragraph type) and then, during the creation of an entry, we select any of the available components.
The components can be simple elements containing text, contents with columns or such complex elements as sliders, videos or photo galleries. There are practically no constraints; we can define the available components by ourselves, which will then be used by people dealing with content management.
We can prepare our own templates for the components (tpl.php files). Properly prepared templates and styles for them will ensure the same display of components, regardless of their place of use and the device (responsiveness).
It is a much more flexible and repeatable solution than creating such things in WYSIWYG editors, where the elements do not always look like we want them to be, not to mention adapting such content to a mobile versions of a website.
The result is a nicely formatted page of elements that are repeatable and consistent throughout the whole website.
Paragraphs is a great convenience for the editor of a website
Nothing can be more upsetting for a website editor than when during adding the content, he fills it with photographs or other elements and after saving, the entire content does not look like it was during the editing process.
Attempts to fix this are usually difficult, time-consuming and inconvenient (you must often add styles in the WYSIWYG view source mode). For people unfamiliar with HTML and CSS it will often become an insurmountable problem.
The properly prepared configuration of the Paragraph module saves time for those involved in content management. They can concentrate on the content, that is – on what they actually should be doing, and not on text formatting (which should be automatically done by CMS).
Content creation with the paragraph module
On the page with the content adding form, we will see a list with types of components (defined by the programmers) available in the system.
In one entry, we can choose an infinite number of components (of the same type or different types) and then freely change their order.
Below are shown exemplary types of paragraphs.
Slider Slick with pictures added during content editing
And here is how creating a slider looks like – it is a simple thing to do as you just add pictures.
A simple text field
It can be freely styled and each time it will look the same.
In addition, to each paragraph, we can hook up its own predefined class with the styles.
For example, changing the background colour or background image is only a matter of choosing the appropriate class.
Text with a picture
Three pictures next to each other
The module forms the programmer's side
Using the module and creating new types of paragraphs is very easy for a programmer.
Everything is done on the page and in most cases, the whole process consists of adding the appropriate boxes for a given type.
In the examples in the text, aside from the Paragraphs module, we also use the Classy paragraphs module. Thanks to that, we can attach predefined CSS classes to the selected paragraph.
Creation of a new type of the paragraph
Structure -> Paragraphs types
After adding the paragraph, you just have to add the boxes.
Many types of boxes are available and located in the Drupal's core as well as those from the contrib and custom modules.
Once we have created the types, they must be "hooked" to the entity eg. the content, block or any other serving the boxes.
Linking is performed with a special field: Reference revision - Paragraph
In this case, it adds the paragraphs to the Page type of content
In field settings we select which types of paragraphs we want to have available in a given type of entity. If we do not select anything, then all types are available.
We just have to save it. During the adding of content, any paragraph can be introduced.
Adding your own CSS classes to the paragraph.
The Classy paragraphs module is a useful tool if you want to give editors a possibility to eg. change the background colour of a given paragraph.
Of course, we do not have to limit ourselves to just changing colours. All that CSS offers can be implemented here.
Add a linking field to the paragraph.
After saving, choose the Classy paragraph styles as a reference.
At this stage, it is all.
Now you have to define classes so they can be hooked to the paragraph.
You can define them with Structure ->Classy paragraphs style
Here are the defined three simple classes for changing the background colour.
The settings are important when it comes to choosing the name of the class.
Remember that the label should be understood by the editor, it is precisely this text that will be displayed during the selection.
All the magic happens already in CSS.
From this point, the editor can choose the class when creating a paragraph.
As you can see in the example, there can be several such fields with classes.