Skip to main content
    Guides & Reference

    Documentation

    Everything you need to know about using EtchwpKits components in your EtchWP projects

    Companion plugin docsSet up the plugin in five minutes, then use the library inside Etch: insert, customize and clone components, track what a page uses, save your own kits, add a contact form and stay up to date.Blog templatesSet up your Blog page and single post template, and turn a blog list into a category archive, with pictures of every step in Etch.AccessibilityHow the components handle headings, keyboard use, focus, motion, images and forms, and what depends on your own site.

    Welcome to EtchwpKits

    Your comprehensive library of premium EtchWP components

    1

    Sign Up for Free

    Create your account to access our library of free components. No credit card required.

    2

    Browse the Library

    Explore our collection of components organized by categories, layout types, and elements.

    3

    Copy & Paste

    Find a component you like, click copy, and paste it directly into your EtchWP project.

    4

    Customize

    Rename classes using BEM methodology and style components to match your brand.

    Key Features

    Smart Filtering

    Filter by category, layout, columns, elements, and more to find exactly what you need.

    Favorites

    Save your favorite components for quick access later.

    One-Click Copy

    Copy component code to your clipboard instantly.

    BEM Naming

    All components follow BEM methodology for maintainable CSS.

    Using Components in EtchWP

    Step-by-step guide to integrating components into your WordPress projects

    1. Find Your Component

    Browse the library and use filters to narrow down your search. Preview components before copying.

    2. Copy the Code

    Click the "Copy" button on any component. The HTML code will be copied to your clipboard.

    3. Paste into EtchWP

    Open your EtchWP project, navigate to the desired section, and paste the code.

    4. Rename Classes (Optional)

    Use our rename feature to update BEM class names to match your project's naming conventions. Premium feature.

    5. Customize Styles

    Add your own CSS classes or modify the component to match your brand colors and spacing.

    Understanding BEM Naming

    Learn about the BEM methodology used in all our components

    BEM (Block Element Modifier) is a naming convention that makes CSS more maintainable and scalable.

    .block

    The top-level component or standalone entity (e.g., .card, .button)

    .block__element

    A part of a block that has no meaning on its own (e.g., .card__title, .button__icon)

    .block--modifier

    A variant or state of a block or element (e.g., .button--primary, .card--featured)

    Example:

    <div class="hero">
  <h1 class="hero__title">Welcome</h1>
  <p class="hero__subtitle">Your tagline</p>
  <button class="hero__button hero__button--primary">
    Get Started
  </button>
</div>