Page Designer Modules

  1. Home
  2. Support
  3. Page Designer Modules
  4. Full Width Header Module with the Website Page Designer

Full Width Header Module with the Website Page Designer

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.

Define contents

Now let’s adjust the settings of the module, starting with the content.

Text

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.

Images

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.

Link

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.

Background

Add a background color, gradient, image or video to your module.

Admin label

You can modify the module’s label for easier identification.

Customize the design

With these settings, you can customize your design.

Layout

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.

Image

Customize the alignment and color tone of the image within the module.

Overlay

Select the overlay background color here.

Text

Control how your text is displayed in terms of alignment, color, and text shadow.

Title Text

Define the font, color, alignment, size, line height, and other settings for the title.

Body Text

You can also adjust the font settings for the body text.

Subheading 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.

Sizing

Adjust the width of the module.

Spacing

Customize margins and padding sizes.

Border

Define the border’s corner, style, color and width for your module.

Box Shadow

Here you can enable box shadow.

Filters

Adjust the hue of the module as a whole.

Animation

Give an animation style to the module, like fading or sliding when it appears.

Advanced settings

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.

Use Case

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

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?