Create a flexible, lightweight environment in Trial Ground for experimenting with layouts and section designs that do not rely on Elementor Pro, ensuring compatibility with the free plugin and potential reusability on other projects like https://cmarc.co.uk.

Trial Ground: Technical Foundation

Any new Website needs a firm foundation but, the design should utilise the available resources without incurring unnecessary expenditure.

• Theme: OceanWP (excellent free support for Elementor)
• Plugins:
  • Elementor (Free)
  • Header Footer & Blocks for Elementor – to customise header/footer
  • Essential Addons for Elementor (Free) – adds widgets like post grids, countdowns, toggle tabs
  • Safe SVG – for custom icons and logos
  • WP Reset – for easy rollback/reset

Page Layout Strategy

Homepage: “Elementor Free Layout Lab”

URL: / or /layout-lab

Sections:

1. Intro Header Block
   1. Static hero image
   2. Heading + Subheading
   3. Button (no dynamic links)
   4. Background overlay or gradient using free Elementor control
2. Three-Column Grid
   1. Image + Text + Button in each column
   2. Responsive stacking on mobile
3. Text + Image Block
   1. Image on left, text on right (and vice versa in another row)
4. List Styles Section
   1. Icon list, bullet points, numbered list (testing list styles)
5. Call-to-Action
   1. Text block with contrasting background
   2. Two-column structure with basic hover effects
6. Footer Variants (optional)
   1. Use the Header Footer & Blocks plugin to design reusable footer layouts without Elementor Pro

Page Templates (Free Version Workflow)

While Elementor Free does not allow template saving, you can:

• Create multiple test pages:
  • /test-hero-layout
  • /test-cta-layout
  • /test-animation-effects
  • /test-image-gallery
• Name sections clearly in the Elementor navigator for easy duplication

Design & Styling (No Pro Features)

• Fonts: Stick to default system fonts or those available via OceanWP’s customiser
• Buttons: Use global styles from the theme or Elementor’s button widget
• Spacing: Use padding/margin widgets and inner section elements
• Effects:
  • Entrance animations (Fade In, Slide In – free)
  • Hover states (background colour, border, box shadow)
  • Section background overlays with gradients

Mobile Responsiveness Testing

Use Elementor’s built-in responsive mode for:

• Device previews (desktop, tablet, mobile)
• Column reversal on mobile
• Element visibility toggles

Navigation & Pages

Menu Structure:

• Home (Layout Lab)
• Layout Tests
• Widget Tests
• Footer Designs
• About TrialGround

All pages should be simple Elementor full-width templates with clearly titled test sections.