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
Enter a title in the field that says “Add Title.”
This will be the H1 for your page.
Clicking the gear icon in the upper-right corner will open the document settings. From here, you can update the URL and Page Attributes.
Permalink — This is where you can update the URL for the page. Note: Upon saving the draft or publishing the page a URL will be auto-generated based upon what is entered into the title field. If you wish to change or adjust this URL, you can do that under the “Permalink” section.
Page Attributes — This is where you can assign a parent page.
If you assign a page to a parent page it will change the URL structure of the page.
If “new page” is assigned to “old page,” its URL will change to old-page/new-page.
You can set the order of pages in the visual navigation in Appearance > Menus. (directions below)
Page Header Options — Scroll to the bottom of the page to the “Banner” section, where you should see options for the following fields:
H1 override (which overrides the H1 set in the page title)
Intro paragraph copy
Hero image
CTA link
Footer CTA Options — Scroll to the bottom of the page to the “Page Level CTA” section.
Here, you should see the following options:
Display Global CTA (displays the global CTA that is edited under Options > Global CTA)
Hide (for pages that should not show any footer CTA at all)
Overwrite (Which will allow you to specify a unique footer CTA for that particular page)
Yoast SEO — 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.
Add specific SEO title and meta description for the page.
Use the social sharing tab in Yoast to set specific content for Facebook and Twitter.
You can also hide pages from sitemap and Google search:
Go to the “Advanced Settings” tab in Yoast.
Select the settings No (Index) and No (Follow) will hide pages from the sitemap and Google search
Page Blocks
Once your page is set up, you can start building out your page with page blocks.
Click the black + icon below the title of the page.
Here, you should see some options for choosing page blocks to add to the page. You can choose from these 6 most recently used page blocks or select “Browse All” to see all of your page block options.
Add the page block style that you want.
Each page block will have different options based on the style that it is.
In the settings tab:
Edit the settings for that particular page block
Settings will vary based on the type of page block you have chosen. Typically, the settings here will include background color, column options, and layout styling options.
In the content tab:
Add in the content accordingly.
Like the settings tab, the layout of the content tab will vary based on the page block style that you have chosen.
You can change the order of page blocks with the ∧ and ∨ icons.
Reusable Page Blocks
For certain page blocks, like a footer CTA, you might want to create a reusable block. A reusable block is an individual block that you can add to multiple pages with the same content in all instances. If you update a reusable block in one location, it will update everywhere.
To create a reusable block:
Go to: Gutenblocks > Reusable Blocks > Add New
You will be taken to a gutenberg editor where you can add and build out a reusable block, just like you would any other block
Once you have the content laid out the way you want it, give the block a name
Publish the block
To add a reusable block to a page:
Navigate to the page you want the reusable block to live on
Click the orange + icon in the upper-left corner, just like you would to enter a regular block
Toggle over to the “Reusable” tab
Select the block you want to add.
You will notice that the reusable block has a bright yellow border around it and a warning message. This is just to remind you that the block is a reusable block and might exist elsewhere on the site.
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.”
Use the “Special Characters” button (Ω) to replace any special characters from pasted content. If not, the coding may be different.
Content Styles
For more information about all of the various content styles possible for your site, visit your Content Styles Page.
Header Styles
Different header styles are preloaded in the “Paragraph” dropdown menu and are labeled (Header 1, Header 2, etc.)
You will never have to select h1 as the page name or title override will automatically create the h1 for this page.
Highlight the text and then select the desired header style.
Format Styles
Different format styles are preloaded in the “Formats” dropdown menu.
Add intro text styling by highlighting the text and selecting “Intro Text” from the dropdown.
Turn links into buttons by highlighting the link text and selecting “Button” or “Button Secondary” from the dropdown.
Tables
Tables are used in many places throughout the site. You have three options for how to create tables, based on the location:
WYSIWYG Tables
TablePress Tables
Gutenburg Table Block Tables
Note: All tables should recieve the same styling. You can use the and shortcodes to achieve the checkmark and X symbols for comparison charts.
WYSIWYG Tables are what we have used on the product detail pages. These can be created in any WYSIWYG on the site. Example on this page.
In the WYSIWYG, select the table icon in the editor.
Select the number of columns and rows you’d like.
Enter your content into each field/cell of the table
Style the content accordingly
In order to get a red background on a row, you will need to assign it as the header row. To do that:
Put your cursor in one of the cells in the header row
Then go to Table > Row > Table Row Properties in the WYSIWYG menu at the top
Then you should see an option to assign the row type as “header”
If you need to assign a different background color (such as a grey background for subheaders in tables):
Highlight the cells of the row you want to update
Then to go Table > Row > Table Row Properties > Advanced
Update the Background color from the color picker tool
TablePress Tables
TablePress tables can be used in place of WYSIWYG tables. This would be a good tool for tables that are particularly complex.
To create a new TablePress table, go to TablePress > Add New Table
Build out the table as usual (this will inherit the site’s table styling)
Once the table is built, take the shortcode from the “Shortcode” field at the top and place it into the WYSIWYG where you want the table to live.
Gutenburg Table Block Tables
Gutenburg tables are what we have used on the product comparison pages, like this one. Note that these are set up as a block and not a WYSIWYG, so they cannot be used in the tabs sections of product pages. You can see an example of this on this page.
To add one of these tables to a page, click on the orange + icon in the upper left corner to add a new block and select the “Table” block type
Select the number of columns and rows
Additional styling for these tables can be done by clicking on the three dots in the controls for the block and going to “Show more settings”. In here, you can assign table styles and set a header (red) row.
For comparison blocks, you can also include product ID shortcodes in table cells to bring over information about the products, including the image, name, request info, and spec sheets.
To find a product’s ID, navigate to the back end of the product you want to link to.
Then in the URL of your browser, you should see a part of the URL that says “post=” the following number is that product’s ID number.
Custom Post Types
Products
To create a new product, go to: Products > Add New To edit an existing product, go to: Product > find the product you’d like to edit > Edit
Creating & Editing Products
Enter the title of the post in the “Add Title” field.
Enter all content into the content editor (WYSIWYG).
Yoast SEO — Set the SEO title and meta description in the “Yoast SEO” section.
Categories — Assign the category for this product in the right-hand sidebar. (See below for more information on product categories)
Note: Assigning the category to a product also means that category’s “product CTA” will appear on the product page below the hero images/gallery. For this product, for example, assigning it to the Benchtop category is what loads the “Not sure where to begin?” section under the image. More info on how to edit that content in the section below on editing product categories.
Set the featured image which will appear in the hero and in the all resource feed blocks as a thumbnail for this product.
Save and update the product.
Once the basic product information is set, scroll to the “Product Page Additional Content” section at the bottom. Here you should see three tabs:
Content Tab – In this tab, you’ll find the options to edit the following fields
Spec Sheet
Short Excerpt
Top Content
Main Content (body copy)
Image Carousel Tab – In this tab, you’ll find the options to edit and add to the image carousel + captions in the hero area. Note that the first image in the carousel will always be the featured image that you set in the sidebar. You do not need to enter the featured image in the carousel fields.
Tabs Tab – In this tab, you’ll find the options to edit the following fields
“Add Tab” to add an additional tab to the product
Tab Label
Tab Content (This WYSIWYG is where most tables will be built out for the products)
Offsite Link Products
Some products will live offsite and will thus need an external link set instead of a landing page.
In order to do this, set up a product as usual, with the name, featured image, and excerpts.
Then in the right-hand sidebar, you should see a section that says “Page Links To”. In this section, select the “A Custom URL” option to have the product point to another link instead of to a detail page.
Creating & Editing Product Categories
To create a new product category, go to: Products > Product Categories. To edit an existing product, go to: Product > Product Categories > find the category you’d like to edit > Edit.
Set the name and slug for the category
To edit a product’s “product CTA” that appears on the product detail pages, you’ll go to that specific product category and edit the text in the “Product CTA” field on the back end.
Blog Posts (Color Science Essentials)
To create a new post, go to: Posts > Add New To edit an existing post, go to: Posts > find the post you’d like to edit > Edit
Creating & Editing Blog Posts
Enter the title of the post in the “Add Title” field.
Enter all content into the content editor (WYSIWYG).
Yoast SEO — Set the SEO title and meta description in the “Yoast SEO” section.
Categories & Tags — Add categories and tags as needed in the right-hand sidebar.
See below for notes on creating and editing blog categories and tags.
Set the featured image which will appear on the all resources posts page as a thumbnail for this post item.
Save and update the post.
Blog Categories To create and/or edit a blog category, go to: Posts > Categories.
If you are trying to edit a category that is already existing, you can do that in the same location as well.
Edit/add category as you see fit. For a category to appear on the blog landing page, you must first apply that category to a published blog post.
Blog Tags To create and/or edit a blog tag, go to: Posts > Tags.
If you are trying to edit a tag that is already existing, you can do that in the same location as well.
Edit/add the tag as you see fit.
Customer Stories
Courses
Events
FAQs
Press Releases
Team Bios
Locations
Media Library
Note: 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 sized images. To view the Media Library, go to: 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.
You can click on any media item to edit the following fields:
Alternative Text
Title
Caption
Description
File URL
If you’re editing a PDF, the “File URL” field is the link you will use for linking directly to the PDF.
Note: The media library can be filtered by type or date and is searchable by title.
Forms
To create & edit forms, go to: Ninja Forms > Dashboard
Here, you should see all of the forms on your site.
Click the gear icon next to your form to edit, duplicate, preview, and delete your form. You can also view the submissions in this location.
Either click “Add New” or edit an existing form.
Go to the “Form Fields”
Add in the form fields you want with the blue + icon in the lower-right corner.
Once desired form fields are added. Click “Publish.” Note: This button will always say “Publish,” even if the form has already been published.
Go to 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 and paste into a content editor.
Menus
To edit menus, go to Appearance > MenusNote: The social media menu in the footer is in a different location. See below.
Editing Menus
Go to the “Select a menu to edit:” dropdown, and pick the menu you want to edit.
Use menus to organize how you want the various menus to display.
Adding Menu Items —
Find the page (or other type of menu item) you want to add to your menu from the “Add Menu Items” selection area on the left.
Select “Add to Menu,” and the page will appear at the bottom of that menu.
Drag and drop the page you added to the spot in the menu where you want it to appear.
To set something as a child menu item, drag the page so it appears indented underneath the primary page.
Click the arrow on the right side of the menu item for more options. In this area, you can edit the following items:
Navigation Label (the text that appears in the menu itself)
Title Attribute
A checkbox for opening links in a new tab
(optional) CSS Classes
Once you’ve got the. Menu the way you want it, click the “Save Menu” button in the upper-left corner.
Social Media Menu
To edit the social media menu, go to: Options > Footer > Social Media
Enter the links in the appropriate fields categorized by application.
