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 > Intro.

Intro Style Example

 

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 (https://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  select button style.

Button Example

CTA Link Example

Image Lists

You can use this additional styling found in Formats to create this design list with small icon images in it. 

This will only work within a Page Block, NOT in a page content wysiwyg. Create a bulleted list with an inline image added at the beginning of the text. Create a link using the text and the image. Then select the Image List style found in the Formats dropdown.

 

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

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 blog posts.)
  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 posts.)
  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.

 

projects

  1. In left menu, click Projects (This will allow you to view all existing projects.)
  2. To add a new project, go to Projects > Add New (you can also do this from the All Projects page.)
  3. Name the project page with the Client Name. This will create the url: /project/client-name. (This will feed to the project landing page and the project page block.)
  4. Add a Title Override in the Additional Page Content if you want a longer, detailed h1 rather than the page name (client name).
  5. In the right column select all the applicable category options for the three project filters. Yo can also add new category fields here.
  6. Add a Featured Image in the right column from the media library, or you can also upload a new image at this point.)
  7. Add a Project Logo image (reference the style guide for sizing.)
  8. Add a Project Image image (1600 x 580). This is the full width image that appears below the h1 header and Short Description.
  9. Enter the Short Description in the wysiwyg. Use the Intro Style found in the Formats dropdown.
  10. Enter the page content in the main wysiwyg. The styling for the “Challenge, Solution, Results” is h3 and paragraph text.
  11. Join any additional page blocks (such as blog posts) you’d like to display.
  12. Set any specific Yoast SEO meta information as you would on a basic page.
  13. 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 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 ‘three-step’ process. 1. Creating the sidebar widget content. 2. Creating the space on the page for the widget. 3. 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 Contact 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

New Forms

  1. To create a new Form, select Ninja Forms from the left navigation.
  2. Select Add New (or you can add new from the Ninja Form Dashboard or duplicate and existing form.)
  3. You can either click “Blank Form” to build a form from scratch, or you can start from a template such as Contact Us.
  4. On the right side of the screen are all of the form fields that are available to you.
  5. 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.
  6. Next select the “Email & Actions” tab to edit the Success Message and Admin Email.
    1. 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.)
    2. Email admin –You can customize the way each submission hits your inbox: from name, address, to email (very important), subject, and fields.
  7. 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.
  8. 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.

Editing Existing Forms

  1. To edit the existing form select Ninja Forms > Dashboard from the left navigation.
  2. Select form to be edited.
  3. Click on the gear icon of the field you want to edit.
  4. Edit the Label to change the name of this field, edit or add Options below to change the selections available within the dropdown.
  5. Each field in the form has a ‘Required Field’ toggle switch under the Label.
  6. To add new fields click on the blue “+” button in the lower right corner.
  7. Once the form is complete, publish your form. The form will automatically update on the pages that have the short code for this form.

 

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.