SiteOrigin Page Builder Vs Gutenberg Page Builder

Posted on |

Site Origin vs Gutenberg

Which is the best WordPress page builder?

When I first started creating websites in WordPress I had trouble laying out a page in a nicely designed structure using columns and rows. I was able to do this in good old HTML, but WordPress was trickier. It required the use of a plugin to help create a neat and tidy website.

There are a number of popular page builders available and I have used a few: Divi, Elementor, SiteOrigin and more recently Gutenberg. However, the two I have used most are SiteOrigin and Gutenberg, but they operate differently and cater to different user preferences. I’ll be honest and say that I prefer Gutenberg mainly due to its faster loading time.

Here’s a comparison of the two:

1. User Interface

SiteOrigin Page Builder:
SiteOrigin Page Builder provides a traditional drag-and-drop interface. It’s fairly intuitive, but it’s not as modern as some other builders. The layout editor is split into two sections: one for content and the other for layout control. It’s designed to be relatively simple, with grid-based columns and widgets that can be added to each section. SiteOrigin’s interface is known for being lightweight and minimalistic, but it requires users to switch between the frontend and backend views to see their changes in real-time.

Gutenberg:
Gutenberg is the default block editor in WordPress. It uses a block-based approach to content creation, where everything (images, text, videos, buttons, etc.) is inserted as a block. The interface is clean, intuitive, and focuses on the content-first experience. You can see changes live as you build your page. Gutenberg also supports full-site editing (FSE), which allows users to edit headers, footers, and other theme elements. It’s more modern and native to WordPress, which gives it a seamless experience, especially with WordPress 5.9+ and the expansion of Full Site Editing.

2. Ease of Use

Each one needs learning and although Gutenberg lacked some basic features like columns in the initial releases, now there is a range of Gutenberg add ons which help overcome the earlier problems that SiteOrigin had in place.

  • SiteOrigin Page Builder:
    SiteOrigin Page Builder is relatively easy to use but can be a bit more technical for beginners. It requires more manual setup for things like responsive design, and it doesn’t provide the same “live editing” experience that Gutenberg does. For users who prefer a classic page builder feel with drag-and-drop elements, it’s fairly accessible, but the interface might feel outdated.
  • Gutenberg:
    Gutenberg is designed to be intuitive, with a block-based editor that makes it easy for users to create content by dragging and dropping blocks. Its interface is simple, especially for users familiar with WordPress. Since it’s built directly into WordPress, it doesn’t require third-party installations, which reduces setup time. However, there is now a vast range of Gutenberg plugins which have greatly improved layout and functionality possibilities.

3. Flexibility & CustomiSation

  • SiteOrigin Page Builder:
    SiteOrigin offers quite a bit of flexibility through its row, widget, and column system. You can add a wide range of widgets and content elements to build your page. There are also advanced customization options, like custom CSS and developer tools. It’s more suited for users who want full control over the layout, though some features, like advanced row layouts or special design options, might require the premium version.
  • Gutenberg:
    Gutenberg’s flexibility has significantly improved with Full Site Editing (FSE), which allows you to create custom templates for headers, footers, page elements and archives, in addition to regular posts and pages. However, compared to SiteOrigin, Gutenberg can feel limited in some areas when it comes to highly complex layouts or fine-tuned control. Customisation often involves using custom code (like CSS) or installing additional blocks via plugins.
  • Both:
    Both have the option for adding on additional plugins to enhance the design and functionality of a website, both offer animations and reusable blocks or Mirror widgets (FSE) plus additional CSS and responsive settings.

4. Third-Party Plugins and Extensions

  • SiteOrigin Page Builder:
    SiteOrigin has a wide range of third-party widgets and plugins (like SiteOrigin Widgets Bundle) that extend its functionality. These plugins can be used to add advanced design elements (such as sliders, carousels, galleries, and more). It has a dedicated community of developers contributing to its ecosystem.
  • Gutenberg:
    Gutenberg has a growing ecosystem of third-party blocks that can be installed via plugins. The WordPress community has embraced Gutenberg, and many popular page builder plugins (like Ultimate Addons for Gutenberg or GenerateBlocks) provide additional blocks to extend Gutenberg’s capabilities. However, some users may still find it requires more plugins to achieve the same level of advanced functionality, however Greenshift offers a great deal more in just one additional plugin including animations.

5. Performance

  • SiteOrigin Page Builder:
    SiteOrigin is considered relatively lightweight and doesn’t add a lot of bloat to the site. However, because it relies on shortcodes to render layouts on the front end, the performance can slightly degrade when the page contains a lot of complex content or widgets. That said, it’s generally efficient and works well for standard page layouts.
  • Gutenberg:
    Gutenberg is built directly into WordPress, meaning it has a performance advantage since it doesn’t rely on third-party code to function. Its block-based system ensures that content is optimised, and since it’s part of the WordPress core, it’s generally well-optimised for speed. The new “block patterns” (reusable blocks) feature and Full Site Editing also allow for a cleaner, more efficient workflow.
  • Having run sites through GTMetrix Gutenberg is a clear winner when measuring similarly laid out pages, typically comparing sites on the same server using these two layout builders shows SiteOrigin with a score of D whereas Gutenberg presents a B score. The main issue noted is the CLS score is higher in SiteOrigin.

Conclusion

  • SiteOrigin Page Builder is ideal for users who prefer a more traditional, flexible page builder with a simple interface and control over layouts. It works well for users who prefer building layouts with rows and widgets but might not require deep WordPress integration. It has the option to use HTML in Text View which is helpful when issues arise.
  • Gutenberg is great for users who want a native WordPress experience, modern block-based editing, and a focus on content creation. It’s more integrated with WordPress and provides advanced features like Full Site Editing, making it a good choice for users who want an all-in-one editing solution without relying on third-party page builders.

If you’re already comfortable with WordPress and prefer something that integrates natively with the platform, Gutenberg might be your best option. Not only do sites load quicker, it has the ability to drag and drop elements around the page more easily than SiteOrigin. If you’re looking for a more powerful layout builder that offers a more traditional drag-and-drop experience, SiteOrigin could be the better choice. However, Gutenberg has now joined the ‘adults’ with much more powerful functions by means of some key free add ons.

My personal choice after spending a number of years with SiteOrigin has moved to Gutenberg without a doubt. Once you use the whole interface on the back end, the page building experience becomes much clearer.

Related Posts