Headers are often the first thing your visitors see when they arrive at your website. That’s why it is important to create a nice designed header that captures the visitors’ attention. Avoori makes it easy to customize a full-width header, with the page designer.
This module can only be inserted inside a full-width section. The first step is to add this type of section and then add a new module by clicking on the gray plus sign. Choose the full-width header module from the list. If you prefer to find it automatically, it’s also possible to type the name in the search bar on top.
Now let’s adjust the settings of the module, starting with the content.
Enter the header’s title and, if you like, a subheading text that will appear below the title. If you want to have one or two buttons on your header, you can write the text that will show on them.
Define also the content that will be placed below the title and subheading text.
Upload your logo and header picture or paste the URL link to those images. You can select if the image represents a featured image, a profile picture or the website logo.
Enter the URL for the buttons and, if you want the module to open a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.
Add a background color, gradient, image or video to your module.
You can modify the module’s label for easier identification.
Customize the design
With these settings, you can customize your design.
Here you can decide the text and logo orientation and if you want to expand the header to fullscreen size.
Scroll Down Icon
Choose to show a scroll down button. By default, the color of the scroll down icon will be white or gray, depending on your background’s color, but you can pick a different one here. You can also increase or decrease the size of the icon here.
Customize the alignment and color tone of the image within the module.
Select the overlay background color here.
Control how your text is displayed in terms of alignment, color, and text shadow.
Define the font, color, alignment, size, line height, and other settings for the title.
You can also adjust the font settings for the body text.
Adjust the font settings for the subhead text.
Button Two and Button One
If you enable custom styles for the buttons, you will be able to customize the text size, font, shadow, and color, and the button’s background, borders, and icon.
Adjust the width of the module.
Customize margins and padding sizes.
Define the border’s corner, style, color and width for your module.
Here you can enable box shadow.
Adjust the hue of the module as a whole.
Give an animation style to the module, like fading or sliding when it appears.
Using this tab you are able to insert CSS code, select device visibility, the buttons rel attribute, and manage transitions. Check this guide to know more about how to use these settings.
Let’s show a simple example of how to create a header.
On the content settings, we can select the options.
- Title: Welcome!
- Subheading text: Celebrate our Wedding Vows Renewal with us
- Button one: Where?
- Button two: When?
- Background: gradient with #009982 and #ffffff
Now, we customize the design options.
- Text and Logo Orientation: center
- Text color: dark
- Title font weight: ultra bold
- Title font: open sans
- Title text size: 40px
- Buttons text color: #ffffff
- Buttons border color: #ffffff