{"id":11156,"date":"2017-07-11T10:36:29","date_gmt":"2017-07-11T08:36:29","guid":{"rendered":"https:\/\/www.saasweb.agency\/blog\/wordpress-custom-layouts-with-the-siteorigin-page-builder\/"},"modified":"2026-10-27T08:15:11","modified_gmt":"2026-10-27T07:15:11","slug":"wordpress-custom-layouts-with-the-siteorigin-page-builder","status":"publish","type":"post","link":"https:\/\/www.saasweb.agency\/en\/blog\/wordpress-custom-layouts-with-the-siteorigin-page-builder\/","title":{"rendered":"WordPress: Custom Layouts with the SiteOrigin Page Builder"},"content":{"rendered":"
\n
\n
\n
\n

WordPress Requires Extensions<\/h2>\n<\/div>\n
\n
\n

A Little Background<\/h3>\n
\n

A few years ago, WordPress was still a simple blogging system, so complex layouts for pages and articles were not really significant. However, WordPress has since become the most widely used system for creating private and business websites, including online stores. <\/p>\n

By default, WordPress therefore only offers one content field per page or article, which can be edited using the visual editor. As is well known, media such as images or videos can also be integrated into this field. In addition, shortcodes can be used to place other content, such as that created by other plugins, into the content area. <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n

SiteOrigin Is THE Extension<\/h2>\n<\/div>\n
\n
\n

Free but Valuable<\/h3>\n
\n

SiteOrigin is a Page Builder plugin that (extremely) extends the functionality of WordPress in the area of content management. With the Page Builder, you can basically insert any content and create content structures independently of the theme, provided the theme does not already impose its own restrictions. It is important to know that SiteOrigin creates a structure that behaves responsively\u2014as long as the widgets cooperate (the widgets from the bundle are all responsive). <\/p>\n

There is a Premium extension<\/a> for the SiteOrigin Page Builder, which allows additional widgets to be added to the existing selection. To be honest, however, you can get by very well without “Premium.” <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n
\"Create<\/a><\/figure>\n<\/div>\n<\/div>\n
\n
\n
\n

Create a Custom Structure<\/h3>\n
\n Once installed and activated, WordPress offers a “Page Builder” tab alongside the visual and text editors. In Page Builder mode, the editor changes completely. Text can no longer be entered directly; instead, you must first define the content structure: to do this, you create rows that can be divided into columns. You can insert one or more widgets into each created area\u2014the widgets are ultimately the actual content. <\/p>\n

The possibility of nesting the Page Builder itself is also interesting: the Page Builder can be inserted as a widget, and a new structure can be created within it.<\/p><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n
\n

Content Is Inserted via Widgets<\/h3>\n
\n With the Page Builder, any widgets can be inserted, including those already provided by WordPress or those made available by installed plugins. The widget plugins that can be installed additionally are particularly interesting, e.g., from the SiteOrigin Widgets Bundle<\/a>. If you like effects, there are also extensions for special effects, such as the SO Page Builder Animate<\/a> plugin. <\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\"Fill<\/a><\/figure>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\"Display<\/a><\/figure>\n<\/div>\n<\/div>\n
\n
\n
\n

Display Content Across the Full Screen Width<\/h3>\n
\n

In the structure overview, individual settings can be set for each row\u2014for example, a Row ID (CSS ID for the row) is practical if you are familiar with CSS\u2014allowing you to define the page layout for your project with pixel-perfect precision. A special setting in the “Layout” section is the “Full Width” option. This allows the row to be stretched across the entire screen width. However, the content remains aligned with the others (usually the content area is a centered area in the browser window); if the “Full Width Stretched” option is selected, the content is also stretched across the entire screen width\u2014this option is mostly used for sliders or header images. <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n
\n

A Bit of Fine-Tuning<\/h3>\n
\n Once the basic structure is created and the content is inserted via widgets, everything is actually fine. However, there are still adjustment options with which various parameters can be individually tuned. An important point would be the breakpoints\u2014the width of the browser in pixels at which the columns “flow together,” for example, to display two-column content as a single column on mobile devices. <\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\"Settings<\/a><\/figure>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n

SiteOrigin Compared to Other Page Builders<\/h2>\n<\/div>\n
\n
\n
\n Of course, there is not only the Page Builder from SiteOrigin. Others are listed here: <\/p>\n
    \n
  • Divi Builder, Elegant Themes (paid).<\/li>\n
  • Elementor, Elementor (Freemium)<\/li>\n
  • Visual Composer, WP Bakery (paid)<\/li>\n<\/ul>\n

    These Page Builders are certainly among the most widespread, but there are others… Every Page Builder has its own UI and its own functions that one user or another particularly appreciates. In my opinion, however, the Page Builder from SiteOrigin has a decisive advantage: the content elements that you add to the content blocks you create yourself are widgets\u2014perfectly normal widgets. This makes the flexibility particularly high and the extensibility virtually unlimited. <\/p><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

    WordPress Requires Extensions A Little Background A few years ago, WordPress was still a simple blogging system, so complex layouts for pages and articles were not really significant. However, WordPress has since become the most widely used system for creating private and business websites, including online stores. By default, WordPress therefore only offers one content \u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[983],"tags":[1490,1882,1482,1467,1785,2153,1622,819],"class_list":["post-11156","post","type-post","status-publish","format-standard","hentry","category-tutorial","tag-divi-builder","tag-elementor","tag-page-builder","tag-page-builder-by-siteorigin","tag-responsive-layout","tag-virtual-composer","tag-widgets","tag-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.saasweb.agency\/en\/wp-json\/wp\/v2\/posts\/11156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.saasweb.agency\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.saasweb.agency\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.saasweb.agency\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.saasweb.agency\/en\/wp-json\/wp\/v2\/comments?post=11156"}],"version-history":[{"count":0,"href":"https:\/\/www.saasweb.agency\/en\/wp-json\/wp\/v2\/posts\/11156\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.saasweb.agency\/en\/wp-json\/wp\/v2\/media?parent=11156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.saasweb.agency\/en\/wp-json\/wp\/v2\/categories?post=11156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.saasweb.agency\/en\/wp-json\/wp\/v2\/tags?post=11156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}