Create your first Header

This step-by-step guide walks you through how to create your first stunning header using Stax.

If you are starting Stax for the first time, the walk-through tutorial will help you build your first zone and start creating your header.

Using Stax to build your header means you will replace your current header with a Stax Zone. You can always switch back to your generic header opening Stax and going to Zones > Disable Header Zone.

Before we start, let’s talk a little bit about zones.

[overview of zones]

A zone is basically a container that replaces a section of your site. For example, in this tutorial you will create a zone that will replace your header. By default, in the “Zones” section in Stax we pinned the most 3 important zones that might be replaced in your website: Header, Content, Footer. (we called them “Default zones”)

[PICTURE WITH DEFAULT ZONES]

So we already have a predefined Header zone in our zones list so we don’t need to add a new one. We just have to render it.

Step 1

Click “Render” for the Header zone. A screen similar to the following one will appear.

[SELECT ZONE PICTURE]

Step 2

Using your mouse, click on the section from your website which you want to replace. After you clicked, a document tree will appear on the right with your selected section highlighted and all it’s parent sections. If you are confident you aren’t breaking anything, you can go ahead and select one of its parents.

[PICTURE AFTER SELECTING AREA]

Step 3

Click “Add” and your section will be automatically replaced with the Stax zone and your zone will be in edit mode. Note that you can only edit one zone at a time!

Step 4

Your Header zone comes by default with a Header container inside it. You can start adding elements to it and then save it.

[PICTURE WITH RENDERE ZONE]

Step 5

Check your website to see the changes.

[PICTURE WITH FRONTEND]

Please check out the following video for a step by step guide:

[VIDEO HERE]