Header Offcanvas

Estimated reading: 2 minutes 12 views

The Offcanvas widget is designed to display hidden content like menus, contact info, or any extra widgets in a toggleable side panel. Ideal for mobile navigation, headers, or compact information display.

🚀 How to Enable the Header Off-Canvas Widget

To start using the Image Widget, follow these steps:

Navigate to your WordPress dashboard.
Go to Topper Pack → Widgets.
Locate the Header Offcanvas widget from the list.
Toggle the switch to “On” to enable it.
The widget is now available in the Elementor editor.

1️⃣ Add the Widget

From the Elementor panel, search for “Offcanvas”.
Drag and drop the TP Offcanvas widget into your section.

🧭 Tab: Content

➤ A. Offcanvas Button Tab

Setting	Description
Icon Style	Choose from predefined or custom icons.
Close Icon	Upload or select an icon to close the offcanvas panel.

➤ B. Inner Content Tab

Setting	Description
Content Type	Choose between: – `Default` – `Elementor Template`
Elementor Template	If selected, choose any pre-saved section/template from the dropdown.
Default Content	Add manually:

Logo: Choose between WordPress default or a custom logo.
Description: Short text about your brand or business.
Contact List: Phone, address, and email fields.
Social List: Add Facebook, Twitter, LinkedIn, Instagram, etc.

🎨 Tab: Style

➤ Offcanvas Box

Option	Description
Alignment	Left, Center, Right alignment for content.
Width & Height	Adjust panel size (e.g., Width: 450px, Height: 100%).
Background Type	Color, gradient, or image background for offcanvas box.
Overlay Background	Color, gradient, or image background for off-canvas box.
Border, Radius, Padding, Margin	Customize spacing and appearance.

➤ Offcanvas Close & Open Button

Customize icon size, color, hover effects, and position.

➤ Offcanvas Content

Style the content: spacing, alignment, typography, etc.

➤ Offcanvas Social

Style the social icon section inside the canvas.

➤ Button (Toggle Button)

Modify the appearance of the button that opens the off-canvas.