WordPress and DIVI Quick Start Guide

There are two main separate areas to get to know… WordPress and the content builder. You may be using DIVI as the content builder, or WordPress’s own Block Editor. Links to guides on both systems can be found below. We also include WooCommerce the eCommerce system if your site sells products or services.

 

WordPress

The following sections is where all your content is and where you mainly need to access.

  • Posts – this will be where you post blogs when you are ready
  • Media – this is where you upload images and other files
    • In the grid view you can drag and drop images into the media manager to upload them
    • Clicking images gets more info for them, like their size or direct links
    • The media manager is also available in the content editors as a popup, so you dont need to first upload images here
  • Pages – this is all the standard pages on the site like About, Contact etc.
  • Comments – any comment left by people on the site will be in here, but comments are disabled for your site
    • Normally this is disabled, but it can be enabled to allow people to comment on your blog posts if you like. Commenting is great for engaging in visitors to your site if they have questions for example, but you will need to manage them and get a lot of spam, so its up to you.
  • Menus – this is where you can control the links that appear on the site navigation, such as the main menu in the header, or footer menu
    • First “Select a menu to edit” from the dropdown at the top
    • In the left pane listing the pages (Most Recent, View All, Search), choose one or more pages and click “Add to Menu”
    • You can drag and drop the menu ordering
    • Click Save Menu to save
    • Click the arrow on the menu item to reveal more options such as Remove to delete a menu item
  • Options – this is site wide content that appears on all pages like the the Footer Copyright.

Clicking any of the above menu links will show you the list of those content types on the site. If you then click any of those entries, you will be in its editing screen.

For example, to edit a content page, click Pages, then click the page name you want to edit and you will be in the editor for the page.

For Posts you will see a simple WYSIWYG editor, to entire basic text for a blog or news article. But for Pages we usually use a content builder which is a feature rich content editor to take your content beyond a simple text area. It allows rows, grids, images, videos, slideshows, FAQs and a lot more to be created, and the design of those edited by you.

DIVI Builder

This is only applicable if you use the DIVI Builder.

An introduction to DIVI with videos and guides can be found here https://www.elegantthemes.com/documentation/divi/visual-builder/.

Once editing a page, you should see the wireframe view which is a series of blue, green and grey boxes. It can be quite daunting as you cant see your content until you click on the settings icon of the grey module boxes. So to view and edit the content on the website view itself, if you click the Enable Visual Builder button you will be taken to the front end view to edit the content. Now you can see your content and so it’s less confusing.

Box explanations

  • Blue box – this is called a Section and extends from the edge of the browser to the other edge. It’s useful to add 100% wide background colours on sections to divide content up
  • Green box – this is called a Row which goes into a Section and is the width of the content area on the page (not 100% wide), so content within it is a suitable reading width
    It also controls the grid layout… you can choose multiple columns to have in the rows, so a row could have 3 columns for a 3 column grid layout
    Content (modules) then go in the columns
  • Grey box – this is called a Module. A module is what adds the content. There are different types of content like Text, Image, Video, Accordion, and a lot more. Modules allow you to add rich content to the site instead of just plain text.

Editing Sections/Modules/Rows

You should only need to edit the grey module box for the content, unless you want to change design, background colours or images on sections.

  • Hovering over any content area should reveal the blue, green and grey boxes
  • Clicking the settings icon of those boxes will popup the editor for those boxes
    • Content will be in the grey modules, and clicking its settings icon will popup up the content and settings for you to edit.
  • Once finish editing the content or settings, click the green tick button on the popup to save it, or the red cross to cancel.

You can save a DIVI page by clicking the purple circle at the bottom to reveal the menu, and click the green Save in the bottom right.

WordPress Block Editor

This is only applicable if you use the WordPress Block Editor. The block editor tutorials can be found here https://wordpress.org/support/article/wordpress-editor/.

WooCommerce

This is only applicable if you use WooCommerce to sell products or services.

  • Click products in the left menu
  • You can see and search for your products in the list
  • Click a product title to edit the product, or click Add New to add a new product
  • As a minimum enter:
    • Product name
    • Description
    • Product image
    • Product data section
      • Choose Simple product (for physical products to sell with no options)
      • General – Regular Price
    • Product categories (in the right hand sidebar)
      • You can add new categories at this point, or edit categories in the Products -> Categories menu
  • Click Save or Update

Other options are available like sale prices, stock control, digital downloads, options/attributes, and a lot more. Please contact us for more info on these if you need them.

More information and guides can be found on WooCommerce website at https://woocommerce.com/document/managing-products/

Support

Whilst hosted with us you can access our support. We include approx. 30 minutes of support a month to help with things like “How to’s” for using WordPress and DIVI, or making small 5 minute changes for you.

You can either call the office on 029 2088 6582 or email [email protected]. Email is best so the whole team can see the enquiry and be able to deal with it. Whilst we are working from home still, the office number actually forwards to my mobile.

Training

If you would like me to show you all the above in a 2 to 3 hour training session, then please contact us.