HOW TO

The “How-to” page is where you will find all sorts of helpful information about your new website.

How-To Table of Contents


Pages

  1. From the Dashboard left-side menu, click ‘Pages’ (This will allow you to view all Pages that are currently built.)
  2. If you want to build a new page, select ‘Add New
  3. On new pages ‘Enter title here’. Upon saving the draft or publishing the page a URL will be auto-generated based upon what is entered into the “Enter Title” field. To change, click the Edit button that appears under field.
  4. If applicable, set the parent page under Page Attributes (in the right column.) This will set the url structure but NOT the visual display of subpages in the site navigation. You will need to add these in Menus (see below.)
  5. Under ‘Additional Page Content‘ you can add the Title (this will override the page name and be the page h1) and Header image  (this will override the default header image.)
  6. Enter content into wysiwyg editor (instructions below). Most of your pages will use the page blocks to layout content.
  7. Enter SEO information in the Yoast SEO settings. (You will need to add a Meta Title/Meta Description.)
  8. Select any page blocks to join to the page by clicking name in the left window of Page Blocks box. Anything on the right will appear on the front end. (See Page Blocks section for details on how to build Page Blocks.)
    1. Click and drag to reorder. Click (-) to remove from page.
    2. Note: Page blocks need to be created before they can be joined to the page.
  9. Save as Draft, Publish (or Update to save edits) the page block to save it.
    1. Remember, published page blocks will not be visible on a page until it has be Joined to that page.

 

Content Editor (WYSIWYG)

  1. Type content directly into the wysiwyg editor or copy/paste from word processor with ease.
    1. When copying/pasting, ALWAYS use the ‘clear formatting’ button (small eraser icon) after pasting, and/or ‘paste as plain text’ (T on clipboard icon) before pasting.
  2. Use special characters button (Ω) to replace any special characters from pasted content. If not, the coding may be different.
  3. To add a horizontal line across the content space click on the ‘horizontal line’ icon ().

 

Font Styles

  1. Different font and header styles are preloaded in the (Paragraph) drop-down menu and are labeled (Header 1, Header 2, etc.) Please see the Content Styles page for reference to your site’s font styles.
    1. Highlight the text and then select the desired font style
  2. Add ‘Intro‘ text styling by highlighting text and going to Format > Formats > Intro.
  3. To make bullet list dots into checkmarks, select copy and then go to Format > Formats > Checkmarks.

 

Block Quotes (in Content Editor)

  1. Highlight text to be put into block quotes.
  2. Select block quote button () next to the Italics.

 

Links and Buttons

  1. Highlight the word/s which you want to create as a link and clicking on the insert/edit link icon.
  2. Enter the destination URL directly into the field or performing search by beginning to type in the internal page or post you want to link to.
    1. For internal links, you can also insert the page url after your domain name. IE: www.website.com/about would be: ( /about). Click the blue arrow ‘Apply’ button.
    2. For external links, insert the entire url (http://www.website.com). To open external links (or anything else) in a new tab click on the ‘gear’ icon to get more link options. In the popup window click “Open in a New Tab”. Click the blue arrow ‘Apply’ button.
    3. For telephone “click to call” functionality add “tel:” followed by the phone number (tel:8885551234).
    4. For email links add “mailto:” followed by the email address (mailto:name@email.com)
    5. To break a link, click on the link and then click the ‘Remove Link’ button (broken chain icon).
  3. To make a link into a button, highlight the link and in the Format > Formats select ‘button/ button reverse/ text button’.

Button Example

Button Blue Example

CTA Link Example

 

Inline Images

  1. To add an inline image (most likely used within Blog Posts), place your cursor on the area where the image should appear, and click ‘Add Media‘ button above wysiwyg.
  2. Select image or search using field in top right corner, select it, then click blue ‘Insert Into Page‘ button.
    1. You can also Upload a new file from your computer. Note: Images should be edited and cropped to the correct pixel dimensions before uploading. Jpgs and Pngs should be 72dpi. To keep page load times low we generally recommend that images be less than 250mb.
  3. Once the image is in place, click on image to reveal edit toolbar. Choose an alignment and click on the ‘edit’ pencil icon to control other setting such as link options.

 

SEO Settings

  1. Yoast SEO tab will automatically pull the page name and beginning content on the page as your Meta Title and Descriptions. Overriding these will allow you to control what text (and keywords) search engines will see here.
    1. Enter Title tags (max. 70 characters)
    2. Enter Meta Description (max. 140 characters)
  2. Social tab – These fields can be used to custom set the information that will display on social media when the page, post, etc is shared on social media. Mostly used for any pages, post, resources that will be shared on social media.
    1. Enter Title
    2. Enter Description
    3. Upload Image

 

Page Attributes

Underneath the publishing tools at the top right is Page Attributes. This is where you can assign a page to a parent page.

  1. If you assign a page to a parent page it will change the url structure of the page.
    1. If ‘new page’ is assigned to ‘old page’, its url will change to old-page/new-page
  2. You can set the order of pages in the visual navigation in Appearance > Menus. (directions below)

Page Blocks

Page Blocks are created separately from pages, and then joined to the desired page(s). They do not appear on your site unless they are assigned to a page. You can either assign pages from the page block backend, or, from the page backend you can join created page blocks.

All Page Blocks

  • To view/edit existing page blocks, in the dashboard left menu, click Page Blocks/All Page Blocks. This will allow you to view all Page Blocks that are currently built.
    • From a page, you can also click on the “Edit” red button that appears in the upper right corner of each page block (you must be logged into WordPress) to edit that specific block.
  • Existing page blocks can be “Cloned” or “Copied to a New Draft” but you MUST rename and change the joined pages or duplicates will appear on those pages.
  • Page blocks may be used on multiple pages exactly as they are created (you may consider naming these starting with “Global”). Keep in mind that any edits made to this page block will be reflected across all occurrences of this block.

Add New

  1. To create new page blocks, in the dashboard left menu, click Page Blocks > Add New. You can also click “Add New” from the top of the All Page Blocks view.
  2. Enter title here
  3. Note: unlike page titles, this title is not associated with SEO in anyway.
  4. You will want to name it intuitively, such as starting with the name of the page this block will be joined to, followed by the block layout, and perhaps the beginning content of the block. This will make it easier to find to edit later. Example: “About – 5050 Our History”
  5. Select your desired Layout: Columns, Blog Feed, Logo Collections, Locations, Team, Instagram
  6. Follow more detailed instructions on Page Blocks Layout Options page for each specific layout option.
  7. Join this page block to specific page(s) here. Note: This page block will appear at the bottom of that page. If needed, you will have to go to back of the page to rearrange the order of the blocks.
  8. Save as Draft, Publish (or Update to save an edit) the page block to save it. Remember, even published page blocks will not be visible on a page until it has be Joined to that page.

Page Block Layout Options

Columns

Columns can be used for 1-4 columns. Within each column choose between 5 content types: Text, Image, Video, Gallery, Card.

*Two column blocks have two layout options: Default and Full-Width. Default will inset the two columns with a slight outline around them, surrounded by the background color.

Full-width (used for Image/Text combination) will allow the Image to display flush to the top, bottom and outside of that columns container.

  • Text Content: Use the WYSIWYG to add written content in 1-4 columns. Use in two-column combinations with Image, Video, or Gallery. For 3 and 4 column options you should only use Text for each column. See WYSIWYG instruction above for header, intro text, link button, and other styling instructions. Always remember to clear clear formatting to remove any DIV or Span content in the WYSIWYG.
  • Image Content: Images will mostly be used in 2 columns in combination with text. You may also use it in one column for a large image. In 3 or 4 columns use only image content and set images to the same dimensions.
  • Video: Images will mostly be used in 2 columns in combination with text or in one column for a large video. You can use YouTube or Vimeo urls to embed a video link. NOTE: Do not use the image overlay feature. This does not work on this site. 
  • Gallery Content: Gallery should only be used in 1 or 2 column combinations.
    • All images used in a gallery should be the same exact px dimensions. Recommended Image size for one column is 1600px wide X any height. Recommended Image size for two column is 750px by any height.
      *In 2 column it is important to remember the height of the image should balance with the amount of text in the other column.
  • Card: Card content is a combo of Image above text. Manage these fields the same way you would for the content options above. This content should be used in 2, 3, and 4 columns, but not one.

Notes:
If an image is being used then a link can be added to the image to make it clickable.  Adding a link under ‘Image Link’ will accomplish this. Please see the screen shot below:

Image Cards Block

  • select background color
  • Click Add Row red button
    • Add image – recommended image size is 750px X 600px but any size (larger than 400px wide) will do. All images should be the same size. 
    • Add text – this is not a wysiwyg. The text will only display paragraph style text.

Testimonial

Logo Block

Form Block


Custom Post Types:

Posts (blog)

These are built very similar to pages, but have a slightly different layout and required fields.

  1. In left menu, click Posts (This will allow you to view a listing of all created course.)
  2. Posts also has a Categories taxonomy that can be used for filtering the blog. Each post should be assigned to the relevant categories. Select relevant Categories in the right column. New categories can be added here.
  3. To add a new posts, go to Posts > Add New (you can also do this from the All page.)
  4. Add a Featured Image, be sure to use the recommended size so that all images will appear consistently on the landing page. This image will appear on the landing page cards, blog page blocks, and large at the top of the blog detail pages.
  5. On the new Post detail page, name the course (this will feed to the landing page and blog page block).
  6. Enter blog content in the wysiwyg.
  7. Under Additional Page Content, you can overrider the page name with the Title field and enter a header image for the detail page.
  8. Enter an Excerpt if you want specific content, different than the blog starting content to appear on the landing page cards.
  9. Note: Page Blocks are not applicable to the blog.
  10. Set any Yoast SEO meta information as you would on a basic page.
  11. Publish, Update or Save as a Draft.
    1. In the Visibility tab of the post to Sticky, this will make this post appear at the top of the blog feed.
    2. Under Published you can change the date to post date or schedule ahead when this post will appear.

 

Team Bios

  1. In left menu, click Team Bios (This will allow you to view all existing bios.)
  2. To add a new bio, go to Team Bios > Add New (you can also do this from the All page.)
  3. Name the Bio detail page with the Persons Name (this will feed to the team page block)
  4. Add a Bio Image from the media library. (You can also upload a new image here.)
  5. Enter title in the Message field.
  6. Enter relevant Details which will appear styled at the top of the page.
  7. Enter wysiwyg content in the left and right columns.
  8. In Additional Page Content enter Header Image to overwrite the default page header image.
  9. If needed, just any additional page blocks (such as blog posts) you’d like to display.
  10. Set any specific Yoast SEO meta information as you would on a basic page.
  11. Publish, Update, or Save as a Draft.

Media Library

  1. To view the Media Library click Media in the dashboard menu. (You can also go directly to the ‘Add New’ screen from here.
  2. To ‘Add New’ images/files, click the Add New button at the top of the page. Then drag and drop files into window or click Select Files button.
    1. You can add files directly to a specific folder, or drag/drop them later.
  3. Inside the Media ‘Grid’, media items are displayed in a thumbnail grid for ease of navigation. Click any media item to edit the image title, meta data, link options; however, we recommend that you use photo editing software like Photoshop before uploading images to Media Library.
    1. This is where you can find the unique URL for image and PDF, which can be used to link to ‘Download’ a PDF.
  4. Media library can be filtered by type or date and is searchable by title.

Options

  • Edit the Header Phone Number
  • Edit the defautl header image for pages and blog posts, and the default featured image for blog detial pages.
  • Edit eNewsletter signup text that appears on the blog landing pages.
  • Edit Social Media links in footer

Menus

Use menus to organize how you want the various menus to display.

  1. To add pages to your menus and to structure sub pages, navigate to Appearance > Menus in the left dashboard menu.
  2. At the top of the page, select the menu you want to edit from the dropdown, or select create a new menu.
  3. Adding Pages (or post type pages):
    1. Find the page you wish to add to your menu from the selection area on the left. Select all applicable pages and add to menu.
    2. Once in the menu, drag and drop the pages to reorder or set as sub pages.
      1. To set as a subpage, drag the page so it appears indented underneath the primary page.
    3. The menu label defaults to the name of the page but this can be overwritten. Click the arrow that appears all the way to the right of the page label and enter your title in the ‘navigation label’ field. You can delete menu items in this section as well.
    4. ‘Save Menu’ with the red button to the right.
  4. Adding ‘Custom Links‘ such as a phone number or external site page.
    1. To add a custom link to your menu, select ‘custom link’ from the left options area and ‘Add to Menu’.
    2. Add the URL and Navigation Label you want to display.
  5. ‘Save Menu’ with the red button to the right.

Widgets

This is a four-step process.

1.On the Case Studies backend menu, click the far right column check mark under the “Custom sidebars” column.

2. Creating the sidebar widget content.

3. Creating the space on the page for the widget.

4. Joining the widget to that page.

  1. Create the sidebar widget – In the dashboard menu go to OMS Widgets > Add New. (you can view all existing widgets here)
    1. Name and add the new content for that specific sidebar. You have options for open content, image, video, map. Choose the correct item, and complete the entry.
  2. Create the space on the specific page for the widget – In Appearance > Widget Areas, create (Add New) and label a new widget area and assign it to the relevant page(s) with the check box fields below. This will create a sidebar widget area on the desired pages, like the content styles page. NOTE: if they page already has a Widget Area created, you can skip this step.)
  3. Join the widget to the space – Once the area is created go to Appearance > Widgets, select the widget area you created from the list on the right (newly created areas will appear at the top).
    1. Click and drag the OMS Persistent Widget tab from the options on the left into the desired “area” on the right.
    2. Click the drop down on the OMS Persistent Widgets and choose the entry you completed in OMS Widgets.
  4. If you are adding more than one sidebar element such as text, an image, etc., you only need to create one sidebar widget area.
    1. You have to drag/drop the OMS Persistent widget into the sidebar multiple times until all of your items have been added. Continue to select the different widget sections from the drop down menu. If you want to reorder them, just drag and drop!

Forms

  1. To edit the existing contact page form “Contact Form”
    1. Select “Contact Form”
    2. Add additional elements from the right column to join them to the form.
    3. Click on elements in the form to drag and drop them into your preferred order.
    4. Each field in the form has a ‘Required Field’ check box under the general tab.
  2. To create a New Form, select Forms from the left navigation.
    1. Select Add New Form
    2. On the right side of the screen are all of the form fields that are available to you. If you are not seeing the form fields, click the blue + button to reveal them.
    3. Click a form field to have it appear on the left side of the screen. Clicking on the form field will open up a window on the right where you can customize the “Label” of the field and/or make a field required.
  3. “Settings” tab
    1. Under Form Settings, double-check the form title.
      1. Under Label placement, change to “Top aligned”
      2. Under Form button, adjust Button Text as needed
      3. Click Update Form Settings
    2. Under Confirmations, select “Page” (This is where your Thank You page is entered)
      1. Select your Thank You page. (This will need to be built in order to select the page)
      2. Note: If setting up a new Thank You page (after launch), be sure to track this action in Google Analytics.
    3. Under Notifications, adjust the admin notification for a form submission

Once you have completed your form, it is now ready to be added to a page. Go into the page that you want to add the form to and click “Add Form” above the WYSIWYG. You will need to select the form from the drop-down window. In your options, you can choose to “Display Form Title”, “Display Form Description”, “Enable Ajax”. The only option that would be used here would be “Display Form Title”, but since you are adding this to a page with a title on it, the recommendation would be to just use the title on the page itself. Uncheck all boxes and click “Insert Form”. This will add the form to your page using shortcode.

Homepage

The homepage is a basic page with additional functionality related to the header area.

  1. Homepage Content:
    1. Title: Enter the h1 for the page
    2. Background Text: The large style light text behind the h1. (Imagine
    3. Header Image: Enter image (size is different than the inner page header image)
    4. Button Text: Enter text for button that can appear below the h1.
    5. Enter Button link
    6. Enter Animation Speed
    7. Enter Message Duration
    8. Enter Home Page Messages that will rotate in place of the h1.