How to Edit Your Website

This document is intended to speed you through the different features on your website, and how to edit or create each of them.

As this site was a designed as user friendly Divi site, our designers created the tools to make the site incredibly simple to navigate and update.

For ease of use, all modules currently built on the site has been saved into a Library, where you can easily replicate specific modules or even an entire page template.

If a new page you’re creating is not looking as it should, go to one of the pages in the bulleted list below and click edit. From there, view the widget to double check the formatting that was applied and then apply that same formatting to the element you are working on.

How to Edit Your Website

• Content Styles – Shows you basic interior page content styles and formatting.
• Style Guide – Shows you the fonts, colors, and image sizes used throughout the site.
• Library – Example of most of the blocks use on this site
• Divi – Shows you the building blocks of the Divi builder

---

 

Contents:

• Divi (The Basics)
• Divi Library
• Divi Builder Functions
• Saber King Site Editing Instructions

---

 

Divi (Your CMS) Basics

Divi is a unique theme in our collection. Differing from every other Elegant Theme, Divi is built on a page builder platform that we designed and developed from the ground up. Using Divi’s drag and drop builder you can create beautiful layouts with ease and control over every part of your site.

The builder uses three main building blocks: Sections, Rows, and Modules. Using these things in unison allows you to create a countless amount of page layouts. The basic hierarchy of these elements is as follows:

Sections

The most basic and largest building blocks used in designing layouts with Divi are Sections. These are used to create the top-level areas in your website. There are two types of sections: Regular, and Full Width. Regular Sections are made up of column rows and Full Width Sections are made up of full width modules. See more about rows and modules below.

Rows

Rows sit inside of Sections and you can place any number of rows in a section. There are many different Row Types to choose from. Once you define a Row Type, you can then place modules into the selected column structure. There is no limit to the number of modules you can place within a column.

Modules

Modules are the visual elements that make up your website. Every modules that Divi has can fit into any column width and they are all full responsive.

---

 

Divi library

What Is The Divi Library?

The Divi Library is your ultimate web design toolkit. Here you can store your favorite layouts, sections, rows or modules for later use. Whenever you save an item to your Divi Library, you can access it easily from within the modal window when adding a new layout, module, section or row to the page. Save yourself hours of design time by creating collections of your favorite module combinations. Why not save all of those customized modules to your Library so that you can use them in the future without having to re-create them!

The Divi Library is more than just a collection of saved layouts. Each library item can also be made “Global.” Global modules are synced and mirrored wherever they are placed. Whenever a Global module is altered, it updates automatically on all of the pages you have added it to! In this sense, Divi becomes more than just a page builder, it becomes a website builder. For example, you could create a Global section that is added to the footer of every page on your site. Update that Global Section once and have the footer of your entire website updated instantly.

Modules in the library can also have their settings selectively synced. For example, if you have customized a module heavily using the Advanced Design and Custom CSS tabs, you can save the module to the library while only saving the settings in these two areas. If his module is made Global, your Advanced Design and Custom CSS settings will be synced, but the General Settings (containing your module content) can be different on each page the module is used on.

• On the left hand menu, you’ll see Divi – hover over and you’ll see the Divi library. Here is where any layouts, modules or sections are saved for easy addition to your page.  You can edit any layouts here to make it easier to reuse (not recommended for anything currently saved).
• Sean has populated the Divi library with many of the layouts you’ll need.  Always reference these pages as some of the setting have been pre-populated specifically for your design.
• To add these to a page, under a section, click +Add from library and all of the saved items will appear

***TIP! You can copy (CTRL+C) and paste (CTRL+V) in Divi!  It’s great to have the content styles open, and you can copy an entire section/row and paste where applicable on your open page.

---

 

Quick Access To Divi Builder Functions

Whenever you right click on something inside the Divi Builder, whether it be a Module, Row or Section, you will get a list of different actions that can be performed. These actions include: Rename, Save to Library, Undo & Redo, Disable, Lock, Collapse & Expand, Copy & Paste, and Preview. You may be familiar with many of these functions already, and they have been added to the Right Click controls for your convenience! This way you don’t have to dig into the module settings to access commonly-used features. Some of the functions, however, are unique to Right Click, and are only available when right clicking. These include: Copy, Paste, Lock, Collapse and Disable.

 

Editing Instructions

• How to edit pages:
  • Click All Pages
    • Click Add New button to create a new page
    • Click page name to edit an existing page
    • Click save draft button if you do not want page to go live yet

• How to change the background color of a module:
  • There are a couple ways you can alter your background.
  • 1: Transparent/white
    • In the section settings, click transparent background, or turn this to on.
      • This will also override anything else.
      • Make sure the inner shadow button is NO.
    • 2: Blue:
      • In the section settings, scroll down to background color and enter #203D7B
    • 3: You can give your background the line pattern (unique to divider sections)
      • In the section settings, where it asks for a background image, select “upload image”, search for patter_1.jpeg, and select this.
  • Content Editor (WYSIWYG)
    • Type content directly into the wysiwyg in HTML Fields Tab or copy/paste from word processor with ease
    • When copying/pasting, ALWAYS use the clear formatting button!
    • Use special characters button for all special characters.  If not, the coding may be different.
  • Font Styles Selection
    • Different font styles, including headers, are chosen from the Format drop-down menu
    • Block Quotes In Content Editor
    • Highlight text to be put into block quotes
    • Select block quote button
  • Links
    • Highlight the word/s which you want to create as a link and clicking on the insert/edit link icon.
    • Enter the destination URL directly into the field or performing search.
    • For internal links, insert page url only (eg: /about).
    • For external links, insert the entire url (http://www.website.com) and click Open in a New Window/Tab box. For telephone “click to call” functionality add tel:phonenumber, and email insert mailto:email@email.com
    • To add a CTA Link, highlight the link, and in the format menu select CTA Link
    • To break a link, highlight linked text and click Remove Link button (broken chain)
  • Inserting Jump Links
    • The home page of your website is constructed with jump links. i.e. each menu link brings you down the page to a specific anchor point.
    • Insert a full width divider page module, insert the desired text, and then on the ‘Custom CSS’ tab at the top insert a name for the anchor point into the CSS ID field. (for example howitworks)
    • To link to this anchor point from a menu item, go to Appearance>menus to begin editing. Insert a menu item or edit an existing it menu item but make sure it is a ‘Custom Link’. In the link field insert a url of /#anchorname to link to the anchor point. (for example /#howitworks)
    • If you are inserting an anchor point within a content editor window (like the directory at the top of this page), select Insert>Anchor point. Highlight the text you would like to jump to via the link, Insert the anchor point, and label it. (for example editingwebsite)
    • To link to that anchor point, highlight the desired text and insert> link > #anchorname. For example #editingwebsite.

• Inline Images
  • To add an in-line image, place your cursor on the area where the image should appear, and click Add Media button above wysiwyg
  • Click on the little chart symbol to open the media library
  • Scroll to find an image or search using field in top right corner, select it, then click Insert Into Page button
  • Upload and find the image on your computer (EDIT ALL IMAGES IN IMAGE EDITING SOFTWARE BEFORE UPLOADING TO FILEBIN PLEASE) and upload. Then select the image and click insert.
  • Once the image is in place, click on image to reveal edit toolbar. Choose an alignment and add vertical/horizontal space if necessary.
  • Click Update

• SEO Settings
  • Search Engine Listing Tab
    • Enter Title tags (max. 70 characters)
    • Enter Meta Description (max. 140 characters)

• Add a sidebar:
  • You can add any modules (just like you regularly would here) i.e. Text, video, testimonial, and so on!

• How to add sub-navigation to a page:
  • Saved in the library for you is a standard interior layout with left navigation. Make sure to use this as the spacing is styled.

• How to edit the Media Library
  • Click Media > Library > Add New
  • Drop files into window or click Select Files button
  • To Edit Images or other Media you may view as a list or Media Grid View
  • Inside the Media Grid, media items are displayed in a thumbnail grid for ease of navigation. Click any media item to edit the image directly; however, we recommend that you use photo editing software like Photoshop. In this view, you may also edit the image metadata or media item metadata.
  • Media library can be filtered by type or date and is searchable by title.
  • To add a PDF:
    • Upload the PDF into the library
    • Once uploaded, you’ll see a link on the right menu.
    • Copy the link, and insert the link over text (as it states above) and open this in a NEW TAB.

• How to add/update Menus:
  • In order to build your menus you will need to update the menu in WordPress.
  • In left menu, click Appearance then Menus.
  • In the Edit Menus tab, choose the menu you would like to edit from the drop-down menu and click Select.
  • Edit Menu Name in field, if desired.
  • Drag and drop each item into the order you prefer and/or click the arrow on the right of the item to reveal additional configuration options.
  • Click red Save Menu button.

• How to add/update Forms:
  • To create a new Form, select Forms from the left navigation.
  • Select Add New Form
    • Clicking on the Template Field on the left will populate the right side of the window the data needed for the form.
  • Once desired form items are added. Click Save
  • Next select the “Email & Actions” tab
  • Edit redirect, email admin and email user settings for each form
    • Redirect – redirects to thank you page
    • Email admin –You can customize the way each submission hits your inbox: from name, address, to email (very important), subject, and fields.
  • The Advanced Settings below the html window allow for additional email parameters to be added. If an auto Reply email, CC or additional email addresses need to be added to the form. Can be done here versus creating new email addresses.
  • Once the form is complete, copy the short code and paste into your wysiwyg.

Related Produtcs

The “related products” that display on a product page is automatically added by WooCommerce. If you would like to add your own related products there is an option called “Related Products” when editing any product.

Here you can click “Add Row” to add a new related product then just start typing the name of the desired related product. An auto suggestion list of products will display, click on the one you want added. If you have more than one related product added you drag each entry to change the order. To remove a related product, simply click on the minus symbol to the right of the product name.

Do you need more help?

Should you need further assistance, you can find specific instructions on the Divi Theme Documentation Website

If you cannot find your answer, submit a ticket to the Orbit Support team for assistance.