How do website builders work?

What are website templates?

The first thing you will need to do when using most website builders is to select a website template. A website template is a pre-designed website framework that comes with built-in elements and content. Most website builders will have templates for a variety of industries and business types with features that will help that specific type of website function correctly. 

For example, a yoga studio website template might come loaded with an attractive header image, a calendar to showcase class timetables, a bookings feature so that clients can book classes and a contact us page so visitors can call or email for more information. Website builder users can then simply edit the text and image content so that it is relevant for their particular business. 

So, web templates effectively give you a head start in creating a website and make the process much quicker. The templates are also designed by professionals with lots of experience. Therefore you’ll benefit from expert web designs when using a template and all you have to do is swap in your content. To edit the content you will need to use the WYSIWYG editor…

What does WYSIWYG stand for?

Most online website builders have WYSIWYG editors. WYSIWYG stands for ‘what you see is what you get’ and it refers to the editing system that allows you to make edits to web pages that look exactly the same as the live version of the web page. This type of website editor has replaced the traditional backend/frontend model and the need to use markup language to make formatting changes. 

WYSIWYG editors simplify the process of making a website. Instead of having to input markup language, you can edit the format of web pages by clicking buttons like bold, italicise, underline etc. Additionally, you see what the effects of your edits look like immediately, rather than having to wait for the page to be published to your website.

The most basic form of a WYSIWYG editor is a word processor. When you highlight and click bold, or change the font type or sizing, you can see the text change immediately on the page you are working from. Website builders applied the same principles to editing and building a website.

What is a drag and drop editor?

Not all website builders have a drag and drop editor. However, most of the good ones do. You might find some that use point-and-click style editors but we recommend drag and drop editors as they are easier to use and more intuitive. But what are they? Well, they allow users to click and hold the mouse over an element on the editing page and drag it to a new location. Once the element is hovering in the new location, the user can release the mouse to drop the element in its new home. This creates an interactive and very user-friendly system that makes building a website possible for anyone with rudimentary computer skills. It also makes building a website much faster for experienced developers. 

A website is made up of a series of code and each element (heading, image, text box, etc.) available on website builders has its own specific HTML & CSS code. When you move an element to a new location on your web page with a drag and drop editor, you are basically changing the order of the code to make the element appear in a new location. However, instead of having to manually cut and paste the code relevant to particular elements, you just have to grab it with your cursor and visually move it to a new location. The benefit is that you never have to work directly with the HTML & CSS files to edit your website.