What is a Click-to-Edit Website Builder?24th February 2019
Building a website used to be a challenging, time-consuming endeavor. It required experience and knowledge of coding in several languages, and you rarely had an overview of how the final result might look. While some still use this manual approach to site building, it’s by no means the only option.
In fact, today pretty much anyone can design a site in minutes without looking at a single line of code. This is thanks to the rise of the ‘page builders,’ which enable you to use an intuitive interface to edit your site’s layout and content directly. So what is a click-to-edit website builder? Glad you asked.
In this article, we’ll look at click-to-edit page builders and why they can be useful. We’ll also introduce you to Remixer and demonstrate how you can use it to create your own website in minutes.
What Are Click-to-Edit Website Builders (And How Do They Work)
A page builder is a tool used for building websites without the need to write code manually. They usually take the shape of visual What-You-See-Is-What-You-Get (WYSIWYG) editors, where you can edit the layout and content directly on the page.
While there are different styles of page builder, click-to-edit solutions use an interface where you simply need to click on an element on the page to edit it directly. For example, clicking on a piece of text lets you change its contents, styling, formatting, and more.
These tools give you a previously unprecedented level of control over your site’s design and layout. However, does that mean they’re the right tool for you? Let’s find out!
Why You Might Consider Using a Click-to-Edit Builder
There’s no shortage of benefits to using a click-to-edit builder, but the most important is how accessible they make designing a site. As they don’t require any coding, a click-to-edit builder enables even beginners to create striking designs in a matter of minutes. This makes them ideal for budding designers with limited-to-no experience working with HTML and CSS.
The intuitive, real-time interface also lets you immediately see how the final result will appear once published. Any changes you make will instantly be visible in the editor, so you always know exactly how your edits affect the site. This means it’s easy to make minor changes quickly, without needing external help.
Finally, a good click-to-edit builder will also help you easily create responsive websites. The design you create can easily be adapted to work on multiple different devices, such as smartphones and tablets. This is important as Google will likely penalize your site if it’s not compatible with mobile devices.
A Quick Look at Click-to-Edit Solutions
We’ve covered the benefits of using a click-to-edit builder, so let’s dig deeper into some actual applications. There are plenty of available tools specific to WordPress. Some of the most popular options include Divi, Elementor, and Beaver Builder.
All of these offer their own take on the page builder concept. For example, Elementor is an all-in-one solution for practically every aspect of site customization. While this makes it very extensive, it can also be somewhat daunting for a first time user.
Meanwhile, the Divi Builder offers great performance and the ability to perform A/B testing but doesn’t have a free version. Because it relies on shortcodes under the hood, you’ll also have to handle the ‘locked in’ element if you wish to switch solutions in the future.
In contrast, Beaver Builder is one of the easiest tools to use, but it’s also the most expensive. It also lacks the ability to perform in-line editing. Even so, it’s popular with many WordPress users.
Even WordPress itself is getting in on the action with the Gutenberg editor. This will transform the current content editor with an interface inspired by page builders.
An alternative to these solutions is the Remixer click-to-edit builder, which allows users to set up a site quickly and then easily export it to WordPress when they’re ready to add additional functionality. Let’s take a slightly extended look at this builder before we move onto the fun part of creating a site.
An Introduction to Remixer
Remixer is a click-to-edit builder by DreamHost that launched in 2017. Its goal is to offer a way for users to create an easy-to-maintain site without too much expense.
Using Remixer, even a complete beginner can create a professional-looking website in a few minutes. This is largely thanks to its intuitive interface but also the gallery of pre-built templates and stock images that are free to use.
If you want to create a simple site that’s easy to maintain, Remixer is the ideal choice. It doesn’t require any coding knowledge or additional plugins. The tool even features a site creation wizard to make things easier. Finally, Remixer is also included with DreamHost’s shared hosting plan. Plus, Remixer can grow with your needs. If you find you need to add ecommerce or blogging functionality down the road, you can export your Remixer site to WordPress.
Need a Beautiful Website?
Design it yourself with Remixer, our easy-to-use website builder. No coding required.
How to Create a Site With the Remixer Page Builder (In 3 Steps)
Let’s now look into building a site using Remixer, which requires a DreamHost account.
Step 1. Choose a Template
When you’ve signed in, you can access Remixer straight from your DreamHost control panel. Simply select Remixer > Dashboard in the left-hand menu, then select the Start using Remixer button.
This opens a new tab with the Remixer interface. Here, your first step is to select a theme to use as the base for your site. You will be able to edit this extensively so consider it just a starting point.
You can either hover over a theme and click Select Theme to get started.
However, if you’d like to customize the theme further first, you can click the Create option in the top right menu. This will open a short wizard consisting of a few steps where you can configure the theme. In the first step (Layout), you’ll be given a choice of three templates.
When you select one, you’ll get the opportunity to choose a color scheme for your theme. Select one to see how the preview on the left updates.
Click Choose Images to proceed to the next step. Here you can choose a set of stock images to use.
Of course, you don’t need to use these images and will be able to import your own later. However, it can be useful to select suitable placeholder images that match your vision during the design process.
Select the images you want, then click Choose Fonts. You’ll now be able to select a font pair to use on your site.
Once you’ve chosen a pair you like, you can click Preview Site to see the theme you’ve created.
As we said, this is not necessarily the final design but a solid foundation. However, you have just made some of the most important choices when it comes to your overall design and layout before fine-tuning your creation. To do so, click Save and edit this site to open the Remixer builder.
Step 2. Edit the Design and Content
Since the Remixer builder uses a click-to-edit interface, you’ve probably already figured out how it works. All you need to do is to simply click on any page element to edit it.
To try this out, click on the subheader beneath the title text. You’ll see you can change the text and apply various styling and formatting.
When you’re done, click elsewhere and you’ll see how your changes are instantly visible.
Certain page elements have unique settings, which will appear dynamically when the element is selected. For example, if you were to select the header image, you’ll notice that the menu on the left will update to display settings related to the image.
From here, you can easily change the image, crop it, adjust its size, or rotate it. You can choose an existing stock image or replace it with one of your own. Remixer even enables you to apply filters to images.
If you want to add a new element, you should look for the blue New buttons placed between existing page elements.
Clicking one of these opens a new section where you can select the element you want to add. Select the one you want, and it will appear instantly on the page, where you can edit it like any other element.
You’re now free to design your site as you please, editing and adding new elements as required. Once you’ve completed the design, it’s time to publish it.
Step 3. Publish Your Site With One Click
When you’ve completed your site, all that remains is to publish it. Fortunately, this process is very simple. You can publish the site using a randomly generated domain, but it’s more likely you’ll want to use a custom domain.
To do this, you’ll need to make sure no page element is selected so that the Website Directory option is available in the menu.
Here you can select the domain you want to use for your new site. You can either select an existing one in the list or click the link to purchase a new domain.
If you select a domain already assigned to a site, you’ll see a warning message. You can opt to replace the existing site with the one you’ve just created. The old website files will still be saved offline on your shared hosting server in case you wanted to switch back to your previous website.
When you’ve selected a domain, click the Publish option in the top-right corner.
This will compile your site and publish it. When you’re done, the button you just clicked will change to say View. Click this to see the site in a new tab, and your site is now live and ready to go! You can return to Remixer to edit the site as you please and publish your changes or create a new site altogether.
Note: If you are publishing Remixer to your domain for the very first time, there can be an initial delay for DNS to propagate before your new Remixer site is visible in the wild.
A Beautiful Site Is Waiting
Click-to-edit website builders like Remixer have made site design possible for even those with zero coding knowledge. They let all users, regardless of skill level, create stunning, functional websites in a matter of minutes.
The post What is a Click-to-Edit Website Builder? appeared first on Welcome to the Official DreamHost Blog.