One liner to define Builder.io would be – a new headless CMS in the market that uses drag and drop abilities to build web pages. It is the only Headless CMS with that feature supported by Angular, Vue, React, Preact, etc.
I have written one brief and one detailed blog on Headless CMS. Check them out if you want to read more on the Headless CMS topic.
What is headless CMS? Why use it and much more
Coming back to Builder.io, Let's start with building a Landing Page with Builder.io, and then we move to Templates. Before that, let's see some UX stats from LeadPages you need to know in 2023
- More than 70 percent of small business websites do not use a call to action (CTA) button.
- The global UI and UX Design Software market size are valued at $960.19 million.
- 28% of small businesses still don’t have a website.
The stats show that there are ample opportunities lie in this domain of business. It's worth learning creating landing pages and website pages.
Creating Landing Pages and Webpages with Builder.io
Builder.io uses a block model. It has a Theme studio that contains templates for product pages, landing pages, blog pages, individual section collections, custom pages, and more. All the templates are editable according to your requirements. These themes help designers/developers, or anyone for that matter, to build websites faster while driving more conversions.
The visual composer of builder looks like this; you have the elements and editing tools on the left-hand side of the page from where you drag and drop items and adjust their height and width to create the landing page you want.
Click the 'New Custom Page' button on the left sidebar to start building a new page.
Then builder will ask you to write a name for the page.
After saving its name, you go straight ahead to the blank page if you have chosen a blank page to create a new one. If you have chosen a template to work on, you will be directed to that.
As you can see that a blank page appears in this case, and the editing tools are on the left. This layout is similar to Elementor for more than one reason. Of course, its position is identical to Elementor's, but when you choose a single section to edit, the tools just shuffle and show the tools to edit the individual sections. A few website builders show a bottom or right bar along with the left for editing. The builder's and Elementor's layout seems neat and workable.
The page-building process is easy as in any drag-and-drop tool. You drag the elements you want on the page, be it a CTA button, hero image, rich text, image, or videos, among others.
Then click on each section to adjust it according to your page.
Builder.io also shows you a mobile view which you can toggle from the top of the screen. The changes you make on mobile view will only be effective on mobile screens and smaller devices.
There's not much learning curve here if you have worked on any other low code or no code platform.
Similarly, you can create any service page or product page by placing the elements on the page where you want them. While creating a product page, you would want to use it again for all the product pages. In that case, you can create a template, save it and use it as many times as you can for all the product pages.
Creating a Template in Builder.io
You can save a single element, a group of elements, or a single page as a template.
Select any later or a group of layers on the page, click on the drop-down menu with the edit button and click on Save as a template from the drop-down menu.
Give your template a name, enter the tags, and upload a screenshot so it is easily recognizable when thumbnail view mode is on and save it.
When editing a page or creating a new one, simply go to My Templates, search your template and use it whenever or wherever you want.
We also worked on building the Shopify store using builder.io and checked its page speed performance.
