Getting Started With The Small Business Pro Builder
The Basics
The Small Business Pro Website Builder comes in two forms: The standard “Back-end Builder” and the front-end “Visual Builder.” Both interfaces allow you to build exactly the same types of websites with the same content elements and design settings. The only difference is the interface. The Back-end Builder lives inside of the WordPress Dashboard and it can be accessed along with all of the other standard WordPress settings. If you are familiar with WordPress, this may be a more efficient way for you to edit your site. Small Business Pro is best used in visual mode, allowing you to build your page on the front-end of your website.
This tutorial will mainly focus on the visual builder.
LOGGING IN
To get started, you will need to login. You should have received your login via email or you selected your username during purchase. Now, open your favorite browser (we recommend Google Chrome or Mozilla Firefox). Go to https://yourdomain.com/editsite (example: if your website is at https://sitedartstudio.com, then you will type in https://sitedartstudio.com/editsite). You can also visit your home page and click the “Edit Site” button.
Your Small Business Pro software is your main work environment and has all the tools you will need to make your website a success.
The easy as "1, 2, 3" Step Method
Once you have logged in, the main goal for your new Small Business Builder website is using the rule “Easy as 1, 2, 3”. We want you to be able to get your site up and running in 3 easy steps. You may then come back and expand even further. So, once you have logged in, you will start your site with a simple homepage design. Next you will add all of your business information. Then finally you will complete your site with a selection of images from a large gallery or upload your own.
Let’s get started…
Start Creating your Site
Welcome to the Small Business Builder Dashboard (SMB Dashboard from this point on). From this screen, you will be able to access all features of the SMB (Small Business Builder).
To find out what you will do to get started, you may click on “ How to get started”. If you want to read all instructions before clicking anything, then click on “Full Guide” first. If you want to jump right in, click on “Start Here”.
Just a quick note: Once you click “Start Here”, a built in “Product Tour” begins. We suggest watching this first. Then return for more training if required.
Tour Guideline
The beginning tour will automatically take you through loading a layout / design template for your website. More than that, it teaches you various concepts of using the builder. You can use this to learn how to build your complete site.
Make sure to take notes.
- NOTE: SMB only allows you to do the tour once. Please make sure you have your coffee, popcorn and turn your cell phones off.
Other means of help
During site creation, in the visual builder, click the “Help” ? in the bottom right (see image).
As you build your site, each module in the visual builder also has a click for “Help” ? in the lower section of the editor.
1. Start Here
Once your tutorial is complete, or when bypassing the tutorial, clicking ‘Start Here’ will bring up the first screen. This is the screen that starts the development of your website. Any new pages will also have this screen when using the visual builder. From this screen, you should select “Choose a premade Layout” – This allows you to browse a set of designs / templates called Layouts. The layout will be the key design you will use in creating your website. If this is a NEW PAGE, then go to “Add New Pages” for further instructions.
The SMB PRO layouts library has 100’s of designs and is constantly growing. You can use search tools to find a layout based on your business. Or scroll through each design to get your creative juces flowing. You may click any design to get a better view, and then review all of the different page styles available. There is an option to see a “LIVE DEMO” as well. Once you select a design to use, just click “Use This Layout” to continue
IMPORTANT: The builder has built in ? HELP with videos for every single feature. Try this out as you are editing to see what tools are available for you.
Enabling The Visual Builder
When building your site, it is important to complete the Home Page to get started. But, you may need to come back from time to time for more edits or to continue developing your site. This will help you get back to editing.
While you are logged in to your WordPress dashboard, you can navigate to any page on the front-end of your website and click the “Enable Visual Builder” button in the WordPress admin bar to launch the visual builder.
The Visual Builder Basics
As you build your site, you will be working with specific features and tools. Keep this image handy to track what each tool of your website does and how you can accomplish creating your own great content.
Small Business Pro’s 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 sections, rows and modules.
The builder uses three main building blocks: Sections (#1 in BLUE), Rows (#2 in GREEN) and Modules (#3 in DARK GRAY). 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. Modules are placed inside of rows. This is the structure of every Small Business Pro website.
Modules will be what you will use the most. (#4). These are opened by clicking the GEAR icon. Text, Headings, images and buttons are just a few modules. (NOTE: All items use the gear to open that items editor. Sections, Rows and Modules use the GEAR symbol)
Once you complete your edits, you will use the System tool (#5, PURPLE icon) to save your edits, When clicked, this opens to display the SAVE as well as other features.
IMPORTANT: Always remember the built in ? HELP with videos for every single feature. Try this out as you are editing to see what tools are availble for you.
Editing Text
The one feature that will be the most used are the text editing tools. Whether changing address, advertising, or writing that great tax blog post. Check out how easy it can be to make those edits.
The 'Module' Editor
First find the module of text you wish to edit. Use the ‘EDIT ITEM’ icon to open the text editor.
Edit text using a text module
Edit text using a direct click
Another feature is to click where the text exists to edit it in place.
(Notice:) Certain “modules” cannot be edited using ‘Click on Text’ So you must use the “Edit Item” gear to make your text changes.
Another note is that the very top of your site (called the HEADER) or the bottom section (FOOTER) need to be edited in a different manner.
The end of BASICS
This ends the basics of training. Make sure to do the full interactive tutorial and make a few adjustments to your sites text.