Headers

This comprehensive guide will cover everything that needs to be known about the Headers  element in Mokkup.

When to Use?

Headers are an important part of a dashboard wireframe as they  provide structure, organization, and context to the content within the dashboard.

A header is used when:

• Section Division: Headers effectively divide the dashboard into sections, delineating distinct data types, categories, or functionalities.
• Data Categories: Headers label data categories, helping in navigation in the dashboards with diverse data, such as sales, marketing, and finance.
• Dashboard Structure: Headers as page titles organize multi-page dashboards, offering users clarity about the content on each page or tab.
• Functional Grouping: Headers group related features in functionally rich dashboards, like "Filters" for filtering options or "Settings" for user preferences.
• Immediate Insights: Display key data, KPIs, and date/time information in headers for swift user access to vital insights.

How to Create?

There are two ways to use Image in the Mokkup dashboard:

Create New:

• When creating a project from scratch, simply click on the element in the sidebar to add it or drag and drop it onto the canvas.
• Can resize it and edit it from the customize element menu.

Use Template:

• When using a template with the Image element, select the element to resize and open the customize element menu. 

Tip: Mokkup elements have multiple variations that can be accessed by double-clicking on the element or clicking Variation in the customize element menu.

How to Customize?

1. Styles:

Variant Name	Add-On	Functionality
Default	Secondary Logo Text Highlighted Text	In this header style, you have the option to upload your company's logo by enabling the "Primary Logo" toggle. Additionally, you can customize the dashboard title and background color from the properties menu.
Dropdown	Secondary Logo Dropdowns Text  Highlighted Text	Customize the dashboard title and background color from the properties menu. Under the "Add-ons" section, you can include dropdowns, rearrange their order, and delete them as required. Secondary logo & highlighted text is disabled in this variant because dropdowns are added.
Description	Secondary Logo Text Highlighted Text	It’s similar to the “Default” style but has one thing added to it - Highlighted Text.  Here one can toggle off/on and add text.  Secondary logo will be disabled in this variant if highlighted text is added and vice versa.
Icon	Secondary Logo Text Highlighted Text	It’s similar to the “Default” style but has one thing added to it - Highlighted Text.  Here one can toggle off/on and add text.  Secondary logo will be disabled in this variant if highlighted text is added and vice versa.
Navigation 1 & 2	Secondary Logo Text Highlighted Text	These 2 are the different variations which are very similar to “Description” header style.  But one more thing added to it - Navigation buttons. Toggle off/on as per requirement.  Secondary logo will be disabled in this variant if highlighted text is added and vice versa.
Navigation 3	Secondary Logo Text Stylize	This is very similar to “Navigation 1 & 2” header style.  But one more thing added to it - Stylize. Toggle off/on as per requirement.
Two logos	Secondary Logo Text Stylize	In this header style, you have the option to upload your company's logo by enabling the “Secondary Logo”.  Additionally, you can customize the dashboard title and background color from the properties menu.

2. Details:

Edit the basic details here:

• Title: Toggle off/on, change the title of the header here by clicking on the “Edit Text” bar.
• Primary Logo: This feature helps in uploading the brand logo in JPEG, PNG, or SVG format. Toggle off/on according to the requirements.
• Add Image: A brand logo can be uploaded through this blue tab. It can be changed or removed as well by clicking on the options given on the left side of the uploaded image.

3. Properties:

• Background Color: Toggle off/on for the background color of the header. Add gif here
• Icon: Upload any icon in JPEG, PNG, or SVG format. Icon width and height should be equal or less than 100px. The icon will fit beside the title.
• Navigation Buttons: Toggle off/on the navigation button. It helps in navigating between screens of the live dashboard.

3. Add Ons:

• Secondary Logo: Add a secondary logo through the tab “Add Image”.  The image should be in JPEG, PNG, or SVG format, and the width and height should be equal or less than 100px. It can be changed or removed as well by clicking on the options given on the left side of the uploaded image.
• Text: Toggle off/on the slider to incorporate text. Below that tab, there’s “Edit Text” where a text can be given.

                    - Alignment: Adjust the title alignment to either left, center, or right of the element.

                    - Font Weight: Change the font weight to normal, medium, or bold.

4. Variation:

There are multiple variations of the header provided on the dashboard. 

• This button opens the 'Choose Style' pop-up. 
• Choose an alternative design for the element. 
• Can also access the pop-up by double-clicking on any selected element.
• Using the above-described customization methods, it is also possible to create various element variants.

5. Design Customizations

• This will access the 'Design Customizations' menu when clicked. 
• Use this to change your active theme and utilize customization options to adjust the canvas accordingly.
• For more information, please refer to this article.

This was a complete guide to using the “Header” element on Mokkup. If you have further questions, please ask our Chatbot or contact support.