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