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.
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.
After you are done with Step 1, this is the default layout you are going to see.
After you click on the ‘Click Here’ button, this is how your Offcanvas is going to be displayed:
How to Configure the Content Settings #
Under the ‘Content’ tab, you will find the ‘Offcanvas’ section.
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.
From the drop-down menu ‘Content Type’, choose any of these five types: Sidebar, Custom Content, Saved Section, Saved Widget & Saved Page Template.
Toggle Button
From the ‘Toggle Button‘ section, you can change the ‘Button Text‘ and add a Button Icon if you wish. #
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.
#
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.
Final Outcome #
By following the basic steps and a bit more modifying, you can style your Offcanvas in however you want.
