Content Guide

Introduction

The Gutenberg editor is the primary way of building out content in modern WordPress sites and is included in the default installation. In prior versions a third-party editor was required to build structured content and each site would use a different system depending on the functionality and capabilities that were needed. For example, the construction equipment sales site currently uses the Fusion Builder plugin to manage content because it worked best with the Avada theme.

The new editor is a much appreciated addition to WordPress but it is not without its own issues. One of the downsides of the Gutenberg editor and other third-party editors before it is that they offer too much flexibility and therefore make it difficult to produce a cohesive style across the site. Attempts at theming the core components to resolve this can be complicated due to the difficulty in overriding the existing styling. Another downside is that, due to the technical implementation of the editor and how it injects custom HTML between components, it is not a true WYSIWYG (What You See Is What You Get) editing experience. This means that a carefully crafted design in the editor may render completely differently on the frontend of the site.

Significant changes have been made to this site and the Coppard theme to overcome those shortcomings. Firstly, most of the core components have been disabled leaving just headings, paragraphs, lists and tables. These are fundamental components that cannot be easily modified or replicated. Secondly, some customisation options have been disabled as they do not align with the theme. Thirdly, custom layout components have been introduced to create a consistent style across the site. Lastly, the styling has been modified such that the frontend and backend editor both look as similar as possible to produce a more accurate editing experience.

Components

This site uses a number of custom components in order to produce a cohesive and consistent design language across the site. The way in which these components interact has been carefully crafted to ensure that everything works together seamlessly.

Panels

Each page is built up of one or more vertically stacked panels. No other top-level components are allowed to be inserted. This ensures that all content is properly aligned and centred while allowing for alternate background colours that span the full width of the page.

Panes

Panes are a simple container for content and can only be inserted within a panel. Most panels will be built up using one or more panes arranged in a grid layout. Each newly inserted panel will start with a single pane.

Cards

Cards are an alternate form of pane with the option for a featured image. A newly inserted card will resemble a pane but the addition of an image will alter the layout depending on the chosen style. Like panes they can only be inserted within a panel.

Tiles

Tiles are intended to be used for large interactive buttons or links. They can only be inserted into a panel and have similar customisation options to cards with the addition of a link. The contents of a tile are limited to just headings and paragraphs.

Images

Images are exactly as the name suggests and allow inserting an image on the page anywhere a pane, card or tile might go. This is a custom component that allows specifying a focal point. Multiple images can be placed in a panel to create a gallery.

Actions

Actions are similar to tiles except are used for smaller buttons or links to other content within panes or cards. Each actions component can include one or more actions each with an individual style.

Headings

Headings are used to create named sections of content as would be done in any word processing application. Take care to ensure that the correct heading level is chosen to produce the correct page outline as seen in the editor overview menu.

Paragraphs

Paragraphs are the main content of a page. Each pane would typically contain one or more paragraphs of text.

Tables

Tables are used to create structured data such as listing specifications with separate columns for specification name and value.

Lists

Lists are used to create ordered or unordered lists of content. This includes styles for bulleted lists or numbered lists.

Guide

The following is a guide on how to create new content and update existing content on the site.

Add New Page

Go to Admin -> Pages -> Add New Page and then configure the page title, parent and URL permalink.

Update Existing Page

Go to Admin -> Pages, hover over the target page and click Edit. Alternatively, visit the page on the frontend and click Edit Page in the admin bar.

Insert New Panel

1. Select a top-level panel component, press the “+” button in the top menu and pick the panel component to insert a new panel after the selection.
2. Select a top-level panel component, select the “…” options menu from the floating controls or the overview panel and choose either the “Insert before”, “Insert after” or “Duplicate” options.
3. Exit the currently selected component and press the “+” button below the content area or in the top menu and pick the panel component. You can exit the selection by repeatedly pressing the escape key or clicking on any available whitespace below the content area.

Insert New Component

1. Select an existing container (pane, card, tile, actions) and press the “+” button that appears within the component.
2. Select an existing component within the target container and press the “+” button in the top menu.
3. At the end of a paragraph or heading, press the enter key and either start typing for a paragraph or type “/” to pick an alternate component.
4. While selecting a paragraph or heading, hover over the space between components until a divider appears and press the “+” button on the divider.
5. Select a component, select the “…” options menu from the floating controls or the overview panel and choose either the “Add before”, “Add after” or “Duplicate” options.

Create Grid Layout

1. Select a pane, card, tile or image within a panel.
2. Open the settings panel and select the “Block” tab.
3. Expand the “Layout” accordion and configure the “Column Span” option to pick the appropriate number of columns. Different blocks allow for different column layouts.

Update Component Style

1. Select a pane, card, tile or image within a panel.
2. Open the settings panel and select the “Block” tab.
3. Select the “Styles” tab.
4. Pick a preset style is available.
5. Set the background colour if required.

Examples

The following are a number of example layouts that have been successfully used other pages.

Step By Step

This layout is composed of a panel with one pane introducing the section and three or more cards with images to represent different steps in a multi-stage process.

Alternate

This layout alternates between images on the left and right side of a pane. The proportion of these is set to thirds so either the text or image may be set to take up the most space depending on the image or amount of text. Each image has a minimum height based on the grid but may grow as more text is added. This layout will typically include an introductory pane filling the panel width with a larger heading.

One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed ligula luctus mi sollicitudin tincidunt ac eget sapien. Fusce commodo dictum nunc. Proin euismod magna quis lectus finibus, in molestie nunc mattis. Cras imperdiet ac nisl ac facilisis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed ligula luctus mi sollicitudin tincidunt ac eget sapien. Fusce commodo dictum nunc. Proin euismod magna quis lectus finibus, in molestie nunc mattis. Cras imperdiet ac nisl ac facilisis.

Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed ligula luctus mi sollicitudin tincidunt ac eget sapien. Fusce commodo dictum nunc. Proin euismod magna quis lectus finibus, in molestie nunc mattis. Cras imperdiet ac nisl ac facilisis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed ligula luctus mi sollicitudin tincidunt ac eget sapien. Fusce commodo dictum nunc. Proin euismod magna quis lectus finibus, in molestie nunc mattis. Cras imperdiet ac nisl ac facilisis.

Previews

This layout includes an introductory pane with a heading, paragraph and action link followed by a series of tiles using the “Split” style. The narrow images in this style are not the focus but are intended to inject some colour and differentiate the different links. Each tile would ideally link to a section on the page in the “Read More” link. This has the effect of previewing the content on a child page to help guide users through the site.

Categories

This layout includes an introductory pane with a heading and paragraph followed by a series of tiles using the default style with the quarter column span. This can be used to link to different categories or collections such as those used by plant hire.

Highlight

This layout uses a pane with a contrasting background colour to highlight the content and differentiate it from the rest of the page. This should be used sparingly to add additional information to the page.

Call To Action

This layout uses a pane with a dark background, heading, paragraph and action buttons. This replicates the Call To Action component found on other sites to guide users to click the button.

Products

This layout uses a series of cards containing a heading, paragraph, table and action button to replicate the look of a product card without referencing an existing product. The look of these cards can be changed but each should be consistent on the page.

Gallery

This layout uses a number of independent image components within a panel to replicate a gallery. By using individual images instead of a gallery component it is possible to customise the layout and style of each individual image with interleaved components such as tiles and panes. This example has a large focus image that spans three of four columns and two rows. Both images have a caption and a tile component with the “Cover” style fills the gap enabling the ability to link to related content. All image components within a panel automatically open up a lightbox.

Hero

This layout creates a hero section with a dark background colour and background image. The parallax feature has also been enabled.