Anybody using any page builders with sage?

This is some next level stuff am not really that competent :sweat_smile:

Something like this heavily depends on the size of the project, and how well scoped the design is. I find often with smaller projects the design requirements are looser, making this method a bad fit for a few reasons.

But that’s just my experience with projects. This is a great method!

1 Like

We keep our design process as:

Design -> Designs passed to dev team -> back to designers with dev feedback -> Implementation of dev feedback -> Repeat until signed off for build.

The dev team feedback is mainly to streamline how the website will be built and point out those small differences that will exponentially increase to project scope. By the time we come to build, we should have really already scoped out all components, post types, templates etc. We’ve also found that we can usually get away with far fewer templates i.e. a default template with a “page builder” that handles 95% of pages, then a few unqiue templates for the rest.

4 Likes

I’m jealous of your timeframes :slight_smile:

3 Likes

You could just jump on the Gutenberg train a little early: https://wordpress.org/gutenberg/ Haven’t messed around with it myself, but ostensibly there’s a way to build/define your own blocks.

1 Like

even i haven’t tried it yet let me check it out

Thanks for sharing. I am using a very similar method so it’s good to know that I am on the right path :slight_smile:
I would just suggest to output template partials like this:

@foreach ($page_builder as $block)
    @include('partials/page-builder/'.$block->block_type)
@endforeach

So you could avoid a ton of if statements. Of course, in this case your acf layout and template names should match. But you can use dashes for acf layout names as well so it’s not an issue.

2 Likes

Nice! I like that in principal, although I definitely would prefer my ACF layouts to be underscored for consistency elsewhere but that’s probably me just being pedantic :sweat_smile:

I’m curious about this as well. When using something like beaver builder, when does it start and end for something like sage? Are you only using it for page content?

Wherever you want. I’ve built sites where even the title section was a BB “saved row”, and I’ve also built sites where the BB part was confined to a container. and the header and footer were done with ACF or normal WordPress functionality.

It depends on the project needs, the client’s needs, and the designer’s ability to be specific.

Hey

Not sure if I understand this correctly, but does that mean that BB can be used in specific blocks, not just the main wordpress post editor? Let’s say I have rows of flexible content fields and I want one of them to be able to use beaver builder, is that something possible?

Thanks in advance

So you’ll actually use Beaver Themer?

How am I still leveraging Sage’s approach when I do this? Are there benefits to using Sage with Beaver Themer?

I don’t use Beaver Themer, I just use Beaver Builder. Builder replaces any content in WordPress’s the_content() so if I place that within a limited-width container, for example, I’ve effectively limited Builder’s capabilities. That’s all I mean here.

A post was split to a new topic: Working with Blade and ACF

Has anybody had any experience with this? https://www.dopewp.com/ LiveCanvas - A bootstrap compliant page builder. I have beta access but I’ve never gotten around to trying it.

Imagine a page builder that only injected bootstrap4 markup into the front-end with no additional stylesheets or scripts. I’m not sure if that is what LiveCanvas does but some page builder should. I’m going to send them an email to see if it’s possible…

UPDATE: Here’s what the creator of LiveCanvas said:

LC does not add any js or any css to the site. It only takes care of helping the user write some html. And then saves that html fully in the content field of the post.

The editor builds stuff relying on BS4 so it expects the stack to run on a BS4 theme, and needs a clean page template allowing full-width content. Not a hard requirement.

Sounds ideal for when you’re prepared to give a client more control of their layouts. I will report back when I try it out.

I use Sage with Gutenberg on some new sites already and I actually like the Gutenberg editor a lot compared to the other page builders as it leaves the control mostly to the theme.

Related tutorial/code:

1 Like

Hello,

Have you ever tried LiveCanvas?
Do you know if it works well with Sage?

Thank you very much

I never got around to it sorry!

Just re-visiting this to make this dynamic and not having to declare all the fields every time for each layout. Here’s the code that makes this dynamic:

// Create page builder for ACF Flexible Blocks
public function pageBuilder() {

    $page_builder = get_field('content_blocks'); 
    $data = [];
    $counters = []; // for counting same layout blocks on a page

    if ($page_builder) {
        foreach ($page_builder as $block) {
            // update counter
            if( !isset($counters[ $block['acf_fc_layout'] ] ) ) {
                // initialize counter
                $counters[ $block['acf_fc_layout'] ] = 1;
            }
            else {
                // increase existing counter
                $counters[ $block['acf_fc_layout'] ]++;
            }
            $this_block = [
                'block_type' => $block['acf_fc_layout'],
                'block_counter' => $counters[$block['acf_fc_layout']],
            ];
            unset($block['acf_fc_layout']);
            $this_block = (object) array_merge($this_block, $block);
            array_push($data, $this_block);
        }
        $data = (object) $data;
        return $data;
    }
}

Any updates? I’m trying to build this myself, and so far I am trying to compile blade component, while a dynamic value from WP.

E.g. user selects ‘primary’ so that should be in the component should appear here, but instead of the blade component compiling it just gets thrown like this to the browser.