Complex page layouts and my crisis of faith

Well well well would you look at that: https://github.com/HorionDigital/advanced-custom-fields-front-end-editor/

Ah nice, itā€™s seems to be updated again :slight_smile: This is the only promising one in my opinion :wink:

I wonder if itā€™s worth trying to contribute to. I think we generally agree in this thread that ACF is simultaneously more flexible for developers and more on-rails for content managers and whatā€™s really lacking is an editor that makes the content look like it will in practice.

Iā€™m going to give this tool a good look.

Itā€™s a love/hate relationship with page builders. Do they keep me up at night with their messy code? Yes. Do I use them? Absolutely.

I love love semantic, well structured code as much as the next person and am downright anal about it on web application and static site projects. But since the advent of (worthwhile) page builders and ever-changing client expectations, Iā€™ve bit the bullet and dove in.

The cleanest output in my opinion is SiteOriginā€™s Page Builder, followed by Beaver Builder - neither of which leave a mess of shortcodes behind.

While ACF is certainly the proper developerā€™s way, the problem with ACF layouts is that they create ā€œdeveloper lock-inā€ in a sense. Now the power of the paying client to edit their own site has been taken away (yeah, I know, thatā€™s how we want it). But really, Iā€™ve let that idea go. If they want to destroy their own page layouts so be it.

With that said, I usually only have 1 out of every 12 clients who actually touches their own site layouts anyway (even with ACF), which means page builders are more for you than them. If utilized properly and trained in a way, youā€™ll find the client really wonā€™t do anything too damaging/off brand than they would in the vanilla visual text editor.

At the end of the day, they feel limiting but empowering, frustrating but efficient.

The nested divs in every page builder is a fact of life at this point, considering itā€™s really the only way to build HTML sockets on the fly. But if you can look past the messy code and unwanted assets, youā€™ll find the impact on performance is negligible.

I suggest picking one and sticking to it since picking up a new one takes a ton of time to get the hang of.

2 Likes

Try LiveComposer - https://livecomposerplugin.com/ - I use it regularly in my custom theme developed off of the bones of sage / roots for years now. - You can see a theme of mine that uses it here: https://github.com/jessicahawkins3344/SquarelyV.2 as well as extended customizer options and builder extensions.

Some sites that Iā€™ve built and developed with a custom sage extended theme + livecomposer:
http://smarklabs.com
http://gaphc.org/wordpress
http://remotegigs.io

2 Likes

Pippin wrote a comprehensive review on this topic: https://pippinsplugins.com/wordpress-page-builder-plugins-critical-review/ :slight_smile:

2 Likes

I still struggle with all the additional styles and scripts. Iā€™m using a full implementation of Bootstrap in my Sage theme, and Beaver Builder (or whatever) is including a second one. I hate that.

Is it not possible or easy to just remove those BS assets from Beaver Builder? Iā€™ve yet to give BB a try but itā€™s the only one Iā€™m remotely interested in.

The last time I read about BB they said it actually compiles and loads all of its styles per page. Which is neat I guess but still duplicative of assets Iā€™m already including to style the header, footer, sidebar, whatever.

BB and similar projects seem to fill a need parallel, not complementary, to Sage

Just got a notification about a new WP page builder called Oxygen. Made by the same folks who make WP All Import.

Iā€™m a heavy Beaver Builder user/administrator but am looking very hard at Tailor which was mentioned in Pippinā€™s article. Looks promising.

I really like Tailor but it doesnā€™t allow for complex column break points (like col-sm-6 col-md-7 col-lg-9). I submitted an issue and the author was interested in the problem but didnā€™t have a good solutio yet.

Yeah Iā€™ve recently been using Tailor too. In terms of functionality itā€™s fantastically easy. The communication of different content types could do with some work (whatā€™s a ā€˜boxā€™, ā€˜heroā€™, etc). But yeah the big bug-bear is mobile layouts.

You can use the ā€˜gridā€™ item to kinda establish breakpoints, but you canā€™t nest grids within grids unfortunately.

1 Like

Stumbled onto this a while back but havenā€™t built anything w/ it yet: https://bitbucket.org/dachcom/dachcom-page-designer/

It uses an MVC pattern (from Themosis), and adds a grid-based admin UI with modals (all on top of ACF).

Been reading extensively on Page Builders for the last couple of months. Also made several templates with ACF. What I miss in ACF and what may be added this year is really built in columns so you can add content blocks in columns with more ease. That and a frontend editor like @MWDelaney mentioned being worked on here by Horizon Digital . Though that one is still limited to certain content blocks.
Best Page Builders I found were Pootle Builder and Beaver Builder . Pootle Builder has a nice WooCommerce Builder too. Beaver Builder is great too and many other devs contribute to it with extensions.
If ACF implements columns as Elliott said he may this year I can do it all myself more or less. Until then I will use builders every now and then for clients who want to add all kinds of layouts at all time and or do not have the budget to get them all built with custom templates and or ACF.

Another great plugin is


it offers quite flexible columns in editor area, partially or fully custom grid styles.
This is nice for larger areas of individual content (formatted text, images, ā€¦).

Relationships:

Another interesting article:

WP Types seems to offer a very extensive support for layouts + fields, but it isnā€™t free:

1 Like

Iā€™m hoping that project Gutenberg will put this issue to bed, once and for all.

Related to blocks in editor: