When you’re building websites, it’s helpful to see what is going on in the front-end.
However, that often requires you to have two tabs open. You need one tab for editing and building your site and the other tab to see the changes you’ve made.
That’s where live website editing comes in handy — a feature that’s built into some website builders like the Bluehost Website Builder.
We’ll explain how live website editors work and show you how to make the most of the live website editing feature so you can design a wow-worthy website and have a smoother workflow.
How Live Website Editing Works
Making the Most of Live Website Editing
Live Website Editing With Bluehost’s Website Builder
Final Thoughts: How To Make the Most of Live Website Editing
How Live Website Editing Works
Live website editing is a common feature in website builders. As the name implies, it allows you to instantly see the changes on your website as you’re making them.
In other words, as soon as you add a block or a section to your page, you can immediately see where that block is placed. That is often described as What You See Is What You Get or WYSIWYG.
The way it works is simple. When you open a page to work on, you’ll see several things on your screen. First, you’ll see your existing page or a blank page if you’re starting from scratch. You’ll also see website builder design elements that you can add to your site.
Clicking an element will select it, and you can then drag and drop it into the live page editor. Thanks to live website editing, you’ll see that happen immediately. No HTML editor, CSS and Javascript, or special dev tools are required.
You can move blocks or sections around and adjust their position on the page until you’re happy with how your page looks. Remember, there is no need to open two separate tabs or refresh the live webpage editor to see the changes.
The biggest benefit of building your website with the live website editor functionality is that it allows you to plan your page layout better. It gives you more freedom when building your website as you can instantly adjust the layout and spacing.
Another benefit of this approach is that there is no coding involved. You can design your website visually and position elements exactly where you want them, all without having to use a code editor or even view the website’s source code to do HTML editing. You don’t have to understand web development.
For example, maybe you’ve added a business hours section to your website and now want to add a call to action section. But then, you realize that a testimonial block between those sections would be great to establish your credibility.
When you edit a webpage live, you can instantly see how those changes would look and even revert them if you decide you don’t like it.
That gives you more freedom during the web design process as you can experiment with different options before you’re ready to publish your website.
Without live website editors, you’d have to make a change, save it, publish the page on your site, and only then you’d be able to see how that change looks.
Website design without the live editing feature can also harm your website visitors. For example, if you want to change how a specific section looks, the layout and the look could suddenly change for them if your builder doesn’t have the live editing feature.
But with live editing, you can experiment to your heart’s content and only publish the changes when you’re happy with the result.
Making the Most of Live Website Editing
So now that you know what live editing is and how it works, let’s talk about how to make the most of this feature.
The most important thing to remember is that while live website editors are great to see how your page is developing and how it will look in web browsers like Google Chrome, Firefox, or Safari, not all elements need to be edited in such a fashion.
Some elements on your website will have predetermined layouts that you shouldn’t change.
For example, blog posts typically have a title, followed by a featured image and then the body of the post. Some blogs also feature a sidebar.
While you can change some things, such as move the featured image above the title or remove the sidebar, you shouldn’t completely change how the blog post is laid out. After all, you want to match the user’s expectations to ensure a good user experience.
Not to mention, modifying the blog post layout to have the title and the image on the side with the body of the post split into three columns would make the reading experience terrible.
As such, any element that has a predetermined layout visitors have come to expect can be edited without the live website editing feature. That includes back-end details like modifying website plugins or adjusting SEO optimization.
Another common example of elements that have a pretty standardized layout is shop and product pages.
Typically, shop pages display products laid out in a grid. Individual product pages have a product image on one side and a brief description on the other side. A longer description then follows this.
Most customers expect that type of layout, and seeing something completely different might confuse them and even cause them to click away from your website. So, product and shop pages are another element that doesn’t need to be edited with the live website editor.
Instead, you can live edit important elements for the overall page layout. For example, adding a section for a call to action or a cover image can drastically change how your page looks.
Elements like these are great to manipulate in live web editor mode, as you can see exactly how the page will look.
You also have more freedom with these individual elements. Not only can you control the position on the page, but they also have their style settings. Changing them without the live edits feature could lead you to add a cover page with an image and edit text that’s unreadable because the image is too dark for the text to stand out.
Another way of making the most of the live website editor is using it to see how your website looks on mobile devices. You can see if the image gets cut off weirdly or if the text is too big for smaller screens.
You can also check if the interactive elements are far enough apart so that it’s easy to type in the text editor or click on the buttons. That lets you fine-tune your website for smaller screens without having to pull up a phone to check how it looks.
Live Website Editing With Bluehost’s Website Builder
As mentioned earlier, the Bluehost Website Builder comes with a built-in live website editor. That means everything we’ve discussed above is available to you. You can instantly view the potential changes to your website in real-time in a live preview as you build.
That way, you don’t have to worry about publishing your site only to discover something doesn’t look right.
To get started with the live website editing and Bluehost Website Builder, head on to your Bluehost Portal. Once you’ve logged in, click on the button that prompts you to edit the site with the Editor.
You’ll be taken to the Bluehost Website Builder screen, where you’ll be able to make changes and see them immediately as well as switch over to the WordPress editor should the need arise.
For example, here is a simple portfolio website with a homepage that uses several different sections. It has a cover image section at the top, followed by a text/media section.
As soon as you click on the media/text section, the settings for that section open up. When you start playing around with the different options, you’ll see live editing in a CMS in action. For instance, If you toggle the image off, it will instantly disappear from my page.
Similarly, if you click on the Background tab and select the pink color, the background color of that section will instantly change.
In addition, the live editing feature makes it easy to test out different layout options for each section. It also lets you rearrange sections to find the perfect layout for your website pages.
Final Thoughts: How To Make the Most of Live Website Editing
Live website editing makes it easy to see how your website develops as you’re building out your pages. It’s easier to adjust your layout, make it more visually appealing and adapt it for smaller screens.
The live website editor also gives you all the freedom to experiment with different layouts, colors and other visual styles without the fear of changing how your website appears to your visitors.
With the Bluehost Website Builder, you can easily use the live website editor to build a beautiful website without any coding. Simply pick the Bluehost Website Builder plan that’s right for your business with the right pricing and start creating your site.
