Complex page layouts and my crisis of faith

sage
1

I’m asking this here because you guys on this forum tend to be working with WordPress at a different level than, say, the WP support forums.

This post is my crisis of faith for content development so bear with me.

I’m trying to balance my agency’s need for complex, somewhat arbitrary page layouts that can be quickly deployed, and my own sense of… Project purity? Elegance?

Typically I’ve used ACF to standardize a few layout options per project. This keeps everything nicely on rails; keeps layouts standard and predictable; maintains consistency. But more and more we are finding outselves hamstrung by these methods. When we need a layout that we haven’t yet developed, it can take many hours to complete both the ACF and styling portions, and/or conflict with layouts we’ve already created. Then we have big agency conversations about the value of consistent elements in a site design.

Which is where page builders typically enter the conversation. They do everything my clients and my boss want, quickly and easily, but they remove the rails. Colors, padding, are all chosen per-element rather than being set at the theme level which makes my eye twitch.

On top of that, with a builder like Beaver Builder (which seems most directly aimed at my problem) include their own styles and JavaScript which often double the functionality of the styles I’m already creating with. Beaver includes a namespaced copy of Bootstrap, which means I’m including two whole copies of Bootstrap on the site.

What’s the point of setting all my brand colors in _variables.scss if I have to re-set them all per-page in Beaver?

It seems to me that Beaver amounts to a whole second theme that I’m loading on top of Sage.

I feel like I must be missing an option. There must be a way to create complex pages without the restrictions and manual work of ACF and without the considerable bloat of Beaver.

So what do you do? Do you embrace the page builder for its flexibility? Do you try to do it in ACF? Do you write your HTML into TinyMCE?

Help me out in my crisis.

5 Likes
2

I think that you can use Beaver without using their styles ? (according to an answer from their support team).

Also I’m interested by the open source builder : livecomposer.

I would really like to find a good solution for page building too.

3

It’s a popular topic as i think there aren’t any best practices yet or there isn’t a simple one answer to it.

In my opinion Page Builders/Drag & Drop are for people that will use and add content to it. If that’s your client, the user experience is important but you lose the control. ACF is good here as you can limit what they can change. Paddings, margins, colors, fonts… why in the world would a client want to change and play with those things for hours? You want to limit the control and options to the client.

Page Builders are in my opinion great for the template sellers as it’s a nice way to give a tons of features to the people who will buy/install them (one for all theory). It’s a solution for everyone and not tailored to the content of specific niche pages. And i hate shortcodes and that kind of markup inside a wysiwyg. Client can delete one bit and the site is broken.

ACF is great but the user experience is not quite there and it’s in the backend. http://getonepager.com/ has a nicer user experience, but i want to have ACF with this which i think would be a lot better (maybe this is a solution but seems outdated https://www.youtube.com/watch?v=rb9rsLaDImc ).

Maybe it’s me but i want to control CSS, html, php templates etc. All i want for the client or myself when managing the page is to focus on content. If they want to swap a image or title that’s perfectly fine but they shouldn’t lose their time playing and using page builders and margins, it makes no sense. If they have a specific content or information that needs to be displayed appropriately you need to create a new “module” or a page layout for it. Most of the people would change the content to fit the template which is a bit insane.

I think web design is about informational structure more and design needs to be built around information.

5 Likes
4

I will be using acf with this https://github.com/StoutLogic/acf-builder

I will be creating smallr components which i will be reusing in modules and other projects. In time there will be a nice library that i will be able to mix and match based on the content.

Now i only need a nicer solution for the front end editing :slight_smile:

2 Likes
5

Latelly I’ve been using Visual Composer, this has been my approach so far:

  • Remove most of the standard modules, from those left active disable all properties related to CSS or styling. User should only handle structure (columns) and content. At the most I’ve let the option to change the CSS class.
  • Disable all CSS that VC injects into the page.
  • Rewrite the standard row and columns templates to render proper HTML with Foundation CSS classes.
  • Move all this hacks to a separate plugin, which also exposes some SCSS files which the theme can use (for controlling the style of my modules). This SCSS files can be configured via variables.

Then, per project, I create custom modules to fetch posts or CPT, filter them, etc. which can be used in the VC page layout.

Is it good? Well… it “works” but feels quite hacky, it’s based on a paid plugin… meh, ugly. I don’t know. I’ll prefer an open source solution that works both with Foundation & Bootstrap, works on top of HTML (not shortcodes…). But it doesn’t exist. :slight_smile:

1 Like
6

I don’t see a crisis here, but please correct me if I’m wrong.

If your clients have the budget for the changes they request then wouldn’t you rather have more manual control over their layouts? This allows you closely maintain the integrity of your original designs and you get more work out of it.

Are you just looking to decrease your overall workload or do you often get client requests that don’t proceed because clients balk at the work estimate?

7

The crisis is that something like Beaver Builder is far more robust, and far more flexible than anything I could build in a reasonable amount of time, but using it sacrifices the integrity of the theme I’ve built by letting users change padding, colors, etc. which I’ve, in theory, defined globally in the theme.

We want to be able to turn around nice looking pages for clients quickly.

And I see what you’re saying: if we’re there to maintain the brand standards, who cares if they’re not enforced programmatically, and that’s the nature of my crisis. Am I ok with letting go of that theme-enforced strictness in exchange for ease and human-enforced strictness?

1 Like
8

I’m basically reproducing this same project here

Probably less intelligently. The difficulty is where to stop with the flexibility. At what point are you not just nesting flexible content fields which have every module as an option including another flexible content field.

It’s tough because my designer is constantly throwing new layouts for existing sites which look great but don’t follow any existing rules, so then I have to explain that we don’t have a 2/3ds - 1/3rd column layout and we can’t put a photo there with any of the layouts we’ve built so far. Page builders fix every one of those problems.

9

This thread might devolve into me talking to myself.

@doup’s comment above got me thinking and apparently you can override Beaver Builder modules which would let me strip out settings I don’t want users messing with, or, say, add a drop-down for buttons to select a semantic value rather than individual colors.

It would take some work to override all the necessary modules but those overrides would be pretty reusable between projects.

This might be the answer I’m looking for. Thanks for getting me thinking on these lines, @doup!

1 Like
10

I have been a massive fan of ACF and typically have created our own limited page builders with it.

On opur current project we have used http://carbonfields.net which is like a really clean and lightweight version of ACF, builing fields with scripts not with a gui - very fast dpeployment.

Our page builder typically lets the client

  1. Add a section (repeater)
  2. select a theme background colour
  3. Specify if it is contained ( in BS Container) or not
  4. optionally add any of the following id, class, title, shortcode, image, text, [columns (repeater) ], button in that order only

All sections a full width and get a default top and bottom padding. Similarly elements also get a ‘fixed’ style.

In the column repeater they have the same options
-> add any of the following id, class, title, shortcode, image, text, , button, and select if the content is in a single column or if the image and content are in their own divs.

From there, using any bs classes (we team them how to make columns col-sm-3 text-center pull-right for example) the clients can create virtually any page content that they desire and fits with the theme style.

The shortcode makes it endlessly extensible and they can add forms, and we also use this to place svg animations etc in content.

The Text Area field in the sections or columns can also include more custom styles on the fly (this is where I can go in and write BS grids for them) still maintaining the overall styles.

from there, complex styling is a phone call and a bit of custom css only and we teach them how to use these style classes (ie you can read the home-section-2 class to another block on another page.

Its a really happy medium, allows sme to build sites super fast and outputs minimal clean tight code.

Now I just need to motivate to which it into a plugin so I can reuse in the future instead of rewriting each project.

4 Likes
11

I’ve actually done the same kind of thing here:

This plugin gives us consistent, reusable flexible content blocks with a relatively consistent interface and even includes templates for each block type (and each part of each block type) which can be overridden by your theme.

I even took a cue from Sage and made the templates that are reused across different block types overridable per block type (for instance all blocks share a common layout-base.php but you can override the base for a particular block type by adding yourtheme/fcb-templates/blocks/layout-base-[block-type].php)

There are also a bunch of filters that I’ve done a terrible job documenting so far including filters to add theme colors to the background and button type dropdowns.

You can also use (as yet poorly documented) filters to:

  • Edit or remove the “armor” the plugin automatically wraps around the_content()
  • Conditionally set the h-tag on block titles
  • Add or remove classes or styles from block wrappers or block containers

The latest feature addition is a filter to insert your own block types from your theme or another plugin, so that they’re available as available flexible content layouts in the same drop-up menu as the ones that ship with the plugin. Obviously you would need to add templates for these yourself.

It’s essentially what you’ve described. I’ve improvised it into existence over a few projects. I plan to beef up the documentation to actually describe all of the above features within the next few weeks.

1 Like
12

long time ACF user here, but have just recently discovered and used this shortcode plugin, to much success. once upon a time i would have winced at the thought of using shortcodes. plus the UI is very sweet. dont know if that solves your issues, but it has mine. good luck

13

Did you explore livecomposer ?

1 Like
14

Just found this: https://elementor.com
So now there are two open source front-end page builders available. :slight_smile:

I’ve tried both but I’m still not happy how they handle layout building (section > rows > columns). I also miss the ability to output 12 cols based code (Foundation/Bootstrap) instead of percent based one.

Both of them give too much power to the user, messing with margins/padding/… Though Elementor makes a better separation between content and styling on the default widgets.

I’ve to test it more, but Elementor might be the one.

1 Like
15

I was about to comment about Elementor. The settings page lets you turn off the ability for clients to choose their own custom colours and fonts - so you can effectively dictate the branding style on the page while giving them them freedom to structure the page out the way they want. Also you can disable Elementor for lesser roles (eg author or subscriber) so as an admin you can control the layout, and just let the client edit the content, if you choose to run the site that way.

I’ve been having a bit of my own crisis after 20 years of web development, regarding these page builder plugins! :smiley: I had never even heard of page builders until Elementor was brought to my attention a week or so ago. At first my reaction was negative - why would I want to give up the controls to complex page layouts? Doesn’t that devalue my role as a web designer / developer? Am I being made redundant, if my client chooses to lay the page out?

But after playing with Elementor for a bit, I have discovered that it’s actually quite a joy to use, even if you are a seasoned WP developer. Prior to Elementor, I would write tons of custom shortcodes for my clients to use, to let them set up grids, cards, buttons etc. and while that worked fine, the user experience is not very friendly (plus I had many support requests to fix broken pages, because the client hadn’t closed a [shortcode tag] etc.) But with the Elementor plugin, all of that stress is gone. It’s really quite a nice feeling to visually scaffold a decent looking layout, and then hand over to the client to edit content.

I’ve also had a quick play with Visual Composer, SiteOrigin Page Builder and Live Composer - none of them seem to be as intuitive to use as Elementor, so I’m getting behind that project. I love the fact that it’s truly open source and it’s being extended to use WP widgets as well. I’m kind of excited to see where it’s heading honestly.

1 Like
16

Page builder are the devil! :smiling_imp: But i guess they do come in handy for some clients.

You mentioned devalue your role as web designer / developer. You don’t need to worry about that as page builders are meant for designers and not clients that much. The control they have is to much for a client to handle and is not productive/profitable for them as it’s too time consuming and you can point that out to them. And btw Divi page builder etc. is also time consuming for developers/designers to use.

I guess it would make things easier to change some titles/text etc. But they should never change the design or “style guide”.

What i would like to try is a front end style live edit of acf fields. There used to be a plugin but didn’t get updated. So the client can have an edit button and when he clicks it, he can directly change the text and save it. That’s it.

Even if the client want to add a section (modular sites these days) they would need to use the right color background and think about rhythm, flow and other things. So it’s not that easy to give them predesigned things either.

OnePager is a close thing but as you said, colors, sizes padding, margins etc need to be locked down and there should be a guide/rules book for the section or modules to be used and how they should be put together. If you set up rules and design the whole process then the experience and the result can be ok.

Divi 3 came out recently and man can things go wrong there if the client starts “designing” :smiley:

17

I feel the same, as much as I’d love to use Elementor, the nested div soup and amount of classes and css it outputs is holding me back for now. However it’s slightly better than most other page builders in that regard.

Ideally (in my world at least) markup should just be a clean section > row > column > block. Instead of all the additional wrapper and container divs (wtf why are they necessary?). I’d like to be able to assign my own id’s and custom classes and attributes to elements and use Foundation SASS mixins (or classes) to create the layout. Right now it’s not possible to disable the percentage based CSS system completely and assign id’s and custom attributes (like data attributes) to the elements myself.

I’ve come a way with my own page builder in ACF, however it’s not as end-user friendly as it has no slick UI. Also no front-end editing and no roles management to lock down editability of certain parts. Bah.

1 Like
18

@richardwilis here is my wishlist for Elementor: https://github.com/pojome/elementor/issues/575

I think that you would be interested in point 5. My idea is to create the usual bunch of components that various page builders have on top of SASS/BEM. So styling would be as easy as changing the Foundation _settings.scss file. And if someone needs more control BEM should ease the styling.

It seems that where most of the page builders fail is in the structural components (section, row, column); I hope that this can be fixed on Elementor… let’s wait and see. :slight_smile:

1 Like
19

Certainly good points for further improvements, personally I’d like to see other things done right first before I would consider using Elementor (or any page builder).

  • super clean markup, less nested wrapper/container divs, less classes
  • option to assign id’s and custom attributes to elements (classes are already possible)
  • a general settings page where we can globally (re)name the default id and class names for the structural components would be really helpful. So one can create and use any css convention, be it BEM, SMACSS, Atomic, etcetera… or custom.
  • option to disable Elementor css and it’s percentage system to let the theme and chosen framework take control over the layout.
  • improved roles management, more options to lock down editabilities for end-users to just content and none of the layout/design stuff :slight_smile:
20

I would like to see something that lets me define a page module (content with media, set of cards, etc), template and style it with my theme, and edit it in some semblance of what it looks like on the front end.

This is basically what I’m trying to accomplish with my ACF content blocks tools, but laying it all out in tabs with ACF is a far cry from what it’ll actually look like, and in the not-so-rare case where a module doesn’t have all of its fields filled in, it ends up looking broken on the back end unless you know what you’re looking at.

So a front-end editor for ACF would basically save my life. I could stick to the hard-edged control I want to place on the design, while giving users (and developers frankly) an easier editing experience.

3 Likes