{"id":385,"date":"2019-03-05T11:04:32","date_gmt":"2019-03-05T16:04:32","guid":{"rendered":"http:\/\/donedealwebsite.com\/support\/?p=385"},"modified":"2021-02-04T12:22:35","modified_gmt":"2021-02-04T17:22:35","slug":"how-to-use-the-visual-editor-via-home-page","status":"publish","type":"post","link":"https:\/\/mydonedealwebsite.mightybox.site\/support\/how-to-use-the-visual-editor-via-home-page\/","title":{"rendered":"How To Use The Visual Editor Via Home Page"},"content":{"rendered":"\n

NOTE:<\/strong> The following articles related to the Visual Editor were made using our other website Apartment Investor Pro.<\/a> So although the pictures of the website are different the Visual Editor works exactly the same.<\/p>\n\n\n\n

In this tutorial we will be showing you how to use the Visual Editor to customize the look of your website! Now there are 2 ways to use the Visual Editor 1st being from your website, which is what we’ll cover in this tutorial. Second is from your dashboard.<\/p>\n\n\n\n

With that in mind the first thing you need to know is WHERE to find the Visual Editor. If you are logged in to your website you’ll see an extra menu at the top of the page. In that menu you’ll see a button saying ‘Enable Visual Builder’. Click it.<\/p>\n\n\n\n

\"enabling<\/a><\/figure><\/div>\n\n\n\n

After clicking the button wait for it to Completely<\/strong> load. After which you’ll see new options appear on your website.<\/p>\n\n\n\n

\"\"<\/a><\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

This may look confusing at first but in no time you’ll know how to work the Visual Editor like a champ. Now there many, many features you can use to change the look of your website. For now though I’ll show you the basics. To start hover over and click on ‘Building Investors’, another pop-up menu will appear displaying typography options we’re all familiar with. You can also add\/change\/remove text simply by typing away.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Typography<\/a><\/figure><\/div>\n\n\n\n

NOTE: <\/strong>These typography options are only available for paragraphs or text shown in the picture above. It does not work with buttons, menu items, logo text, forms and certain other text you may see throughout your website. If you’re unsure though try clicking on something you’d like to edit to see if you get this pop-up menu<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

Sections, Row & Modules<\/h3>\n\n\n\n

How do Sections, Row & Modules effect your website? Simply put these elements are boxes that contain All<\/strong> the content on a page. Everything from the background, text, pictures, slideshows, forms, and the list goes on. Interestingly you can have multiple Modules within each other.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Sections,<\/a><\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

The picture above illustrates where each of these box elements are located on your website. We’re going to dissect each of these box elements and talk about them 1 at a time.<\/p>\n\n\n\n

Note: <\/strong>The layout of these are always the same. With Sections being your main box. Your Rows sit inside Sections. And Modules sit inside Rows.<\/p>\n\n\n\n

The blue option box are for ‘Sections’ and gives you options for editing the blueish background of that Section how you wish. You can add as many Sections as you wish to your page. Because Sections are your main boxes you cannot place Sections within another Section. <\/p>\n\n\n\n

The green option box are for ‘Rows’. Rows are horizontal (left to right) strips of your page. You can place many Rows inside a Sections as you like. Each Row, can have anywhere from 1-6 columns of content and many variations in between.
<\/p>\n\n\n\n

Lastly the grey box is for specific content ‘Modules’, in this case there is only text. This grey box gives you the ability to changed or edit what is in the Row. Modules make up 1 column of your Row. So if you choose a 3 column Row you can place 3 Modules.<\/p>\n\n\n\n

 <\/h3>\n\n\n\n

Edit Options<\/h3>\n\n\n\n

As noted earlier each Module is represented by different colored option boxes. Most of these options are the same for every Module. From left to right these options are:<\/p>\n\n\n\n