How to add widgets with header footer builder

The component allows you to design your headers and footers with the elements you want to put in them.
To activate all or part of the widgets follow this link

The settings of the components is only covered in the following chapters but for each of them you can define the specific styles under the ‘Style’ tab. Of course, you can add widgets from external plugins or use the distribution’s advanced components (‘EAC Advanced’ Elements) in the header or footer.

Add your navigation menu in the header or footer

Header footer navigation menu example
Horizontal navigation menu
Navigation menu vertical
Vertical navigation menu

Navigation menu settings

To see the accessibility rules relating to the navigation menu, consult this post.

This component simply displays the selected navigation menu.

  • Select menu: the menu that will be displayed,
  • Display: two options ‘Default’ or ‘Multiple columns,
  • Orientation: horizontal or vertical,
  • Menu collapsed: this option will display all the submenus. Useful when you want to scale the width of submenus,
  • Sticky menu: makes the menu sticky,
  • Invert display of last item: by default the last item is truncated to prevent the horizontal bar from appearing. By activating this option the last item will be displayed from right to left,
  • Hide overflow: this option allows you to hide the menu overflow,
  • Mini cart: this option is only available if the WooCommerce plugin is installed and active. By enabling this option, a mini cart icon will be added as the last menu item. The mini cart is only active on the frontend.
Header Footer navigation menu
Header simple menu settings

Display the navigation menu in several columns as a mega-menu

Mega navigation menu
Navigation menu with multiple columns

To display submenu items on multiple columns, you must select the ‘Multiple columns‘ option from the Display list.

Navigation menu select multiple column option
Navigation menu select multiple columns option

And after you must define the number of rows to display for each column, then the system automatically calculates the number of columns to be displayed.

Navigation menu select row count
Navigation menu select row count

Add mini cart item

The ‘Mini cart‘ option is active. You can define whether the number of items should be displayed or not, the icon and the width of the buttons inside mini cart.

Header simple menu settings mini-cart item

Set responsive mode

In this section you must define the breakpoint from which the menu will minimized for mobiles, icon alignment and choose open and close icons.

Header Footer responsive mode
Header simple menu settings responsive mode

Add your logo in the header

This component allows you to add the default logo defined when customizing the theme or another image. Assign its position in the container and add the link to your site’s URL.

Header Footer logo
Header site logo settings

Add site title in the header

Simply add the site title, the URL of your site or an external URL, the level in the heading structure, its dimension and its position.

Header Footer site title
Header site title settings

Add site tagline in the header

Add the site tagline, a front icon and its position in the container.

Header Footer baseline
Header site baseline settings

Add page title in the header

Same configuration as the site title except that you can prefix the page title (Include context) with the post type. Useful for search engine results or displaying taxonomies.

Header page title settings

Add your social medias in the header or footer

Header Footer social medias

You can define with this component the list of social medias to which you are registered, the width of the container and the horizontal space between the icons and the position in the container.

Header Footer social media
Header Footer social medias list
Header Footer social media settings
Header Footer social medias settings

Add search widget in the header

Simple component to search for posts, pages or products in your site. You can display the input field directly by hiding the search button (Hide button) or position the button to the right or left of the input field and finally select an icon other than the default icon.

Header widget search

Add a breadcrumb in the header

With this component you will be able to display a breadcrumb to improve the user experience (UX) and which is a good SEO tool for your site.
You can change the label of the home page, display the current page and the number of visible words, select the type of tag (default Paragraph) for all parts and finally the alignment and the pictogram for the separator.
Note that the component is disabled when one of the ‘Yoast, Rank math, SEO press, NavXT’ plugins is installed and active.

Header Footer breadcrumbs
Header widget breadcrumb

Add a reading progress bar in the header

This component is a reading position indicator in the form of a progress bar with the reading percentage.
You can change the height of the bar, add a badge with the current position in percentage and its position, the display direction of the bar (RTL).

Header Footer reading progress bar
Header widget progress bar

Add your custom copyright in the footer

This component comes with three built-in shortcodes for year, site title and theme name but you can erase the content and add you own.
The link surrounds the copyright.

Header Footer copyright
Footer copyright

Add a button back to top in the footer

A simple button to scroll the page to the beginning. Change the pictogram and its position in the container.

Header Footer button back to top
Footer button add to top

Leave a Comment