Home Page Your homepage can feature items from News, Long Reads, Bites, Short Reads & From the Long Table which can all be found in All Posts ●
Selecting a post to show on the home page To select an item to show on the home page, either: Give it a green tick in the All Posts view
Or: Toggle “Yes” on Featured on Home inside an individual post.
NB 1. It is recommended that as you add new posts to the site, that you move them below the home featured items so that they are easy to find. ●
Item sizing
Widths Item widths are set by a defined column width From All Posts you can edit to type in the “Featured On Home Size” with either 1 Column, 2 Columns or 3 Columns From inside a post use the Featured On Home Size to select the column width:
Height The height of an image item is dictated by the height of the image you load to Home Featured Image
NB’s 1. The height of a video element is set by the underlying video container proportions 2. The height of a colour item is set by the Text Over Colour length ●
Image / Video / Colour Choice ○ To set an item to have a colour background instead of an image/video, give it a Featured on Home Background Colour - this is set by hex code. You can then add Featured on Home text over Colour
○
To enable a post to have a video on the home page set Show Video on Homepage to yes. (without this set means that a video can be shown on the Bites/Long Read page when an image is displayed instead on the home page).
○
For a video you can either use the Youtube shortcode (and add a cover image by adding a Home Featured Image) or Add a Youtube or Vimeo iframe embed code. (A Vimeo Pro account will let you set your own cover image from withing Vimeo ■ Youtube Shortcode e.g.
■
Vimeo Iframe (choose responsive Iframe when in vimeo)
○
●
To give an item a hover image, use Home Featured Hover Image - THIS MUST BE THE SAME SIZE AS THE HOME FEATURED IMAGE
Order of items The ordering of items is based on their order in the back of the system - you can drag and drop items to re-order them.
E.g. IF Item 1 = 3 columns and is roughly double height Item 2 = 1 column Item 3 = 1 column Item 1 will sit on the left with items 2 and 3 stacked to the right of it.
BUT IF YOU WANT TO REVERSE THIS Item 1 = 1 Column Item 2 = 3 Columns and is roughly double height (floats to the left and then leaves a gap) Item 3 = 1 Column - The system finds space to backfill item 3 into the space left under item 1
If the system can fit an item into place then it will do so (imagine each item sliding in from the right and trying to butt up against the first thing that gets in it’s way to the left) e.g. items 2 & 3 below do not match or exceed the height of item 1, then item 4 will butt up against item 1 rather than sitting underneath it. 5 & 6 get backfilled in.
B N The system builds the layout based upon with available items, their order and width from the left across the top and then backfills any gaps it can.
Bites and From The Long Table
●
Ordering For the Bites and From The Long Table pages, items are ordered by date (newest first) to edit the order of items, you need to edit their published date.
●
Sizes Size for Bites and From The Long Table items are set by their Long Table or Bites Column Size and the featured image height
●
Hover images Hover images are set by Bites or Long Table Hover Image - THIS MUST BE THE SAME SIZE AS THE FEATURED IMAGE
●
Video Loading a video is the same as on the home page - for a youtube shortcode, the Featured Image will become the cover image.
Contact Page The contact page has 2 content areas - one for above the list of offices and one for below. ●
Editing Offices Offices can be dragged and dropped to change their order. Clicking the Add Office button enables you to add a new office.
Services Services can be dragged and dropped to change their order Each Service has an area for: ● Title Over Image ● Title above related posts ● Related Posts picker ● Excerpt that shows on the on the Services Page ● Featured Image that shows on the Services Page NB 1. All services will auto adjust their height on the Services page to match the tallest item
2. Individual service pages are built inside Elementor
Portfolio & Highlights Each portfolio item has the ability to: ● Set Portfolio category for filtering ● Add a PDF for downloading ● Give an excerpt ● Make a Highlight ● Give a Highlight Subtitle ● Give a Highlight Link image and H over Link Image ● Featured Image (440px x 331px) this shows when a portfolio item opens up:
NB 1. Individual highlights are edit with Elementor
Site Options In Options you can: ● Set the footer message ● Upload a new logo ● Change the Page not found message
Elementor To enable as much control and creativity as possible your site includes a page builder called Elementor. With Elementor you can custom design pages, or copy existing ones to edit your layout. Elementor Pages Include individual highlights, Long Reads, Clients, Awards & Opportunities Use the Edit With Elementor button to edit your page:
●
Add a row
●
Select Structure e.g. full width, 2 columns …
NB 1. Once in place, you can change some structures by clicking the 6 white dots (on blue background) on that row
●
SET THE CONTENT WIDTH TO Full Width
●
Click the Grey Plus button in column to add a widget (choose from standard or global widgets) then drag onto you selected area
●
Edit content related to your widget ○ Text editor for text content and headings ○ Image for images and images with captions ○ Video for videos including videos with cover images ○ Dividers (black lines) ○ Image Gallery ○ Image Carousel
○ ○ ●
Toggle (for accordions like on the Opportunities page) Quotes find inside Global Widgets
Page titles For page titles use a text box and give the text an Heading 1 setting
To insert a manual line break - switch to text view and insert
where you want the break.
NB 1. Manually inserted line breaks can be problematic on smaller screens, you may be able to achieve what you want with the correct column width. ●
Advanced Settings ○
Styling (Padding items)
For each item in Elementor, as well as entire rows you can edit the style and some advanced settings
In the style menu you can: ● Change font family ● Alignment ● Font colour ● Font size
In the Advanced Menu you can: ● Change Padding (space inside an area) ● Change Margin (space outside and area) These values can be linked together, or independent
○
Responsive changes Clicking the little computer icon brings up the device settings so you can edit the settings for tablet and mobile display
NB
1. By clicking on a row/layout icon a column full width on tablet:
●
Global Widgets
you can edit the setting to make
Global widgets have pre-designed widgets to use across the site ○
Accessing Quotes Select from the Global Widgets tab and drag onto a column Now unlink the item so that you can edit its content individually (a Global widget could be used for the same content across the site which is editable in one place)
○
Adding New Global Widgets Right clicking on a widget enables you to save it for use as a Global Widget Elsewhere
●
Layouts Menu (Ctrl / Cmd + Shift + L)
● Pressing Ctrl / Cmd + Shift + L will open up the layouts menu - from here you can: ○ Save a layout for future use ○ Load a saved layout
●
Elementor Hotkeys and other notes In Elementor there are various shortcodes available as well as the ability to right-click on many items See https://docs.elementor.com/article/105-hotkeys for up to date hotkeys
●
Saving The bottom of the Elementor panel includes the option to save or update your page.
The Settings cog will also let you change page titles and featured images:
The burger menu at the top left of Elementor lets you exit back to the dashboard or view your page.
