Getting Started – CME
Custom themes are basically highly customized versions of IDv2. Some things will be the same and some will be different.
The first big difference between custom sites and IDv2 is that you are not building the custom site out like you build out an IDv2 site. On a custom build, you are only entering content. You don’t have as much flexibility and creative freedom with custom builds. If there is something that needs to change in style or format, consult the developer.
- Theme Color Palette – this has already been done for you
- Theme Colors – this has already been done for you
- Site Logo – this has already been done for you
- Site Icon – this YOU will still do. See instructions
Adding Content
Some content will already be added just to build out and style elements of the site. However, this content may need to be edited and you’ll have additional content to add.
Be cautious editing existing content.
- Sometimes classes or ID’s are added to blocks for styling purposes. If those get removed, the page will break.
- Sometimes blocks are placed in a specific order for styling purposes. If those get rearranged, the page will break.
I’ll do my best to keep notes on those areas below.
Home Page
Hero
The structure of the home page hero is outlined here.
Container #1 – Content Slider
The Content Slider consists of 2 slides, each containing a cover block with 2 paragraphs inside.
- The Content Slider block has a class added to it for styling purposes
- The paragraphs have styles and dimensions set in the block settings.
Container #2 – Group
The group block immediately following the content slider block contains a columns block, each containing a paragraph with an inline image.
- Number of columns = 3
- The paragraphs have a class added to them. The class controls their animations.
About Us
The structure of the home page about us section is outlined here.
Container #3 – Group #about
The next group on the page has and ID added. You’ll see that ID on the Group line. The ID is about.
- The group block has an ID added to it for styling purposes
- The section blocks have background images and animations set.
- The blocks inside section > group (heading, paragraph and buttons) can be edited.
Equipping The World and American Craftsmanship
Both these sections are structured nearly identical to About us so I wont go into detail here.
Interior Pages
Interior pages are generally not as structured as the home page or custom templates are. The interior pages consist of a cover with title block followed by one or more group blocks, depending on your content needs. You can have a little more flexibility in these content areas.
The only thing that is necessary on interior pages is to add the synced pattern (formerly repeatable block), American Craftsmanship, as the last block on the page. It should be grouped. You may also add a background color to the group, if desired. I would suggest keeping this limited to white or light grey.
* If you wish to omit this section, you’ll need to add the max amount of padding to the last group on the page to accommodate the trees just above the footer.
Product Pages
The products are a custom post type. You’ll find them under Equipment in the WP admin sidebar menu.
These pages are structured and styled in a very specific way. You will need to follow this layout.
I normally create a PRODUCT MASTER page that can be copied and used as a starting point for adding new products. I think this is the easiest and most straightforward approach.
To clone a page,
- visit Equipment > All Equipment
- hover over the item you’d like to clone and click Clone (last option)
Once you’ve clicked Clone, a new drafted item should appear in the list with the same name and -DUPE appended to the end. You will now edit that -DUPE item.
Editing a Product
Now that you have duped a product, you can make changes. I’ve provided instructions for each section of the product page below. Though, some things wont need editing. For example, the Callout and American Craftsmanship block is on every page so since it has been included in the master, you wont need to worry about it.
PRO TIP: List view is your friend! Click the 3 staggered lines at the top left corner to open the page outline. This allows you to see the page structure and be sure you have the correct block selected to edit.
- Page Title
- Select Categories, Applications and Industries
- Image(s)
- SKU
- Pricing
- Information under Description
- PDF button link
- Accordion Content
- Callout
- Recommended Products
- American Craftsmanship
Page Title
You’ll see the page title twice here. But you’ll only edit one, the first one. The second is the title block and will update dynamically.
Select Categories, Applications and Industries
In the right sidebar, look for Categories. Check the boxes next to the appropriate Categories. Now, just below that, do the same for Applications and Industries.
Applications and Industries are custom taxonomies. But they are virtually the same as Categories so the same instructions apply
Image(s)
There are two places you’ll need to edit images, the featured image and the image slider.
Featured Image
You should be familiar with the featured image so I wont go into detail.
NOTE: Featured images need to be a minimum of 1200px on the shortest side. Google also uses this image and this is their size requirement.
Image Slider
The image slider block creates a slider out of a standard WordPress gallery. To edit, select the block and either click the little pencil icon in the toolbar or click the upload button or Media Library link at the bottom. These will allow you to add/remove images from the gallery. It’s ok if there is only one image.
SKU #
The SKU # is a custom block. There are 2 places it can be edited, the block edit view or the sidebar (right).
Block Edit View
Click the block, then click the little pencil icon.
You will now see a field to enter/edit the product SKU #. Click the little screen/eye icon to go back to the preview.
Sidebar (right)
When it preview mode, if you click the block, the edit field should appear in the right sidebar. If it doesn’t, be sure you have the settings panel open (icon has black background when open).
Pricing
Pricing is also a custom block. Just like SKU #, there are 2 places it can be edited, the block edit view or the sidebar (right).
*** see above for instructions.
However, the settings are a bit different.
First, you’ll be asked to toggle pricing on/off. If toggled, on, an additional field will show to enter/edit the product price.
Information under Description
This section is just text in paragraph blocks.
PDF button link
*** DO NOT TOUCH THE ADD TO QUOTE BUTTON ***
It is setup for the quote builder plugin any edits may cause undesired results.
The link for the PDF button will need to be added. Upload the PDF to the media library (PDFs folder) and copy the url to add to the button.
Accordion Content
The accordions are pre-styled and pre-filled with content you can simply edit.
The only thing to be mindful of is the formatting inside the Specifications accordion. It contains 2 sets of 3 columns, where the other accordions contain lists.
Callout
The “CME Is Your Best Choice” callout is a synced pattern. It does not need to be grouped, just inserted between groups.
Recommended Products
PRO TIP: List view is your friend! Click the 3 staggered lines at the top left corner to open the page outline. This allows you to see the page structure and be sure you have the correct block selected to edit.
Be cautious clicking in this block as it will take you to that product page. I suggest utilizing list view here! Select the Post Carousel block and go over to the right sidebar. Expand Sorting and Filtering, and in the box under DISPLAY ONLY THE SPECIFIC POSTS enter the ID of the posts to include, separated by commas.
Finding the Post ID
Visit Equipment in the WP admin menu. You will now see a new column labeled ID. This is the number you want to include in the box.
American Craftsmanship
The synced pattern (formerly repeatable block), American Craftsmanship, is the last block on the page. It should be grouped. You may also add a background color to the group, if desired. I would suggest keeping this limited to white or light grey.
* If you wish to omit this section, you’ll need to add the max amount of padding to the last group on the page to accommodate the trees just above the footer.