Applications of content toggle in Elementor

Mar 27, 2024 | Blog

5 Creative Uses of Content Toggle Widget  in Elementor

If you want a versatile tool to display content interactively while using Elementor, WPMozo Content Toggle Widget is the perfect choice. It is a smart tool to display information-rich content in a confined space. This Elementor widget also helps visitors compare and differentiate between certain pieces of information easily. The interesting thing about Content Toggle in Elementor is that it can be used for various applications on your website. We only need to tune it up according to our needs.

In this post, we will discuss some useful cases where we can use Content Toggle widget that comes bundled with WPMozo Addons for Elementor plugin. Read the post till the end and explore the unique ways to make the content more appealing and space-efficient. on your WordPress website.

Let’s start discussing those smart ways.

1. Text Sections with Image

This is the most common way to display two sections of important content in the same pattern on your website. The text content can also be complemented with relevant images to boost visitor engagement. The visitors can view the content split into sections using the toggle switch. This is also a smart way to break content into segments for a more responsive view on mobile screens.

You can write lengthy product descriptions in a condensed form using the Content Toggle. Let’s see how you can do it. We took two auto products and used Content Toggle to showcase them along with their features interactively in a limited space.

Elementor Content Toggle to display text sections

You can also create a grid of products using Content Toggle in Elementor to provide an overview of your products in a confined space.

How to create this design:

1. To create this design we used a Content Toggle widget with a two-column layout of Elementor builder.

Use Elementor Content toggle display layout settings

2. In the Toggle One section, we mentioned ‘Overview’ as the title, selected Content Type as ‘text’, and placed the image using the add media section.

Elementor Content toggle display products

3. Similarly, edit the Toggle Two section with product features. Use a bulleted list to highlight the features.

4. After that, we included the product name as a heading and the product description as a paragraph.

5. You can also use the following code to place the image, product headings, and text description. Open the text editor of the widget and just replace the image URL, headings, and description in the code. That’s done.

<center><img class="alignnone size-medium" src="https://example.com/tate-motorbike.png" alt="" width="  " height="  " /></center>
&nbsp;

<center><h2>Tate</h2></center>

<p>"Tate" embodies the perfect fusion of style and power, offering riders an unparalleled experience on the open road. With its sleek design and cutting-edge engineering, Tate is more than just a motorcycle; it's a symbol of freedom and adventure, beckoning riders to explore new horizons with every twist of the throttle.</p>

2. Pricing Tables

This is another application of content toggle. You can display pricing and plans on your website appealingly using it. The users can view the plans and can compare them easily using the content toggle switch. The Content Toggle widget also organizes the pricing information in a limited space on your website.

You can select a layout with suitable styling and add the Content Toggle widget to display two plans.

Elementor Content toggle pricing table

How to create this design:

1. Select a layout with one column and add suitable gradient background colors to it.

Display pricing with Elementor Content Toggle

2. In the Toggle One Content section of the Content Toggle widget, add the plan’s name in Toggle Title, and select Content Type as Text.

Configure Elementor Content toggle for pricing

3. Mention the pricing in H2 and keep the features in bulleted points. Adjust the spacing between them.

4. Do the same thing in the Toggle Two Content section to display the Premium plan.

5. Style the colors of the Toggle switch and its background.

Elementor Content toggle pricing table settings

That’s done. You have created a wonderful pricing table with the Content Toggle widget which  can be used on your website. For a more stunning appearance you can tune up the styling option. If you are using Divi Theme you can explore Divi Extended Pricing Table layouts.

3. Dual Galleries

You can display two galleries at the same time using the Content Toggle widget. This can be done using Elementor templates. You can create two Elementor templates with two different galleries and those galleries would be showcased in the same space. This is a smart way to display and categorize galleries on your website.

Take a look at this amazing gallery section which shows employees from the two departments at the same space using the Content Toggle. You can use it on a wide range of websites to display two galleries with a toggle switch.

Display Dual gallery with Elementor Content Toggle

How to create this design:

1. First of all, you need to create two Elementor templates and use the basic Elementor gallery widget. Include the relevant photos of different categories with caption as their names on both templates. 

2. Enter the Toggle Title in the Toggle One section which is the department name in this design. Now select the Content Type as Template and pick the template having the gallery from the drop-down.

Display Dual gallery with Elementor Content Toggle settings

3. Repeat the above step with the second template in the Toggle Two section.

4. Do the necessary styling of the Toggle switch from the style section.

This is a brilliant way to showcase galleries in a confined way on your website.

4. Video Sections

Content Toggle can also be used to display multiple videos on your website. From the above application of galleries, you would have understood that the Content Toggle widget can display Elementor templates. This gives a superb method to use the basic video widget of Elementor and create a template showcasing video playlists. So now you can display two video categories for playlists. The users can explore both the playlists using the toggle switch. This is helpful when you want to display recent and popular videos related to your products and services in the same space.

Take a look at this interactive video playlist section created using the content toggle.

How to create this design:

1. First of all, you need to create two Elementor templates. You can use a three, four, or five-column layout depending on your needs.

2. Insert the video widget in all the columns and use the Video URLs.

3. Now select the Content Type as Template, mention the Toggle Title, and choose the Elementor template which you had created in step one.

Display video playlist using Content Toggle.

4. Repeat the above step for the second template. 

After following all these easy steps you can create a video playlist section using the Content Toggle widget to showcase popular and recent videos on your website.

5. Tutorials

Going through a  lengthy tutorial is a tiresome job. The Content Toggle widget is the perfect choice to make it interactive for the users. It splits the entire tutorial into two segments improving its readability aspect. This allows the users to go through the entire tutorial in a convenient way using the toggle switch. You only need to break up the tutorial into two segments. This is also helpful in saving space on the website.

Let us take an example of a pizza cooking tutorial. Here the tutorial is divided into two segments and the user can view these two segments separately using the toggle switch.

Display tutorial using Elementor Content Toggle

How to create this design:

1. First of all, pick a single-column layout and keep its width around 500.

2. Pick the Content Toggle widget from the dashboard. 

3. Go to the Toggle One Content. Mention Toggle One title. Keep the Content Type as Text.

Settings to display tutorial using Elementor Content Toggle

3. Insert the content with proper spacing. Here we have used <p> &nbsp;</p> for that.

4. Repeat the above step for the Toggle Two Content.

5. Select the Toggle Switch color, Pick a suitable text color for Content, and select the “Laila” Font family in the typography styling settings of both Content One and Content Two.

Style Elementor Content Toggle to to display tutorial

You can also tune the Toggle Animation from the style section as per your needs to give a final touch to your interactive tutorial.

The final takeaway is that instead of filling the content in a lengthy manner, we can make it more interactive and improve space efficiency using Content Toggle. We have tried to cover some of the major application areas of the Content Toggle Widget on our websites. The stunning styling and animation options make this widget a smart choice for websites built using Elementor. At last, we can conclude that Content Toggle is a superb widget to save valuable space on your website by displaying the content smartly.

Posted By:
Jagmohan
A curious learner who is ready to break down and simplify things to make them easily understandable to the end user. His main motive is to deliver easy-to-grab solutions in a user-friendly manner.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Top Useful Hidden Features in Gutenberg Editor

Top Useful Hidden Features in Gutenberg Editor

Gutenberg has completely changed the content creation experience in WordPress with its user-friendly interface and incredible features. Gutenberg has become the default editor in WordPress 5.0 as it simplifies the editing process for beginners. Users can create...

Useful WooCommerce Plugins Equipped with Tab Manager

Useful WooCommerce Plugins Equipped with Tab Manager

The product page of a WooCommerce store is loaded with pricing details, product variation, and other primary product information. Suppose we want to show some more product details on a product page, what is the solution? Tab Manager for a WooCommerce store comes in...

How to Add a Floating Image on WordPress Website Using Elementor

How to Add a Floating Image on WordPress Website Using Elementor

Floating image widgets in Elementor can make your website visually interesting by segregating large blocks of text and placing animating images around them. You can draw user’s attention to important content easily using the Floating image widgets. These help keep the...

Popular on WPMozo

WPMozo Wishlist for WooCommerce WPMozo Checkout Manager for WooCommerce WPMozo Variation Swatches for Woo WPMozo Addons for Elementor

Explore, Learn, Grow: Join Now!