Wix Editor: Customizing Your Site Header
4 min read
Your header is the section at the top of your website and usually contains your menu and logo. As your header gives visitors their first impression of your site, we recommend customizing it to fit your brand and aesthetic.
Choose a design and scroll effect for your header, and set the size and borders to make a bold impression on your visitors.
In this article, learn more about:
The elements inside your header are automatically shown on all pages that your header appears on.
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
on the right.
- Click Change Header Design.
- Click the 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.
The 'Scroll' state lets you design your header to look different once visitors scroll down the page. For example, you can make the header change colors or add a border so it stands out.
Setting an image as your site's header
To further personalize your site, you can set an image as your site's header. Drag the image onto the header to attach it, then use the drag handles to stretch the image across the header. You can then move the image to the back so that it does not hide your header's elements.
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.
- Add a new image or select an existing one on your page.
- Drag the image to the header and drop it when you see the Attach to Header message.
- (Optional) Drag the resize handles to stretch the image to the width of your header.
- Move the image to the back:
- Right-click the image.
- Hover over Arrange and click Move Backward.
Tip:
Replace your header image anytime using the Quick Edit panel, clicking Change next to the current image.
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.
- 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 as visitors scroll up and down. For example, keep the header at the top as visitors scroll, or make it gradually fade away.
To choose a scroll effect for your header
- Click the header.
- Click More Actions icon
- Click Header Scroll Settings.
- Select a scroll effect:
- Scrolls with site: No scroll effect is applied. When visitors scroll down the page, they also scroll away from the header (i.e. the top of the page).
- Freezes: Your header remains on top of the page as visitors scroll up and down, giving them easy access to your site's menu.
Tip: When choosing this effect, we recommend keeping the header rather short so it doesn't cover any content on scroll. - Disappears: When visitors scroll through your site, the header gradually 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?
|