Header Component – Beezer.com

The Header component can be used at the top of a Page or can be used to break up content within any Page. It is one of the most popular components among Beezer members (and most loved as well).

Please follow the instructions below to setup the Header component:

Step 1: Log in to your Beezer Admin Dashboard.

Step 2: Click on the Build section -> Either select an existing page or click the "+" to add a new page.

Step 3: You will be shown all the existing components available for your Beezer subscription plan. Search for "Header" and click the "Add Header Component" button at the bottom of the page.

Step 4: The CONTENT tab allows you to set Mobile and Desktop specific Images/Video, Title, and Subtitle for your Header component. Either of these are optional and could be left blank.

To upload an image, GIF, or MP4 file for the Mobile or Desktop view, tap on "Mobile Image / Video Upload" or "Desktop Image / Video Upload", and a popup box will appear allowing you to upload an image.

Select an image from your device and click on the Submit button to upload the image.

Step 5: Now you can add a Title and Subtitle for your Header Component.

To enable custom desktop title and subtitle for the Header component (which will be displayed if someone opens your app on a desktop computer), you need to enable the toggle for "Enable Desktop Title & Subtitle".

If the "Enable Desktop Title & Subtitle" toggle button is disabled, it will display the title and subtitle added under "Mobile Title" and "Mobile Subtitle".

Note: Remember to click on the "Save" button once the Title and Subtitle sections are updated.

Step 6: You can add an optional Navigation Link, which allows your app users to click on the Header area and navigate to a Page you have created within your app or to an external webpage. The navigation link can be the entire header area or can be nested inside a button on the header.

In the Navigation Link area of the Header component, you can choose one of the following options:

Page: Redirect your app users to an existing page within your app.
Sign-up Page: Redirect your app users to the Sign-up or Sign-in page of your app.
Web: Redirect your app users to an external websites/webpage.
Phone: Add a phone number to make this a call-to-action button.
Email: Add an email address to enable user communication.

Step 7: The DESIGN tab can be used to override the default design of the Header component. You can set the desired colors, image position, and button styles.

The Header Component has two types of layouts - Mobile and Desktop.

Mobile Layout - It has 4 designs which you can select in the LAYOUT tab. The smallest layout is great for adding bold header text on top of the page (like the heading of that page).

Desktop Layout - It has 9 designs that you can select in the LAYOUT tab.

Header Component Image Requirements

When you upload images in the Header component, please follow the image size specifications to make sure you can display them correctly on mobile and desktop devices.

Mobile Image (Portrait)

Image Size: 320 pixels (width) by 600 pixels (height)

Desktop Image (Landscape)

Image Size: 1630 pixels (width) by 730 pixels (height)

Enable Multiple Buttons on the Header Image 🔄 Update (29/04/2025)

With this latest update, you can now add up to six buttons, allowing for enhanced user interaction and more flexible navigation options.

Please follow the instructions below:

Step 1: To enable this feature, please navigate to your Header Component's Content section and click "Add A New Button".

Step 2: You will see the "Navigation Link 2" and "Link Button 2" fields which can be used to configure the second button. You can repeat this process to add and configure up to six buttons on each Header component.

Step 3: From the Design section, you can customize the button styles by enabling the toggle button besides each button you have created under your Header Component.

Step 4: By default, multiple buttons are arranged vertically. However, you have the option to display them horizontally based on your layout preference.