Purpose #
This guide outlines how your Agend website manages design elements such as fonts, colours, templates, headers, and footers, and explains best practices for maintaining consistency across your pages using Elementor.
Agend Design: Fonts and Colours #
Your website has been pre-configured with global design settings aligned to your organisation’s brand style guide. These include:
- Primary and secondary colours
- Heading and body fonts
- Font sizes for paragraphs, headings, and buttons
- Button colours and hover states
Best Practice #
- Do not manually override fonts or colours per page.
- Stick to the global design system for a consistent, professional experience across the site.
- If your organisation’s branding changes in the future, global updates allow these changes to be rolled out efficiently across all pages.
Caution #
Elementor allows you to manually override fonts, colours, and sizing at the widget level, but we do not recommend doing this unless you are creating a one-off design element with specific approval.
Misuse may result in:
- Inconsistent branding across the site
- Higher ongoing maintenance costs
- Difficulty applying future brand updates
Page Templates #
Elementor includes custom-designed templates specifically created for your organisation during the AMS build.
These templates ensure:
- Brand alignment
- Layout consistency
- Faster content creation
To Use a Template When Creating a Page: #
- Click Edit with Elementor
- Click the Folder icon (📁) to Add Template
- Select the “My Templates” tab
- Choose from available templates such as:
- Membership Overview
- Resource Library
- Advocacy Landing Page
- Event Information Page
- Click Insert, then edit the content
Warning: Avoid using Elementor’s default Blocks or Page templates. These are not branded for your organisation and may include:
- Unauthorised colour schemes
- Generic placeholder content
- Inconsistent layout behaviour
Header Settings #
Your website’s header has been configured as part of the Agend theme setup.
- Default setup: Your logo, navigation menu, and call-to-action (if applicable) are globally applied.
- Inner Pages (non-home): You can choose between:
- A coloured theme banner with the page title, or
- A custom Featured Image header
To Edit Page Header Settings: #
- Open the page in the WordPress Page Editor (not Elementor)
- Click the cog icon ⚙️ (bottom-left panel)
- You can:
- Change the Page Title
- Adjust the visibility/status
- Upload a Featured Image to display as a header banner on that page
Footer Settings #
Footers are pre-configured in your theme and not managed via Elementor.
Your footer includes:
- Four widget columns (e.g. About, Quick Links, Contact, Resources)
- Social icons (linked to your association’s platforms)
- Optional:
- Newsletter signup form area (top or bottom row)
- Legal links and copyright
To modify footer content, contact your administrator or developer. Customising the footer via Elementor is not supported in Agend-built sites.
Additional Support #
If you’re new to Elementor or want to explore advanced layout options (while still following Agend’s guidelines), refer to:
Elementor Academy #
Available tutorials include:
- How to use sections and columns
- Working with global styles
- Responsive editing
- Using saved templates
Recap: Key Do’s and Don’ts #
| ✅ Do This | ❌ Avoid This |
|---|---|
| Use only templates from My Templates | Using Elementor’s default blocks or pages |
| Stick to global fonts and colours | Manually changing fonts and colours on widgets |
| Add headers via Page Settings > Featured Image | Attempting to customise the footer via page editor |
| Contact your web team to update the footer | Attempting to customise the footer via the page editor |
