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 Layout: You can select your preferred button layout for the site header.
Size: Select the size for the button.
Label: Enter the button label.
URL: 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.
Set link to nofollow: Enable this option to add “nofollow” attribute to the button added.
Set link attribute Sponsored: Enable this option to add “sponsored” attribute to the button.
Set link to Download: By enabling this option, you can download the site page HTML via the CTA button.
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 Color: Choose the initial and hover color for the button text in different header state such as default, transparent and sticky.
Button Color: Choose the initial and hover color for the button in different header state such as default, transparent and sticky.
Border Color: Select the initial and hover color for the button border.
Button Shadow: Configure the shadow effect for the button for different screen sizes.
Button Hover Shadow: Configure the shadow effect for the button on hover.
Border Radius: Enter the border radius value for the button for different screen sizes.
Margin: Enter the margin value for the 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 #
Contact Elements: You can add, sort and configure settings for the contact elements under this option.
Open Links In New Tab: Enable this option to open the contact links in new tab.
Icons Size: Select the size of the icons used for all the contact elements.
Items Spacing: Select the spacing value between each contact element added.
Icons Shape Type: Choose the shape of the icon for the contact elements.
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 on different header state such as default, transparent and sticky. You can also choose different colors for the provided options across different screen sizes.
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.
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.
Container Maximum Width: Set the maximum width value for the HTML element container.
Underline Link: Enable this option to underline the link.
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.
Font Color: Choose the initial color for the HTML element’s text, and initial and hover color for the links added via the HTML element on different header states such as default, transparent and sticky. You can also choose different colors for the provided options across different screen sizes.
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. Besides, you can also select the logo and title layout and select different logo for different header state.
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. You can add different logo for the desktop and mobile view.
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, title & tagline option inside the Logo Style. You can choose the site logo, title and tagline layout for the site header here.
Transparent State Logo: You can upload the site logo for displaying on the transparent header here. You can also choose different logo for desktop and mobile view.
Sticky State Logo: You can upload the site logo for displaying on the sticky header here. You can also choose different logo for desktop and mobile view.
Logo Max-Width: Set the maximum width value for the site logo.
Sticky State Shrink: Enabling this option will reduce the size of the site logo added for the Sticky header state.
Logo Height: Select the site logo height value across different screen sizes. This option is only visible when the Sticky State Shrink option is enabled.
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 in different header state such as default, transparent and sticky.
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 in different header state such as default, transparent and sticky.
Margin: Enter the margin value for the site logo.
Menu #
You can set menus for your site header and for the desktop view via these elements.
The following are the different settings provided for the Menu Header element.
Select Menu: You can select a particular menu to displayed inside the Menu Header element.
General Setting for Menu Styles #
Menu Layout: Here you can select your preferred menu style.
Indicator Effect: You can choose the underline effect for an active menu item and menu items on hover.
Items Spacing: Set the spacing value between the menu items.
Items Height: Set the height value for the menu items.
Stretch Menu: Enabling this option will stretch the menu so that it can fit the width of its parent column.
Design Setting for Menu Styles #
Font: Select the typography setting for the menu items.
Font Color: Select the initial menu items color and menu items color when hover/active for different header states such as the normal site header, transparent header and sticky header.
Margin: Select the margin value for the navigation menu.
General Setting for Dropdown Options #
Items Hover Effect: You can choose the hover effect for the submenus via this option.
Inner Spacing: You can adjust the inner spacing value for the each submenu container.
Dropdown Reveal Effect: You can select the dropdown menu reveal effect here.
Dropdown Top Offset: You can locate the vertical position of the dropdown menu from the main menu item.
Dropdown Width: You can adjust the width of the dropdown menu container.
Design Setting for Dropdown Options #
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.
Items Background Color: Select a background color for the submenu container.
Items Divider: Select the color, width and style for the submenu items divider.
Dropdown Shadow: Select a color and configure the settings for applying a shadow effect to the dropdown menu container.
Dropdown Border Radius: Enter the border radius value for the dropdown menu container.
Offcanvas Menu #
The Offcanvas Menu is the one to be displayed via the navigation toggle on the mobile view. This element is visible only when the mobile or tablet view is enabled on the site customizer.
Also, the Offcanvas Menu can be rendered only in the offcanvas drawer.
The following are the different settings provided for the Offcanvas Menu Header element.
Select Menu: You can select a particular menu to displayed inside the Offcanvas Menu Header element.
General Setting #
Menu Type: You can choose the menu items display for the mobile view here. Selecting the Default option will keep the menu items simple whereas selecting the Bordered option will add borders to the menu items.
Design Setting #
Font: Select the typography setting for the menu items.
Font Color: Select the initial menu items color and menu items color when hovered.
Dropdown Font Size: Select the font size for the dropdown menus.
Margin: Select the margin value for the menu container.
Padding: Select the padding value for each menu item.
Search #
The Search element adds the search icon to the header of the website for enabling search functionality. You can also select if you want to perform searches in any particular post types.
The following are the different settings provided for the Search Header element.
General Setting #
Icon Size: You can select the search icon size here.
Search Through Criteria: Choose the post types on which you want to perform searches.
Design Setting #
Icon Color: Choose the initial color and hover color for the search icon on different header states such as default, transparent and sticky. You can also choose different colors for the provided options across different screen sizes.
Icon Margin: Set the margin value for the search icon.
Close Icon Color: Choose the initial and hover color for the close icon.
Close Icon Background: Choose the initial and hover color for the close icon background.
Modal Background: Select the background color for the search form section.
Modal Font Color: Select the search text color for the search form field.
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 across different screen sizes.
Icons Spacing: Set the spacing value between social media icons.
Icons Color: You can choose either a custom color or choose to display the official color of the social media icons. The option to choose a custom color is available inside the Design Setting.
Icon Shape Type: Choose any one of the available shape types for social media icons.
Label Visibility: You can enable the visibility of the social media labels across different screen sizes.
Design Setting #
Icon color: Choose the initial color and the hover color of the social media icons for different header states such as default, transparent and sticky. You can also choose different colors for the provided options across different screen sizes.
Margin: Enter the margin value for the Socials section on the site header.
Trigger #
This element adds a toggle bar to display the menu in mobile view.
The following are the different settings provided for the trigger Header element.
General Setting #
Select Toggle bar: You can choose your preferred toggle bar type.
Trigger Design: Choose either “Simple”, “Outline”, or “Solid” as your trigger design.
Trigger Label: Enable this option to show a text label after the toggle bar.
Label Text: Enter the text label. This option is only visible when the Trigger Label option is enabled.
Label Alignment: Choose the label alignment for the toggle bar.
Design Setting #
Trigger Color: Choose the initial color and the hover color of the trigger on different header states such as default, transparent and sticky.
Trigger Label Typography: You can configure the typography settings for the trigger label.
Margin: Enter the margin value for the Trigger section on the site header.
Bookmark #
The Bookmark element adds a bookmark icon to the website header which will display the number of posts that are bookmarked by the reader. This icon also links to the Read it Later page on your website.
The following are the different settings provided for the Bookmark Header element.
General Setting #
Bookmark Icon: You can select your preferred bookmark icon for the site header.
Bookmark Hover Text: Enter the text that you want to display on hovering over the bookmark icon.
Size: Select the size value for the bookmark icon.
Bookmark Visibility: Choose the device where you want the bookmark icon to be visible.
Design Setting #
The following are the design settings provided for the Bookmark Header element.
Color: Choose the initial and hover color for the bookmark icon.
Count Color: Choose the initial and hover color for the bookmarked posts count.
Count Background Color: Select the initial and hover color for the bookmarked posts count background space.
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.
Enable Icon: You can enable this option to display the calendar icon.
Icon Size: Select your preferred icon size.
Design Setting #
Font: Select the typography setting for the date.
Text Color: Select the date text color for the normal site header, transparent header and sticky header.
Icon Color: Select the calendar icon color for the normal site header, transparent header and sticky header.
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.
URL: Enter the URL where you want the image to link to.
Open in new tab: Enable this option to open the added link in new tab.
Set link to nofollow: Enable this option to add “nofollow” attribute to the added link.
Set link attribute Sponsored: Enable this option to add “sponsored” attribute to the added link.
Random Posts #
The Random Posts 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 #
Select 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 Random Posts icon.
Label: Enter the Random Posts 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 Random Posts icon.
Design Setting #
Text Font: Select the typography setting for the Random Posts label.
Text Color: Select the text label color for the normal site header, transparent header and sticky header.
Icon Color: Select the icon color for the normal site header, transparent header and sticky header.
Time #
Adding the Time element to the website header will display the local time of your website visitors on your website.
The following are the different settings provided for the Time Header element.
General Setting #
Time Format: You can choose the time format via this option. If you want to add your own custom time format then you can select the Custom option and then enter the format inside the Custom field.
Enable Icon: You can enable this option to display the clock icon.
Icon Size: Select your preferred icon size.
Design Setting #
Font: Select the typography setting for the time.
Text Color: Select the time text color for the normal site header, transparent header and sticky header.
Icon Color: Select the clock icon color for the normal site header, transparent header and sticky header.
