My blog

Category: Design

  • Design System Consistency in WordPress Themes

    Design System Consistency in WordPress Themes

    In the age of component‑driven design, consistency is non‑negotiable. When a design system—like the one built for the WPCLONE project—is ported into WordPress, every detail matters: exact hex colors, font families, spacing units, border radii, and shadows. This post outlines best practices for preserving that fidelity across the entire theme.

    Understanding the Core Elements

    The WPCLONE design system defines:

    • Palette: Primary #070D1A, Secondary #000314, Accent #0071A3.
    • Typography: Sora for headings (64 px H1 down to 14 px labels) and Inter for body copy.
    • Spacing Grid: 8 px increments for margins, paddings, and grid gutters.
    • Borders & Shadows: 1 px borders, subtle shadows, border‑radius 4‑12 px.

    Using CSS Custom Properties (Variables)

    Define all core values as custom properties in style.css. This makes future updates straightforward and ensures that Elementor styles can reference the same variables.

    :root {
  --color-primary: #070D1A;
  --color-secondary: #000314;
  --color-accent: #0071A3;
  --font-heading: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
  --spacing-unit: 8px;
  --border-radius-sm: 4px;
  --border-radius-lg: 12px;
}

    Applying Variables in Elementor

    When building global widgets in Elementor, reference the variables with var(--color-primary) or var(--spacing-unit). This guarantees that any change to the design system propagates automatically.

    Typography Management

    WordPress themes usually rely on the theme.json file (since WordPress 5.8) for global typography settings. Include the following snippet:

    {
  "settings": {
    "typography": {
      "fontFamilies": [
        { "fontFamily": "Sora", "slug": "sora" },
        { "fontFamily": "Inter", "slug": "inter" }
      ]
    }
  },
  "styles": {
    "typography": {
      "fontFamily": "var(--font-body)"
    },
    "heading": {
      "fontFamily": "var(--font-heading)"
    }
  }
}

    This ensures that Elementor’s heading widgets automatically pull the correct font family and sizing presets.

    Spacing Consistency with Elementor Container Settings

    Set the default container padding to calc(var(--spacing-unit) * 2) (16 px) and the gap between inner columns to var(--spacing-unit). This mirrors the original design’s 8 px grid.

    Border and Shadow Standards

    Create reusable CSS classes for common border and shadow patterns:

    .border-1 { border: 1px solid var(--color-primary); }
.shadow-sm { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

    Assign these classes to Elementor widgets via the “Advanced → CSS Classes” field.

    Testing for Consistency

    Use visual regression tools such as BackstopJS to compare the original React UI screenshots with the WordPress rendering. Flag any mismatches in color values, font sizes, or spacing and adjust the CSS variables accordingly.

    Conclusion

    By centralising design tokens in CSS variables, leveraging theme.json, and employing Elementor’s global widget system, you can faithfully recreate any modern design system inside WordPress. The result is a theme that feels native, is easy to maintain, and delivers the exact look and feel of the original site.

  • Boost Conversions with a Gradient Hero Section

    Boost Conversions with a Gradient Hero Section

    The hero section is the first thing visitors see. A well‑crafted hero can capture attention, communicate value, and guide users toward conversion. In this article we break down the components of WPCLONE’s gradient hero and show you how to recreate it in Elementor for maximum impact.

    Key Elements of the Gradient Hero

    • Gradient Background: A subtle dark‑to‑blue gradient that aligns with the brand palette.
    • Badge: Small caps text with an accent background, highlighting a key message.
    • Headline: Large Sora heading (64 px) that clearly states the offer.
    • Paragraph: Supporting copy in Inter, limited to three lines for readability.
    • Three CTAs: Primary button, secondary outline button, and a link‑styled text.

    Building the Gradient Background

    In Elementor, add a Section and set the Background Type to Gradient. Use the following stops:

    • Start: #070D1A (Primary dark)
    • Middle: #000314 (Secondary dark)
    • End: #0071A3 (Accent blue)

    Apply a border-radius of 8 px to match the overall design language.

    Creating the Badge

    Use the “Heading” widget for the badge text and style it with:

    • Background color: var(--color-accent)
    • Text color: #FFFFFF
    • Padding: calc(var(--spacing-unit) / 2) var(--spacing-unit)
    • Border radius: 4 px

    Designing the Primary CTA Button

    Set the button style to:

    • Background: var(--color-accent)
    • Text: White, font‑weight 600
    • Border: 1 px solid var(--color-accent)
    • Hover effect: Slightly darker shade of the accent color.

    Secondary Outline CTA

    Duplicate the button and switch the background to transparent while keeping the border and text in the accent color. Add a subtle box‑shadow to make it stand out on the gradient.

    Why Three CTAs Work

    Offering multiple pathways respects different user intents:

    • Primary button: Directs to a lead‑capture form (high‑intent).
    • Secondary outline: Leads to a product overview page (mid‑intent).
    • Link‑style text: Takes users to a case‑study or proof point (low‑intent but builds trust).

    Optimization Tips

    To keep load times low:

    1. Compress background images (if any) with WebP.
    2. Enable lazy loading for the hero image on mobile.
    3. Use Elementor’s built‑in CSS minification.

    Measuring Success

    After publishing, track the following metrics in Google Analytics:

    • Click‑through rate (CTR) on each CTA.
    • Time on page for visitors who land on the hero.
    • Conversion rate from the primary button to the lead form.

    Run A/B tests by swapping the badge text or adjusting the gradient angle to see which variant improves the CTR.

    Conclusion

    A gradient hero that respects the brand’s design system and offers three strategic CTAs can dramatically increase engagement. With Elementor’s visual editor and WPCLONE’s precise CSS variables, you can implement this pattern quickly and keep the look perfectly aligned with the original design.