This is a big website that will have multiple people adding content. The information and rules below have been written to help keep the design consistent.
If you experience issues with how something is displaying or working please let us know so we can try make a global change rather than having multiple people creating different individual fixes.
The widgets that we are most likely to need for the majority of content have been pre-styled.
Where possible they have been saved as default styles, but as this doesn't work consistently, the easiest option is to copy and paste them onto new pages.
View Pre-styled Widgets
Page margins
Top level containers that contain 1 column of content need to have a class added to the outer container. There are 3 x choices.
- page-margin – This has padding on the top and bottom as well as the sides. Should be used for containers that have full width colour or image backgrounds.
- page-margin-0-top – padding on all sides, except top. Use this for the first container on each page.
- page-margin-0-top-btm – padding on left and right only.
The page-margin class should also be applied to the 2 nested containers when text is set in 2 columns.
Intro Text
Add the class intro-text to the text editor to style intro text. If another paragraph is required using different styling an additional text editor will need to be added.
Image sliders
Add the class sc-slide-3-2 to the widget 'Slider.3 (SC) to set the image height to a ratio of 3:2
Table column spacer
sc-table-column-spacer – removes top and bottom row lines from column, to make an empty column
Containers with a page margin class applied should be set to boxed (this is currently set to 1140px). – There may be some situations when this content will look better boxed at 1440px. This is still being resolved.
Containers that contain full width 2 column content should be set to full width.
Paragraph styles have been set up in Elementor's global styles.
They generally use font-size clamps rather than hard set pixel dimensions. Additional paragraph spacing has been added through custom CSS (this may need refinement).
If you are experiencing issues with how these display, please discuss with the team so we can look for a global fix. While individual overrides may be necessary, we try to avoid these if possible.
H1 – Should only ever be used for page headings.
H2 – H5 – Behave as expected descending through hierarchy.
H2 Is set to Capitalised, H3 and below should be sentence case.
H6 – Has been styled to match body copy, but with a smaller bottom margin. Use this for the sentense before a bulleted list
H6 with link applied – This has been styled to look like a button. and is an easy solution to needing a button inside a block of text.
A style has been setup for buttons which is separate from Accent text. This allows for the text on buttons and inline links to look different. Big image buttons that include a heading have been styled as H3
While not strictly necessary it can be really helpful to name containers (especially outer ones) so we (and the client) has an idea whats inside. This is more important on complex pages than simple ones.
Cropping within image frames
The default image alignment should be set to crop center top. Please keep this in mind when cropping images, or adjust the image alignment within widget if required.
Sizes
While there will be situations where other image sizes are appropriate. Generally lets try to crop images to...
- Feature – 1920 x 640 px
- General – 900 x 600 px, or 900 x 900 px
- Staff profile – TBD
Naming images
Please name imgaes in a useful and consistent way.
I usually start with school initials_activity/something we might search for-year-suffix_size (Or 'banner' for featured images)
For example:
- KC_academic-teacher-2026-1_banner.webp
- KC_drama-2026-3_900x600.webp
- KC_sport-2026-1_900x900.webp
File type
Please save images as webp when appropriate.