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.

When editing or creating new pages, if your page is not looking as it should, go to one of these pages mentioned below and click edit. Then view the widget to double check the formatting that was applied to them and apply the same formatting to the element you are working on.

HELPFUL PAGES:

  • 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.
  • Layout Examples – Example of most of the blocks use on this site
  • Divi – Shows you the building blocks of the Divi builder

CONTENTS:

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.

COPY & PASTE

Copying and Pasting is another function that is only available via Divi’s right click controls. You can copy and module, row or section from one area, and then paste it into another area. You can even copy and paste items from one page onto another page. This can save you a tone of time, and it can often be much more convenient than saving items to the library (especially when you only want to re-use that item on a new page once).

PREVIEW

The ability to Preview items within the builder has been added to Divi’s right click controls for convenience. When choosing to preview an item, you can get a quick look at the appearance of a specific element within the builder, instead of having to preview the entire page on the front-end.

RENAME

Any Module, Row or Section can be given a name. This name appears in the builder, and it can be used to identify the item on the page. When editing big pages, this can help you organize elements within the builder. For example, if you have 20 different text modules on the page, you might want to give each of them a name so that you know what they are before opening up their settings window.

SAVE TO LIBRARY

The option to save an element to the Divi Library has been added to Divi’s right click controls for convenience. Using this feature you can save items to the library without having to open up the relevant settings box.

UNDO & REDO

Any action you take within the Divi Builder can be undone, and any undo can also be re-done. Undo & Redo controls, which are also available using the undo and redo button at the top of the Divi Builder interface, can also be accessed when right clicking.

DISABLE

Disabling is an option that is only available via Divi’s right click controls. Any Module, Row or Section can be disabled. Once an item is disabled, it will no longer appear on the page on the front-end of your website. However, the item will remain active inside the Divi Builder interface. Disabling is a way to remove things from the front-end without actually deleting them in the builder. They can then be re-enabled in the future. Items that have been disabled appear at 50% opacity within the builder to signify that they have been disabled.

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 the purple use DIVI builder button to activate DIVI
  • Click save draft button (top right in the publish section) if you do not want page to go live yet

Text Modules (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 drop-down menu on the second row of the toolbar.
    • Click within the line of text, then select the header style from the drop-down menu to apply the style
    • To apply the into paragraph style, highlight the text, go to the format menu>format>intro paragraph

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 button, highlight the link, and in the format menu select format> button
  • To break a link, highlight linked text and click Remove Link button (broken chain)
  • To add a button link (used in the 50/50 modules) highlight the link>go to format>format>button

SEO Settings

  • Search Engine Listing Tab (Yoast plugin that appears above or beneath your wysiwyg editor)
    • Enter Title tags (max. 70 characters)
    • Enter Meta Description (max. 140 characters)

How to add sub-navigation to a page:

  • Saved in the library for you is a ‘sub nav’ section that is green (indicates that it is global for all pages)
  • Add this to your page and it will auto add the child pages for the given section.
    • child pages are the pages that show up in the sub nav. Child pages are assigned to a parent pages within the page editor in the page attributes to the right
    • Reorder the pages in the sub nav by entering numbers into the ‘order field’ within the
    • If Page A and Page B are child pages of the same page, they will automatically show up in the same subnav

Adding Sections

  • Add sections from the DIVI library. Every configuration of color BG and text alignment is saved so you shouldn’t need to change the BG. Just swap out the text and the image.
  • On the 50/50 sections you can update the image like this:
  • Select the hamburger menu in the row (green)>select advanced design settings> and scroll down to ‘column 1/2 background image’
  • Select an image to change it

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.

How to add/update Menus:

  • 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. (primary or social media)
  • To add pages to your menu, select the page from the left using the check boxes and click ‘add to menu.’
  • Add a custom link by selecting the option from the options to the left
    • Enter your link and menu label
    • This links the menu item to whatever url you specified in the url field (off site links, pdfs)
  • 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 (Delete the menu item or rename it)
  • Drag and drop pages under other pages ( with indentation) to list them as sub-pages.
    • This will not appear on desktop, but on mobile after the sub nav disappears these sub-pages will be listed in the mobile menu.
  • Click the red Save Menu button.

How to add/update Forms:

  • To create a new Form, select Forms from the left navigation.
  • Select Add New Form
  • You can either click “Add form fields” to build a form from scratch, or you can ‘Start from a template’.
  • On the right side of the screen are all of the form fields that are available to you.
  • Click and drag a form field to have it appear on the form on the right side of the screen. Clicking on the form field will open up a dropdown  where you can customize the “Label” of the field and/or make a field required.
  • Next select the “Email & Actions” tab from the top
  • Edit redirect, email admin and email user settings for each form.
    • Redirect – redirects to thank you page (You must build a Thank You page in the Pages section, and then add the URL to this action. We recommend this for tracking goals in Analytics.)
    • Email admin –You can customize the way each submission hits your inbox: from name, address, to email (very important), subject, and fields.
  • Once the form is complete, publish your form. Then copy the short code for your form and paste into your wysiwyg on the page that you want to add it to. (ie: Contact, Application, etc.)

Custom Post Types

News (Post) – The Posts section is where you can create or manage the individual news/press posts that feed to the News landing page.

  • Create a post by navigating to the left dashboard menu, Post > Add New. (Or view all by clicking on Posts or Posts > All Posts))
  • Name your new News post. This will appear as the h1 on the detail page and will feed through to the landing page.
  • DO NOT enable the Divi builder (purple button).
  • Enter post content directly into the WordPress WYSIWYG editor. (This will have the same capabilities and options as the wysiwyg editor you’ve used in the divi builder layouts.)
  • Below the editor you can enter a custom Excerpt that will feed to the landing page. If you do not enter an excerpt a small portion of the beginning content will feed.
  • Enter a custom Yoast SEO Meta Title and Meta description.
  • Along the right side: select any relevant Categories (Events, News) or add new categories here.
  • Add a Featured Image that will feed to the top of the news detail page AND the News landing page. (Recommended size is 800×570)
  • Save as a Draft or Publish.
    • The date of the news posts can be preset ahead of time, or post dated.
    • Under Visability you can click on “Sticky this post to the front page” to force this post out of chronological order to appear at the top of the News feed.

Projects – The Projects section is where you can create or manage the individual projects that feed to the Projects landing page.

  • Create a project post by navigating to the left dashboard menu, Project > Add New. (Or view all by clicking on Project or Project > All Projects)
  • Name your new Project. This WILL feed to the Projects landing page, BUT will NOT appear as the h1 on the detail page.You will need add the h1 in the divi builder text module
  • Enable the Divi builder by clicking on the purple button “Use the Divi Builder”
  • In the Divi Builder header area click on “Load from Library” then click on the tab “Add from Library” and select “Design Integrity Test Project”
  • Edit the placeholder images and content that were loaded in. And add any standard saved layout that are needed by clicking on the “Add from Library” link that appears underneath each section.
  • Along the right side: select any relevant Categories (Case Study, Consumer, etc.) or add new categories here. (Categories can be edited/removed by going to the dashboard menu “Projects > Categories”)
  • Add a Featured Image that will feed to the Projects landing page. (Recommended size is 600×600)
  • Save as a Draft or Publish.

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.

Here you can create the content that will be used within the module