Using WordPress with DIVI Builder

Word Press/DIVI  
Editor’s Guide
08/08/2019

Welcome to the Word Press Editors User Guide by Steven Carr (Steven@HoustonWebDesigner.com) or 713-553-6212.

I strongly recommend using the Google CHROME browser when editing your website.  If you do not have it, you can download same at:

https://www.google.com/chrome/eula.html?&brand=CHMB&utm_campaign=en&utm_source=en-ha-na-us-sk&utm_medium=ha&installdataindex=homepagepromo

Copy and paste or click on the above


The universal login for any Word Press site that I set up is: YourDomainName.com/wp-admin  

If I have given you a different login for security reasons, please type it in instead of /wp-admin/ after your domain name in the URL address bar at the top of your browser. If this is not the case, I do recommend the implementation of this feature to keep unauthorized login attempts to a minimum.

This will bring you to the login box section of your web site.  Go ahead and enter the username and password you were provided.  Be sure to save the username and password in your browser when it asks..  An opportunity to save the username and password drops down on the top right of Chrome.  Answer YES so you do not have to type these in moving forward.

Once logged in, the two (2) areas of most concern are Post (Blogs) and Pages. Remember, Pages are actual pages that can show up on your “menus”.  Posts will show up on your “News” or “Blog” page, listed by date.  I have programmed your “Post” page to post at least 5 of the last entries.

The pages can be seen when you click on the “Pages” section of the menu on the left.  This will bring up a view of all your pages.   You can mouse over the page name and see the “edit” option appear.  Click to edit any pages. 

When editing through the normal editing section in WordPress, you will see something like this at the very top of the edit area.

On the very top purple bar, you have several settings including the + which adds a new main section.  see image below

Houston's Best #1 Web Design service HoustonWebDesigner.com

The image below includes the purple bar, blue section, green row and grey module add buttons.  Notice the options above the purple bar allow you to build on the front end and or switch to Computer view, tablet view and smart phone view as well.  hold your mouse over each option to see the definition of the option.

Houston's Best #1 Web Design service HoustonWebDesigner.com

The purple bar will appear whenever you use a “Full Page” option for building.  Normally there is only one per page but it does not have to be that way.

The blue bar looks like this…. Houston's Best #1 Web Design service HoustonWebDesigner.com   The first symbol on the left allows you to click and drag this “section” up or down.  The gear symbol allows you to open up the settings menus to control the section.  The third symbol allows you to duplicate the entire section immediately below it’s location.  The fourth symbol allows you to “Save” the section to use later on other pages or on the page you are working on.  The fifth symbol deletes (trash can) the entire section.  And the three dots allows you to to save, copy and paste or delete the module and/or module settings

All modules where you can post text, pictures and other items are on a row (the green bar) which is under a blue section.  I know this sound confusing at first, but it becomes simple.  I recommend creating a TEST page and playing around with all the Blue, green and grey settings.  Do not worry about the advanced settings right now, but play around with the general settings and watch how it changes the item you are working on in real time.

With DIVI activated you can also click on “View” and view the page live or simply click on the upper left hand corner to display the web site framed on the top and left side by the WordPress editing frame.  Either way, once you are viewing the site, you can navigate to the page you are wanting to edit and click on the ENABLE VISUAL BUILDER next to the purple button on the top frame of the page.  This allows you to view the page live and edit it “real” time.

Once activated (it takes a few seconds), there are going to be several colored bars you will see as you move your mouse around on the page.  The will be Purple, blue, green and grey.  The blue bar, like the image below, outlines a section of your website. This section can be “full page” or a section.  Full page background images, colors or a slider are some of the items that can go full page.  First thing you need to do is click on the purple button at the bottom of your screen. Houston's Best #1 Web Design service HoustonWebDesigner.com

You will then see the bar extend to a full size bar.  The main button is the green save button on the right.

Houston's Best #1 Web Design service HoustonWebDesigner.com

Houston's Best #1 Web Design service HoustonWebDesigner.comIf you select/activate a row section (green menu) it will not be a full screen but about 80% of the page and you will be given the opportunity to break the space into several columns if you so choose.

I like to use the two or three column layout as well as the one near the bottom that has a large center section with a smaller column on either side.  Each of these “modules” can be text, images, code, maps, etc that you choose when you click on the grey + circle.  Try it and look at all the options.

 

 

 

 

In the sample above, there is a section, then row and two (2) columns (grey).  In the left column is a module called Text.  They are many options, including gallery, image, blogs, buttons and much more. Most of what you will use is Text, Image and Gallery.

Menus – You have three (3) default locations when you can put menu items(links) and the options to use a full page menu anywhere on the page. You can also add page links in the footers. These are called “Widget” locations.  You can also have a right or left side bar on any page that has “Widget” programs for all sorts of items to be displayed.  Text, Ads, Lists of postings, categories of postings, videos, etc.

You have the top “Secondary” menu first where we normally put your phone number, email address, Social media logos and links, if you choose, to “lesser important” pages can also be displayed.  The second or Primary menu usually will include a logo that, as you scroll down, can diminish the size of the logo and primary menu to allow more top space for your content.  

Menus have to be programmed in DIvi when you add a page to display the link to that page, it does not automatically appear in a menu. You have to take the new page and add it to the menu location you choose. You can also create drop down menus on any of the menu locations.  Click on “Menus” under Appearance.  You will see I have created at least a Primary and Secondary menu.  You can toggle back and forth by selecting which one you want to see.  If you make changes, be sure to save them and then check your work.  To create a drop down under a main link, simply drag and drop the menu name you want for a drop down and locate it under the main page and move it slightly to the right.  It will snap into place to signify it is now a drop down menu item.  Play with this to get proficient with how it works.  The colors for the drop down field are set but can also be changed.  I can help you over the phone and will address this feature in another training.

Editing a page or adding text to a module.

Houston's Best #1 Web Design service HoustonWebDesigner.com

If you do not have 2 rows of editing tools, please place your mouse over the last tool on the right which is the “kitchen sink” tool.  Click it to activate the additional tool bar underneath.  The key tools you will use is the text formatting and the clipboards for bringing WORD documents into the page while maintaining the formatting.  Once you save your changes, check your work by clicking on “View Page” option right under the page title heading.  This will allow you to view that page live.

The formatting tools should be displayed in 2 rows when editing under the “Visual” tab.  The “Text” tab only has 1 row of tools.  I recommend using the Visual tab view 90% of the time.  If you have difficulties with centering or formatting a return, these can be effected best in HTML.  I will cover a view basic commands later.

The use of the “Heading” formats on text for titles is good for SEO.  Start with only one Heading 1 per page and work your way down as you have subtitles.  Do not replicate another heading one on the same page.

To add a page, from the “View all Pages” screen, click on “add new” near the top. This will create a new page.  Before you do anything else, give it a unique title.   Once set, then start working on the body of the text. (I have already set the pre-formating of the title format for your pages.  You will see your pages take on the name(s) you used in the title.

To add pictures, click on the “Media” icon, next to upload/insert above the formatting tools. Play around with this tool to become comfortable with uploading and formatting the pictures.  You can designate size, left, center, right placement to have text wrap the images.  When finished, click on “Insert into Page or Post”.

Save your work as drafts to a point and you can manually do this, but to publish and make the page “live”, you must click on “publish.  Remember, you can trash any page quickly.  Place you mouse under the page name in the “View all Pages” screen and the options will appear.

Adding a video onto a page or module.

If inserting a video file, it is best to embed the code in html.  Upload the video to your Youtube.com account.   Once uploaded and active, click on the share button and get the “Embeded” code.  Copy this code by high lighting it with your mouse and hitting CTRL and “C”.  Then go to where you want it on your page while in the “Visual” mode.  Type “here” then click on the centering tool above.

Now switch to the html mode (the visual and Text tabs are on the upper right hand side of the page editing space.)   Scroll until you see “here”.  High light it with your mouse and then “paste” the code by hitting CTRL and “V” at the same time.   This will center the video in the middle of the page.

In the code, you will see the height and width settings.  You can adjust these if you need to.  The formula for keeping the same aspect is  Current width/Current height = new width/new height.

So, if you know the know the new width but not the height, do this.  Multiply current height x new width.  Then divide by the current width.  This will give you the new height.  Algebra – ain’t it grand!

Posts – Posts means News or Blogs. These should be added to on a regular basis with good, helpful information.  Each blog, when complete, can be entered into categories that exist or new categories you can create.  This is great for SEO and for identifying topics.  You can actually create a menu of Categories on the side bar to select from.

All Posts are listed on the “post” or “news” page I created for you.  The name should be “News”.  DO NOT edit this from the “Pages” section.  Edit and add from the Posts section.  Each new post is placed at the top of the page, pushing down the last.

After creating a title and typing the content, define the categories and then, right below, you will see “Tags”.  Click on “Choose from the most used tags” to see what is available.  These should be key words that your post references.  We need these because it helps SEO and let’s the view see the topics addressed by tags and category names. If you wish, you can use a widget to display the posts by Category.

Widgets – Widgets can be added or removed form your page in seconds using the click and drag options. Widgets are little programs and are labeled by function.

Settings – All of your settings are set to what we need. You can certainly look, but please do not touch.

I will have additional training options coming soon.  Until then, text me your questions and I will answer you as quickly as possible.  Thank you!