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).
The CONTENT tab allows you to set Mobile and Desktop Images/Video, Title, and Subtitles for your Header component. Either of these is optional and could be left blank.
Please follow the below instructions to setup your 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 is disabled, it will display the title and subtitle added under "Mobile Title" and "Mobile Subtitle".
Note: Remember to click on the "Save" option 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.
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.
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 uploading images for the Header component, please follow the following image size specifications to ensure you can display them 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)
Please Publish your app once you have made the changes, so they get reflected on your mobile app successfully.