KOUST Website Build Guide (Elementor Native)

This page contains the exact steps to recreate the KOUST site with Elementor native widgets while keeping the full design system (color palette, typography, spacing, and animations).

1) Upload and Activate Theme

  1. Go to Appearance -> Themes -> Add New -> Upload Theme.
  2. Upload koust-elementor-theme.zip.
  3. Activate KOUST Elementor Theme.

2) Create / Edit Home Page

  1. Open the Home page and click Edit with Elementor.
  2. Set page layout to KOUST Canvas (or Elementor Canvas).
  3. Create one top-level container with class koust-site.

3) Build Section by Section (Native Widgets)

Use native Elementor widgets (Container, Heading, Text Editor, Button, Image, Icon, Form). Do not paste one giant HTML block.

  1. Hero: classes hero, hero-eyebrow, hero-title, hero-subtitle, btn-primary, btn-ghost.
  2. Ticker: classes ticker, ticker-track.
  3. Origin Story: classes origin, origin-inner, origin-text reveal, origin-visual reveal.
  4. Products: classes products, products-grid, product-card reveal, product-name, product-price, product-add.
  5. Materials: classes materials, materials-grid, material-card reveal.
  6. Mission: classes mission, mission-quote, mission-attr.
  7. Family Banner: classes family-banner, family-text reveal, family-visual reveal.
  8. Performance Pillars: classes pillars, pillars-grid reveal, pillar.
  9. Inspirations: classes ambassadors, pro-inspiration, pro-card reveal, pro-card blue reveal.
  10. Newsletter: classes newsletter, newsletter-inner reveal, email-form, email-input, btn-white.
  11. Footer: use footer structure and classes footer-top, footer-bottom.

4) Animation Hooks

5) Asset and Content Notes

6) Source Files in Project