In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Healthcare, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

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

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

by Adriana Cacoveanu on Mar 06 2020

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 

Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

4 Reasons Why You Need Drupal Maintenance Services
  Entering the world of Drupal web development can feel like diving into the unknown for many business owners. Once they've figured it out with the help of a developer or a Drupal development agency, the business runs smoothly for a little while.  However, building and optimizing a website is like buying a new house—it's functional at first, but things break down and need repairing and regular care in time.  Since spring is just over the corner, what better moment to start cleaning, improving, optimizing, and refreshing your website? Whether you do it in-house or hire an agency that offers Drupal maintenance services, it will work wonders and could actually double your potential market value. But first, it's essential to understand why a regular maintenance plan is critical, how to tell when you need Drupal maintenance, and what does Drupal maintenance include. This article will answer these questions.   Why you should stick to a regular Drupal maintenance plan  If you've already entered the world of digital marketing, you know that the journey towards attracting and retaining customers doesn't end with web development and deployment. Change is a permanent constant in life, and businesses have to adapt to this ever-changing dynamic.  Security  A few years ago, website maintenance was optional. Building a static website that you could leave unattended for the entire year was perfectly normal.  Today, as the digital landscape has expanded and become more prone to security vulnerabilities, Drupal support is imperative for maintaining a healthy security posture.  Although Drupal is known for being the most secure CMS, this only applies if your Drupal website is regularly optimized with security updates and patches. The Drupal community and Drupal security team continuously build security patches, fixes, and upgrades, and Drupal users need to be in the loop about these updates. In other words, keeping up with the news and module updates in Drupal security is vital in order to avoid breaches.  Constant Drupal core module updates can boost website protection and secure it against cyberattacks and threats.  Fixing errors To ensure that your website performs well and meets the needs for speed and agility that the modern digital user demands, fixing bugs and errors is a top priority. These malfunctions may happen for multiple reasons—rushed coding and deployment, inadequate testing, or miscommunication. They may affect your site's performance and loading speed or even alter your Drupal website’s functionality.  And since users don't want to spend more than four seconds waiting for websites to load, not paying attention to repairing bugs could cost you customers.  This price is too big to pay, and it's worth considering Drupal maintenance services as part of your website strategies.  Keep your content fresh with new features Another reason why Drupal maintenance matters is related to scalability. Drupal websites can grow together with your business goals. Constant feature and module updates allow Drupal users a high level of customizing capabilities that helps businesses keep up with the changing needs of the customer.  With Drupal 8, integration is much more affordable, so if you haven't migrated yet, you might want to contact a Drupal agency to help you decide whether an upgrade is the right choice for your business.  The user behavior has dramatically shifted in the last year, which is why content optimization, new features, and enhancements allow brands to stay fresh and align to this changing environment.  SEO optimization Ranking high on Google and other search engines is crucial for your website to stay relevant. An excellent Drupal maintenance team has SEO experts that provide Drupal SEO audits and optimization.  “Good SEO work only gets better over time. It’s only search engine tricks that need to keep changing when the ranking algorithms change.” – Jill Whalen   How to tell when you need Drupal maintenance If you're not yet convinced that you need Drupal support and maintenance services for your website, here are some indicators that you can't postpone it any longer without hurting your business: Your website is slow, and you have received complaints about its loading speed. Your web traffic has dropped considerably. You experience more security breaches. Your content and design are outdated. Links, buttons, or forms are not working.   These are some of the red flags of poorly maintained websites. If you recognize these warning signs as part of your website, it's definitely time to start planning your maintenance strategy. What do Drupal maintenance services and support include? A useful maintenance model covers: Security and module updates Third-party integration support Regression testing  Bug diagnosing, fixing, and testing Hosting infrastructure maintenance Hack, malware, down recovery   Partner with the right Drupal maintenance and support agency When thinking about hiring a Drupal maintenance team, you need to consider your needs. At Optasy, we cover a wide range of website maintenance requirements and can create a customized maintenance and support plan to support your website's specific needs.  How does this sound to you? Have you made up your mind whether it is worth investing in Drupal maintenance services or not? If yes, then contact a reliable, dedicated support partner like Optasy and see how our Drupal maintenance services can keep your website up and running.  Photo credit: geralt on Pixabay.     ... Read more
Raluca Olariu / Mar 02'2021
4 Reasons Why Drupal Is a Winning Choice for Web Development
  The Coronavirus pandemic has accelerated digital transformation and shifted the world to an online-based environment. In this context, driven by the need to go digital, many companies have started to focus more on their web development capabilities and take steps to improve their online presence.  The challenges encountered on the path to building and optimizing a website that attracts and engages users are not few.    What are the most frequent web development challenges?   One common difficulty when planning a web development project is defining one’s goals clearly. "What are my intended prospects?, "What kind of experience I want to provide my users with?", "How do I want my brand to be perceived in the long-term?".  These are all valid questions that, if not addressed properly, can end up damaging your web presence. Another aspect of web development that keeps many decision-makers up at night is choosing the right tech stack. From programming languages, servers, frameworks to software development tools, deciding which tech stack is the best fit for your needs can be tricky and, if not planned correctly, considerably expensive.  Web development challenges during implementation are not to be ignored either. Site builders, front-end developers, and module developers often struggle to provide personalized user experiences, create catchy visuals, and optimize everything for mobile devices or tablets.  And, of course, everyone who takes part in the web development process knows about scalability and how companies struggle to build scalable, lasting web applications in a competitive digital environment.   How can you address these web development challenges?   This has been the dark side of the article. Now comes the positive, which outlines what it takes to successfully address the challenges mentioned above.  There are many ways in which you can start to build more robust web strategies, but we're going to approach just one today: the Drupal solution.  As one of the most popular content management systems (CMS)s, Drupal is known for its top-notch web development features and future-ready modules that make developers’ lives much more comfortable.    Why should you choose Drupal for your web development projects?   1. Security Drupal has a proven history of being the most secure CMS and application framework. The Drupal Security Team is actively working towards improving Drupal's capability to remain resilient to critical internet vulnerabilities.  With Drupal, administrators have granular user access control over who manages website content and how. Drupal's platform supports strong password policies, industry-standard authentication practices, and single sign-on systems.  Another feature that helps businesses secure their content and websites, and overcome security issues, is Drupal's Form API which secures data validation and blocks malicious data entry. With Drupal limiting the number of login attempts made from the same IP address, preventing brute-force password attacks is much more manageable.    “You want to enable your developers to easily deliver content to different devices, channels, and platforms. This means that the content needs to be available through APIs. This is aligned with Drupal 8's roadmap, where we are focused on web services capabilities. Through Drupal's web service APIs, developers can build freely in different front-end technologies, such as Angular, React, Ember, and Swift, as well as Java and .NET. For developers, accomplishing this without the maintenance burden of a full Drupal site or the complexity of configuring standard Drupal to be decoupled is key.” - Dries Buytaert, founder of Drupal.   2. Mobile optimization With 74% of users more likely to return to mobile-friendly websites, you want to ensure that you follow a mobile-first approach. Drupal 8 was built with mobile optimization in mind, and it enables the development of responsive sites that meet the need for mobile. Drupal follows best practices of responsive web design approach thus providing streamlined and reliable content experiences for mobile users. 3. Scalability When we discussed the challenges of today's web development landscape, scalability was amongst the most complex. Fortunately, Drupal can scale with your needs and efficiently support content-rich websites. Drupal's ability to manage a large number of content and visitors and handle continuous web traffic means flexibility and high-quality user experiences.    4. Content translation workflows When Drupal 8 announced four new core translation modules, it meant better opportunities to improve the digital experience. Drupal's multilingual support offers: 90+ available language packages Streamlined configuration and content translation workflows An intuitive interface language of administrators and content producers   “Thanks to the Drupal 8 Multilingual Initiative, translation is not an afterthought in Core anymore. And thanks to the clean APIs that were designed with this in mind, we are able to improve every day the functionalities for our clients in our integration with Drupal 8. While with other CMS we devote time constantly to integrate with contributed modules or alike, we can focus on new functionalities as this APIs make us compatible with most contrib modules out of the box without any extra effort on our side.” - Penyaskito, Drupal contributor and developer at Lingotek   How to harness the power of Drupal for web development?   Depending on the size of your business and industry, there are several ways in which you can leverage Drupal at its full potential. You can learn to do it yourself, employ a freelance developer, or hire an agency that offers Drupal web development services. While the first two options may be more cost-effective at first, in the long run, hiring an agency that supports a holistic web development strategy is the smartest move. As an open-source software solution, Drupal provides flexibility and has been optimized for a better user experience. Still, when handling more customized projects and modules, the development process can get tricky. With an agency, you don't have to worry about these aspects and can focus on other vital parts of your business. Here, at Optasy, we provide holistic Drupal web development services, adding digital value to your business. Whether it is custom module development, AI implementation, Drupal migration, or any other Drupal feature integration, Optasy helps you build your future-ready website. Photo credit: mohamed_hassan and coffeebeanworks on Pixabay.                        ... Read more
Raluca Olariu / Feb 26'2021
Top Drupal Agencies That Will Revolutionize Your Web Strategy
Drupal is one of the most popular content management systems (CMSs), with 2.4% of all websites using Drupal for web and mobile app development. Why is Drupal a favorite option for many developers and development agencies, you may ask? Many clients and companies choose Drupal due to the multiple competitive advantages and digital assets that it provides, such as: Top-notch, highly-personalized customer experiences Future-ready API architecture that supports scalability Robust functionality and intuitive modules High digital security standards To maximize the potential of Drupal for web development, design projects, or software development, it is advisable to get in touch with a Drupal agency that can help you accelerate your digital growth.  Why Should You Hire a Drupal Agency? A more valid question would be, "Why not?". There are plenty of reasons why hiring a Drupal agency to support your web development efforts is a smart strategy.  Drupal agencies provide professional services that cover the whole web development process (developers, designers, SEO experts, QA engineers). Your web development project will be handled by a dedicated, highly focused team, which raises the quality of work. Drupal agencies provide website maintenance and support, including continuous security updates, fixing bugs or downtime, website audit, or SEO optimization. Given the high level of market competition, Drupal services providers use the latest technological tools for streamlined and optimized web development.    There are many options available, and finding the right partner might get time-consuming and stressful. The purpose of this article is to provide a list of top Drupal agencies that offer high-quality services for developing and maintaining websites. Take a look - maybe you'll find the best fit for your company's needs.    MindInventory  This Drupal development agency provides services that cover web, software, mobile development, and web design. The company has a market experience of 10+ years and is currently addressing industries like business services, fitness, or health. MindInventory has a 4.5-star rating and is known for its high commitment to quality, efficiency, and attention to detail.  As a Drupal development agency, MindInventory can help you maximize your digital efforts with the help of experienced, tech-savvy Drupal developers that aim to deliver best-in-class web experiences. Optasy  Optasy is an on-site built-in Drupal web development agency working with this CMS for more than ten years. As a full-service software provider, Optasy offers a wide range of Drupal services that involve the latest web technologies to satisfy the need for digital innovation.  Let's delve into the primary services they provide: Create a reliable, goal-oriented digital strategy.  Build eye-catching visual designs. Create highly-personalized and optimized websites. Deliver user-friendly mobile and app development. Optasy is that kind of Drupal agency that can transform your business, support your digital efforts, and future-proof your development.    Trasaterra  This Drupal agency is recommended for being cost-effective and highly proficient in developing media, marketing, and advertising websites. Trasaterra is specialized in branding and interaction with a focus on user experience and building long-term customer relationships.  Among well-known companies and clients that have collaborated with Trasaterra for web development and design services are CNBC, The New York Times, or The Winter Show.    Konstant Infosolutions The services offered by this Drupal agency are software, mobile app, and web development. Konstant Infosolutions has been lauded not only for their project management skills and functional designs but also for how they approach performance-oriented strategies.  The US-based Drupal agency focuses on investing and developing mobile apps, eCommerce, IoT, AR/VR, cloud integration, and more.    Unified Infotech From 2010, this Drupal development agency creates optimized digital experiences by transforming how companies relate to website design, development, and mobile optimization. The company's focus is on providing customer-centric services that fuel digital growth and build successful business relationships.  Unified Infotech is a smart choice for companies interested in developing and optimizing their Drupal websites with a functional design and impactful content.    To conclude, Drupal development companies and agencies offer plenty of benefits for web and mobile app development. From improved workflows, designs, and digital marketing services, to mobile-optimized websites and better web experiences for customers, Drupal agencies can genuinely take your digital business to the next level.  See how Optasy, a leading Drupal development agency, provides support in developing, optimizing, and maintaining a future-ready Drupal website.  Photo credit: kreatikar on Pixabay.                  ... Read more
Raluca Olariu / Feb 24'2021