How to make a simpleHeader in ETCHWP

Download the template ready to use

Header responsive template

Receive to you’re email the code JSON

We will do a header on ETCHWP on this video to see what it’s the workflow that we need to follow here.

Maybe this video will be a little shurcut to don’t do a super large video.

Also, you can download this JSON Template to import on you’re ETCH installation.

How Download?

Well, you must suscribe to the website, and register and you can access to this template to copy and paste.

• Set Template Catch ALL
• Use Header as a component
• Do the semantic HTML
• Gift of template

Are you ready to take control of your website’s design? While many website builders offer pre-made templates, knowing how to build a component from scratch gives you unparalleled freedom. This guide will walk you through the process of manually creating a semantic and functional header in ETCHWP, a pre-alpha WordPress builder.

---

Why Manually Build Your Header?

ETCHWP is currently in its pre-alpha stage, which means many dynamic elements like basic navigation aren’t yet built into the core builder. This tutorial addresses that gap, showing you how to manage headers as components instead of static templates, giving you more flexibility and control.

---

Getting Started: Initial Setup

Before we dive into the creative part, let’s get the basics right.

1. Access your HWP installation.
2. Navigate to the “templates” tab.
3. Select the “catch all” option. This acts like a master template for your entire website, similar to index.php in WordPress.
4. Inside the main container (which holds your page content), you’ll add a new section. This will be your header.
5. Move this new section above the main container.
6. Rename it to “header” and, most importantly, change its HTML tag to <header> for proper semantics. We’ll use BEM classes for quick organization.

---

Designing Your Header: The Essential Elements

A typical header includes a logo, a navigation menu, and a call-to-action button. We’ll replicate a Figma design with these key elements.

1. Adding the Logo

• Insert your logo as an SVG element. You can copy the code directly from Figma.
• Give it a class, like logo.
• Wrap the SVG in an <a> (anchor) tag to make it a clickable link. Don’t forget to set the URL!

Note: The speaker encountered a minor bug with the SVG output during the tutorial, but it’s a quick fix that won’t stop your progress.

2. Building the Navigation Menu

• Add a div to serve as a container for your navigation.
• Set its display to flex.
• Inside the div, add a <ul> (unordered list) for your menu items. This ensures correct HTML5 semantics.
• Autogenerate the <li> (list item) elements you need.
• Wrap each <li> in an <a> tag, and assign a class like nav-link.
• Set the flex properties for both the navigation container and the <ul>:
  • display: flex
  • flex-direction: row
  • justify-content: space-between
  • align-items: center
• Add a gap to create spacing between your links.

3. Including a Button

• Instead of a simple link, add a button element.
• The tutorial uses a “neutral button” from Automatic CSS for a pre-styled look.
• Adjust the text size for both the button and the navigation links using Automatic CSS classes.

---

Final Touches and Styling

• Add padding-block to your header for vertical spacing.
• Create a hover effect for your navigation links by changing their color on hover. This adds a subtle, professional touch to your design.

---

The Future of Your Header & Next Steps

This tutorial is just the beginning. The speaker mentions a potential future tutorial that could cover creating a mobile version of the header, complete with an “off-canvas” or “burger trigger” menu, possibly even integrating AI for an advanced build.

Don’t want to start from scratch? You can download the speaker’s JSON file with the complete header template to save time and get a head start on your project!

---

Ready to start building? This guide gives you the foundational knowledge to create a fully functional, semantic header in ETCHWP. It’s all about understanding the components and putting them together with precision. What part of this manual process are you most excited to try first?