What Is The Visual Website Builder?


Ameravant websites use a Visual Website Builder called "Divi Builder" which allows you the ability to build real-time on screen without any of the hassle of coding. Easily build and manage the exact type of website you want that automatically works across all devices while using the same design elements and content settings; no website programming knowledge needed, its that simple.



The Visual Builder allows you to build your pages on the live-view of your website! It’s an amazing experience and allows for much faster design. When you add content or adjust design settings inside the visual builder, your changes appear instantly. We build your website so you can just click onto the page and start typing or editing your design. You can highlight text and adjust its font and style. You can add new content, build your page and watch everything happen right before your eyes.


Enabling The Visual Builder

While you are logged in to your website dashboard, you can navigate to any page of your website and click the “Enable Visual Builder” button in the top admin bar to launch the visual builder.



The Visual Builder Basics

Design power lies in the Visual Builder, a drag and drop page builder that allows you to build just about any type of website by combining and arranging content elements.

The builder uses three main building blocks: Sections, Rows and Modules. Using these in unison allows you to create a countless array of page layouts. Sections are the largest building blocks, and they house groups of rows. Rows sit inside of sections and are used to house modules. Modules are placed inside of rows. This is the structure used throughout.


Sections

The most basic and largest building blocks used in designing layouts are sections. These are used to create large groups of content, and they are the first thing you add to your page. There are three types of sections: Regular, Specialty and Full Width. Regular sections are made up of rows of columns while Full Width Sections are made up of full width modules that expand the entire width of the screen. Specialty sections allow for more advanced sidebar layouts. For more information about using sections, head over to our in-depth sections tutorial.

Rows

Rows sit inside of sections and you can place any number of rows inside a section. There are many different column types to choose from. Once you define a column structure for your row, you can then place modules into a desired column. There is no limit to the number of modules you can place within a column. For more information about using rows, head over to our in-depth rows tutorial.

Modules

Modules are the content elements that make up your website. Every module can fit into any column width and they are all fully responsive.



Building Your First Page

The three basic building blocks (Sections, Rows and Modules) are used to build your page.

  • Sections will be colored  BLUE 
  • Rows will be colored  GREEN 
  • Modules will be presented in  GREY 


Adding Your First Section

Before you can add anything to your page, you will first need to add a section. Sections can be added by clicking the blue (+) button. When you hover over a section that already exists on the page, a blue (+) button will appear below it. When clicked, a new section will be added below the section you are currently hovered over.

If you are starting a brand new page, then your first section will be added automatically.


Adding Your First Row

After you have added your first section you can start adding rows of columns inside of it. A section can house any number of rows, and you can mix and match rows of varying column types to create a variety of layouts.

To add a row, click the green (+) button inside of any empty section, or click the green (+) button that appears when hovering over any current row to add a new row below it. Once you have clicked the green (+) button you will be greeted with a list of column types. Choose your desired column and then you are ready to add your first module.


Adding Your First Module

Modules can be added inside of rows, and each row can house any number of modules. Modules are the content elements of your page, and Divi Visual Builder comes with over 40 different elements that you can use to build with. You can use basic modules such as Text, Images and Buttons, or more advanced modules like Sliders, Portfolio Galleries and eCommerce Shops. We have individual tutorials for every single module, so if you want to learn more about the types of modules provided then be sure to head back to the main document page and browse through the “Modules” section.

To add a module, click the gray (+) button that exists inside of any empty column or click the gray (+) button that exists when hovering over a module on the page to add a new Module below it. Once you have clicked the button, you will be greeted by a list of modules. Pick your desired module and it will be added to your page and the settings panel for the module will appear. Using this settings panel, you can begin configuring your module.



Configuring And Customizing Sections, Rows And Module

Each section, row and module can be customized in various ways. You can access an element’s settings panel by clicking the gear icon that exists when hovering over any element on the page.


This will launch the settings panel for the specified element. Each settings panel is broken up into three tabs: Content, Design, and Advanced. Each tab is designed to make accessing and adjusting your website's large variety of settings quick and easy. The Content tab of course is where you can add content such as images, video, links, and admin labels. The Design tab is where we’ve place all of the built-in design settings for each element. Depending on what you’re editing you can control a wide variety of design settings with a click; including: typography, spacing (padding/margin), button styles, and more. For an in-depth look at the Design tab, take a look at our design settings tutorial. Finally, if you want even more control you can head over to the Advanced tab where you can apply custom CSS, adjust visibility based on device, and (depending on which element you’re editing) do even more fine tuning.



Saving Your Page And Accessing Page Settings

To access general page settings, click the purple dock icon at the bottom of your screen. This will expand the settings bar and provide you with various options. You can open up your page settings by clicking the gear icon. Here you can adjust things like page background color and text color. You will also find the Save and Publish buttons as well as responsive preview toggles.


Any changes made in the Visual Designer must be saved to take effect on the website.


Jump-start Your Design With Pre-made Layouts

A great way to jump-start your new page is to start things off with a pre-made layout. The Visual Builder includes over 20 pre-made layouts that cover a variety of common page types, such as “About Us,” “Contact,” “Blog,” “Portfolio,” etc. You can load these up and then swap out the placeholder content for your own(if needed).

Your new page will be finished before you know it! To learn more about using pre-made layouts, be sure to take a look at our in-depth pre-made layouts tutorial.



Saving Your Own Layouts To The Library

In addition to using the pre-made layouts that come with the visual builder, you can also save your own creations to the Library. When a design is saved as a Pre-made Layout in the Library, it can be loaded onto new pages to automatically fill the page with your saved design and content. The more you build up your library with your favorite designs and content, the faster you will be able to create new pages. For an in-depth look at the Layout Library feature, be sure to check our our dedicated Library tutorial

To save an item to the Library, click the Library icon that exists when hovering over any element and within the page settings bar. Once an item has been added to the Library, it will appear in the “Add From Library” tab when adding new layouts, sections, rows and modules.



Ok, You Have The Basics Down. Now It’s Time To Dig Deeper!

So by now you have added your first sections, rows and modules to your page. You have adjusted their settings and begun building and customizing your design. You have the basics down, but there is always more to learn. We have dozens of tutorials that cover every single aspect of building your website with the Visual Builder. We encourage our clients to bookmark the main documentation page for future reference.


If you need more assistance you are always welcome to send a support ticket our way and we will gladly help you with the Visual Designer or any of you other website needs.