How to Edit Your Site - Personal PAC

How to Edit Your Site

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 sections (layouts) currently built on the site have 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 section and modules to double check the formatting that was applied to them and apply the same formatting to the element you are working on.

Editing Instructions

How to edit pages:

  • Click All Pages
    • Click Add New button to create a new page. After creating a new page, click Use Divi Builder.
    • Click page name to edit an existing page. Divi should already be enabled on these pages.
  • Click ‘save draft’ button if you do not want page to go live yet. Click Publish if you are ready for the page be live.
  • Click Update to save changes made to the page. You must save changes made to Divi modules AND also update the page.

Creating a new page:

  • Click ‘Add New’ button to create a new page. After naming the new page, which will create the url, click Use Divi Builder.
  • Add specific saved sections from the divi library using the “Add from Library” link beneath each section.
  • Some pages have full page layouts saved. Go to Load Layout > Your Saved Layouts to select one of these.
  • Then you can edit the place holder content in each module.
  • You will need to add an Header Image section to each page and update the H1 title in the Header block. Be sure that you are only using one h1 per page.
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 (eraser button)! When pasting you can also right click and “Paste and Match Style”.
  • Use special characters button (horseshoe icon) for all special characters.  If not, the coding may be different.
Font Styles Selection
  • Different font styles, paragraph, Header 1-6 are chosen from the Paragraph drop-down menu
  • Additional stylings including Intro style and button styles are found in the Formats dropdown (next to header selector)
  • Block Quotes In Content Editor
    • Highlight text to be put into block quotes
    • Select block quote button.
  • Test alignment should already be set in the layout selected, but should you need to override it, you can change alignment in the wysiwyg.

Intro Style Example

 

Pink Line – only add to 5050s with h2. Adds line above

Links and Buttons
  • 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 break a link, highlight linked text and click Remove Link button (broken chain)
  • To add a Button or CTA styled link, highlight the link, and in the Formats dropdown (next to header selector) select the desired styling

Blue Button

Red Button

Text Link

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.

Yoast SEO Settings

  • Each page has a Yoast SEO section above the Divi Builder.
    • Enter Title tags (max. 70 characters)
    • Enter Meta Description (max. 140 characters)
  • Social Tab – You can modify the title/description/ and image that display on Facebook and Twitter posts.

How to add sub-navigation to a page:

  • Saved in the library for you is a section with a bar navigation. This can be used to link to subpages, or currently to anchor to various spots on the page.
  • Child pages must be set with a parent page in the Page Attributes area on the right column of the page edit. These pages will also have to be added in Menus in order for them to appear in Mobile/Tablet Menu.

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.
  • Specifically, for PDFs
    • Add the .pdf file to the Media Library per the notes above.
    • In the details of the uploaded file copy the URL for that PDF.
    • In the content wysiwyg create a link to that url.
    • In the link options (gear icon) click on Open in a New Tab.

How to add/update Menus:

  • In order to build your mobile menus, and your secondary menus for specific pages, 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 edit the Footer Text

  • In left menu, click Appearance > Widgets.
  • Click on Footer Area #1-3
  • Click on the Visual Editor
  • Edit the text/image in the wysiwyg
  • Click red Save button.

How to add/update Forms:

  • 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 – like and paste into your wysiwyg.To create new Form, select Forms from the left navigation. Select Add New FormClicking on the Template Field on the left will populate the right side of the window the data needed for the form.

Events Instructions

When creating a new Event you will need to create a  Detail Page reflective of this event, add the event to the landing page and link to the detail page.

Event Detail Pages

Create a basic page and use the saved page layout as a template. You can then add any additional page blocks that you may need or remove those you don’t.

Event Landing Page

Duplicate the existing event page block to create a second event listing. Disable or delete when the event is over. You may decided to keep the event detail page live and add post event details/images. Though you may want to consider how people will then get access to this page. Perhaps creating a blog post about it and link to the detail page from there.

Editing Blog Section

Blog detail pages need to be created in the “blog” post type. NOTE this is not the typical WordPress blog named “Posts” it is a custom post-type called ‘blog’. Be sure to be adding content to that area.

  • Enable Divi builder and use saved page template for blog post
  • Assign relevant categories and upload featured image to the media library
  • For the blog landing page within the portfolio module, allocate number of blog posts to display including which categories to display as well.

 

Editing background images on certain page blocks.

For these block (and the similar but different color versions including the hero h1 and CTAs) the image is actually being controlled in the blue “section” area. You will still edit the text in the grey module but then you will need to click into the blue Section to change the image. There are four tabs in the Section. The first tab is the color which is set to a very light grey. The third tab is the image. You can change the image but the color tab should remain grey. This is what is changing the color image to black and white, which works better with the pink and blue color overlays.

 .

Images for the Media Library

Images need to be sized to the recommended dimensions for each instance an image is used. These are listed in the Style Guide.

Images should also be compressed if they are larger than 250kb to help with site load time. This site, tinypng.com does a great job of compressing images while retaining the image quality.

Additional Divi Options

If you right click on a module, row, or section additional options appear. You may find it helpful to use these options in particular.

  • Copy, Paste, Paste After. Entire sections can be copy/pasted from one page to another.
  • Disable – allows you to hide entire rows or modules. This may be helpful when working on content layout. Be sure to disable on all three platforms, Mobile, Tablet, Desktop.

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.