If you want to imagine a scenario where your users can switch between different states or options, a toggle button is the perfect solution. These buttons give users quick access to options without taking up too much page space. For example, they’re perfect for switching between monthly and yearly pricing, detailed versus summary views, or display preferences like light and dark modes.
While WordPress doesn’t natively support toggle buttons, Ultimate Blocks’ Tabbed Content block makes it easy to replicate their functionality. The plugin is versatile, and unlike many other options, it offers a broad set of blocks that allows you to transform simple tabs into switchable states with just a few adjustments.
This guide is presented to show you how to utilize this plugin to achieve a sleek, user-friendly toggle button effect. Let’s get started.
Step 1: Install Ultimate Blocks Plugin
Simply start by logging into your WordPress dashboard and then navigate to Plugins > Add New. In the search bar, type “Ultimate Blocks,” and once it appears, click Install. After installation, activate the plugin.
Step 2: Add the Tabbed Content Block
Once Ultimate Blocks is active, decide where to add the toggle button. You can open a new page or post or continue with an existing one.
From the WordPress editor, type /tabbed content or click the + icon to open the block library. If you’re using the + icon method, type “tabbed content” in the search bar to locate the Tabbed Content Block and insert it into your page or post.
Once you’ve added the block to your editor, this is the interface you will get in your editor.
At this point, the block doesn’t yet resemble a toggle button. What we need now is a few tweaks in the block settings to bring it closer to a setup that mimics a toggle button that lets users shift between visible content sections.
Step 3: Customize and Configure the Tabbed Content Block
With the block selected, we go to the settings on the right. Select the Pills style in the settings to make each tab look like a button instead of a tab.
Next, we need to adjust the block’s alignment to the center to make it look more like a toggle button.
Now, to create a toggle state, we need to have at least two tabs. Simply click the + sign next to the first tab to add another tab. If you want to have more tabs, follow the same procedure.
Once we’ve done that, we have separate tabs to work with. What we need now is to transform these tabs into toggle buttons with the help of the color settings.
But first, rename the tabs with different labels to represent different toggle states, then move to the style settings on the right sidebar. From there, use the Color Settings to add contrasting colors for each tab to make the active tab more distinct.
At this point, your toggle button is ready. All that remains now is to add your content. Click inside each tab to add specific content. You can include text, images, videos, or any blocks to suit your needs. Just click the + sign and add the related block for your preferred content.
After that, add related content to each tab. Here, we’ve created a sample for a pricing section using paragraph, heading, and list blocks in both tabs. You can specify the color of each block from the color section and, if you feel more highlight is needed for those tabs, change the content background of the whole block.
Step 4: Preview and Publish
Use the Preview option to test how your tabs function as a toggle button. Check if each tab opens the correct content section. Once you’re happy with the look and functionality, click Publish or Update if it’s an existing post. Your toggle button effect is now live and ready to gift your users an easy way to toggle between content sections.
Conclusion
By following these steps, you can successfully turn standard tabs into a fully functioning toggle button. This setup will improve your content layout and make it accessible and easy to navigate. Your visitors can now switch between options instantly, whether exploring different prices, viewing additional details, or choosing their display preferences. This small addition brings clarity and flexibility to your site and allows users to explore content on their terms while keeping the page clean and organized.