The toggle content widget is a modern tool that you can use to display content on your web pages.This widget has two areas and a switcher to swap between them.Each area can contain content text, or, if you want more than text, you can create a template with everything that you need and use it as an area.Choose from different switcher styles and customize the design for all of the widget components.
Lets go over the details of this very useful widget.
The content tab will be used to define the two widget areas.Each area has the following options.
The styling tab is where you will change all the visual aspects for the toggle content elements.You can customize the switcher style, typography, color, and more.
Control everything about your switcher design.
-Activated Area : Select the default displayed area.
-Switcher Style : Choose one of the many available switcher styles.
-Switcher Size : Control the switcher side using this control.
-Switcher Align : Horizontally align the switcher inside the containing area.
-Stacked Switcher : Enable this if you want to use a vertical layout for the switcher.
-Enable Responsive Switcher : Enable this if you want to use a responsive design.
Switcher Color 1 Settings & Switcher Color 2 Settings :
-Color Scheme : Change the color for the two switcher sides.
-Border & Box Shadow : Define a border a box shadow to add even more style to the switcher.
Switcher Handle 1 Settings & Switcher Handle 2 Settings :
-Color Scheme Handler : Customize the color for the switcher handler.
-Border & Box Shadow : Add a border a box shadow to the handler.
Container Styling Settings :
- : Define a background color for the switcher container.
- : Add a border for the container with the possibility to control the border width and color.
-Margin & Padding : Change the margin and padding values to control the container inner and outer space.
Customize the text properties and style for the two areas headings.
-Colors : Customize the color of your text elements with the possible use of both solid and gradient colors.
-: Change the font family, font size, and all the other text options.
-: Add a shadow for your headings and change the margin values to control the distance between your text and the other elements.
Change the two areas containers style.
- : Define a background for each area container.
- : Add a border for the containers with the the option to control the border width and color.
-Padding : Control the areas containers inner space by changing the padding values.
If you can't find what you are looking for any our documentation website, please feel free to open a support ticket & get help from our support team.