The Simplest Case for Why You Should Never Use a Site Builder

Don’t want to read my little rant? Click here to get the gist in a visual way.

They come in a variety of flavors. From companies like SquareSpace and Wix to WordPress plugins like Beaver Builder and Divi, the concept is the same: allow someone who doesn’t know how to code to create their own website.

And, they’re all garbage.

Let me explain why, as simply as possible, but first, yes, there is a conflict of interest here. I am a web designer and developer. If everyone used these services and plugins, I’d be out of a job. One problem is, many companies out there calling themselves “web designers” are just using pre-built templates which they buy for $35, slap together, and charge their clients a few thousand dollars for. Those people are snake oil salesman, promising a website but delivering none of the SEO, speed and thoughtful design that web design entails.

I, and my fellow true designers and developers, do not just slap together something someone else built. We build works of art, pristinely engineered lines of code, the complete experience. If the average person can build a soap box car that looks nice with page builders, then my colleagues and I are creating space ships. Or inversely, if my colleagues and I are creating soaring great blue herons, people working with page builders are effectively the creators of squashed bugs.

Why, though?

Design aside, though that is a skill even more difficult to attain than solid coding, the web is all about optimization. Google is crazy for it. They judge your site on speed, the format of your HTML, and these page builders simply can’t do that. They clutter your HTML, which slows down your site. They clutter your database, which slows down your site.

But I think this illustration from a project I’m working to fix right now shows how clearly bloated these page builders are.

Here is the code I need to remove, the exact code that a particular page builder inserts into a page to begin creating a link.

[fusion_separator style_type="shadow" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="" id="" sep_color="" top_margin="" bottom_margin="" border_size="" icon="" icon_circle="" icon_circle_color="" width="" alignment="center" /]
[/fusion_builder_column]
[/fusion_builder_row]
[/fusion_builder_container]
[fusion_builder_container hundred_percent="no" hundred_percent_height="no" hundred_percent_height_scroll="no" hundred_percent_height_center_content="yes" equal_height_columns="no" menu_anchor="" hide_on_mobile="
small-visibility,medium-visibility,large-visibility" class="" id="" background_color="" background_image=""
background_position="center center" background_repeat="no-repeat" fade="no" background_parallax="none"
enable_mobile="no" parallax_speed="0.3" video_mp4="" video_webm="" video_ogv="" video_url="" video_aspect_ratio="16:9"
video_loop="yes" video_mute="yes" video_preview_image="" border_size="" border_color="" border_style="solid"
margin_top="" margin_bottom="" padding_top="" padding_right="" padding_bottom="" padding_left=""]
[fusion_builder_row]
[fusion_builder_column type="1_2" layout="1_1" spacing="" center_content="no" link="" target="_self" min_height=""
hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="" id="" background_color=""
background_image="" background_position="left top" background_repeat="no-repeat" hover_type="none" border_size="0"
border_color="" border_style="solid" border_position="all" padding_top="" padding_right="" padding_bottom=""
padding_left="" margin_top="" margin_bottom="" animation_type="" animation_direction="left" animation_speed="0.3"
animation_offset="" last="no"]
[fusion_imageframe image_id="13468|full" max_width="" style_type="none" blur="" stylecolor="" hover_type="zoomin"
bordersize="" bordercolor="" borderradius="" align="right" lightbox="no" gallery_id="" lightbox_image="" lightbox_image_id="" alt="" link="

And here’s what I’m replacing it with. Again, the above is everything the page builder added, and below is the actual code which is needed. Seriously, this is not a typo, this is all that is needed to reproduce exactly what that code above does.

<a href="

WTF page builder? Seriously. That code in my bottom snippet is the code which starts a link. Think about how many links will be on your site. Replacing those 9 characters with the hundreds (1,941 actually) characters the page builder uses every single time is going to:

  1. Slow down your site
  2. Frustrate your visitors
  3. Possibly cost you money, if your host limits how large your database can be

Think that’s crazy? Look at what this page builder requires for an entire link (the above is just the beginning of a link), with an image in it.

[fusion_separator style_type="shadow" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="" id="" sep_color="" top_margin="" bottom_margin="" border_size="" icon="" icon_circle="" icon_circle_color="" width="" alignment="center" /]
[/fusion_builder_column]
[/fusion_builder_row]
[/fusion_builder_container]
[fusion_builder_container hundred_percent="no" hundred_percent_height="no" hundred_percent_height_scroll="no" hundred_percent_height_center_content="yes" equal_height_columns="no" menu_anchor="" hide_on_mobile="
small-visibility,medium-visibility,large-visibility" class="" id="" background_color="" background_image=""
background_position="center center" background_repeat="no-repeat" fade="no" background_parallax="none"
enable_mobile="no" parallax_speed="0.3" video_mp4="" video_webm="" video_ogv="" video_url=""
video_aspect_ratio="16:9" video_loop="yes" video_mute="yes" video_preview_image="" border_size=""
border_color="" border_style="solid" margin_top="" margin_bottom="" padding_top="" padding_right=""
padding_bottom="" padding_left=""]
[fusion_builder_row]
[fusion_builder_column type="1_2" layout="1_1" spacing="" center_content="no" link="" target="_self"
min_height="" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="" id=""
background_color="" background_image="" background_position="left top" background_repeat="no-repeat"
hover_type="none" border_size="0" border_color="" border_style="solid" border_position="all" padding_top=""
padding_right="" padding_bottom="" padding_left="" margin_top="" margin_bottom="" animation_type=""
animation_direction="left" animation_speed="0.3" animation_offset="" last="no"]
[fusion_imageframe image_id="13468|full" max_width="" style_type="none" blur="" stylecolor=""
hover_type="zoomin" bordersize="" bordercolor="" borderradius="" align="right" lightbox="no" gallery_id=""
lightbox_image="" lightbox_image_id="" alt="" link="https://website.com" linktarget="_self"
hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="" id="" animation_type=""
animation_direction="left" animation_speed="0.3" animation_offset=""]myimage.jpg
[/fusion_imageframe]
[fusion_accordion type="" boxed_mode="" border_size="1" border_color="" background_color="" hover_color=""
divider_line="" icon_size="" icon_color="" icon_boxed_mode="" icon_alignment="" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="" id=""]
[fusion_toggle title="Product Assortment" open="no"]

And how much code do we need to recreate that?

<a href="https://website.com"><img src="myimage.jpg" width="100" height="100" alt="a description"></a>

Hopefully, this has been fun. 😛

Up Next: Stop Woocommerce from Pulling from the Default single.php