The “how-to” page where you will find all sorts of helpful things about your new website.

Table of Contents

 

Pages

  1. In left 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. Once selected, you will be requested to ‘Enter title here’ for the page. 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. (Permalink: This is also where you access your URL for draft pages.)
    1. The H1 for the page defaults to the page title, but to overwrite the H1 text enter the desired text in the title field under ‘additional page content’
  4. Add your header image by selecting an image from your media library using the header image field under ‘additional page content’
  5. Enter content into wysiwyg (instructions below)
  6. Join page blocks to the page (if desired) by clicking name in the left window of Page Blocks box. Anything on the right will appear on the front end. Click and drag to reorder. Click (-) to remove from page. (See Page Blocks section for details on how to build Page Blocks. These need to be built before joining to a page.) 
  7. Enter SEO information in the Yoast settings at the bottom of the page. (You will need to add a Meta Title/Meta Description)

 

Content Editor (WYSIWYG)

  1. Type content directly into the wysiwyg in HTML Fields Tab or copy/paste from word processor with ease
  2. When copying/pasting, ALWAYS use the clear formatting button (small eraser icon) and/or paste as plain text (T on clipboard icon).
  3. Use special characters button for all special characters. If not, the coding may be different

 

Font Styles Selection

  1. Different font styles, including headers, are chosen from the Format 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
  2. Highlight the text and then select the desired font style
  3. To add introduction text, go to the format dropdown at the top of the content editor>formats>intro text.

 

Block Quotes In Content Editor

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

 

Links

  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.
    1. For internal links, insert page url only after your domain name. IE: www.website.com/about would be: ( /about).
    2. For external links, insert the entire url (http://www.website.com) and click Open in a New Window/Tab box.
      1. For telephone “click to call” functionality add tel:phonenumber, and for email insert: mailto:email@email.com
  3. To add a button, highlight the link, and in the format menu, formats: select CTA Button
  4. To break a link, highlight linked text and click Remove Link button (broken chain)
  5. Click Update
  6. To add a button to your link like this, highlight your link and go to the format dropdown at the top of the content editor>formats>button. Additionally, you can add a CTA link from the formats drop down like this 

 

Inline Images

  1. To add an in-line image, place your cursor on the area where the image should appear, and click Add Media button above wysiwyg
  2. Click on the little chart symbol to open the media library
    1. Scroll to find an image or search using field in top right corner, select it, then click Insert Into Page button
    2. 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.
  3. Once the image is in place, click on image to reveal edit toolbar. Choose an alignment and add vertical/horizontal space if necessary.
  4. Click Update

 

SEO Settings

  1. Search Engine Listing Tab (Yoast settings at the bottom of the page editor)
    1. Enter Title tags (max. 70 characters)
    2. Enter Meta Description (max. 140 characters)
  2. Social Networks Listing Tab
    1. (This is the pre-determined information that you want to include if someone were to Share your page or story. Mostly used in blog posts, or articles.)
      1. Enter Title
      2. Enter Description
      3. Upload Image

Home Page

  1. The standard content editor is where you manage the content that appears just under the hero area.
  2. Enter your SEO info in the Yoast plugin.
  3. In the ‘Home hero’ area select a hero image and enter the text into the content editor that you wish to appear over the image in the home hero area. Use the Format> button to create a button within the editor.
  4. Set your home hero image in the image field in the ‘home hero’ area as well
  5. The rest of the home page is built using page blocks.

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. Ordering pages in the menus is managed in Menus. (directions below)

Menus

  1. To add pages to your menus and to structure sub pages, navigate to Appearance> menus in the left wordpress menu.
  2. Select the menu you wish to edit via the dropdown at the top of the page (footer, main, top)
  3. 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.
  4. 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.
  5. 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.
  6. To add a custom link to your menu (external link or pdf), select custom link from the left options area, enter the link and label, and add to menu.
  7. The top right menu has ‘start my project’ has links that show up on mobile and tablet to shorten the text. Don’t touch these.

 

Adding a Sidebar Widget

  1. In Appearance> Widget Areas create and label a new widget area and assign it to the relevant page(s) with the check box fields below. This will create a right sidebar widget area on the desired pages like the example content styles page.
    1. To create a widget area for a barge entry, select the second tab ‘barges’ under ‘conditions’. Here you can select a barge entry (or entries) to assign your widget area to.
  2. Once this is created navigate to the left WP menu and choose OMS Widgets.
  3. Create the new content for that specific sidebar. You have options for open content, image, video, or map. Choose the correct type, and complete the entry.
  4. Navigate back to the left menu, Appearance > Widgets.
  5. Select the widget area you created from the list on the right.
  6. Click and drag the ‘OMS persistent widget’ from the options on the left into the corresponding widget area on the left.
  7. Choose the entry you completed in OMS Widgets via the drop down menu.
  8. If you are adding more than one sidebar element such as text, an image, etc., you only need to create one sidebar area.
  9. 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!

 

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.

  1. In left menu, click Page Blocks (This will allow you to view all Page Blocks that are currently built in your CMS)
    1. If you want to build a new Page Block, Select Add New. You can also edit an existing page block.
  2. To build a new page block: Enter Title
    1. Please note that the title is not associated with SEO in page blocks, so you will want to name it intuitively (so that you know how to grab it later when joining to a page).
  3. Hidden: Select No (recommended) from the drop-down menu
    1. If hidden is set to yes, the page block will not appear on the pages it is assigned to.
  4. Header: This field is optional, but any text in here will center above the content area(s)
  5. Hide on Mobile option allows you to hide page blocks on mobile devices to increase speed if desired.
  6. Layout: Select from the available list based on the type of block being created (full-width, two column, three column) Details below. Refer to available designs on page block styles.

 

Page Block Content Options

  1. Select your layout from the dropdown menu (full-width, two column, three column)
  2. Select your background color (white or gray or orange)
  3. With each column in the page block, you will need to select the type of content from the drop down menu next to ‘Column X Type’ (image, text, video, gallery, post, project)
    1.  After selecting the content type, enter your text or image in the given fields that appear.
      1. To create a Call to Action button, highlight the desired text, link it, and in the format drop down menu select ‘button’.
    2. Video page blocks require an image preview. Enter the url of your video and add the image from your media library.
    3. Add or remove slides from the Gallery Page block using the ‘Add row’ or – icons. Add a new image and text for each slide.
      1. You can add text under the gallery images in the ‘gallery text’ field that shows up after selecting the gallery content type.
      2. Gallery page blocks work in fullwidth or two column. The text overlays the gallery on the left or right side depending on which column you set as text.
    4. Blog and Project Page blocks only work in two column layouts.
      1. Select blog or project from the column content type drop down.
      2. Select a post or project to join to the block. All of the content will be pulled in from the post or project.
    5. Testimonials are created in the testimonial content option in the left wordpress menu.
      1. name the testimonial with the author’s name.
      2. Enter your testimonial into the WYSIWYG editor.
      3. In the given page block set to full width>testimonial>select the desired testimonial.
    6. Reference the style guide for the correct image sizing info
  4. Scroll back up and “Publish” your Page Block. Your new Page Block has been created, however, until it is joined to a page, it will not be visible.
  5. To join your page block to a page, go to the page you would like to add it to and select the name of the page block(s) in the Page Block section. For information on building a page, see the Page section above.
  6. The order of the page block, once selected, will dictate how they will appear on the page. Blocks can be re-ordered as needed and once complete select the Red Update button to save your changes and Publish.

Team Bios

  1. In left menu, click Team Bio (This will allow you to view all Team Bio pages that are currently built)
  2. If you want to build a new bio, Select Add New you may choose to edit an existing file
  3. Enter their name as the title of the team bio entry.
  4. Enter Position and add bio image.
    1. Add header images (if desired) under ‘additional page content’ just like a normal page.
  5. If Team member has Social Media data, click Add Row, select icon, and add the profile url.
  6. Enter bio content in wysiwyg editor
  7. Enter sidebar facts into the ‘sidebar facts’ field
  8. Enter SEO data
  9. Join Page Blocks, if desired
  10. Click red Update button to save your changes and Publish
  11. The bios are auto added to this page.
    1. Reorder the bios on the team bio listing page by dragging and dropping.

Posts

  1. In left menu, click Blog & News
  2. Select Add New
  3. Enter Title
    1. URL will be auto-generated based upon Title. To change, click the Edit button that appears under field
  4. Enter post copy in wysiwyg
    1. If copy contains links to outside sites, be sure to create link as Open in new tab.
  5. SEO Settings
    1. Search Engine Listing Tab
      1. Enter Title tags (max. 70 characters)
      2. Enter Meta Description (max. 140 characters)
      3. **If fields are left blank, search engines will use Blog post title for Meta tags and first 140 characters of post for Meta Description
    2. Social Networks listing Tab
      1. Enter Title:
      2. Enter Description
      3. Upload Image
  6. Check categories box from list
    1. Add New Category by clicking +Add New Category link at the bottom of Categories panel and entering category name
    2. Save by clicking Add New Category button
  7. Optional – Set featured image from Media Library
  8. When complete, go to Publish panel
    1. you may choose to Save Draft
    2. Click Edit link under Save Draft button to set post as Pending Review
    3. Visibility: default is Public. To change, click Edit link
    4. click OK button to save changes
    5. Publish Immediately: can be changed by clicking Edit link
    6. Enter publish date, click OK button
    7. Preview Draft, or click blue Publish button

Media Library

  1. Click Media, Library, Add New
  2. Drop files into window or click Select Files button
  3. To Edit Images or other Media you may view as a list or Media Grid View
  4. 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 before uploading images to Media Library. In this view, you may also edit the image metadata or media item metadata.
  5. Media library can be filtered by type or date and is searchable by title

Projects

  1. navigate to the projects section in wordpress. Add/remove/edit just like you would with a page.
  2. Add the name of the project and enter the content into the editor for the top of the project page. (under ‘overview’)
  3. Assign the project to a category using the selection tool on the right side
  4. Add SEO info
  5. Join page blocks
  6. Under ‘projects’ add the image in the image field. the featured image field is only relevant if it is the first project joined to the project landing page.
  7. Enter the content in sidebar details and sidebar features that will appear in the sidebar area.
  8. Portfolio page – under ‘project landing’ add the images, text, and links that appear under the top content (links to the project landing and the elements page)
  9. Project Landing page – the projects are automatically joined to the bottom of the page. Select the three featured projects that appear at the top under the ‘featured projects join’ (the first one aligns as the square to the left).

Options

  1. The Options section is where you can edit the social media links in the footer.
    1. Add a social media icon by clicking ‘add row’ and selecting your icon and providing the link to the account. This edits the links/icons that appear at the very bottom of your site.

Forms

  1. To create a new Form, select Forms from the left navigation.
  2. Select Add New Form
  3. You can either click “Add form fields” to build a form from scratch, or you can ‘Start from a template’.
  4. 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.
  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
    1. Edit redirect, email admin and email user settings for each form. To view all of your options, click the blue + button.
  7. 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.)
  8. Email admin –You can customize the way each submission hits your inbox: from name, address, to email (very important), subject, and fields.
  9. 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.
  10. 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.)