{"id":1076,"date":"2024-08-26T13:19:36","date_gmt":"2024-08-26T13:19:36","guid":{"rendered":"https:\/\/less-code.com\/?p=1076"},"modified":"2024-10-27T20:52:19","modified_gmt":"2024-10-27T20:52:19","slug":"development-with-wordpress-page-builders","status":"publish","type":"post","link":"https:\/\/less-code.com\/blog\/development-with-wordpress-page-builders\/","title":{"rendered":"Low-code development with WordPress Page Builders"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Before I dive in, I want to make it clear from the outset that I\u2019m not trying to argue that this method is better or suitable for everyone. My opinion is simple: the best approach is to start from scratch, that is, to program a good template and do it right. But is it always worth it? I think not. Especially when the client doesn\u2019t have a large budget or when the website they plan to create doesn\u2019t have extreme requirements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, let\u2019s get back to the main topic, as there\u2019s a lot happening in this area lately.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Currently, there are at least a few builders on the market: Divi, Beaver Builder, WP Bakery, Elementor, Oxygen, and Bricks.io. There are probably many others I haven\u2019t heard of yet, or they\u2019re so bad that they\u2019re not even worth mentioning. To be honest, the ones listed above aren\u2019t all great either, and unfortunately, some of these builders are far from high quality.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What WordPress Builders Offer<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Every builder available on the market offers something highly desirable: the ability to visually edit a page or post. By &#8220;visually,&#8221; we mean editing in a way that allows you to make changes directly in the view seen by the end user. You click &#8220;edit,&#8221; and you can easily change the position of any element, adjust colors, font sizes, or make any other changes you desire.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In addition to page editing, some builders also offer the ability to add headers or footers to the template and configure various widgets anywhere on the site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thanks to these features, even complex websites can be created 60% &#8211; 70% faster, making the process extremely cost-effective. Unfortunately, it\u2019s common for uninformed clients to pay for websites built with low-quality builders as if they were custom themes, without realizing what\u2019s happening. That\u2019s why it\u2019s crucial to ensure a clear technical specification is in place when signing a contract.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Advantages of Using WordPress Builders<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you choose a good builder, the pros far outweigh the cons. There are certainly many who will argue that it\u2019s not worth it, calling it amateurish, but this is similar to the perception some have of WordPress itself. Many still think that WordPress is a flawed tool full of vulnerabilities, which is absolutely not true. In fact, many large and respected global brands gladly use WordPress as the system to build their websites. They could afford any approach, yet they often choose WordPress\u2014and sometimes even builders.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here are some key advantages of using WordPress page builders:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Speed of Development:<\/strong> Building even a complex website takes much less time since there\u2019s no need to write any code. You can &#8220;click through&#8221; the creation process, significantly speeding up development.<\/li>\n\n\n\n<li><strong>Simplicity:<\/strong> Builders are generally easy to use and don\u2019t require any technical knowledge or programming skills.<\/li>\n\n\n\n<li><strong>Cost-Effectiveness:<\/strong> The cost of building a website with a builder is usually more attractive for users, offering a budget-friendly option.<\/li>\n\n\n\n<li><strong>Rich Features and Pre-Built Modules:<\/strong> Builders typically come with a variety of built-in modules, such as accordions, carousels, and a set of WooCommerce modules, allowing for greater functionality without additional coding.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Drawbacks of Using Builders<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now we come to the point where I\u2019ll explain step by step why, unfortunately, many builders still have significant drawbacks, and why we at less-code have chosen one that virtually eliminates these issues :) (yes, it\u2019s possible).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The vast majority of builders rely on jQuery, which, unfortunately, is not the best solution in today&#8217;s web development environment. First, jQuery is a heavy library, and it\u2019s not the fastest either. Moreover, many builders use dozens of additional libraries to manage various components, all of which depend on jQuery.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To give you a simple example, consider a basic function that adds a CSS class to an element when clicked.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here\u2019s an example using Vanilla JS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>document.getElementById(\"yourButtonId\").addEventListener(\"click\", function() { \n    this.classList.add(\"yourClassName\"); \n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">And here\u2019s the same thing using jQuery:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$(\"#yourButtonId\").click(function() { \n    $(this).addClass(\"yourClassName\"); \n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">They look similar, right? But with jQuery, you have to load a massive library onto your site just to run such a simple function. It\u2019s a classic case of overkill, with no rational justification for using jQuery. Yes, it\u2019s often simpler and can make some tasks easier, but easier doesn\u2019t necessarily mean better.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Another issue is the quality of the code itself. Unfortunately, many builders were developed quite some time ago, and the way they were built means that even with the best intentions, refactoring them often isn\u2019t possible or would cause so many problems that developers are stuck in this outdated environment, trying to make the best of a bad situation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you\u2019re planning to create a simple business card site with no advanced functionalities, you can choose any builder. Any of them will meet your expectations and should work without major issues.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, if you want to build a complex website that\u2019s easy to manage, you need to choose wisely.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The last thing that might be an issue for some is that if you don\u2019t keep your builder up to date, you could face a lot of problems, especially with those builders that aren\u2019t top-tier in terms of quality. Remember, it\u2019s not the case that once installed, a builder will work forever\u2014in fact, quite the opposite. Updates are crucial, especially for security reasons.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Which WordPress Builder to Choose<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In our opinion, if you&#8217;re looking to create high-quality websites using a builder, the only good option is <strong>Bricks.io<\/strong>. And no, this post isn\u2019t an advertisement. After 10 years of working with every builder available on the market, Bricks.io is simply the product that works best.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">First and foremost, it\u2019s incredibly fast, built without using jQuery. We have no trouble achieving more than 95 points on Google Page Speed for mobile devices, even on very complex websites.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The editing capabilities are vast, including CSS Grid and practically everything possible with CSS, even the most advanced techniques that some might not even be aware of.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2858\" height=\"1352\" src=\"https:\/\/less-code.com\/wp-content\/uploads\/2024\/08\/Screen-Shot-2024-08-26-at-15.16.42.png\" alt=\"Bricks builder edit mode\" class=\"wp-image-1081\" srcset=\"https:\/\/less-code.com\/wp-content\/uploads\/2024\/08\/Screen-Shot-2024-08-26-at-15.16.42.png 2858w, https:\/\/less-code.com\/wp-content\/uploads\/2024\/08\/Screen-Shot-2024-08-26-at-15.16.42-300x142.png 300w, https:\/\/less-code.com\/wp-content\/uploads\/2024\/08\/Screen-Shot-2024-08-26-at-15.16.42-1024x484.png 1024w, https:\/\/less-code.com\/wp-content\/uploads\/2024\/08\/Screen-Shot-2024-08-26-at-15.16.42-768x363.png 768w, https:\/\/less-code.com\/wp-content\/uploads\/2024\/08\/Screen-Shot-2024-08-26-at-15.16.42-1536x727.png 1536w, https:\/\/less-code.com\/wp-content\/uploads\/2024\/08\/Screen-Shot-2024-08-26-at-15.16.42-2048x969.png 2048w\" sizes=\"(max-width: 2858px) 100vw, 2858px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Bricks.io works seamlessly with the ACF plugin, allowing every element to add dynamic data. It also features an advanced \u201cquery builder\u201d that lets you create even the most complex loops that would take a novice developer many hours.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you\u2019re looking to build a WooCommerce store, Bricks.io includes all the necessary modules to create a fully functional store with advanced filtering options.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The same goes for forms, user creation, and more.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Another great feature is the ability to add code anywhere using a dedicated module. You can easily call functions written in PHP or JavaScript. You can also use WordPress hooks and filters, create new ones, and integrate them into your templates.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s also worth mentioning the interactions feature, which allows you to build animations and create limitless possibilities on your site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">What truly sets Bricks.io apart from the competition is the quality of the HTML code it generates. Unlike other builders, everything here is incredibly clean, without dozens of nested elements, resulting in a smaller DOM and much faster page loading times. This works so well because Bricks.io (correct me if I\u2019m wrong) generates most of the CSS for specific templates, which means that instead of creating dozens of nested elements, it produces well-prepared HTML and generates the appropriate styles.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Summary<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are many builders available for WordPress, but only a few meet high standards and are well-written. We recommend Bricks.io because it has never let us down. Are there other builders that are just as good? Probably, but you\u2019ll have to evaluate that for yourself.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Before I dive in, I want to make it clear from the outset that I\u2019m not trying to argue that this method is better or suitable for everyone. My opinion is simple: the best approach is to start from scratch, that is, to program a good template and do it right. But is it always [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1082,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-1076","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/less-code.com\/wp-json\/wp\/v2\/posts\/1076","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/less-code.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/less-code.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/less-code.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/less-code.com\/wp-json\/wp\/v2\/comments?post=1076"}],"version-history":[{"count":10,"href":"https:\/\/less-code.com\/wp-json\/wp\/v2\/posts\/1076\/revisions"}],"predecessor-version":[{"id":1538,"href":"https:\/\/less-code.com\/wp-json\/wp\/v2\/posts\/1076\/revisions\/1538"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/less-code.com\/wp-json\/wp\/v2\/media\/1082"}],"wp:attachment":[{"href":"https:\/\/less-code.com\/wp-json\/wp\/v2\/media?parent=1076"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/less-code.com\/wp-json\/wp\/v2\/categories?post=1076"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/less-code.com\/wp-json\/wp\/v2\/tags?post=1076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}