Widget Guidelines

How to Use & Customize Header Offcanvas Widget

Estimated reading: 2 minutes 4 views

The Header Offcanvas Widget is used to display navigation menus, contact details, or additional content in a clean and space-saving manner. This feature is especially useful for mobile layouts or minimalist header designs.

Follow the step-by-step instructions:

1. To customize Header Offcanvas, you can add your content before Go to Templates.

2. Click Saved Templates.

3. Click Add New Template to create your content.

4. Create your content here and don’t forget to click Publish to save your content.

5. Go to Menu RTM Header & Footer, and you will be able to see the Header Offcanvas Widget.

6. Click Add New Container.

8. Select your layout : Flexbox or Grid.

9. On the canvas select your structure.

10. Drag the widget from the Elementor 

11. Drop it on the selected area.

12. Setting :

  • Click Content → Settings.
  • Select your layout : horizontal or vertical.
  • Click Yes to show icon in the title.

13. Content Setting :

  • Click Content → Content.
  • You can select the Content Type : Saved Templates to display your content that you have created in saved templates Select Templates.
  • Click Add Item to add more content.

14. Wrapper Style (used to customize the wrapper style) :

  • Click Style → Wrapper.
  • Customize the padding, margin, radius, and border type here.

15. Tab Title Style (used to customize the tab title style) :

  • Click Style → Tab Title.
  • Customize the alignment, typography, padding, margin, radius, text, icon and background color.

16. Content Style (used to customize the content style) :

  • Click Style → Content.
  • Customize the typography, text color, margin, padding, radius, background color and border.

17. Don’t forget to click Publish to save the changes.

Share this Doc

How to Use & Customize Header Offcanvas Widget

Or copy link

CONTENTS