1. Home
  2. Docs
  3. Content Elements
  4. Offcanvas

Offcanvas

How to Configure and Style Offcanvas

Essential Addons Offcanvas lets you display your content, sidebar or template as a beautiful side-menu when a button is triggered.

Table of Contents:

  1. How to Activate Offcanvas
  2. How to Configure the Content Settings
     2.1 Offcanvas Content
     2.2 Toggle Button
     2.3 Settings
  3. How to Style Offcanvas
  4. Final Outcome

 

1. How to Activate Offcanvas

Find the ‘EA Offcanvas’ from the Search option under the ‘ELEMENTS’ tab. Simply just Drag & Drop the ‘EA Offcanvas‘ into the ‘Drag widget here’ or the ‘+’ section.

Offcanvas 1
After you are done with Step 1, this is the default layout you are going to see.

Offcanvas 2
After you click on the ‘Click Here’ button, this is how your Offcanvas is going to be displayed:

Offcanvas 3

 

2. How to Configure the Content Settings

Under the ‘Content’ tab, you will find the ‘Offcanvas’ section.

2.1 Offcanvas Content

By default, ‘Content Type’ is set as ‘Custom Content’. If you want, you can modify your custom content items by adding media, Shortcode or changing the title or text content.

You can also add as many items as you want and modify them.

Offcanvas 4

From the drop-down menu ‘Content Type’,  choose any of these five types: Sidebar, Custom Content, Saved Section, Saved Widget & Saved Page Template.

Offcanvas 5

 

2.2 Toggle Button
From the ‘Toggle Button‘ section, you can change the ‘Button Text‘ and add a Button Icon if you wish.

Offcanvas 6

2.3 Settings

From the ‘Settings’ option, you can change the ‘Direction’. You can use the drop-down menu ‘Content Transition’ to change to any of these: Slide, Reveal, Push & Slide Along.

You can use the toggle to modify the Close Button settings as per your preference.

Offcanvas 7

3. How to Style Offcanvas

Switch to the ‘Style’ tab to style all the elements of Offcanvas. You can easily add Styling to the ‘Offcanvas Bar’, ‘Content’, ‘Toggle Button’, ‘Close Button’ and ‘Overlay’ section as per your preference.

From this ‘Style’ tab, You can change the typographies, text color, background color, alignments, size, padding and many more.

Offcanvas 8

4. Final Outcome

By following the basic steps and a bit more modifying, you can style your Offcanvas in however you want.

Offcanvas 9

Get Started Now

Tags , , ,

How can we help?