Skip to content

Supports Page Builder

Alex Prokopenko edited this page Aug 23, 2018 · 4 revisions
- This section is still under construction

Page Builder plugins are often used to allow user to build a page from pre-defined blocks in a free way. Usually such pages called "Landing Pages".

We recommend to use SiteOrigin Page Builder in case you need easy management of your Landing Pages. This plugin has an interface for layout builder (rows/columns) and use usual WordPress widgets as a content blocks. So you can use standard widgets or create your own.

Current Theme Framework has a small extension to make it easier to develop landing pages with a SO Page Builder.

About Page Builder

Problems with a Page Builder plugins

All Page Builders provide a maximum flexibility for a user. They provide options to specify HTML attributes, (class and id), select backgrounds, update font styles, update mobile styles and even write a custom CSS for each element you see. For a technical person this sounds great. However most users who order a custom theme are not experienced enough to configure all these options.

Let's take a look what options user has when he creates a row: Row Attributes Row Layout

Each row has about 20 different options to configure! The more options end-user see, the more things he can break!

This means that "flexibility" becomes a negative factor for non-technical users.

Page Builder extension

First of all we want to say "Thank you!" to a SiteOrigin developers. They inserted so many hooks inside their code, so you can customize almost anything, without modifications inside the original plugin code.

And we did it! We used these hooks to simplify interface to a few options. Same screen as above looks like this with our addon: Row Patched

Introducing Layouts

We disabled all default options for rows and widgets. And we defined a new term called "Layout". So any row or widget can have a "Layout".

Layout is a pre-defined set of all the options we have before. All of them are defined inside a theme codebase. If user want to update some styles for a Layout - we just update a Layout definition and there are no need to update all options over the pages in all blocks.

This is extremely useful and our clients are very happy to use such modification.

Cleaner HTML & CSS

By default Page Builder generates a unique HTML structure and CSS styles for all elements based on the options selected inside. This makes HTML code overloaded with lot of useless div classes and pretty big inline CSS parts.

Custom theme creation is always consists of converting client designs into a custom html/css code. We use responsive techniques, media queries to display page on all resolutions and devices. We create all necessary styles before we start working with WordPress backend, and we don't need any CSS or Margins to be entered in an admin panel. Otherwise, end-user can easily break a good looking page and designer will be very sad about that :).

So in our extension we turn off a lot of bad-looking class names and inline CSS. All CSS should be inside a theme stylesheet!

How it works

Enable page builder support