[New] How To Add An Offcanvas Content In Gutenberg Using Essential Blocks

Posted on January 17, 2024January 17, 2024 Posted by Abdullah Mamun Categories Announcement, Gutenberg, Tutorial

Are you looking for ways to create menus, flyout information, slide panels, and more on your WordPress website in Gutenberg? Then, Essential Blocks is here with some good news! With the Offcanvas block just introduced, you can quickly add an Offcanvas content in Gutenberg and quickly build an amazing sidebar for seamless navigation without coding.

By using this block from Essential Blocks, you can immensely improve user experience while making the site navigation a lot easier. To help you get started, we will give you a brief on how you can add an Off-Canvas content to your WordPress website without any coding.

💡 Why Do You Need Offcanvas Content Menu?

Off-Canvas menu lets you display your content as a sidebar when a button is triggered. This helps you showcase a specific aspect of your site in the side navigation panel, thus giving a user-friendly experience to your visitors.

For instance, you can use Off-Canvas element to display a beautiful sidebar on your website & use this as a secondary menu alongside your header. Additionally, Off-Canvas navigation lets you display quick links to particular parts of your website. As a result, you can easily redirect your visitors to an individual page.

Moreover, if you have any special offers or announcements for your users, you can effectively promote them through the Off-Canvas content. To grab your viewer’s attention, you can showcase your featured product in the navigation panel as well.

On the other hand, with an Off-Canvas menu, you can create a form to get people to subscribe to your newsletter. You can also use this as an opportunity to help people easily contact you.

💡 What Can You Do with Essential Blocks Offcanvas?

Currently, the default editor of WordPress, Gutenberg, does not have any block to let users set up an Off-Canvas navigation bar on their website. That is where the Essential Blocks comes in to help you easily get started.

The Essential Blocks Offcanvas is a premium featured block from Essential Blocks. It gives you plenty of navigation options to choose from. If you go with the Sidebar type, a drop-in menu will appear from left or right to select your preferred one from the list. On the other hand, you can pick one of the up and bottom menu choices.

This premium block lets you easily add & modify your text content, which will be displayed in the Off-Canvas menu. Plus, it comes with multiple trigger types and transition and positioning options, with which you can choose how it will display once you add Off-Canvas content.

On top of that, the Off-Canvas bock gives the flexibility & freedom to style all the features as per your preference. Because of its ease of control, you do not have to be an expert to be capable of doing this.

📑 Step-By-Step Guide On How To Add An Offcanvas Content

With Essential Blocks Offcanvas, you can create menus, flyout information, slide panels, and more on your WordPress website in Gutenberg. Follow this simple 2-step guide to learn how to add Off-Canvas content to your website using Essential Blocks.

Before getting started, you will need to install and activate Essential Blocks PRO on your website along with the free version to use this premium block.

Step 1: Activate & Configure Offcanvas In Essential Blocks

Activate Offcanvas from the ‘Blocks’ control and open the page where you want to insert your Offcanvas menu. Then, add the ‘Offcanvas’ block on your web page.

After you have inserted the block, you will have 4 Offcanvas Types to set your menu. Pick the one that suits your needs.

For the Offcanvas block, we will have 3 Trigger Types for you to choose from under the ‘Settings’ tab. You can choose from ‘Button’, ‘Interactive Button’, & ‘External Element’.

For example, the Button trigger type will open your Offcanvas instantly. The Offcanvas will appear exactly where you’ve positioned it. Whether left, right, top, or bottom, the placement you’ve chosen is where your users can find the Offcanvas content.

To utilize the “External Block” trigger, simply copy the “Block Identifier” class available in the “Advanced Tab” of the external block. Then, paste it into the “Additional CSS Class” section.

Position & Content Transition

With the EB Offcanvas block, you will have various Positions and Content Transition options. In the following image, we have showcased all the content transitions as we can only see the effect in the front end. And for the transitions, pick any of the 4 available options of ‘Slide’, ‘Reveal’, ‘Push’, and ‘Slide Along’.

For the EB Offcanvas menu button, you will have two options. Choose between ‘Inline’ and ‘Floating’, and you can see the position of your CTA button.

You can also enable or disable the ‘Show Close Bar,’ ‘Esc To Close,’ and ‘Click Anywhere To Close’ and apply these options to your trigger types. Under the ‘Offcanvas Bar’, you can modify the height of your content, and from the ‘Close Button’ option, you can properly set your icon position easily. Additionally, if you click on the ‘Trigger Option,’ you can update the button text of your trigger menu.

Step 2: Styling EB Offcanvas

Under the ‘Styles’, you can customize your Offcanvas Bar, Close Button & Trigger Styles. You can easily customize your Background Border & Shadow under the Offcanvas bar. From the ‘Close Button’ tab, set your icon position, color, padding, and much more. And the same goes for Trigger Styles, you can add typography, color, hover color, etc.

Here Is The Final Outcome

By following the basic steps and a bit more modifying, you can style your EB Offcanvas however you want. Here is how it works on your website, as shown below.

🚀 Add An Off-Canvas Content & Enhance Seamless Navigation On Your Website

Adding an Off-Canvas menu using Essential Blocks in Gutenberg enhances website navigation and user experience. Plus, when you add an off-canvas content, you can seamlessly showcase content, promotions, or forms with ease. Its flexibility allows for customization without any coding expertise. Now is the time to effortlessly integrate and personalize the Off-Canvas feature and contribute to an enriched and interactive design for your WordPress website.

If you have found this blog helpful, feel free to share your opinion in the comment section or with our Facebook community. You can also subscribe to our blog for valuable tutorials, guides, knowledge, tips, and the latest WordPress updates.