The Water Solutions Company Tutorials Page

Overall On Divi 

• After logging in > go to the page you want to make changes to
• Enable Visual Builder
• Hover over the area to make changes
• The main key areas are images & text. Other areas are best left to the developer to make changes. Ie: Sections, Background or Header Images (Purple Bar and box), structure of each page. Sections that are slightly muted when in the Visual Builder are not visible to the public, there is an advanced feature that I have implemented. Stay away from changing other areas!
• Hovering over area, there are three main colored bars and boxes: Blue, Green, Grey. For most things, you’ll focus on Grey Bars.
• Upon clicking the Gear for that section, a Popup for that module will appear.
• For each popup, you’ll see a purple bar at the top and a bar with four colored buttons at the bottom of each popup.
  • red No Save “x“
  • purple “undo” last saved state button
  • blue “Redo” button for current changes
  • green “Save Changes” checkmark
  • Use the Green checkmark after the change to save your work!
• To save and publish the page, click on the Purple circle at the bottom with the three dots > the bottom will expand showing multiple buttons.
• The Grey bar on the left will show you Desktop, Tablet, and Mobile views
• On the bottom right is the green “Save” button. Click on this to save the page.
• Then on the top bar > click Exit visual builder.

Note: the navigation links will not work unless you exit the visual builder

A great keyboard shortcut for undo to use frequently is ctrl + z. Use it when you make mistakes. 

Changing Text

Home Page Featured Products – Blurb Modules:

• Enable Visual Builder >Hover over area
• Click on Grey bar > Click on Gear > settings popup appears
• Edit Title, Edit Body Text using WSYWIG small editor
• To Edit Image within Featured Products Module > Click on Image & Icon
• Click on image > media Library pops up
• Choose from the current library or upload image file.
• upload as jpeg or png
• Click green save checkmark  > Click Save at the bottom of page > Exit Visual Builder

Regular Text throughout:

• Enable Visual Builder > Hover over area
• Click on Grey bar > Edit body text
• or Click on Gear > settings popup appears
•  Edit Body Text using WSYWIG small editor
• Click green save checkmark  > Click Save at the bottom of page > Exit Visual Builder

Changing Images

• Enable Visual Builder > Hover over area
• Click on the Grey bar > Click on Gear > settings popup appears
• Click on the image > Media Library pops up
• Choose from the current library or upload an image file. Note: while in the media library, you’ll need to click the purple button again on the bottom right to “Upload an Image” into the module
• upload as jpeg or png
• Click green save checkmark  > Click Save at the bottom of page > Exit Visual Builder

Changing Gallery Images & Descriptions

• Enable Visual Builder > Hover over area
• Click on Grey bar > Click on Gear > settings popup appears for Advanced Gallery Settings
• Click on Category gear > images popup
• Click on image > media library pops up
• Choose from the current library or upload an image file. Note: while in the media library, you’ll need to click the purple button again on the bottom right to “Upload an Image” into the module
• upload as jpeg or png
• To Add New Category > click on Add New Item + circle while in module pop-up > add Title and Add Gallery Images from current Media Library or Upload new images
• Click green save checkmark > click green save check mark again > Click Save at the bottom of page > Exit Visual Builder