Build path · Intermediate

Elementor Intermediate

Learn Elementor Pro properly: design systems, Theme Builder, dynamic content, loops, forms, speed and accessibility. 2 hours of 1:1 tutoring included. £699 (was £1,399).

Course material is in production. Lessons, quizzes and the practical assessment will be added here.

Curriculum

Module 1: The professional workflow · 13 lessons
- 1.0 Course trailer and welcome
- 1.1 What you will build: Harborough Physio and Wellbeing and the eight projects
- 1.2 How this course works: projects, live classes, tutoring and assessment
- 1.3 The discovery call: questions that uncover the real job
- 1.4 Writing the brief and getting it signed off
- 1.5 Performance, accessibility and compliance belong in the brief
- 1.6 Content first: the content inventory and chasing copy and media
- 1.7 Sitemap and user journeys for a service business
- 1.8 Local, staging and live: which to use when
- 1.9 Setting up the staging site and a safe workflow
- 1.10 Project checklist and time budgeting
- 1.11 Module 1 recap
- Module 1 worksheet
- Module 1 check (quiz)
Module 2: Pro in Elementor 4 · 15 lessons
- 2.0 Module intro and version check
- 2.1 Choosing a Pro plan, installing and licensing Pro
- 2.2 Updating Core and Pro together, on staging first
- 2.3 What Pro adds in Elementor 4: components, interactions, forms and loops
- 2.4 Theme Builder tour
- 2.5 Classic Pro widgets you still need, beside atomic elements
- 2.6 Cloud templates and kits across client sites
- 2.7 Role Manager and collaborative notes
- 2.8 Custom code and custom CSS: where each belongs
- 2.9 Wireframing in Figma in one hour
- 2.10 Project 1 brief: the Harborough kickoff pack
- 2.11 Project 1 solution part 1: brief, sitemap and content inventory
- 2.12 Project 1 solution part 2: staging site and wireframes
- 2.13 Module 2 recap
- Module 2 worksheet
- Module 2 check (quiz)
Module 3: Design systems that scale · 17 lessons
- 3.0 Module intro and version check
- 3.1 Auditing a brand into tokens
- 3.2 Type and spacing scales as size variables
- 3.3 Colour tokens: primary, surface, text and states
- 3.4 Fluid type and spacing with clamp
- 3.5 Class naming conventions and the class manager
- 3.6 Default styles for HTML tags
- 3.7 Global classes or local styles: when to break the system
- 3.8 Components: build once, reuse, expose properties
- 3.9 Component variants: light and dark
- 3.10 A living style guide page
- 3.11 Moving a design system between sites
- 3.12 Project 2 brief: the Harborough design system kit
- 3.13 Project 2 solution part 1: tokens and default styles
- 3.14 Project 2 solution part 2: classes, components and the style guide
- 3.15 Module 3 recap
- Module 3 worksheet
- Module 3 check (quiz)
Module 4: Layout mastery · 15 lessons
- 4.0 Module intro and version check
- 4.1 Flexbox decisions: direction, wrap, gap and alignment
- 4.2 Grid for cards, galleries and bento layouts
- 4.3 Grid spans, order and dense placement
- 4.4 Position, z-index, sticky and overlap
- 4.5 Mobile-first thinking and custom breakpoints
- 4.6 Max-width, fluid units and container widths
- 4.7 Semantic tags on layout boxes: header, nav, main, section, footer
- 4.8 Layout debugging with the structure panel and the browser inspector
- 4.9 Converting an old section layout to Elementor 4
- 4.10 Project 3 brief: the Copperline layout lab
- 4.11 Project 3 solution part 1: overlapping hero and bento features
- 4.12 Project 3 solution part 2: pricing table and the legacy page conversion
- 4.13 Module 4 recap
- Module 4 worksheet
- Module 4 check (quiz)
Module 5: Theme Builder · 17 lessons
- 5.0 Module intro and version check
- 5.1 How Theme Builder decides what shows: templates, conditions and priority
- 5.2 Header layout: logo, menu and call button
- 5.3 Sticky and shrink behaviour
- 5.4 Mobile menu and off-canvas
- 5.5 Mega menu patterns
- 5.6 Footer with automatic year and legal links
- 5.7 Single post template
- 5.8 Single page template
- 5.9 Archive and blog index templates
- 5.10 Search results and 404 templates
- 5.11 Display conditions and template priority in practice
- 5.12 Project 4 brief: Harborough Theme Builder templates
- 5.13 Project 4 solution part 1: header, mobile menu and footer
- 5.14 Project 4 solution part 2: single, archive, search and 404
- 5.15 Module 5 recap and live class 1
- Module 5 worksheet
- Module 5 check (quiz)
Module 6: Dynamic content · 14 lessons
- 6.0 Module intro and version check
- 6.1 Modelling content: posts, pages, post types and taxonomies
- 6.2 Planning the Harborough content model on paper
- 6.3 Registering a custom post type and taxonomy
- 6.4 Designing fields with free ACF
- 6.5 Linking content: relationship fields in free ACF
- 6.6 The editing experience for the client
- 6.7 Dynamic tags in headings, text, images and links
- 6.8 Dynamic backgrounds and site-wide dynamic data
- 6.9 Single template for a custom post type
- 6.10 Taxonomy archives
- 6.11 Fallbacks and empty states
- 6.12 Module 6 recap
- Module 6 worksheet
- Module 6 check (quiz)
Module 7: Loops · 14 lessons
- 7.0 Module intro and version check
- 7.1 Loop options in Elementor 4: atomic loop, classic loop grid and carousel
- 7.2 Loop item templates
- 7.3 Queries: include, exclude, order and related
- 7.4 Filtering by category and taxonomy
- 7.5 Alternating templates and static items
- 7.6 Pagination and load more
- 7.7 Carousels for team and case studies
- 7.8 Keeping loops fast
- 7.9 Project 5 brief: Harborough case studies and team
- 7.10 Project 5 solution part 1: post types, fields and content
- 7.11 Project 5 solution part 2: loops, single template and archive
- 7.12 Module 7 recap
- Module 7 worksheet
- Module 7 check (quiz)
Module 8: Forms, popups and lead flow · 19 lessons
- 8.0 Module intro and version check
- 8.1 Planning the enquiry journey
- 8.2 Atomic form or classic Pro form: choosing the right one
- 8.3 Building the form: fields, layout and validation
- 8.4 Multi-step forms
- 8.5 Hidden fields and tracking where a lead came from
- 8.6 Actions after submit: email, email 2, redirect and webhook
- 8.7 Deliverability: SPF, DKIM, DMARC and SMTP
- 8.8 Stopping spam: honeypot, Turnstile, reCAPTCHA and Akismet
- 8.9 Consent, health data and GDPR-friendly storage of submissions
- 8.10 Popups: triggers, conditions and frequency
- 8.11 Polite exit intent and accessible popups
- 8.12 Sending leads to a spreadsheet or CRM with a webhook
- 8.13 Embedding a booking system without breaking the site
- 8.14 Project 6 brief: the Harborough enquiry flow
- 8.15 Project 6 solution part 1: multi-step form and emails
- 8.16 Project 6 solution part 2: webhook, popup and testing
- 8.17 Module 8 recap and live class 2
- Module 8 worksheet
- Module 8 check (quiz)
Module 9: Motion with restraint · 10 lessons
- 9.0 Module intro and version check
- 9.1 What motion is for: attention, feedback and continuity
- 9.2 A small motion system: durations, easing and consistency
- 9.3 Interactions: entrance and scroll triggers
- 9.4 Hover and click interactions
- 9.5 Transitions and transforms on states
- 9.6 Reduced motion and performance budgets
- 9.7 When not to animate: common mistakes reviewed
- 9.8 Module 9 recap
- Module 9 worksheet
- Module 9 check (quiz)
Module 10: Performance engineering · 14 lessons
- 10.0 Module intro and version check
- 10.1 Core Web Vitals explained: LCP, INP and CLS
- 10.2 Lab data and field data
- 10.3 Measuring with PageSpeed Insights, Lighthouse and Search Console
- 10.4 Finding the LCP element and fixing the hero image
- 10.5 Images: sizes, formats and lazy loading
- 10.6 Fonts and icons
- 10.7 Elementor performance settings
- 10.8 Caching and CDN at the host
- 10.9 Third-party scripts: maps, chat widgets and tags
- 10.10 Plugin audit with Query Monitor
- 10.11 Writing a performance report a client understands
- 10.12 Module 10 recap
- Module 10 worksheet
- Module 10 check (quiz)
Module 11: Accessibility and UK compliance · 17 lessons
- 11.0 Module intro and version check
- 11.1 WCAG 2.2 AA in one lesson
- 11.2 Landmarks, headings and semantic structure
- 11.3 Keyboard, focus and skip links
- 11.4 Colour contrast and text sizing
- 11.5 Images, icons and alternative text at scale
- 11.6 Forms and error messages
- 11.7 Accessible media and moving content: captions, video and carousels
- 11.8 Testing with a screen reader: the basics
- 11.9 Scanning with Ally and WAVE, and what scanners miss
- 11.10 Writing an accessibility statement
- 11.11 UK context: Equality Act, GDPR, cookie rules and business disclosures
- 11.12 Project 7 brief: the Fenwick Lettings speed and accessibility pass
- 11.13 Project 7 solution part 1: measuring and finding the faults
- 11.14 Project 7 solution part 2: fixing them and re-testing
- 11.15 Module 11 recap and live class 3
- Module 11 worksheet
- Module 11 check (quiz)
Module 12: SEO and launch · 12 lessons
- 12.0 Module intro and version check
- 12.1 On-page SEO: titles, descriptions, headings and internal links
- 12.2 Schema basics with your SEO plugin
- 12.3 Local SEO for UK businesses
- 12.4 Redirect mapping: keeping old URLs working on a rebuild
- 12.5 Analytics key events: tracking calls, emails and form submissions
- 12.6 The launch plan and pre-launch QA
- 12.7 Staging to live and the DNS changeover
- 12.8 The first 48 hours: post-launch checks
- 12.9 Ongoing monitoring: uptime, Search Console and forms
- 12.10 Module 12 recap
- Module 12 worksheet
- Module 12 check (quiz)
Module 13: Client-ready handover · 14 lessons
- 13.0 Module intro and version check
- 13.1 Safe client editing with Role Manager
- 13.2 Locking down the design: what clients can and cannot change
- 13.3 Writing the handover document
- 13.4 Recording a client training video
- 13.5 Maintenance plans: scope, pricing and response times
- 13.6 Pricing and proposing a site like Harborough
- 13.7 Invoices, VAT and contract basics for UK freelancers
- 13.8 Asking for a review and a referral
- 13.9 Project 8 brief: the Harborough launch and handover
- 13.10 Project 8 solution part 1: SEO, redirects and launch
- 13.11 Project 8 solution part 2: handover pack and training video
- 13.12 Module 13 recap
- Module 13 worksheet
- Module 13 check (quiz)
Module 14: Rescuing an inherited Elementor site · 11 lessons
- 14.0 Module intro and version check
- 14.1 The site audit: what to check first
- 14.2 Access, ownership and backups before you touch anything
- 14.3 Plugin conflicts and Safe Mode
- 14.4 Broken styles: regenerating CSS and syncing the library
- 14.5 Moving a classic site to Elementor 4 gradually
- 14.6 Cleaning up global colours, fonts and one-off styles
- 14.7 Rebuilding a page without losing its URL or rankings
- 14.8 Writing the audit report and quote
- 14.9 Module 14 recap
- Module 14 worksheet
- Module 14 check (quiz)
Module 15: Capstone, assessment and next steps · 11 lessons
- 15.0 Module intro
- 15.1 The capstone brief, criterion by criterion
- 15.2 The Harborough reference build marked against the rubric
- 15.3 Presenting your capstone live: what to show in 15 minutes
- 15.4 The online quiz: how it works and how to revise
- 15.5 The live practical test: the brief format and the 12 points
- 15.6 A practice run of the live practical test
- 15.7 Turning your capstone into a portfolio case study
- 15.8 Where next: the Advanced course and beyond
- Module 15 worksheet
- Live practical test: candidate guide
- Module 15 check (quiz)
Online quiz (assessment part 1) · 0 lessons
- Online quiz (assessment part 1) (quiz)
Online quiz re-sit (Version B) · 0 lessons
- Online quiz re-sit (Version B) (quiz)