# Anybody using any page builders with sage?

**URL:** https://discourse.roots.io/t/anybody-using-any-page-builders-with-sage/13047
**Category:** sage
**Tags:** sage8, sage9
**Created:** 2018-07-26T10:56:51Z
**Posts:** 28

## Post 1 by @Pratirup — 2018-07-26T10:56:51Z

Anybody using any kind of page builder with sage am not asking about the main stream page builders i.e. elementor, visual composer, divi etc etc

I want my clients to be able to create pages for themselves as well calling pre-built blocks and components. at the same time i dont want the pages to be spammed with junk codes.

Anybody doing this already ? Does anyone know of any page builder boilerplate ?

---

## Post 2 by @MWDelaney — 2018-07-26T13:11:01Z

Depending on the project I use Beaver Builder. It’s not the most semantic, and it writes a LOT of HTML, but it doesn’t use shortcodes and it’s very easy for non-developers to get the hang of. I’ve even trained clients on it.

---

## Post 3 by @nathobson — 2018-07-26T13:23:56Z

No off-the-shelf page builder but I do build my own into most projects using ACF flexible content fields.

I build each of these out as reusable components and on templates where I allow the page builder, a client can go ahead and build their own mix-and-match set of components out for themselves.

---

## Post 4 by @Pratirup — 2018-07-26T13:26:59Z

@MWDelaney and @nathobson what do you guys think about the [TypeRocket](https://github.com/TypeRocket/typerocket) repo on github ?

---

## Post 5 by @Pratirup — 2018-07-26T13:28:08Z

sounds nice thats what i was looking for how do you go about it ?

---

## Post 6 by @Pratirup — 2018-07-26T13:29:32Z

That junk code is what i dont like :confused: and shortcodes arent that bad most builders use it but compared divi and visual composer elementor and bb is much better

---

## Post 7 by @nathobson — 2018-07-26T13:52:56Z

I keep telling myself I’ll write up something about it but hard to find the time.

Esentially, create all the components as individual rows in the flexible content field. I then have a page-builder controller trait that can be included with any template’s controller. I then have a page-builder partial which is essentially just a foreach through each row of my page builder controller. I then load in another partial for each component based on the foreach matches. I also have a seperate SCSS file for each component.

I don’t think that makes much sense written down :wink:

Let me try and write that up a little better.

---

## Post 8 by @nathobson — 2018-07-26T14:04:37Z

**Page builder controller trait**

```
<?php

namespace App;

trait PageBuilder
{
    public function page_builder()
    {

        // Get all page builder fields
        $page_builder = get_field('page_builder');

            // Set up array
            $data = [];

            // Loop through each block
            foreach ($page_builder as $block) {
                if ($block['acf_fc_layout'] == 'component_one') {

                    // Do any logic for this component here

                    $this_block = (object) [
                        'block_type' => $block['acf_fc_layout'],
                        'field_one' => $block['field_one'],
                        'field_two' => $block['field_two'],
                    ];
                    
                    array_push($data, $this_block);
                } elseif ($block['acf_fc_layout'] == 'component_two') {

                    // Do any logic for this component here

                    $this_block = (object) [
                        'block_type' => $block['acf_fc_layout'],
                        'field_one' => $block['field_one'],
                        'field_two' => $block['field_two'],
                    ];

                    array_push($data, $this_block);
                }
            }

            $data = (object) $data;

            return $data;
        }
    }
}
```

**Page builder view partial**

```
@foreach ($page_builder as $block)

    @if ($block->block_type == 'compontent_one')
        @include('partials.page-builder.component-one')
    @elseif ($block->block_type == 'compontent_two')
        @include('partials.page-builder.compontent-two')
    @endif

@endforeach
```

**Component view partial i.e. `component-one.blade.php`**

```
<section class="component-one">

    {{ $block->field_one }}
    {{ $block->field_two }}

</section>
```

And finally I would have a corresponding `component-one.scss` file.

The above is cut down to a minimum without any checking etc. to just show the basic structure. I call them blocks in the above code for no good reason (slightly shorter I guess) but block == component :man_shrugging:

**Edit:**

My next project is to break up the page builder trait as it can get kind of messy when there’s a lot of components with a lot of logic. The current method does lead to great tiny view partials and styles though and all the front-end code is the 100% your own :slight_smile:

---

## Post 9 by @Pratirup — 2018-07-26T15:14:36Z

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

---

## Post 10 by @MWDelaney — 2018-07-26T15:17:19Z

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!

---

## Post 11 by @nathobson — 2018-07-26T15:31:25Z

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.

---

## Post 12 by @MWDelaney — 2018-07-26T15:32:39Z

I’m jealous of your timeframes :slight_smile:

---

## Post 13 by @alwaysblank — 2018-07-26T15:44:50Z

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

---

## Post 14 by @Pratirup — 2018-07-26T16:00:34Z

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

---

## Post 15 by @jasonbaciulis — 2018-07-29T07:51:04Z

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.

---

## Post 16 by @nathobson — 2018-07-29T08:18:06Z

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:

---

## Post 17 by @broskees — 2018-07-30T14:28:40Z

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?

---

## Post 18 by @MWDelaney — 2018-07-30T14:47:09Z

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.

---

## Post 19 by @SRawhloe — 2018-07-31T07:50:08Z

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

---

## Post 20 by @broskees — 2018-08-01T19:39:51Z

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?

---

## Post 21 by @MWDelaney — 2018-08-02T03:25:28Z

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.

---

## Post 22 by @MWDelaney — 2019-01-15T04:05:30Z

A post was split to a new topic: [Working with Blade and ACF](/t/working-with-blade-and-acf/14594)

---

## Post 23 by @stuartcusackie — 2019-07-04T18:29:35Z

Has anybody had any experience with this? [https://www.dopewp.com/](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.

---

## Post 24 by @strarsis — 2019-07-04T21:15:48Z

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:

> [@Gutenberg: body class / elements by template](https://discourse.roots.io/t/gutenberg-body-class-elements-by-template/15310):
>
> It makes sense for themes to style the Gutenberg editor, too, for body styling and background (\<img\>). Note: Thanks to GitHub user [websevendev](https://github.com/websevendev) for the code this has been derived from: \*\* resources/assets/scripts/lib/PageTemplateWatcher/index.js: import '@webcomponents/template'; // \<template\> polyfill (IEs / Opera Mini) const defaultTemplateClass = 'page-template-default', gutenbergEditorContainerSelector = '.editor-writing-flow \> div \> div \> div \> .editor-block-list\_\_lay…

---

## Post 25 by @egimenez — 2020-08-27T14:48:54Z

Hello,

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

Thank you very much

---

## Post 26 by @stuartcusackie — 2020-08-28T06:10:41Z

I never got around to it sorry!

---

## Post 27 by @webgurus — 2021-01-07T13:06:58Z

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;
    }
}
```

---

## Post 28 by @AurelianSpodarec — 2021-04-04T14:30:55Z

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.