This article was sponsored by Simbla. Thank you for supporting the sponsors who make SitePoint possible.
I have tried and used many different types of website builders over the past few years. I’ve also talked to and worked with several business owners who have tried the different website builders that are available on the web.
One thing that is true of most of the website builders out there is that they can only take you so far. They all seem to fall short in some area. They might be easy to use to build gorgeous sites, but they are terrible for SEO. They may enable you to build beautiful websites, but they are difficult to use.
Simbla, a newer website builder, aims to solve all of those problems by being an all-inclusive package.
What is Simbla?
Simbla is a website builder that uses Bootstrap 3 to create HTML5 websites that look great, are easy to create, and that are great for SEO (search engine optimization). This is where competitors fall short. A lot of website builders don’t produce web standards compliant output, making it difficult for search engines to index or understand the content displayed on their sites.
Simbla has a sitemap generator that creates a sitemap in XML, the standard format. You’ll use this in Webmaster Tools to have Google crawl your site. Simbla also uses the standard HTML metadata you would expect from a legitimate website, with titles and keywords. It also produces search engine-friendly URLs for your pages. There won’t be any strange extensions or page numbers for your website. You can also include Google Analytics tracking, just as you can on any other standard website.
There are two different modes for using Simbla. You’ll be able to choose from Easy Mode and Pro Mode. This makes it easy to get started if you don’t have much experience building a website, but gives you the unique opportunity to access full functionality as you improve your web development skills.
Easy Mode is just how it sounds. You can use a drag and drop page builder to drag structural elements onto the page. Surprisingly, unlike most other builders that boast this technique, there are tons of flexible, useful modules that you can use to build any type of site you want. There is a huge variety of prebuilt sections to choose from. Each preview is pre-populated with dummy content, so you can see how it is supposed to look. Then, you simply click on each part of the module to replace images and text. I have really never seen this done so easily, smoothly, and quickly. You’d think there would be a lot of loading and lag time with this running in the browser. That isn’t the case. Simbla runs as smoothly as a lightweight desktop app.
Pro mode is for when you’ve been around the block, and you want to have complete control over every single little detail of your site. You enable it by clicking the Pro button at the top of the screen, close to the center. You’ll receive a warning that you’re entering Pro Mode, and then after confirmation, your canvas area will change a little. The modules are more simplified and refined to framework elements.
Pro mode is more advanced and requires knowledge of website structure, including headers, dynamic content, and containers. Knowing how the structure works in Bootstrap is essential to building a site using Simbla’s Pro Mode.
The elements are still set up with drag and drop functionality, but you’ll have access to features that require a little experience. You can set up your own grid, giving you control over the structure of the site, but you’ll also be able to access and control elements you’d expect, such as text, carousels, videos, menus, forms, and more. You start with a blank canvas and bring your vision to life. This is unlike easy mode, where you drag pre-built elements onto the canvas and swap things out.
Pro Mode allows you to insert your own HTML, and you can create your own custom menus however you’d like.
Pro Mode is a little tougher to visualize, but you can always hit the preview button to see your work and how it looks so far.
I like that Simbla doesn’t paint you into a corner. When using Simbla I expected, even in Pro Mode, that when you drag out structural elements, you wouldn’t be able to reposition them. This couldn’t be more false. I inserted a header and a form, and then I realized it might be a good idea to have a container. I was easily able to drag the container to the canvas, and then I could reposition and drag elements within the canvas. I could easily nest anything within a container, and I could drag and drop any element I wanted.
Imagine being able to edit the look of your site with one click. Essentially, that’s what you can do with Simbla’s Theme Maker.
You’ll find something that looks like a rounded color palette on the left side. When you click it, a full panel comes up with a list of already made themes. These themes contain fonts, colors, backgrounds, and more.
With each theme choice, you’ll find variations of A, B, C, and D. These are variations of that theme, broken down for each individual content section. This is great because you can change it with one simple click. You can even edit existing themes to tweak them to your liking.
You can also create your own themes. You can control headings, fonts, link colors, icon colors, buttons, and backgrounds. This enables you to customize the entire look and feel of your site without code. You can make backgrounds a solid color, or you can fill them with patterns. You can refine elements like text by choosing font weights, styles, colors, size, and leading. This provides the ultimate experience in flexibility and control.
I have to admit that I hate forms. To me, designing forms is a pain, with all of the labels and fields that go into building them. Simbla makes forms easy, with the ability to add whatever input types you want, including text boxes, text areas, radio buttons, checkboxes and dropdown menus. You can drag and reposition any field at any time. You can also control what type of data you collect, and you can style your form any way imaginable. You could use this in several ways. On one page, you could have a questionnaire for new clients, while on another page, you could have a fully functional contact form.
Tired of your old design? Easily edit any page and drag new layouts onto a page. Restructure the content, hit publish, and you’ve redesigned any page in minutes!
True Drag and Drop
I’ve tried out drag and drop site builders before. Usually, they are limited in how well they work. You can drag modules, but you’re stuck with whatever is in the module or how it is laid out. You’re also usually limited to the number of and the diversity of layouts available. Simbla allows you to have a truly drag and drop experience, enabling you to drag around elements to reposition them. I mentioned forms earlier, and you can add fields, drag and reposition their order, and customize almost anything. Also, as you can see in the image above, some of Simbla’s content modules have A, B, C, and D options that are actually different color variations.
For something like this, you’d expect to pay $100 per month or more, especially with the ease and functionality of what you’re getting, but Simbla’s pricing model makes it affordable for any business owner or individual to build and host their own website without breaking the bank. Believe it or not, Simbla has a free option to start, but if you want your own domain name and are worried about resources, you can start hosting your own branded website for only $6 per month. Most reliable web hosting companies charge more than that.
You have two options to choose from when building your website. You can start with a template, or you can use Simbla’s wizard. Either one is incredibly easy, and they each only take a few minutes to set up. Let’s take a look at each method.
Use a Ready Made Template
When you choose this option, you can select from dozens of different pre-made templates for different styles of websites. Choose one that matches your vision, and enter the name of your site, which will bring the template you selected into the builder section.
Use the Wizard
The wizard is a simple way to set up your website. It asks you a series of questions as you go along, such as “what is the name of your website?” and it asks you what pages you need on your site. You can also choose from a simple one page website, or a multi-page site for more content. You can easily click and choose different pages, build the main menu and the order of your menu items.
Once you’ve made those decisions, Simbla will ask you to choose three main page components: a header, a content area, and a footer. You’ll be able to choose from a selection of different layout types for each one of these sections, with previews containing dummy images and text. This gives you a sense of what each section will look like before making your choice.
When you have things set up, both methods mentioned above pop you into the page builder section. Here, you have control over all of the elements on your site. In my example, I wanted to change out the logo. I received a warning that I am editing a master page section, and that whatever I put here will show up on all pages. This is fine, because I want my logo showing on all pages.
I can click on any element, which will bring up the options for each element. The option icons are pretty self-explanatory. You can edit images, text, color, and any specialty settings that may apply.
Customizing Your Site
Simbla makes it so easy and intuitive to edit your website. To change pages, there is a dropdown menu close to the center of the top of your browsing area. Click this to reveal all of the available pages, and click on a different one to change it. Here, you can also add a page, or edit the Master Page.
In the Gradient bar ranging from purple to orange, you’ll find the break down of the different content blocks available. This is where you choose different intros, headers, content areas, contact sections and footer layouts for your pages. Your menu will usually be found within the header section.
You can color nearly any element that isn’t a photograph. If it can be styled with CSS, you can change its color in Simbla. For example, to change the background color of a section, click on it, click on change background, and you can use images or color to change it. You can also change the color of any text element by clicking on it, choosing edit or clicking on the paintbrush icon, and then selecting the color.
Simbla has such a wide variety of page elements on offer that you can build just about any type of site you can think of. You can drag as many content sections onto a page as needed, and you can customize the images and text of each one. You can stack, drag, and reorder them, making it easy to build exactly the layout you want for a site.
For those of you that like to fine-tune your websites and handcraft every aspect of them, you can adjust things like the line-height of text, width and height of images, and you can rotate them in the options section. You can:
- Indent text.
- Add links within text sections.
- Add links to images.
- Add image descriptions.
- Enable color schemes globally to a site.
- Add background patterns.
- Crop images or use them full size.
- Generate a sitemap.
- Use Webmaster Tools.
- Do a 301 redirect.
- Add a favicon.
- Manage and add file downloads.
- Add anchor points for quick navigation.
- Add so much more!
Four Great Sites Built with Simbla
Now that you have a good idea of Simbla’s capabilities, check out these sites created by Simbla customers.
The Design Booth Creative
Simbla has done a great job creating an easy-to-use, intuitive website builder that applies to both novice and experienced users. With free and super-affordable plans, they provide a high-quality product packed with features everyone needs. You can customize and refine your site unlike any other drag and drop website builder I have seen. Not only are Simbla sites SEO-friendly, they are user-friendly, easy to use, and easy to build. If you want a no-hassle way to build an elegant website, Simbla Website Builder is definitely a good choice.
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
Learn PHP in One Day and Learn It Well