Introduction to Avada Builder & Avada Live

By the end of this module you will understand what the Avada Builder is, how the Avada Live editing screen is laid out, and how to select something on a page without changing it.

• Explain what the Avada Builder does (in one sentence, to a colleague)
• Identify the main parts of the Avada Live screen: the page canvas, the sidebar/toolbar, and the save area
• Hover and click to select parts of a page, and read the little toolbars that appear
• Feel comfortable being “in” the builder without fear of breaking anything

Watch for: the overall shape of the builder — don’t try to memorize buttons; just notice that everything on the page is a block you can click. (Video: Avada Builder Guided Tour, official Avada channel.)

1. What the builder is: your pages are not one big document — they are built from blocks, like labelled moving boxes. The Avada Builder is the tool for editing those blocks. Avada Live is the version that shows the real page while you edit — what you see is what visitors get.
2. Browse to any page on your live site and click Edit Live in the admin bar (as in Module 4).
3. Get oriented — the screen has three areas:
   • The canvas — the middle: your actual page, looking exactly as it does to visitors.
   • The sidebar/toolbar — Avada Live’s control strip, with the Avada logo, page name, and icons for tools and settings.
   • The save area — in the toolbar; where changes get saved (deliberately — never automatically behind your back).
4. Hover slowly over the page. As your mouse moves, colored outlines appear around different regions — bigger boxes around whole page bands, smaller boxes around individual pieces like a heading or an image. Avada is showing you the blocks.
5. Click once on a piece of text. A small toolbar of icons appears attached to it. You have selected it — nothing has changed. Selection is free; only deliberate edits plus a deliberate save change anything.
6. Notice the hierarchy as you hover: the widest outlines are Containers (full-width page bands), inside them are Columns, and inside those are Elements (the actual text, images, buttons). That structure is the whole of Module 6.
7. Exit without saving (close the tab or use the toolbar exit; choose Don’t Save if asked).

• Open any page in Edit Live and spend five unhurried minutes just hovering — watch the outlines. Identify one Container, one Column, one Element.
• Click a heading to select it, look at its little toolbar, then click empty space to deselect. Do not edit anything.
• Exit without saving, twice, until it is boring.

Common mistakes to avoid

• Confusing selecting with editing. Clicking something highlights it — that changes nothing. Real changes require typing or adjusting and then saving.
• Clicking icons to “see what they do.” The duplicate and delete icons on those hover toolbars act immediately. In this module you look; from Module 7 you touch — in order.
• Editing with the wrong door. If your edit screen shows grey labelled boxes instead of your real page, you are in the back-end builder. Exit and use Edit Live instead.
• Rushing this module. Ten calm minutes of hovering makes every following module easier. The builder only feels fragile until you can see the boxes.