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.
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).
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.