Replace BLOATED PAGEBUILDERS with Gutenberg blocks

How to remove your pagebuilder (without breaking your WordPress site) or losing any of your custom design layouts.

This should be all the rage right now! It’s not that hard to do, lots of fun, ANNNNDD it feels empowering as hell.

I’ll show you how to do it.

Simple steps to be free of your bloated pagebuilder once and for all!

Pagebuilders are great! So much fun to use. Fun to play with all the special effects and try all kinds of different designs with only a few clicks. It’s the greatest thing in the world when you’re not a programmer. So easy to make changes. So easy to do everything yourself. But then what?

After time has passed and you’ve settled on your finalized design, busy running a successful business, and no longer messing with your web-design everyday…you start to realize…

Why is this site so damn slow? And can I possibly get rid of the pagebuilder without losing my cool design?

Now, you’ve got a whole different world of fear (typical concerns below)…

• How can I remove the pagebuilder without breaking my site?
• Will my site be easy to edit without the pagebuilder?
• Will the speed difference be that noticeable?
• Is it even worth the hassle? Does it really make everything better?
• But I LOVE my design, and don’t want it to change at all!
• But I’m so busy. How much time will it take and how do I know that I won’t lost any content?

Never to fear! I’ve done it a hundred times and already have a checklist built in my head which I’ll lay out for you below. Follow it diligently and you find the task to be much more manageable than you think.

I promise:

• your site won’t break
• everything looks the same
• making changes will be even EASIER (since you’ll have fewer things to click through)
• the speed difference will be massive, you’ll kick yourself for not doing it sooner
• the process can be fast or slow depending on how many pages use the pagebuilder and how customized their layouts are
• yes, you can do all of it without coding (although some specific tiny parts may need a programmer for best results)

Other pagebuilder removal examples below:

• CASE #2 (blocks in blocks, full and narrow width)
• CASE #3 (posts in multi-column, buttons and headline)

1. List all pages using pagebuilder.

Yes, it’s easier said than done. It’s easy if you have only a few pages. But a total pain if you have many. Don’t get overwhelmed. Many are probably not using the pagebuilder extensively (only slight issue with a few shortcodes left behind). Also, you can selectively switch out only the most bloated pages.

• If you have a smaller site (10-50 pages, few post types) – Make a list of all the pages using pagebuilder.
• If you have a big site (hundreds of pages, many post types) – start by making a list of all the post types using pagebuilder. And from there, start making a list of which ones
• Some pagebuilders have convenient ways of showing you which pages and post types are using them.

2. Convert all pages using pagebuilder to a non-pagebuilder layout.

Now we start converting all pages using pagebuilder, one-by-one to just using only the default WordPress editor. Obviously, you should start from the pages with the simplest designs/layout.

• Contact – disable the pagebuilder and re-paste your content back into the plain editor. Feeling sad about losing your fancy layout? Don’t be…most of your visitors are viewing the page from mobile which stacks it all one on top of the other anyway!
• About – you probably could do without fancy image effects and all that here. Just re-paste the image and then the text. Keep it simple!
• Products – pagebuilders might only be slightly modifying your product pages as well. Disable it and see if you really even notice much of a difference. I’ll willing to bet you won’t.
• Blog posts – you’ve got to be absolutely crazy to run a pagebuilder on all your blog posts. Disable!!!!

Now time for the harder pages!

• Home – this is probably the #1 most bloated page and biggest culprit in your website slowness. You’re probably got many different little sections, each with their own special designs and visual effects. Yikes, we’ll talk about that below. Good
• Shop – this is usually the 2nd most bloated page. Probably many image sections, product carousels, sliders, and whatever crazy methods you have of shoving products in front of your visitors.
• Media pages – you might also have super “customized” *cough* BLOATED *cough* pages that feature your images and videos.

3. Disable pagebuilder … and see if anything breaks.

This the beginning of the fun part. Just deactivate your pagebuilder and see what breaks. The best case scenario, there’s maybe only very few shortcodes and/or you don’t even notice anything different. The worst case scenario is when entire layouts are broken/garbled or just plain disappeared.

The beauty of this diagnostic work is that you can do it from a staging site. So do all your playing there so you don’t break your live site!

Make note of which pages need repair and what things are broken/missing Examples below:

• Home – major broken layout, entire sections missing
• About/Contact – mostly fine but some shortcodes left behind
• Products – missing “Related Products” block
• Blog – missing newsletter widget

4. Rebuild broken pages

Ideally, you would have already converted all of your pages away from any pagebuilder reliance but we never know to what degree the pagebuilder is embedded in our site and we also tend to forget or overlook simple pages because they look so simple.

Rebuilding simple page designs (without pagebuilder)

This part is easy enough. Just re-paste the content back into the simple Gutenberg editor. And be done with it. Maybe you might lose on a few minor flashy effects here and there but I promise you’ll live without and won’t miss them later. If you absolutely love them…you can read the next section to learn how to retain them. 🙂

Rebuilding complicated page designs (without pagebuilder)

Tools I use:

• GeneratePress theme – super awesome theme bytes Tom Usborne, has free and paid version. Has design features called ELEMENTS and SECTIONS, which allow you to hook custom content and designs anywhere you like on your website, which in turn allows you to duplicate many pagebuilder features natively within the theme. If you’re going through the trouble of removing your pagebuilder, might as well start over with a bloat-free theme! I promise this one will be easy to customize how you like.
• GenerateBlocks – awesome Gutenberg blocks plugin by Tom Usborne, that allows you to create customized content/design layouts in your site. Super handy for recreating all the cool layouts that your pagebuilder had. I think with only the theme (GP) and this plugin (GB), you can do most pagebuilder things already!
• WP Show Posts – another useful plugin by Tom (yes, him again!) that allows you to call up your blog posts from other pages in your theme. You may or may not need this.

Rebuilding the layouts

Almost always, the main goal of pagebuilders is to give you custom layouts. And if you look at most sites with pagebuilders…their layouts are usually customized by:

• Putting content into multiple-columns. Instead of content just scrolling straight down in one column, you see it placed side-by-side usually along other visual elements.
• Stylizing the content with colors/images/textures within or around the content.
• New content positions. Like sticking things on the very side, or corners…super high on the page or down low. Or making them appear and disappear.
• You might also see added special effects like buttons, animations, or other mouse-over effects.

HOME PAGE SLIDER:

• This is a positional customization. Meaning, you can easily stick your slider into that specific area using your theme’s hook function. (If using GeneratePress, just use their ELEMENTS and SECTIONS features.)
• There’s a good chance the slider that came with your theme is super bloated (Revolution Slider) and should be replaced with something more lightweight like MetaSlider or Smart Slider.
• If you need to have text or buttons over that slider, you can easily do it with CSS. Either follow some guides or ask a programmer…should take maybe an hour of time.

MULTI-COLUMN CONTENT:

• Just about every pagebuilder site I see has the content split into 2, 3, or 4 columns. You can easily recreate this effect using the “Grid” block from the GenerateBlocks plugin.
• Simply create a grid with your desired number of columns and throw some content into there. Text, images, videos, whatever the heck you want.

STYLED BLOCKS:

• Did your pagebuilder have nicely colored blocks or cool backgrounds (that sometimes extend even beyond the boundaries of the block)?
• You can easily recreate that with the “Container” block in the GB plugin. Just create a block and then style it with the options.
• Anything super fancy/custom can be done with custom CSS. Again…ask a programmer for extra help if you need.

LATEST POSTS:

• Did you pagebuilder show like the 3 latest posts on your home page?
• You can easily recreate that using Tom’s WP Show Posts plugin. It queries those posts in an efficient way that doesn’t slow down your site.

PRICING TABLES:

• Hehe, you can use GenerateBlocks to do it. I think someone might have released a guide somewhere but I have no doubt you can figure it out with the Grid block in the GB plugin.

ANIMATIONS AND HOVER EFFECTS:

• Is your page design full of animations and random motions for every mouse-over? Please don’t try to save these!!! You really don’t need them.
• What? You STILL want to save them?
• Ok, fine. We’ll make a deal. Let’s save only the ones that can be done by CSS. Don’t waste your time with any that need JS as that starts to get really messy. JS animations either need entire libraries or small custom snippets, neither of which I think are easy to explain how to do.
• For simple CSS mouse-over animations, check out this github collection. Simply right-click the one you want and “Inspect”. Then copy its CSS style over the the items on your website.

Celebrate!

My god, did you really finish?!!!! It’s time to celebrate. I’m sure you already know by now how much faster your site is without the pagebuilder. Everything feels so super clean and lightweight. Super fast on frontend, and lightning fast on backend. And so much easier to edit everything.

My advice post pagebuilder-removal:

• Please hang on to your backups. I assume you did backup before tearing your site apart like this.
• Keep your pagebuilder installed. Just deactivated!
• You might notice some lost content or bits and things missing from your site over the next month or so. This especially common if your site has many pages and different layouts.
• If all is good after a couple months, you’re free and clear! Delete that pagebuilder and its related plugins forever! Woohooooo!!

Pagebuilder Removal Service (coming soon)

• Don’t want to do it yourself?
• Just ask me. I’ve been doing it for dozens of clients already and will soon release it as a standardized service.