How To

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

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

For ease of use, all sections (layouts) currently built on the site, and shown on the Page Blocks Library page, have been saved into the templates.

When editing or creating new pages, if your page or section is not looking as it should, go to the layout examples and reference the styles and formatting that we’ve used on the comparable widget. 

Table of Contents

Creating, Editing, & Cloning Pages

  • How to Set Up a Page’s Basic Information
  • How to Build Your Page with Elementor
  • How to Enter Content in a Content Editor (WYSIWYG)
  • Special Instructions: How to Set up the Alert Bar

Creating & Editing Blog Posts

  • How to Set Up a Blog Post’s Basic Information
  • How to Add and Assign a Blog Post’s Categories, Tags, and Featured Images
  • How to Enter Content on Your New Blog Post
  • How to Set Up other Unique Post Types (Events, Team bios, and Partners)

Menus

  • How to Add Menu Items
  • How to Update your Mega Menu
  • CSS Classes Used on This Site
  • FAQs about menus

Footer Areas

  • How to Edit the Footer Areas
  • How to Edit Social Media Menus

Media Library

  • How to add Images to the Media Library
  • How to Create Folders in the Media Library
  • How to Edit the Metadata for an Image or PDF in the Media Library
  • How to Change an Image’s File URL
  • Alt Text Best Practices
  • How to Add and Link to a PDF
  • FAQs About the Media Library

Gravity Forms

  • How to Edit Form Fields
  • How to Edit Email Settings
  • Other Email Settings
  • How to Add a Gravity Form to a Page

Creating, Editing, & Cloning Pages

To create a new page, go to: Pages > Add New
To edit an existing page, go to: Pages > find the page you’d like to edit > Edit

How to Set Up a Page’s Basic Information

Page Title

Enter a title in the field that says “Add Title.” This will be the administration title for your page. It will also be used as the H1 for your hero page block unless the content is overwritten in the hero page block.

URL / Permalink & Parent Page

Edit the permalink field under the title field to change the URL for the page. The Parent Page can be assigned under “Page Attributes” in the right hand sidebar.

If you assign a page to a parent page it will change the URL structure of the page.

EXAMPLE: If “Our Values” is assigned to “Home” its URL will change from looking like this: www.(your site).com/our-values/ To looking like this: www.(your site).com/about/our-values/

NOTE: If your parent page is included in any menu you now want to navigate to Appearance > Menus. See menus below for further instructions.

Yoast SEO / Page Metadata

WATCH: How to Write and Add Title Tags & Meta Descriptions to Pages and Posts in WordPress

Scroll to the bottom of the page to the “Yoast SEO” section. Here you should see options to edit the SEO title and meta description.

  • The SEO title tag must contain your target keyword. This tells both search engines and searchers that your web page is relevant to this search query. Searchers are much more likely to click on a web page if they see the exact keyword or keyword phrase they just typed in the title.

    NOTE: For consistency, we recommend leaving in the “Separator” and “Site Title” variables in the SEO title field.

  • The meta description is an attribute within your meta tags that helps describe your page. This snippet of text will appear in the search engine results under your headline. If you leave the meta description area blank within the Yoast SEO section, some existing copy from the page will show up there.

A screenshot of the SEO title, slug, and meta description fields in Yoast SEO

How to Hide Pages in WordPress

There are three ways to hide pages in WordPress — hiding the page from the sitemap, setting a page as a draft, and deleting a page completely.

  • Hiding the page from the sitemap
    • To hide a page from the sitemap, navigate to the back end of the page you want to hide, and scroll to: Yoast SEO > Advanced Settings.
    • Selecting the settings No (Index) and No (Follow) will hide pages from the sitemap and search engines.
  • Setting a page as a draft
    • Go to the page you want to set as a draft and look in the top, right corner for the
    • OR go to Pages > All Pages and you’ll see quick edit options on all pages, including whether the page is a draft.
  • Deleting a page completely.
    • To delete a page completely navigate to Pages > All Pages > Trash.
    • You can also delete the page from the back-end of the actual page. It will be in the options panel on the right of the page. Options Panel > Move to Trash.

How to Build Your Page with Elementor

To enable the Elementor builder: Click on the blue “Edit with Elementor” button

Page Blocks

Once your page is set up, and the Elementor builder is on, you can begin adding in page blocks to build out the page. Refer to the Page Block Library for all of your page block options.

  • Identify the spot in the page you’re building where you want the page block to live
  • Add the page block you want from your templates
  • Edit the page block as needed and save.

Widgets

  • Widgets (buttons, intro text, pretitle text, etc) can be added to pages from the Elementor sidebar by going to the “Global” tab.
  • Select the element that you want to add from that menu
  • Drag the element into the spot on the page where it should live
  • When you add the widget, you’ll see this option to unlink it from global. Make sure to select “Unlink”
  • Edit the widget as necessary and save.

How to Enter Content in a Content Editor (WYSIWYG)

WATCH: How to Enter Content in a Content Editor (WYSIWYG)

Entering content into the content editor:

  • You can type content directly into the WYSIWYG editor or copy/paste from a word processor.
  • If you are copying and pasting content, always use the “Clear Formatting” button after pasting. You can also “paste as plain text.” or use the shortcut on your keyboard to paste as values only. On a mac this is Command+Shift+V
  • Use the “Special Characters” button (Ω) to replace any special characters from pasted content. If not, the coding may be different.

Once your copy is in the WYSIWYG, you can continue to style the copy as needed. There are a few tools at your disposal to do this. To see all content styles available on your site, check out your Content Styles page.

  • The Paragraph dropdown will let you assign header text to copy in your WYSIWYG.

    NOTE: When applying header text to your content, keep accessibility in mind.
    WATCH: How to apply accessible header styles

  • The Formats dropdown contains other styling options including:
    • Intro text
    • Some Button styles (only applies to links)
    • Header styles (only applies to text that already has header text applied from the paragraph dropdown)

NOTE: WYSIWYG stands for “What You See Is What You Get”

Special Instructions: How to Set Up the Alert Bar

The alert bar is displayed above the navigation and is managed in the Elementor Theme Builder. On your Dashboard, navigate to “Template > Theme Builder > Header.” 

You can configure the conditional display options to display across specific pages or every page.

To update the content, you can do so in the Theme Builder, or by updating the Alert Bar Page Block in the Page Block Library. Content changes will be applied across the site once you select “Update.”

 

Back to Top

Creating & Editing Blog Posts

To create a new post, go to: Posts > Add New
or
Go to: (in the WordPress Toolbar) + New > Post

To edit an existing post, go to: Posts > find the post you’d like to edit > Edit
or
Go to: Find the post you’d like to edit on the front end > Edit Post (in the WordPress Toolbar)

WATCH: How to Publish a Blog Article Using WordPress

How to Set Up a Blog Post’s Basic Information

  • Enter the name of the post in the “Add title” field.
  • The URL will form automatically based on the title that you add.
    • If you would like to adjust the URL for this post, open the right hand Settings Panel on the right, and click the URL under “Summary”

      NOTE: Avoid changing URLs on existing blog posts unnecessarily to avoid creating broken links throughout the site.

  • Enter your meta data in the Yoast SEO section of your page.
    • By default, the SEO title field will populate with the title of the blog post, along with the vertical pipe separator and the site title. If you’d like to replace the title with something optimized for a specific keyword, just remove the “title” and “page” variables and add in the new title.
    • The meta description for the blog post can go in the meta description field.

      WATCH: How to Write and Add Title Tags & Meta Descriptions to Pages and Posts in WordPress

How to Add and Assign a Blog Post’s Categories, Tags, and Featured Images

  • Open the Settings Panel.
  • Identify the categories you would like to assign the blog post to by checking them in “Categories” section of the Settings Panel.
    • If you would like to add a brand new category, you should see an “Add New Category” link below the list of categories.
  • Add any relevant tags in the “Tags” section of the Settings Panel.
    • If you would like to add a brand new tag, you can do so by simply typing in the name of the new tag into the tag field.
  • Set the featured image in the “Featured Image” section of the Settings Panel by clicking on the gray “Set featured image” box. This is the image that will appear on the blog landing page as well as in any blog feed blocks featuring this blog post.
  • This will take you to the media library where you can select your featured image or upload a new featured image.
  • The recommended dimension sizes for featured images on blog posts can be found in your site’s Style Guide.

How to Enter Content on Your New Blog Post:

  • Because your blog uses the standard WordPress text editor for your blog posts, you can simply enter your content directly into the text editor.
  • If you’d like to add imagery or other media to your blog post, you can do that by clicking the “Add Media” button in the upper left corner of your WYSIYWG text editor.
  • Click “Publish” and you should be able to see your blog post live on the site.

WATCH: How to Embed a Video in WordPress

WATCH: How to troubleshoot content styles in the WYSIWYG editor and paste as plain text

How to Set Up Unique Post Types 

Events 

Events will be imported automatically using Salesforce/Traction Rec, and all new events should be created in Salesforce, not WordPress.

  • The imported information includes: event date, event title, external URL to event, address and location, excerpt, price (for both members and nonmembers, if applicable), and a featured image.
    • Changes to edit information should be done inside Salesforce.
  • Featured images: you can add or update a Featured Image to Events by going to Events > Finding the post you would like to edit > Edit > scrolling to “Featured Image” and adding the image you would like to use. Then select “Update” to save the change. 
  • To Set up a Featured Event: From the backend, go to “Events” > search for the event you want to feature > Edit.
    • On the right panel, find the box titled “Event Options.” Select the box for “Featured Event” and Update the event to apply. 

Team Bios

  • To create a new Bio, go to: Team > Add New
    or
    Go to: (in the WordPress Toolbar) + New > Team
  • To edit an existing Team Bio, go to: Team > find the post you’d like to edit > Edit
    or
    Go to: Find the Bio you’d like to edit on the front end > Edit Team (in the WordPress Toolbar)
  • How to Set Up Team Bio Basic Information:
    • Enter the name of the Team member in the “title” field. 
    • The URL will form automatically based on the title that you add. 
    • Enter the meta data in the Yoast SEO section of your page.
    • In the WYSIWYG text editor, add the copy for the team bio and format as you’d like using the “Formats” drop down. 
    • Choose the Department category in the box on the right.
    • Scroll down the page to below Yoast SEO, and you will find additional fields, such as Position, Phone number, LinkedIn URL, and Email. Fill these in as you’d like. The fields will automatically populate a button on the front end for the URLs entered into these fields. 
    • Add the featured image for the team member in the appropriate box on the right panel. 
    • Once completed, select “Publish.” If you’re editing an existing bio, select “Update” once you’ve applied changes. 
    • NOTE: You do not need to turn on Elementor for Team Bio posts, as there is already a template for this post type. To edit the Template:
      • Go to Templates > Theme Builder > search for the “Team Detail Template” > select the template for Team Detail.
      • You can also access the editor by visiting any Team Bio on the front end, and using Edit with Elementor > Team Detail Template (Single Post). 
      • Once in the Elementor editor, you can edit, remove, or replace the CTA that will appear at the bottom of each bio, add or update a header section, and make other adjustments to the Team bio block. The Team bio block is baked into the CSS for that Page Block, so be mindful when making any adjustments to the template as it will apply across all Team bio post types.
  • To reorder Bios for the main Team landing page: From your dashboard go to Team > Team.
    • Drag and drop the bios in the order you would like them to appear on the main page. 
    • Troubleshooting NOTE: If you have reordered the bios but are not seeing it on the front end, clear your cache on your browser, or have your IT team clear the WP Cache in the backend of WP. 
  • To edit the primary Team Bio landing page: Go to Pages > find the page titled “Team” > and select either “Edit” (to access Yoast and other basic info) or “Edit with Elementor” to change the CTA, header, or other elements.
  • To edit the Team bio feed results: Go to Templates > Theme Builder > Team Loop Item. Note: You will likely not need to edit this unless you’re making significant changes to the Team bio feed results.  

Partners 

  • To create a new Partners post, go to: Partners > Add New
    or
    Go to: (in the WordPress Toolbar) + New > Partners
  • To edit an existing Partners post, go to: Partners > find the post you’d like to edit > Edit
    or
    Go to: Find the Partners post you’d like to edit on the front end > Edit Partners (in the WordPress Toolbar)
  • How to Set Up Partners Post Basic Information:
    • Enter the name of the post in the “Add title” field.
    • The URL will form automatically based on the title that you add.
      • If you would like to adjust the URL, open the right side settings panel and click URL under “Summary” to edit. 
    • Enter the Partner bio in the WYSIWYG text editor and format as you’d like using the Formats drop down.
    • In the right sidebar, select the relevant Type of partner and Industry category. (These categories inform what appears on the main Partners page and will inform the search results if someone is searching a specific category.) 
    • Enter the meta data in the Yoast SEO section of your page. 
    • Below the Yoast editor you’ll find the custom fields for Partners, including Logo (insert the company logo here, NOT in the Featured image field), website URL, and Partner type. 
    • Once the elements have been added, select “Publish” or “Update” if you are editing an existing Partner profile. 
    • NOTE:  You do not need to turn on Elementor for Partner profile posts, as there is already a template for this post type. To edit the Template:
      • Go to Templates > Theme Builder > search for the “Team Detail Template” > Select the template for Partner Detail.
      • You can also access the editor by visiting any Partner profile on the front end and using Edit with Elementor > Partner Detail Tempalte (Single Post).
      • Once in the Elementor editor, you can edit, remove, or replace the CTA that will appear at the bottom of each profile, add or update a header section, and make other adjustments to the Partner profile block. The Partner block is baked into the CSS for that Page Block, so be mindful when making any adjustments to the template, as it will apply across all Partner post types.
  • To edit the primary Partners landing page: Go to Pages > find the page titled “Partners” > and select either “Edit” (to access Yoast and other basic info) or “Edit with Elementor” to change the CTA, header, or other elements.
  • To edit the Partners profile feed results: Go to Templates > Theme Builder > Partners Loop Item. Note: You will likely not need to edit this unless you’re making significant changes to the Partner feed results.  

Back to Top

Media Library

To view the Media Library, go to: Media > Library

If you need to access the media library while entering content, you can click the “Add Media” within a WYSIWYG text editor or click an “Add Image” button within page blocks that have image fields. These buttons will take you to the Media Library dashboard. On the left-hand side, you will see any folders you have created, and in the center you will see any uploaded images.

NOTE: All images should be cropped and compressed before adding to the media library. It is recommended that images be no larger than 250kb (though sometimes this is unavoidable). You will want to crop the image to the appropriate dimension prior to compressing. This site, tinypng.com, can be helpful in compressing file sizes for images.

WATCH: How to Manage Files in the Media Library & Add Image Alt Text

How to Add Images to the Media Library

  • To add new images and files, click the “Add New” button at the top of the page. Then click “Select Files” or simply drag and drop a file into the window.
  • You can add files directly to a specific folder or drag and drop them into the proper folder later.

WATCH: How to crop and save an image for web and reduce page load times

How to Create Folders in the Media Library

  • Below the “Search Folders” search bar, you should see a parent folder called “Media Library” that includes all images not sorted into folders. Click on that parent folder first.
  • Click the “+ Add New Folder” button in the upper left corner.
  • Create a title for the new folder and hit “CREATE.”
  • You can also nest folders by dragging and dropping them over the folder you wish to nest it under.
  • If you wish to create a subfolder, right click on the parent folder and select “New Folder”. Create a title for the folder and hit “CREATE.”

How to Edit the Metadata for a Image or PDF in the Media Library

When you click on an image or PDF, you’ll see a popup preview of the image and its associated metadata:

  • Alt text

    NOTE: For more information about alt text, check out our accessibility tips page.

  • Title
  • Caption
  • Description
  • File URL

NOTE: Orbit’s recommended best practice for image metadata is to add any relevant alt text and leave all other fields blank, unless otherwise required by the design.

How to Change an Image’s File URL

  • In some cases, you might have to update an image’s URL in order to free up that slug for another page or file on the site.
  • Navigate to the the media library and then find the image whose URL you want to update.
  • Click on the image to open the Attachment details panel.
  • In the lower right corner, you should see a list of links. Click “Edit more details.”
  • In the upper right corner, click on “Screen Options”
  • Make sure that “Slug” is selected and then close out of Screen Options
  • Scroll to the bottom where you should see the slug field available
  • Update the slug as needed (usually in order to free up the slug for another page or file on the site)
  • Click “Update”

Alt Text Best Practices

Images used for means other than decoration should have include alt text to describe the image so a screen reader can inform the user of the contents of the image (e.g. Woman using phone at desk). Image alt text should describe the image and should not use special characters.

NOTE: For more information on how to add alt text, read our accessibility tips page.

WATCH: How to Manage Files in the Media Library & Add Image Alt Text

How to Add and Link to a PDF

WATCH: How to Embed a PDF Link into a Page or Post in WordPress

In addition to images, you can also upload and manage PDFs in the Media Library.

Uploading PDFs works the same way as images, the only difference is linking to/adding PDFs to a block.

If you need to link a PDF, the “File URL” field is the link you will use for linking directly to the PDF. Simpy click “Copy URL to clipboard” or manually copy the URL and then use that URL to link to the PDF in a CTA link or button, like you would for a page or external site.

FAQs about the Media Library

Question: Can I crop and edit photos in the media library?

No. You want to crop and edit your photos somewhere outside of WordPress. We don’t recommend cropping or editing photos in WordPress.

Question: Will alt text be on all my images?

Alt text only appears on images where you’ve purposefully placed alt text. See more about Orbit’s alt text best practices on our accessibility tips page.

Question: What file types should I use for my images?

Orbit recommends uploading your images as .jpg/jpeg whenever possible. This is typically the best file type for things like stock photography or background images. For images that need to be higher resolution (like infographics or maps) it’s acceptable to use a png. For icons we recommend a png or an svg.

Back to Top

Gravity Forms

To create & edit forms, go to “Forms” on your sidebar

  • In the Gravity Forms dashboard, you should see all of the existing Forms on your site.
  • Click the edit icon below your form title to edit, duplicate, preview, and delete your form. You can also view the submissions by selecting “Entries.”
  • At the top, click “Add New” to create a new form, or duplicate an existing form if you want to copy an existing form’s settings. Here you will see the main editing window, where you can control all of the fields and content within the form. Above that window is a drop-down with the following:
    • Form Settings allows you to rename your form, create a description, and other adjustments to form appearance.
    • Confirmations allows you to set what the visitor will see after they’ve submitted a form. You can either create a unique message or redirect the form to a thank you page URL (recommended).
    • Notifications allows you to determine who is notified when an entry comes in, and what information that person can see in the notification.
    • Personal Data is for advanced settings (like saving IP addresses, integrations, etc.).

How to Edit Form Fields

Select “Edit” under your form – In this window, you can edit the forms and the submit button on the form.

  • Add in the form fields you want from the right sidebar.
  • The last field on the form should be the submit button and should contain actionable text, such as “Get in Touch” or “Send my Message.”
  • Once desired form fields are added. Click “Safe Form.”

How to Edit Email Settings

While editing, select “Confirmations” from the top navigation drop-down – In this window, you can edit the thank you page redirect, email admin, and email user settings for each form

  • Default confirmation – Edit this confirmation and select whether you want a success message (Text) or a redirect to a thank you page (Redirect)
    • If Text – Enter the success message text
    • If Redirect – Enter the full URL for the thank you page
  • Save your edits – This action tells Gravity Forms to record the information into its database for future access.

While editing, select “Notifications” from the top navigation drop-down.

  • Admin Notification – Edit this to change/update the admin email notification
    • SEND TO EMAIL: Should be the email on the admin side who should receive the email notification.
    • FROM NAME: Should be the name the user entered in the form fields.
    • REPLY TO: Should be the user’s email address that they enter in the email field. You can select this as a merge tag option.
    • SUBJECT & MESSAGE: Should contain the information from the form that is relevant to the person receiving the notification. This is the content that will make up the notification email when it is sent to the admin.

How to Add a Gravity Form to a Page

Once the form is complete, copy the short code and paste into a content editor on the page where you want the form to live.

Back to Top