booster addons
creative elementor bundle
Purchase Now
Purchase Now
Purchase Now

Home - Widgets - Toggle Content

Toggle Content

Preview Widget
Preview Widget
Getting Started
Content
Switcher & Content Styling

More Widgets

• Static Template Tabs
• Advanced Button
• Single Icon
• Advanced Heading

# Getting started

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.

Content

The content tab will be used to define the two widget areas.Each area has the following options.

  • Heading :  A title text that gives a global insight about the information or service you are showcasing.This will be displayed next to the switcher.
  • Content Text : Choose if you want to use text as content or use a template instead.
  • Text Content : A text paragraph that will be displayed in the corresponding area.This is only available when the content source is set to text.
  • Select Template : This option is available when using the template as content source.You can select the template that you want to set in your area.Creating a template can be done in the Booster Addons admin panel using the booster templates section.

Styling

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.

  • Switcher Styling

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.

  • Typography Settings

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.

  • Content Area Settings

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.

Get Help From Professionals

Can't find what you are looking for?

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.

Open a Ticket
Open a Ticket

WHO ARE WE ?

We are a group of talented WordPress developers & designers from Earth our main goal is to create great products & provide the best services to our customers.

BOOSTER ADDONS

CREATIVE ELEMENTOR BUNDLE

FOLLOW US

Email : contact@certaindev.com

WebSite : Certain Dev

Made with love from Earth!

Certain Dev | all rights reserved © 2020