Wix Editor: Customizing Your Site Header
4 min read
Your header is the section at the top of your website and usually contains your site’s menu and logo. As your header gives visitors their first impression of your site, we recommend that you customize it so that it's in keeping with your brand and site's aesthetic.
Choose the design and scroll effect for your header, and set the size and borders to make a bold impression on your visitors.
The elements inside your header are automatically shown on all pages that your header appears on.
In this article, learn more about:
Changing your header's design
You can change your header's design to suit your site. Select a design from a variety of presets, and customize the settings such as the color, spacing, and corners.
To change your header's design:
- Click the header.
- Click the More Actions icon
.
- Click Change Header Design.
- Click to edit Regular or Scroll state.
- Use the options to customize the header design:
- Fill Color & Opacity: Choose a color for your header and adjust its opacity.
- Border: Add borders to your header to make it stand out on your page.
- Corners: Make the corners of your border rounder, or more square.
- Shadow: Add and design a shadow to give your header a cool 3D effect.
- Spacing: Make the spacing between your header and its offset bigger or smaller.
Setting an image as your site's header
To further personalize your site, you can set an image as your site's header.
The image must be be smaller than your header in order to fit inside it and be attached properly. We recommend using an image with a resolution and size that is compatible with the size of your header, such as a banner image.
To use an image as your site's header:
- Go to your editor.
- Click Add Elements
on the left side of the editor. - Click Image.
- Select the type of image you want to add.
- Click and drag the image onto the page.
- Drag the image to the header and drop it when you see the Attach to Header message.
Tip:
You can also customize your header by clicking Quick Edit.
Resizing your header
You can resize your header to make it as big or as small as you want.
Big headers are useful if you have a lot of elements such as a site title, site menu, and logo. Smaller headers are great for minimal sites, or if you have most of your elements on the page.
To resize your header:
- Click the header in the editor.
- Drag the stretch handle at the bottom of the header to make it taller or shorter.
Adding a scroll effect to your header
Add a cool scroll effect to your header to choose how it behaves when visitors scroll down your page.
To choose a scroll effect for your header
- Click the header.
- Click More Actions icon
- Click Header Scroll Settings.
- Select a scroll setting:
- Scrolls with site: Your header is always at the top of the site and moves up and down with the page.
- Freezes: Your header remains on top of the page. This allows your site visitors to easily access your site menu without scrolling back to the top. We recommend keeping the height of your header small so it doesn't cover any element or content when visitors scroll through your site.
- Disappears: When you visitors scroll through your site, the header disappears. For the header to reappear, your visitors need to start scrolling up.
- Fades out: The header slowly fades out when your visitors scroll through the site and reappears when they start scrolling back to the top.
Tip:
Your mobile and desktop sites can have different header scroll effects. Learn how to change the header scroll setting on your mobile site.
Did this help?
|