Toggle Content

As a site owner, keeping your visitors engaged is very essential so that they stay on your website. With Essential Blocks, you can easily amaze your visitors with interactive Toggle Content which is engaging and can reduce scroll time. All it takes is one click to create eye-catching toggle content and enhance your user experience.

Toggle Content

Why Do You Need To Create Toggle Content On Websites?

Toggle Content Block is a simple toggle bar that allows you to display key information interactively on your website to draw visitors’ attention. It helps to boost the site traffic, also reduce the scroll time.

⭐ The Toggle Content lets you showcase two different content in one specific section by toggling a small bar. This way, you can make your website content easy to navigate as well as make your web design stand out and look more interactive to the site visitors.

⭐ Visitors find two different content in one specific section just clicking on a toggle bar which reduces the scroll time. Less scrolling time inspires the visitors to read the full content in less time. 

⭐ Small but informative content takes less reading time which visitors love to finish. Toggle Content helps to keep the content size smaller, as a result, it reduces the bounce rate

Engage Your Customers With Essential Blocks Toggle Content

Essential Blocks Toggle Content is a one-click solution to switch content or blocks with a beautiful switcher. After years of data research, website designers have found that having Toggle Content improves websites user experience. 

Toggle Content

Essential Blocks comes with this powerful Toggle Content to improve the content quality of Gutenberg users. Gutenberg editor doesn’t have any basic or built-in toggle bar. So, Essential Blocks power up this editor so that users can keep their visitors engaged with this stunning block.

Visitors’ engagement is a must for any content to get the best out of it. Toggle content boosts the user experience and engages them with its super easy navigation. With this block, you can not only make your website content easy to navigate, but also make your web design stand out and look more interactive to site visitors. 

How To Create Toggle Content Using Essential Block In Gutenberg?

Before using Essential Blocks Toggle Content on your site, make sure that you are using Gutenberg editor on your WordPress site. Now, check out this easy 3 steps Gutenberg tutorial to learn how to create Toggle Content on your website content without coding.

Step 1: Install the Essential Blocks Plugin And Activate It

Login into your WordPress admin panel. From the dashboard, go to ‘Plugins’ and then click on ‘Add New‘. In the search bar, search for Essential Blocks for Gutenberg. Install the plugin and then activate it. 

Toggle Content

Step 2: Insert  The Toggle Content Block In Gutenberg

Now, from the dashboard, open a page or post where you want to use the Essential Blocks Toggle Content. From a page or post, click on the Toggle block inserter of the top left corner of the screen. You will get the Gutenberg Block Panel. Here, search for Toggle Content.  Now, drag the Toggle Content block and drop it on the specific section of your content where you want to use the block. Or you can just click on the block to get it on the content section. 

Toggle Content

Step 3: Customize Essential Blocks Toggle Content

To customize, click on the block. You can change the button heading from the block directly. For more customization, click on the ‘Settings’ icon from the top right side of the screen. From here, you can customize the block according to your choice. You can change the button height, width, color, shape, etc. 

Toggle Content
How To Use Toggle Content In Gutenberg To Reduce Scroll Time? [2023] 11

To add any text content for each side of the button, click on the block. Keep your toggle button on the side where you want to put your text content. Now type your content in the typing section. Do the same for the other side of the button. 

Toggle Content
How To Use Toggle Content In Gutenberg To Reduce Scroll Time? [2023] 12

To add image content for each side of the button, click on the block. Keep your toggle button on the side where you want to put the image. Now click on the ‘+’ button and add an image block. Now upload the image or select an image from the media. Do the same for the other side of the button. 

Toggle Content
How To Use Toggle Content In Gutenberg To Reduce Scroll Time? [2023] 13

Once all your customization is done, you can check the preview of your content. If you are satisfied, then click on the ‘Publish’ button to make your content live. After publishing your content, you can see your content like below. Your visitors can toggle the bar and see the different content with just one click. 

Toggle Content

Create Interactive Toggle Content In Gutenberg Effortlessly

It is a great opportunity for Gutenberg users to use the Essential Blocks toggle content. Because it is very handy as well as user-friendly. The block has so many customization options which are really helpful to create a wonderful toggle bar. 

When you have similar types of data to provide your visitors, you can easily use this block to showcase your data. For easy navigation and improving the user experience of your website, a Toggle Content button is cool enough. 

So, are you interested in using this block? If you enjoyed this post, subscribe to our blog and join our Facebook community to connect with web creators and Gutenberg users. Leave your comment below and stay connected.

  • 00Days
  • 00Hours
  • 00Mins
  • 00Secs

Wait... before you go!

Checkout now to Save