Welcome to Your Website!
Here are some tutorials to help you keep the site up-to-date:
Your WordPress Theme:
Your site is built using Divi- a state-of-the-art builder. You can find text and video tutorials on items specifically used to build your site here:
Outside Divi Tutorials
Generic (but helpful) Video and Text tutorials created by others.
The Divi Builder
Builder interface starts at 3:55
Your Custom Website Tutorials:
A Word About WordPress and Divi
Your site is built with WordPress.
It is created using the Divi Theme.
WordPress.org is free open source software. It is also the platform of choice for over 39% of all sites across the web. https://wordpress.org/about/
Do not confuse it with WordPress.COM which is a hosting platform for WordPress. If you’re interested, read more about that here: https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Divi is a WordPress page builder made by Elegant Themes and the (self proclaimed) most popular WordPress theme In the world. It is the “bones” that your website is built upon. KMDD has been using WordPress exclusively since 2008 and Divi exclusively since 2014.
In December 2018 WordPress launched a major update of its software and became a page builder with some similarities to Divi but not nearly the power or options. Because your site is built with Divi, and the classic WordPress editor is much easier to use, your site has the WordPress Gutenberg Builder disabled.
If you search WordPress.org documentation you may find differences in how your backend works since current documentation is geared towards the latest version of the Gutenberg builder. If you feel that you would like to use this new builder, please send a request to KMDD and we will enable the new builder.
Divi Quick Tut
The Divi Theme uses Sections, Rows and Modules to create it’s drag and drop builder.
Sections are marked by the blue or orange bar
Rows are marked by the green bar
Modules are marked by the grey bar
Bar Icons from l-r:
Move – Settings (cog) – Duplicate – Save to library – Delete – More
Adding and Managing Images
Prep Images
Images should be RGB, jpeg at 72dpi and 1000px in the largest direction.
Larger images affect page load times and are not good for Search Engine Optimization (SEO).
Best naming practice will considerably cut down on work needed for project creation.
Name your files exactly as you want them to show on the frontend of the site. If name is very long, you can add more descriptive info in the Alternative Text area (see below)
Adding Images
Visit Dashboard>Media
Click Add New
Upload all files
Alternate Image Name
Alternative Text in each image is very good for SEO and also is the info shown on the front of the site (in portfolio slideshows).
To add Alternate Text, click on each image in the Media area and add your text. use the arrows at the top of the Media area to move through all images in the database for easy access to the Alternative text dialog box.
Using the Media Files
Other Media files supported are PDFs and PNGs (for images with clear backgrounds). Do not upload Video to your site, use YouTube or Vimeo, or other video host and embed on your site. Your hosting level will be quickly filled and you’ll run out of room.
Images from Media can be added to your Pages, Posts and Projects after uploading using these directions.
Editing Image Size in the Media Library
Downsizing uploaded images
Visit Dashboard>Media
Choose the image you wish to downsize and click the Edit Image button below the image.
Change the largest number to 1000px and click Scale
Click the Back button to return to the Media library. Your edits will autosave.
Exit or move on to the next image to edit.
Divi Masonry Gallery Module (for Projects)
View the Divi Builder tutorial first.
Sensei Masonry Gallery Module
The Sensei Masonry Gallery is a custom module used to display a gallery of images in a masonry style. Masonry galleries allow images to nicely display images that differ in size and aspect ratio, nestling them next to each other in an undisturbed grid. This plugin also shows the Title and Caption on rollover. Galleries are clickable and display images in a zoomed scrollable portfolio and use the Alternate Text of all images at the title information caption under each image.
Edit an existing gallery (add or delete images)
From the Project Page on the front end click Enable Visual Builder in the top black bar.
Scroll to the gallery and click on it then click the module settings (Grey cog)
Delete images by click the trashcan icon.
Add Images by clicking the Plus sign at the bottom of the gallery.
Rearrange Images by clicking and dragging into place.
Be sure all images you are adding have a Title and Caption (caption optional) assigned in the Media area.
Click the Green checkmark to Save Changes.
Close Exit Visual Builder in the top black bar. Choose SAVE & EXIT to commit changes.
Adding a New Gallery
Add a new Section and Row (if needed)
Click the grey Plus icon to add a new module.
Choose “Add from Library.”
Click the “Overlay Gallery” and the “Use this Module” link (blue). This module from the Library has all the proper settings and will match the other galleries you have on your site.
Click the Green checkmark to Save Changes.
Adding & Editing Projects
Watch Divi Builder Video
Editing Existing Projects
On the front end of your site (in a browser) visit the Project you want to edit.
Click Enable Visual Builder (top black bar)
Scroll to the area you want to edit and click.
Click the grey cog icon to open Module settings.
TIP: If the cog icon is hidden behind the Row (green) or Section (blue) bars, Click the three dot circle at the page bottom to access the builder settings and click wireframe view (second from left). All modules are titled for easy identification. Click the grey cog settings from here.
Edit and click green check mark to commit changes. Exit Visual Builder (Save and Exit).
Create New Projects
Go to Dashboard>Projects>Add New
Set title
Click the purple Use the Divi Builder button.
You will be prompted to choose from three options.
Click either Choose a Premade Layout, or Clone Existing Page.
If using Choose a Premade Layout, click the “Your Saved Layouts tab” in the blue bar and Choose “Projects Template”.
It using Clone Existing Page, click Projects to limit choices and click on an existing project and click “Use this Layout”.
Scroll to module to edit, click grey icon to open the editor.
Things that need to be set in the “backend”
To easily get to the backend from the front click Edit Project in the top black bar (make sure you save your work before moving the back end in this manner)
Be sure to choose the correct Category (lower right side)
Tags can be set in this area as well.
Set a Featured Image (lower right side)
Click Update (upper right)