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.
- 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.
- 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.
- 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.
- 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.
- 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.
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.
Spurred on by this article I’ve ditched Elementor and OceanWP … and embraced GeneratePress and GenerateBlocks.
It’s quite a feeling of accomplishment once finished. Thank you 🙂
(I have some formatting issues to sort out but I’ll tackle those over the next week or so, the bulk of the work is done)
Hey Richie! It’s awesome, right? How close were you to matching the exact design?
Pretty close to be honest. I only finished earlier today so I haven’t had a chance to go through everything in detail but I’m very happy.
The Home page certainly needs some work. And the Header / Menu area too. But I’m pretty confident that I’ll get there.
Not bad for a noob! 🙂
(Apologies for mis-spelling your name in the first comment, Johnny)
No offense taken! Congrats. I’m trying to convert as many clients over as possible.
I know it’s a pretty plain Home page but I wasn’t expecting the speed to be this quick: https://gtmetrix.com/reports/richiesroom.com/TzNBb4pS 🙂
Do I take it that some clients prefer the ‘bells and whistles’ of some designs over pure speed?
Hahah yes…some clients love flashy stuff. But with some education, they ease off. Btw…your site is looking weird for me.
OK, weird in what way?
Thank you for the article, good read. Can i ask you why have you chosen Gutenberg?
Hi Johnny. Awesome post!
I’m wondering if you ever had a website made with any pagebuilder that you couldn’t replicate with Gutenberg blocks? If so, what was the biggest challenge?
I’ve never made any website using a pagebuilder. You’re welcome to show me any you think are hard and I’ll tell you if I can do it or not. I have however made a handful of really custom designs that can’t be copied with pagebuilder, that’s for sure.
I don’t see my previous comment somewhy, but anyway.
I was asking if you had a client with a website made with a pagebuilder that you had to replace/redo and found it challenging.
I never did that, that’s why I’m curious. I’m only concerned about tiny animations like fade-ins, etc.
I see your previous comment just fine and replied to it. I usually don’t replace animations but that’s possible if you really really need that.
Just being here to say Thank you for your great insights and your love to teach them to me/us with all your fabulous content. Now I have to go to work.
Thank you Johnny. 🙂 Have a great day.
Thank you, JonnMc…don’t be late for work!
Thank you for your great article. I am in the process of removing my page builder Life Composer and, with your excellent guidance from this article, moving the content over to Gutenberg and the Generate Press theme.
For testing this I have a test page. According to your instruction above I am now at number 3. Pages, post, media and all is going well except for the partner pages. When I deactivated the page builder, the partner pages dissapeared. I think since the partner pages was built with the pagebuilder module, they ¨dissapear¨ when the page builder is no longer active. I would have been able to edit and fix things that do not look the same, but when the pages are no longer there I do not know how to proceed. Is also worried about the url, and confilcts if I just create new pages instead of the partner pages.
I’m not sure what you’re doing….but leave the pagebuilder enabled so you can use those pages as a reference. In the meanwhile you create new pages to match. Once everything matches, you switch their URL slug and THENNNN get rid of pagebuilder and old pagebuilder pages.
Thanks for your quick and helpful response. Will try to do as you recommend.
You and your articles are really a lifesaver for not a technical person. Thanks for being who you are and for sharing.
All the best,
Is it possible to create custom post page just like any themer using blocks.
And is qubely blocks good?
I think you’re talking about FSE features (coming soon). I do like Qubely. You can read my Gutenberg library review for more details why.
using page builder (siteorigin), then i’ve build some parts as a widget. there is a widget builder layout… so I can place my content anywhere i want. I can’t do that with gutemberg. so I can’t replace page builder by gutemberg….
for instance the bottom of my homepage
Home Decor Ideas
I tried Gutenberg but quickly realized it was going to drive me to drink by the time I had converted only one or two posts.
What you see is NOT what you get! You have to keep checking over and over and over again to see how the page is coming out. A HUGE time suck.. not to mention all the other aggravations.
I added a block.. for some reason it was added at the bottom of the page. I tried moving the block up.. it flew to the top of the page. I tried moving the block down.. it flew to the bottom of the page.
Not sure what the answer is.. but there certainly has to be a better solution than Gutneberg. There is a reason 5+ million people have installed the Classic Editor plugin!
You could simply use a pagebuilder, if that feels like the lesser of two evils for you. I operate from a dev-oriented workflow with strong priority on page speed and clean code…so Gutenberg wins hands-down for me.
Home Decor Ideas
I have a theme I love.. and I am using Elementor. But, I have a sinking feeling that both of them need to go with this latest Google update.
I am not sure how to do a staging site .. ?? Is that explained anywhere?
Also.. is GP theme a WYSIWYG (like Elementor) .. or do you have to keep checking the front end every 2 minutes to see if you are happy with the layout and keep going back and forth to tweak things until you get the proper proportions?
I am looking forward to trying this. I am actually using GeneratePress but the pre-built GP theme I used needed Beaver Builder which I want to get rid off.
Probably this post isn’t aimed to halfnoobs like me XD
I think the pagebuilder is more of a theme and functionality builder to me than building the layout and that’s where I can’t be without it.