How to set up a Content Toggle

In Elementor, you can add a Tab widget, but it is generally limited just to the content that you add directly into the widget itself which is rather limited. There are times where you may want to add a toggle to another widget, or an entire section comprised of multiple columns, etc. A common use for this would be adding a pricing table with a tab to change between monthly and yearly pricing.

That is possible in Stratus using our new custom blocks template feature. This allows you to create content as an Elementor template and then insert the content as a shortcode into the tab widget. You can start by creating the content for the first tab or toggle state:

In the dashboard, navigate to the Stratus > Global Templates area (in previous versions it is titled "Header & Footer" which still supports this feature)
At the top click the Add New button, and then input a title (#1 in the image below)
In the meta box below the Elementor button, select the "Custom Block" template type (#2 in the image above) and then click the large blue Edit with Elementor button.
Inside the Elementor editor, this is where you build the content for your first tab or toggle state. In this example it is a simple pricing table:
When that is done, you can click the green Update button at the bottom, and then click the hamburger button in the very top left and then Exit to Dashboard.
Go through steps 1-4 again, this time creating the content for your second tab or toggle state:
For both of the blocks you have created, on the Edit Template screen, copy or note the shortcode as shown here:
Now navigate to the page on which you want to display your Content Toggle, and add a Tab widget:
As shown in the image below, title each Tab with the text you want to display as your tab / toggle, which could be "Monthly" and "Yearly" and then copy/paste each shortcode into the corresponding tab content box (It's best to select the Text tab before pasting):
Then under the Style tab, you can style your tabs as you see fit. When you click Update and view the page, you will see that you can now toggle between your content:
The styling options are somewhat limited in the Tab widget in terms of creating a Content Toggle, so what you can do is instead just add the class " th-content-toggle " into the Advanced tab as shown here:
Then just copy the code from the link below and you can paste it into either your child theme, or under Appearance > Customize > Additional CSS:

View/download code
Now you should have a result like the graphic below, and you can change the colors within the CSS provided above.

If you have any questions, please feel free to open a ticket: https://themovation.ticksy.com