Drupal Layout Builder vs Paragraphs: Which One to Choose? ...| OPTASY

There’s no better way of telling which tool best fits your needs than by putting Drupal 8 Layout Builder and Paragraphs to the test, right?

If you were searching for an honest comparison of the 2 Drupal 8 drag and drop page builders, you’re on the right blog.

Because in this post I’ll compare Drupal Layout Builder vs Paragraphs.

What you’ll get is a straight answer to each one of your key questions regarding the 2 most popular page building tools in Drupal:

Why would you choose Drupal Paragraphs?
What are its main trade-offs?
What are its best use cases?
What are the key advantages of using Drupal 8 Layout Builder?
What are its limitations?
What are the use cases of Layout Builder vs Paragraphs?

Now, let’s get you those answers:

1. Drupal Layout Builder vs Paragraphs: Introducing the 2 Contestants

1.1. Drupal Paragraphs

The Paragraphs module was quite a revelation when it was first released.

Why? Because Drupal rocked supreme at enabling users to create template-based pages, but when it came to uniquely designed pages (i.e. landing pages) it started to show its limitations.

And this is where the Paragraphs module came in. It “seduced” Drupal developers with a new component-based approach to building a page’s layout.

Drupal Layout Builder vs Paragraphs: The Component-Based Approach

Source: Championsdigital.com

The Paragraphs layout builder would allow developers to create individual paragraph types — popup elements, plain text, code blocks — and editors to assemble those paragraphs into highly flexible pages.

Moreover, they could reuse those page components to create new and new content layouts.

For instance, they could put together a page that included one WYSIWYG Paragraph, a Slideshow Paragraph, and one paragraph with both text field and image field...

The idea of “flexible structured content” had taken over the Drupal planet...

1.2. Drupal 8 Layout Builder

The drag and drop page builder in Drupal core designed to take the content editing experience to a new level.

How? By granting editors more control over the Drupal layouts they create.

Drupal 8 Layout Builder enables non-technical users to easily mix and match nodes, fields, and other types of content via a drag-and-drop UI.

They can create their visual layouts and landing pages in no time. All they need to do is drag and drop, then rearrange site-wide blocks and content fields to their liking.

Drupal Layout Builder vs Paragraphs: Improved Editor Experience

Source: Drupal.org

Moreover, users can even create new custom “inline” blocks of their own.

Power and flexibility combined into one visual design tool aimed at improving the editor experience.

2. What Are Their Key Strengths?

2.1. Drupal Paragraphs

In a Drupal Layout Builder vs Paragraphs “battle”, why would you go with the “stacked components” approach to layout building in Drupal 8?

Drupal Layout Builder vs Paragraphs- Paragraphs

Source: Drupal.org

Because the content editing experience is intuitive: editors can use the “Add a popup” and “Add a quote” tabs and rearrange their components with drag and drop
Because it enables you to group multiple fields into new complex elements
Because it allows you to come up with an unlimited no. of ways for combining your paragraphs
Because it enables you to create reusable components that you can then use per node
Because it prevents the workflow of your nodes from becoming too cluttered by providing an entity type for your sub-page components

Drupal Layout Builder vs Paragraphs- Add section steps

Source: Drupal.org

2.2. Drupal 8 Layout Builder

What are its key selling points? Why would you choose Layout Builder over Paragraphs?

Because it requires less custom code
Because it grants you a higher level of control over the layouts you’re creating
Because it grants you lower maintenance costs
Because you get to mix field content with blocks
Because you’re free to create and populate new landing pages from the ground up: just set up your custom content blocks and arrange them to your liking within the layout
Because it provides you with an improved authoring experience
Because you can extend the default set of layout grids through custom plug-ins
Because it allows you to keep your structured data
Because it enables you to get the most of the block system for creating your Drupal layouts: custom inline blocks, programmatic blocks, custom global blocks, custom field blocks

“Blocks” that are fieldable, translatable, templatable, reusable, and part of Drupal core, as well.

Drupal Layout Builder vs Paragraphs- Using blocks with the Layout Builder

Source: Phase2Technology.com

In a nutshell, this Drupal page builder provides both:

an easy way to manage fielded content in the backend
the best drag-and-drop editor experience

3. Where Does Each Drupal Page Builder Fall Short?

3.1. Drupal Paragraphs

What could make you… hesitate before choosing the Paragraphs layout builder for creating structured content? What are its key limitations?

You (your content editors) still depend on a developer to set everything up
Managing nested paragraphs when dealing with complex layouts can get quite overwhelming

Drupal Layout Builder vs Paragraphs: Nested Paragraphs

Source: Evolvingweb.ca

And this is the biggest trade-off that could discourage you from going with Paragraphs as your page building tool:

You get to nest/add new and new elements, which carry their own sets of elements, up to the point where this “unlimited nesting” of paragraphs turns into a too confusing interface to cope with.

3.2. Drupal 8 Layout Builder

Where does it fall short?

In a Drupal Layout Builder vs Paragraphs “debate”, which drawbacks of this visual design tool could make you choose Paragraphs instead?

You might find block content not to be 100% explicitly connected to nodes
Combining template-based with custom layouts is a bit challenging
Enforcing a sitewide consistency of your custom-made layouts is quite a dare

4. When Would You Use One Layout/Editing Tool Over the Other?

4.1. Drupal Paragraphs

When you need to reuse many of the content components on your website to create new pages
When being able to reuse those components “per node” is of particular importance for your workflow
When your structured layout does call for nested paragraph bundles

4.2. Drupal 8 Layout Builder

When would you use this particular solution for creating layouts in Drupal 8?

When is Layout Builder a better choice than the paragraphs module?

When your landing page calls for a grid-like layout, including both dynamic elements (custom blocks, views) and fielded content
When you need to “juggle with” multiple columns for creating your layout
When you need to create a fully customed page from the ground up; a “special” page, that’s not connected to any structured content on your website (i.e. a single “Get a Quote” page)
When you need to custom-tune templated layouts; to override existing page layouts
When you need to set up “layout templates”, such as the layout for your product page or your blog post page

5. Final Results: Which Approach Best Fits Your Needs?

What do the results of this Drupal Layout Builder vs Paragraphs comparison tell you?

That there’s no “best” Drupal page builder. Only the one that best fits your specific layout creation needs.

It all comes down to the level of diversity in your content:

If it’s a particularly intricate page layout that you need to create, you might not want to go with Paragraphs. Its nesting feature can turn against you.
If you’re “craving” flexibility and the content on your Drupal 8 website varies a lot from page to page, yet you still want to keep a level of layout consistency, the Drupal 8 Layout Builder is your best choice

Your turn now: which of these 2 page building tools do you prefer and why?

Let me know in the comments below.

Image by 200 Degrees from Pixabay

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

Drupal Drupal 8 Tips

Drupal Performance Optimization: 17 Drupal Caching Best Practices To Speed Up Your Page Load Time- Part 2

"How can I make my Drupal 8 website faster?" Are you still struggling with this? Still striving to figure out which are the best (and most straightforward) Drupal performance optimization techniques for your website? Well, here I am today with a handful of 9 more ways that you can speed up your Drupal site. In addition to the 8 ones that I covered in the first part of this post. And yes: it's another round of Drupal caching best practices that'll help you boost your page load time. So, let's dive right into it: Tip #9: Use the Dynamic Page Cache Module ... to cache for both authenticated and anonymous users. Unlike the Internal Page Cache module, that I mentioned in Part 1, which only caches pages for anonymous users. Tip #10: Use Distributed Cache, A Highly Effective Drupal Performance Optimization Technique But how does it work, more precisely? Once you've installed a distributed cache, it'll store your database's cache tables (Drupal's "cache_" tables) either in: file or memory Tip #11: Enable Drupal Cache for Anonymous Users Another one of those quick, yet powerful Drupal performance tuning steps that you can take. Tip #12: Use Squid to Cache Images and Static Content on Your Website "How to optimize Drupal for better performance?" You could go for Squid, an open-source caching proxy server. Now, since Drupal's already famed for its particularly dynamic content, the only cases where Squid does make a great performance booster are those where you need to cache static content. Tip #13: Add a Front-End Cache (i.e.Varnish Cache) Here's another handy Drupal performance optimization method for you: Use Varnish Cache to reduce the load on your server. How does it do it? It stores the HTML response, so that next time that the same page is requested, it serves it from memory. The result? Bypassed PHP and web server and... improved page load time. Tip #14: Use the Advanced CSS/JS Aggregation Module to Improve the Front-End Performance of Your Website Combining your assets together is one of the most straightforward and effective ways to address those Drupal performance issues on your website. From: file grouping to caching to compressing ... the AdvAgg module handles all the steps that you need to take to aggregate your CSS and JS files. Tip #15: Install Memcache to Reduce Your Database Load You know how you're often struggling with keeping your database load to a minimum by caching database objects in RAM? In this respect, Memcache makes a great Drupal 8 performance optimization technique. It helps you reduce that load on the database and boost your page loading time. How? By taking standard caches out of the database. And by caching the results of resource-intensive database operations... Tip #16: Use the Entity Cache Module to Cache... Entities Another caching best practice to boost Drupal 8 with is installing the Entity Cache module. And its name says it all: it helps you cache entities. Tip #17: Cache Views Here's the situation: Page requests made by registered users on your website lead to loads of queries to your database. Which impact the page load time. Now, to query the database, views are being used. And this is where this views caching module comes in handy to... boost things in there. The END! These are our 17 recommendations for you on the best Drupal performance optimization methods for boosting your page load time. Not thrilled about the idea of having to go through the... Memcache installation process or to configure Varnish for Drupal? Or to put your current projects on hold so that your team can set up a... distributed cache? Maybe you don't have a professional Drupal maintenance team that could handle all these caching settings? We're here to help! Just drop us a line and let's figure out which of these 17 techniques are best suited for your website and the specific performance issues that it's struggling with. Let's speed things up in there! Image by Izwar Muis from Pixabay ... Read more

Silviu Serdaru / Jun 23'2020

Drupal Drupal 8 Tips

Drupal Performance Optimization: 17 Drupal Caching Best Practices To Speed Up Your Page Load Time- Part 1

"Why is my Drupal site so slow?" "How do I speed up my Drupal website performance?" In other words, what Drupal performance optimization techniques should you use? Which is the: most budget-friendly quickest most straightforward most effective ... solution to those Drupal performance issues that are slowing down your website? Caching... And luckily, Drupal 8 (it is a Drupal 8 website that you have, isn't it?) "spoils" you with one of the most advanced caching systems out there. The trick is that you follow the Drupal caching best practices and use it to its full potential. Speaking of which, here's a list of 17 such best practices: * I'll be covering 8 of them in this post, leaving the 9 remaining ones for the next blog post. But First: What Is Caching? "What is the purpose of caching?" "How does caching improve performance?" 2 legitimate questions that you might be yourself right now. Let me start by defining the Drupal caching process: Once a user accesses a page on your website, content elements and web data from that specific page (images, HTML, CSS, etc.) get stored in an accessible space. When that user visits the same web page again, your website will serve him/her the cached version of the content. That if you haven't updated it since his/her last visit, of course... And this translates into: reduced bandwidth faster page loads Tip #1: Use the Internal Page Cache Module to Cache Pages for Anonymous Users Say you have an "Add to cart" functionality for anonymous users on your eCommerce website. You can use this module to cache precisely this functionality. A Drupal performance optimization tweak that'll take you less than a minute to set up. Tip #2: Go for the Best Suited Tools for Heavy Traffic Drupal Sites Say you have a fairly busy Drupal 8 website. You've turned on caching in your performance settings, but... you haven't noticed any significant impact on your site's loading speed. So, you need to bring in the heavy artillery. To use powerful caching tools designed for high traffic websites. Here are some of the best tools and optimization techniques to try: switch to a Drupal-specialized hosting provider like Pantheon or Acquia move your database to its own VM/container (that if you still have it running locally, on your Drupal web server) upgrade to PHP 7.1.0 Enable OPcache via php.ini. Put a proxy (i.e. Nginx) in front of your server Tip #3: Enable Block Cache - A Quick and Easy Drupal Performance Optimization Solution How to increase Drupal 8 performance? You cache those blocks that don't get updated frequently (like from one user to another). Tip #4: Use Views Content Cache to Update Upon Content Changes Only How does this Drupal module help you optimize your website for better performance? It allows you to expire views caches every time you update or remove content. The great thing about this caching method is that you get to cache blocks that appear on thousands of pages. Tip #5: Use a Content Delivery Network By far the most powerful Drupal performance optimization solution for your website. Why? Here are the 2 strongest reasons why you'd want to use a CDN to cache the static content (files, CSS, images, JS, fonts...) on your website: you keep the network delay to a minimum since your CDN has endpoints across the globe you get a better page loading time: your CDN has a domain different from your website's, so web browsers load content requests to your domain in parallel with the content coming from the CDN Tip #6: Set a Far Future Expiration Date for Your Static Assets Set up a "Newer expire" policy for your static components (e.g. use a far future Expires header) Tip #7: Use Redis as a Drupal Performance Optimization Technique to Store Large Amounts of Data Data that wouldn't fit into your server. "But what is Redis?" you ask? An in-memory store optimized for high-performance. Tip #8: Set the Maximum Time that Your Pages Can Remain Cached Another one of the Drupal caching best practices is setting the maximum amount of time that browsers should keep your cached data. The END of Part 1! And these are but 8 Drupal performance optimization solutions focused on caching. I have a whole list of 17 tips ready to share with you... So, stay tuned for another round of simple and effective caching techniques that'll help you speed up your website... But what if you don't have the time or the people in your team that you could assign tasks like: enable a block cache set up Redis install the... views_content_cache module ...? What if you could have a dedicated Drupal maintenance team implement all these performance optimization techniques on your website for you? We're ready to help you speed things up on your website. Drop us a line and let's set up the best caching strategy for your Drupal website. Image by mohamed Hassan from Pixabay ... Read more

Silviu Serdaru / Jun 19'2020

Drupal Drupal 8

What Are Some Good Examples of Drupal Sites for Nonprofit Organizations? Top 10 Nonprofit Websites Built with Drupal

Feeling a bit... uninspired? Or maybe you just don't see why you should consider Drupal for your NGO website? What if you could have a look at the top 10 nonprofit websites built with Drupal? And we're talking here about some of the world's most influential charity and non-profit organizations. Here are the 2 main criteria that we've used for putting together this top: to be straightforward and easy to navigate to be visually pleasing and engaging: a clean and simple design helps the NGO's message shine through Are these your own requirements, as well, for your non-profit website? Then, get ready to find plenty of inspiration by scanning through these great examples of what other non-profits have managed to do with Drupal: 1. Equal Opportunity Community Initiative Who is EOCI? The organization defines its own mission so clearly on its website: “... to build a world where children have equal opportunities to reach their dreams.” And all their projects and initiatives converge to meet this goal: providing equal access to educational resources for all children. Equal opportunity to compete and to succeed. The website that we've built for this international profit (revamping an age-old site, with little traffic and low conversion rate) is still one of the projects in our portfolio that we're most proud of. What makes it a great nonprofit website? it's visually engaging: it tells a compelling story through visuals it's well-organized and easy to navigate: Drupal 8 has made it easier for us to structure content and to put together an information architecture that's easy to step through it's fast: the better the user experience, the higher the chances that they should turn themselves into the future volunteers or donors supporting the EOCI's initiatives “The site’s beautiful and performing exactly how we’d hoped it would. The company that manages our Google Ads has found that our conversions have increased... A couple of our donors are thrilled with the website and have committed their support again. They’re happy to be on the partners' page with a fresh look and approach to the public.” (Sean Kelly, Executive Director, Equal Opportunity Community Initiative, Source: Clutch.co) 2. Rotary International, One of the Top 10 Nonprofit Websites Built with Drupal Who hasn't heard of Rotary International? A global network of community volunteers (1.2 million leaders and problem-solvers) actively involved in a wide variety of campaigns: kicking Polo out of Africa providing clean water growing local economies supporting education Why did they go for Drupal? For 2 strong reasons: it's flexible: there's a module for almost any feature, any functionality they needed to implement to their nonprofit website it's extensible: no matter how "ambitious" the organization's future causes and campaigns and expectations from their website might get, Drupal's built to scale up to their growing needs 3. Doctors Without Borders Probably one of the best examples of nonprofit websites built with Drupal is Doctors Without Borders (Médecins Sans Frontières). A Nobel Prize-awarded organization of volunteering doctors, nurses, other staff, and journalists. Their mission? Providing medical aid to people affected by pandemics, epidemics, natural disasters, or armed conflicts, no matter their sex, nationality, religion, or political affiliation. Why Drupal? because it's a multisite network that this global NGO needed and Drupal's famed for its built-in multi-site support. because Drupal's robust enough to withstand massive amounts of traffic (it's the biggest NGO in the world), all while being a conveniently flexible content management solution. 4. Habitat for Humanity International (HFHI) Another one of the top 10 nonprofit websites built with Drupal. HFHI is an international, Christian NGO with a clear mission: building and renovating houses for low-income people. To carry out its mission, it brings together donors, volunteers, and members of the families in need, who're co-opted in the process of building/repairing their own houses. How come their website is built on Drupal 8? Drupal 8 is mobile-ready right out of the box it's open-source, which translates into lower costs it's flexible enough to empower their team to create, update, publish, and manage content on the go it scales to meet all the organization's future needs it ships with outstanding multi-language support it's fast 5. World Vision International "What are the most popular nonprofit websites that run in Drupal?" World Vision International's website is listed in any "top 5". No wonder: the organization is the world's largest international children charity their website taps into Drupal 8's best features: easy third-party integration, freedom of customization, flexibility, and scalability guaranteed by its rich module collection A nonprofit multisite that tells a series of highly compelling stories and grants a simplified donation process. 6. Human Rights Watch A worldwide known independent organization, headquartered in New York, dedicated to protecting human rights. And they define their own cause better than anyone else: "... we give voice to the oppressed and hold oppressors accountable for their crimes.” Why did one of the most powerful NGOs in the world opt for Drupal? because it's the best option for multilingual websites because it makes it easy to keep consistency while "joggling with" multiple content types because it empowers content authors and editors to publish content quick and easy 7. Save the Children Spain A member of the Save the Children International — the world's leading NGO dedicated to protecting and improving children's lives — Save the Children Spain has its website running on Drupal 8. And it is, by far, one of the 10 best nonprofit websites out there. Not just due to the global reputation of this humanitarian organization, but thanks to the complex needs that the Drupal website manages to meet: it handles an entire network of operations that are critical for the NGO's activities: donations, news publishing, crowd fundings, training, collecting signatures, communicating with the press, etc. it withstands large influxes of traffic it supports a multi-site infrastructure it makes it easy for multiple teams (see Drupal's granular permission and access control system) to operate on the website, to integrate the tools they need for doing their work it integrates easily with all kinds of e-commerce third-party platforms (needed for their donation process, signature, membership, etc.) 8. Great Ormond Street Hospital Children's Charity One of the UK's largest charities, Great Ormond Street Hospital Children's Charity (GOSH ) is dedicated to supporting the Bloomsbury-based children hospital and its patients. How? By focusing their efforts in 4 major areas: supporting the little patients and their families investing in rebuilding and renovation projects pioneering research into children's health investing in life-saving medical equipment When did Drupal come into the picture? When the charity looked for a platform that would provide them with: scalable architecture for their website, robust enough to scale up and down, to their fluctuating levels of traffic multi-site support, out of the box: GOSH.org is made out of 2 large websites and an ecosystem of 10 different sub-sites easy third-party integration: they needed to keep the same staff, so they looked to streamline their team's work, by integrating time-saving tools 9. The Wildlife Trusts We couldn't have left the Wildlife Trusts website out of our list Drupal nonprofit organization websites that stand out. The UK-wide group, comprising 45 local Wildlife Trusts, shares a common interest in preserving the wildlife and the biodiversity in their local area. And we're here talking about 2,300 nature reserves, on 98,000 hectares. 46 different independent charities, each with its specific activities, constitution, and membership criteria, under one “umbrella”? This multi-site project had “Drupal” written all over it... Now, let me outline, briefly, the key reasons why Wildlife Trusts has chosen Drupal for its website: it provides great multi-site capabilities: the organization wanted to empower each trust to control its own content creation and publishing process, but they still needed some sort of a “central hub” it provides outstanding content management capabilities, much needed in this case, where huge volumes of content had to be managed effectively it meets their need of delivering the best mobile user experience it empowers the Wildlife Trusts editors to tailor page layouts as needed: and we're talking here about a multi-site that's rich in stunning visuals and video content 10. Top 10 Nonprofit Websites Built with Drupal: Allard Prize for International Integrity Another project from our portfolio that we're particularly proud of. The Allard Prize for International Integritiy is a photography competition that recognizes and awards people and organisations standing out through their efforts in fighting corruption and defending human rights. Why did they go with Drupal? because they wanted to give their website a performance boost because Drupal provides them with a reliable translation system, a crucial feature when dealing with a global audience In Short, Why Would You Choose Drupal for Your Nonprofit Website? Here's a short inventory of the main reasons why you'd choose Drupal for setting up your nonprofit website: you save money (Drupal's open-source) you get your multi-site, multi-language website ready to go in no time (especially if you opt for a Drupal distribution) you're free to further extend your website's capabilities by adding new modules and integrating new third-party apps you get robust SEO features right out of the box you get a website that scales to fluctuating levels of traffic you get to categorize, neatly structure, create, edit, publish, and manage your content quick and easy you're free to customize your page layouts to your liking Need help setting everything up? Just send us a message with your feature requirements and specific expectations from your future nonprofit website and let's get your message out there. ... Read more

Adriana Cacoveanu / Jun 05'2020

Drupal Layout Builder vs Paragraphs: Which Drupal Page Builder Should You Use?