Header Builder Elements

The following are the Free Header Builder Elements provided by Rishi Theme:

Button #

You can add a CTA button anywhere on the site header. You can label the button, link it to any URL and customize it as per your choice.

The following are the different settings provided for the Button Header element.

General Setting #

Button Type: You can select your preferred button layout for the site header.

Button Size: Select the size for the button.

Button Label: Enter the button label.

Button Link: Enter the button URL.

Min Width: Select the minimum width value for the button.

Open in new tab: Enable this option to open the button link in new tab.

Rel Attribute: Select the appropriate rel attribute for the link

Button Visibility: Choose the device where you want the CTA button to be visible.

Design Setting #

The following are the design settings provided for the Button Header element.

Font: Select the desired font family, size, line height, font weight, and additional font settings from here.

Text Color: Select the colors for the button text in both its initial state and when hovered. If you have enabled Sticky Header and Transparent Header settings in header builder, you’ll also have option to choose initial and hover colors of text for the transparent and sticky headers.

Background Color: Choose the initial and hover background color for the button. If you have enabled Sticky Header and Transparent Header settings in header builder, you’ll also have option to choose initial and hover color of buttons for the transparent and sticky headers.

Border: Select a border color and a style.

Border Radius: Enter the border radius value for the button for different screen sizes.

Button Margin: Enter the margin value for the button.

Button Padding: Enter the padding value for the button.

Contacts #

This element allows you to add different contact details such as your phone number, email, address, etc. to the website header.

The following are the different settings provided for the Contacts Header element.

General Setting #

Icons: You can add, sort and configure settings for the contact elements under this option.

Icons Size: Select the size of the icons used for all the contact elements.

Icons Shape: Choose the shape of the icon for the contact elements.

Icon Fill: Choose between an outlined or filled icon.

Items Spacing: Select the spacing value between each contact element added.

Design Setting #

The following are the design settings provided for the Contacts Header element.

Font: You can configure the typography settings for the contact elements text.

Font Color: Choose the initial color for the contact elements text, and initial and hover color for the links used in the contact elements. If you have enabled Sticky Header and Transparent Header settings in header builder, you’ll also have option to choose initial and hover of links for the transparent and sticky headers.

Icons Color: Choose the initial and hover color for the icons of the contact elements on different header state such as default, transparent and sticky and across different screen sizes.

Background Color: Change the initial and hover background color of the icons on different header state such as default, transparent and sticky and across different screen sizes.

Margin: Enter the margin value for the contact section on the site header.

HTML #

This element allows you to either enter content via the visual editor or by adding some arbitrary HTML code. 

The following are the different settings provided for the HTML Header element.

General Setting #

Visual/Text Editor: You can add content directly via the Visual editor enabled by the Visual tab or you can enter some HTML code by enabling the Text editor via the Text tab.

Alignment: Choose the alignment to adjust the text added via text editor.

Design Setting #

The following are the design settings provided for the HTML Header element.

Font: You can configure the typography setting for the HTML element’s text.

Text Color: Choose the color for the text that you have added via text editor. If you have enabled Sticky Header and Transparent Header settings in header builder, you’ll also have option to choose color of text for the transparent and sticky headers.

Link Color: Choose the initial and hover color for the links. If you have enabled Sticky Header and Transparent Header settings in header builder, you’ll also have option to choose initial and hover color of links for the transparent and sticky headers.

Margin: Enter the margin value for the HTML section of the site header.

Logo #

You can select a logo and set site title for your site header here.

The following are the different settings provided for the Logo Header element.

General Setting #

Logo: Click on the Select Logo option to upload or add the site logo to your website header.

Logo Style: You can select whether you want to display only the site logo or the site logo and title or the site logo, title and tagline.

Site Logo and Title Layout: This option will be visible when you choose the Logo & title option inside the Logo Style. As the name suggests, you can choose the site logo and title layout for the site header here.

Site Logo, Title and Tagline Layout: This option will be visible when you choose the  Logo & tagline and Logo, title & tagline option inside the Logo Style. You can choose the site logo, title and tagline layout for the site header here.

Logo Width: Set the width value for the site logo.

Site Title: Enable this option to display the site title and enter the site title.

Site Title Visibility: You can select the devices where you want to display the site title on the site header. This option is visible only when the Site Title is enabled.

Site Tagline: Enable this option to display the site tagline and enter the site tagline.

Site Tagline Visibility: You can select the devices where you want to display the site tagline on your website header. This option is visible only when the Site Tagline is enabled.

Design Setting #

The following are the design settings provided for the Logo Header element.

Site Title: You can configure the typography setting for the site title here.

Site Title Color: Choose the initial and hover color for the site title text. If you have enabled Sticky Header and Transparent Header settings in header builder, you’ll also have option to choose initial and hover color of site title for the transparent and sticky headers.

Site Tagline Font: You can configure the typography setting for the site tagline here.

Site Tagline Color: Choose the color for the site tagline text. If you have enabled Sticky Header and Transparent Header settings in header builder, you’ll also have option to choose initial and hover of site tagline for the transparent and sticky headers.

Margin: Enter the margin value for the site logo.

Menu #

You have the choice to include two distinct menus, namely Menu 1 and Menu 2, as header elements.

The following are the different settings provided for the Menu element.

General Settings #

Choose Menu: You can select a particular menu to displayed inside the Menu Header element.

Menu Layout: Here you can select your preferred menu style.

Item Spacing: Set the spacing value between the menu items.

Stretch Menu: Enabling this option will stretch the menu so that it can fit the width of its parent column.

Indicator Effect: You can choose the underline effect for an active menu item and menu items on hover.

Submenu Settings #

Submenu Width: Set the width for submenu container.

Submenu Top Offsets: You can locate the vertical position of the submenu from the main menu item.

Submenu Transition: Choose transition animation for the submenu.

Design Setting for Menu #

Font: Select the typography setting for the menu items.

Color: Select the initial menu items color and menu items color when hover. If you have enabled Sticky Header and Transparent Header settings in header builder, you’ll also have option to choose initial and hover of menu items for the transparent and sticky headers.

Active Indicator Color: Choose text color for active menu items.

Dropdown Background Color: Choose a background color for submenu container.

Margin: Select the margin value for the navigation menu for different screensize.

Design Setting for Submenu Settings #

Font: You can configure the typography setting for the submenu items.

Font Color: Here you can choose the initial color of the submenu item and also choose a color to indicate the hover/active state of the submenu item.

Inner Spacing: Set the spacing value between the submenu items.

Divider: Select the color, width and style for the submenu items divider.

Dropdown Border Radius: Enter the border radius value for the dropdown menu container.

Dropdown Shadow: Select a color and configure the settings for applying a shadow effect to the dropdown menu container.

Search #

The Search element adds the search icon to the header of the website for enabling search functionality.

The following are the different settings provided for the Search Header element.

General Setting #

Placeholder Text: Enter the text that you want to display in search bar.

Icon Size: Choose search icon size.

Design Setting #

Icon Color: Choose the initial color and hover color for the search icon. If you have enabled Sticky Header and Transparent Header settings in header builder, you will have the option to choose search icon color for different header states such as default, transparent and sticky.

Close Icon Color: Choose the initial and hover/active color for the close icon.

Modal Font Text: Select the search text color for the search form field.

Modal Background: Select the background color for the search form section.

Icon Margin: Set the margin value for the search icon for different screensize.

Socials #

This element adds the social media icons to the header of the website.

The following are the different settings provided for the Socials Header element.

General Setting #

Social Media: Choose and add the social media accounts that you want to display on the header.

Icon Size: Set the social media icon size.

Item Spacing: Set the spacing value between social media icons.

Design Setting #

Icon color: Choose if you want to pick your own colors for social media icons or stick to the official colors. If you go for custom colors, you can choose initial and hover color of icons. Also, if you have enabled Sticky Header and Transparent Header in the header builder, you can choose the color of the social media icons for different header styles like default, sticky and transparent.

Icons Shape Type: Choose background shapes for icons.

Margin: Enter the margin value for the Socials section on the site header.

Date #

The Date element can be used to display the present date on the site header.

The following are the different settings provided for the Date Header element.

General Setting #

Date Format: You can choose the date format via this option. If you want to add your own custom date format then you can select the Custom option and then enter the format inside the Custom field.

Show Icon: You can enable this option to display the calendar icon.

Icon Size: Set the icon size as per your preference.

Design Setting #

Font:  Set up the text style for the date by adjusting the typography settings. You have the option to select the font family, font size, font weight, line height, style, and more through this configuration.

Text Color: Select the date text color. If you have enabled Sticky Header and Transparent Header settings in header builder, you will have the option to choose text color for different header states such as default, transparent and sticky.

Icon Color: Select the calendar icon color. If you have enabled Sticky Header and Transparent Header settings in header builder, you will have the option to choose icon color for different header states such as default, transparent and sticky.

Image #

With the Image Header element, you can add a linked image to your website header.

The following are the different settings provided for the Image Header element.

Upload Image: Click on the Select Image option to upload or select an image for the site header.

Image Max-Width: Set the max-width value for the uploaded image for different screensize.

Image Link: Enter the URL where you want the image to link to.

Open New Tab: Enable this option to open the added link in new tab.

Rel Attributes : Select attributes for the added link.

Randomize #

The Randomize header element adds up a shuffle icon to the site header. Upon clicking this icon the visitors will be directed to a random page or post or any other custom post type published on your website.

The following are the different settings provided for the Random Posts Header element.

General Setting #

Icon: You can choose your preferred Random Posts icon.

Icon Size: Select your preferred icon size. You can choose different icon size for different screen sizes.

Show Label: Enable this option to show a text label before the Randomize icon.

Label: Enter the Randomize text label. This option is only visible when the Show Label option is enabled.

Randomize: Select the option that you want your visitors to see after clicking on the Randomize icon.

Design Setting #

Text Font: Select the typography setting for the Randomize label. You have the option to select the font family, font size, font weight, line height, style, and more through this configuration.

Text Color: Select the text label color for the normal site header. If you have enabled Sticky Header and Transparent Header settings in header builder, you will have the option to choose text color for different header states such as transparent and sticky.

Icon Color: Select the icon color for the normal site header. If you have enabled Sticky Header and Transparent Header settings in header builder, you will have the option to choose icon color for different header states such as transparent and sticky.