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.

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 Special Notices to top of Site

Visit Dashboard>Divi>Divi Theme Builder

Click pencil icon in the Green Global Header in the first Template

Under the Section (blue bar) Click the Blue Plus sign to Add New Section.

Click on the Add from Library Tab

Click on ‘Primary Header Notice”

Click the Blue Use this Section button

Click on the new section and using the first icon in the blue menu bar, click and drag above the menu section so it is positioned at the top of the page.

Changing the content

Click directly on the text and choose the grey cog settings button to access  the editor.

Edit the text.

Ciick the Green check mark to commit changes.

Click the purple X in the upper right to close the editor. SAVE CHANGES!

Click the Green All Changes Saved button in the top right.

 

Adding and Managing Images

Prep Images

Images should be RGB, jpeg at 72dpi and 1000px in the largest direction, and at least 200px in the smallest direction.

Featured images should be 900px X 640px for best representation. At, or around,  this size (landscape) will prevent Featured images from being cropped on the Events/News pages.

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.

 

Creating Blog Posts for Events and Nature in the News with the Built-in Template

Using the Built-in WordPress Template for Blog posts

Prepare your images (up to 4) and text. Read Adding and Managing Images

From the Dashboard Create a new POST– Dashboard>Posts>Add new, or from the black bar a the top of the page (Make sure you are adding POSTS).

Type in your Blog Post title.

In the right side panels:

  • Page Layout, choose No Sidebar.
  • Categories– choose a category. In order for the template to be initiated, one of these categories must be chosen: Events, Article, Nature in the News
  • in Featured Image– choose an image that will show in the blog pages. Choose an image that is in the landscape orientation, approximately 960px X 600px image, NOT square or tall.
  • Tags (optional). These help with SEO and Site search but are not mandatory.

In the Editor (main panel, left):

Type or paste your copy into the Editor. If pasting from another software, click into the Text tab (Not Visual) on the upper right and paste there to avoid including any unnecessary code. There are basic word processing tools above the editor. Feel free to add Header type (Never use H1) by choosing the Paragraph dropdown.

Below Editor:

  • Scroll below the body copy and add a Subtitle (optional).
  • Directly Below that you can add up to four Images. Remember to keep images below 1000px at 72dpi.
    • Click the Add Image button, and then click the Upload Files tab (upper left). Upload your image(s)
    • Image 1 appears directly to the right of the body copy.
    • Images 2-4 appear in a row below the body copy.

Click Publish (upper right panel).

Check your Post.

Adding & Editing Custom Divi Blog Posts

Watch Divi Builder Video

Editing Existing Posts

On the front end of your site (in a browser) visit the Post 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 Posts

Go to Dashboard>Posts>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 “Blog Posts Template”.
It using Clone Existing Page, click Posts 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)

Adding Sponsor Images (2023 version)

Prep your images for use:
They should be 500px X 500px, square, 72dpi, jpgs, ideally black and white.

Visit Divi>Theme Builder

Click on the pencil icon in the Global Footer (green).

Click anywhere in the Sponsor icons area, then click on the cog in the center module.
This is a Gallery Module.

Scroll to the bottom of the logos and click the plus icon to add more images.

Click the Upload files tab, top left and upload your logos.
After they have been added to the media library, Click the Select button (you can choose more than one) to add them to the gallery.

Click the green checkmark to exit the module editor, then click the purple check top right. Save and Exit.

Click the green “Save All Changes” top left.

Featured Image Blog Post sizes

For featured images in blog posts use images that are the same aspect ratio as 400px x 284px. More info here

Start with an image that is no bigger than 1000px in width, and is in the landscape orientation (wider than tall). Use this online tool to figure out your correct height and width. Put the correct ratios into the calculator W1 and H1- see image. Then put your image width into the W2 dialog box calculate for the correct height.

Using this formula will allow you to add Featured images that are not cropped on the Blog pages.