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 Gutenberg: How Do You Know Which Page Builder’s Right for You? 

Drupal Layout Builder vs Gutenberg: How Do You Know Which Page Builder’s Right for You? 

by Silviu Serdaru on Mar 25 2020

Drupal Layout Builder vs Gutenberg: which of these 2 next-generation site-building tools to use to create your page layouts? 

Or, better said, to empower your content editors to design great-looking pages on their own. 

In order to help you make an informed decision, I've made an honest Layout Builder modules vs Gutenberg editor module” comparison. 

Therefore, in this post you'll find your answers to the following questions: 

 

  • What issues with the editing experience in Drupal do these 2 new page layout builders come to address?
  • What is the Gutenberg Editor?
  • What are Drupal Gutenberg's main strengths?
  • What are its limitations? What is the Layout Builder for Drupal?
  • What are the Drupal Layout Builder's main strengths?
  • What are its weaknesses?
  • When would you use one Drupal page builder over the other? 

     

1. Drupal Layout Builder vs Gutenberg: What Limitations Do They Address? 

Or, to put it this way: what makes a good content editing experience? 

Here are some of the editors' main requirements: 

 

  • to be easy to use (with an intuitive drag and drop interface)
  • to enable them to create custom page layouts on the fly, with zero CSS or HTML knowledge
  • to be ideally flexible, enabling them to adjust the pages to their needs 

     

Now, if we put editors' requirements against the "reality" of the editing experience in Drupal, here are the limitations we can identify: 

 

  • it doesn't provide a decent level of visual design
  • it compromises branding for flexibility or the other way around
  • it requires some HTML experience
  • it doesn't go beyond the level of a basic WYSIWYG editor
  • it doesn't allow them to design fully customed page layouts
  • it doesn't provide a 100% intuitive user interface
  • it still makes editors dependant on the site builders/Drupal developers in their teams

And these are precisely the problems that these 2 Drupal page builders "promise" to solve. 

 

2. Introducing: The Gutenberg Drupal 8 Module  

The Gutenberg Editor module is no more than WordPress's layout system integrated with Drupal. 

What sets it apart from the other tools for creating page layouts in Drupal? 

Its block-based approach. 

Creating content in Drupal becomes a matter of selecting and assembling multiple blocks. 

Drupal Layout Builder vs Gutenberg: Gutenberg Blocks

Each block stands for an individual piece of content: a separate block for a button, another separate block for an image, another one for a column, for a heading... 

Furthermore, you get to create content inline. To edit the media content, text, and blocks on the page that you're building. 

In short, you can take the Drupal Gutenberg module as a convenient "block editor"

You (or your editors) can put together and visualize your page layout in one large form field. That, instead of editing every single form field that makes up a page. 

 

3. 4 Reasons to Choose Drupal Gutenberg 

Let's say that you're looking for a site building tool to build a... landing page (or one that would empower your content editors to create it). 

Why would you go with the Gutenberg content editor for Drupal 8? 

Here are 4 good reasons to choose it: 

 

  • it provides you with lots of predesigned elements out of the box
  • you can see what you're building on the editor side
  • it doesn't require you to be experienced in working with CSS or HTML
  • you can design your own blocks or use blocks created by other open-source developers 

     

4. 6 Reasons Why You Might Hesitate to Choose Gutenberg 

Any honest Drupal Layout Builder vs Gutenberg comparison must include the 2 tools' main weaknesses, as well, right? 

So, here's why you may want to think twice before choosing the Gutenberg content editor in Drupal 8

 

  • the way it stores data could be... better
  • it doesn't excel when it comes to layout flexibility: you can align your blocks left, right, center, but you can't add custom margins, for instance
  • the style options that it provides are quite limited, one of the main drawbacks highlighted in any Gutenberg vs page builder comparison
  • updating a page created with Gutenberg is particularly overwhelming
  • the visual editing experience is not one of the best ones: visualizing your layout is a bit more difficult
  • you cannot reuse your Gutenberg blocks and the page layouts that you create with this editor 

     

Tip: when it comes to the poor visual experience that you get with the Gutenberg Editor, you can always improve it with page builder plugins. There are some pretty good ones out there that guarantee you a 100% visual design.

 

5. Introducing: The Drupal Layout Builder Module (Core)

"Drupal 8's Layout Builder allows content editors and site builders to easily and quickly create visual layouts for displaying content. Users can customize how content is arranged on a single page, or across types of content, or even create custom landing pages with an easy to use drag-and-drop interface." (source: Drupal.org)

The Layout Builder for Drupal enables you to create layouts by putting together separate form fields and block entities. No coding know-how needed. 

No need to tweak the templates in the theme's source code. 

In short, it "spoils" you with a drag-and-drop type of visual editing experience. You can put together structured content quick and easy. 

Drupal Layout Builder vs Gutenberg: The Layout Builder

Source: Drupal.org

"But how exactly does it work?" 

Here's how you create a custom layout with this Drupal page builder in 5 quick steps: 

  • enable the module
  • go over to the "Manage Display" tab of your target content type
  • click the "Use Layout Builder" checkbox
  • click the "Manage Layout" button
  • then, you're free to use your Layouts and Blocks (after you've created them), dropping them in the defined regions of the page that you're building 

     

6. 7 Reasons to Choose the Layout Builder in Drupal 8 

Here's a legitimate question that this Gutenberg Editor vs Layout Builder in Drupal 8 comparison should respond to: 

“Why would I want to use Drupal Layout Builder?” 

The best answers would be: 

 

  • you can create your content blocks and just drop them on the regions of your page layout
  • you get to (re)arrange otherwise static fields the way you want to
  • you're free to add views, blocks, widgets, to any section of your page
  • the content that you create is specific to that page type, so all the pages of that type will have the same layout
  • you get to override the default layout to create fully customed pages
  • your layout is rendered on the web page in real-time
  • you're free to incorporate blocks in the main content region

7. 5 Reasons Why You Might Hesitate to Choose the Layout Builder 

When comparing Drupal Layout Builder vs Gutenberg, you inevitably get to the point where you ask yourself: 

"What are the Layout Builder's main weaknesses?" 

Now, here's why you wouldn't want to jump on it right away: 

 

  • you can use it only on the main content area of your page
  • unlike the Gutenberg Drupal 8 module, the Layout Builder doesn't ship with prebuilt elements for you to just choose from and assemble
  • with Drupal Layout Builder, you need to create your blocks and page type first; you can't "get away with" choosing user-contributed blocks
  • it's not always easy to see what precisely gets overridden
  • you can't rely on a granular permissions system for overriding individual pages 

     

8. When to Use Drupal Gutenberg: 4 Typical Use Cases 

You'd want to use the Gutenberg Drupal 8 module if: 

 

  • your Drupal website's a content-packed one
  • you need to build a landing page
  • you need to create a simple layout: Gutenberg doesn't really shine when it comes to style options
  • you need to create content that fits perfectly into your theme's looks: Drupal Gutenberg pulls right from your theme's styles 

     

To sum up, designing landing pages are Gutenberg's most typical use case. 

Use it to add just some extra design (nothing too "extravagant") to an "About Me" page, for instance.

 

9. When to Use the Drupal Layout Builder: 2 Typical Use Cases 

You'd want to use the Layout Builder for Drupal if: 

 

  • it's a field-intensive page that you're building: a product page, a case study, etc.
  • you have synced content on that page (from Salesforce, for instance)

     

The END

Your turn now: have you tried any of these Drupal page builders? 

Which one best serves your content goals? 

What other pros and cons would you have added to this Drupal Layout Builder vs Gutenberg comparison? 

Let us know in the comments below. 

Photo by Jason Dent on Unsplash 

Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

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
4 Key Things to Know When Optimizing Your Drupal Website for Mobile
  Approaching a mobile-first strategy for your Drupal website is imperative. Since 52% of all website traffic comes from mobile devices, businesses that want to strive must ensure that they optimize their site for mobile.  Why is mobile optimization important? A website designed for desktop use can be non-functional on a phone or tablet. Building a mobile-friendly site that looks good regardless of how users access it is no longer optional for companies that want to deliver high-quality digital experiences.  "If I were to start Drupal from scratch today, I'd build it for mobile experiences first and desktop experience second." - Dries Buytaert, founder and lead developer of the Drupal CMS There are plenty of benefits and competitive advantages of implementing a mobile-first approach to your Drupal website. We'll name a few: Positively impacts search ranking Improves loading times Increases visibility across all devices Enhancing mobile performance for Drupal websites is not rocket science, but if you're a rookie in web development, hiring a Drupal developer to help you implement some of the steps highlighted in this article may be the safest strategy.  Without further ado, let's start to learn how you can optimize your Drupal website for mobile use.   1. First things first: you need a mobile menu.  Start your mobile optimization journey by installing a mobile menu that enables navigation links to be displayed accurately on narrow screens.  A popular style for mobile menus is the 'hamburger' icon. This type of menu is substituted by a symbol with three horizontal lines when the screen narrows to a particular width. When clicked on, the icon displays the mobile-friendly main menu of the Drupal website. Want to use this type of menu? Start by installing the Responsive Menus module and download the tar.gz.file.  In your dashboard, open the Extend tab and select the Install New Module button.  Lastly, use the file browser to upload the tar.gz file. You should now be ready to use the module to customize and style your website's menu.  Remember that you can also hire Drupal developers at any stage of your optimization process to help you streamline your operations.    2. Don't ignore code minification.  One of the top priorities for mobile site functionality is quick loading times. As CSS or HTML files can get bulky, removing unnecessary elements from your website's code can help it render more fastly.  There are a few steps for successfully minifying your code: Install the Minify module  Download the tar.gz file and unarchive it Move the resulting folder into your website's Drupal modules section.  Enable the module from your dashboard You also have the option to enable the minify module to start working automatically. This will assist your Drupal website in loading quicker on mobile devices and thus improving the user experience.    3. Browser cache implementation for mobile-friendly Drupal websites. The next step in optimizing your Drupal site for mobile is to implement browser caching, which allows a user's browser to store data, so it doesn't have to repeatedly download the same files.  This reduces latency if, for example, your site has an extensive background image. The browser caching allows the picture to be stored on each visitor's device, so it doesn't have to be downloaded every time the user visits your site.  Browser caching is a built-in tool in Drupal, and although you can configure it in your control panel, we recommend that you consult the official guide before doing it or hire a Drupal developer to help you.    4. Consider image optimization.  Websites that contain many large image files can have longer loading times on mobiles. You don't want that if your goal is to provide high-quality experiences for your mobile users. Therefore, you can start optimizing your images to accelerate your site's performance. How can you reduce the size of your photos without jeopardizing their quality? It's actually easy. Drupal's ImageAPI Optimize module helps you manage your images before uploading them onto the website.  You only have to download the module's tar.gz file, install, and enable it in your dashboard. To automatically optimize your images for mobile devices, make sure to select ImageAPI Optimize as the default toolkit.  When creating responsive images, the amount of space an image fills on the screen is significant. Drupal lets you use @media rules to modify images depending on each user's screen size. This high level of personalization is allowed by the Breakpoint and Responsive Images modules.    Why Drupal 9 might be the best option for a mobile-first approach The latest version of Drupal provides optimized modules and features for mobile devices that enhance the user experience and address modern customers' needs.  Among the key benefits of Drupal 9 for mobile optimization are: Improved speed of content delivery Responsive design for various screen's widths  Editing content on mobile is easier  In conclusion, if you want to deliver high-quality, personalized user web experiences in the modern era, optimizing your website for mobile devices is a must. Optasy can help you build a mobile-first approach that satisfies the need for speed and high functionality that today's mobile users expect.  Image credit: deeptuts on Pixabay... Read more
Raluca Olariu / Feb 22'2021