Switcher

Switcher

The switcher is a toggle button which when clicked can display two types of content. You have to name the toggle button for it to make sense.

For eg: If you want to create a Pricing Table, you can name the switcher something like Monthly / Annually. This makes it easy for users to see your website’s monthly and annual pricing plans.

Pro tip
Let’s say you run an E-commerce Store and you want to visually distinguish Digital and Physical Products. This switcher block can do this magic.

How to use the Switcher Block of The Plus Addons For Gutenberg

This block is used to display Pricing Tables, Info Sections, Services, etc. Let’s understand how to use this block in the tutorial below. 

Table Of Contents

Setting Up

Gutenberg gives multiple ways to add Switcher into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Switcher after “/” sign, eg.“/ Switcher”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Content 1

Title

Input for the heading is going to be clicked by the user to view the whole content.

Select Source

A selection whether you want to have custom content or want to use reusable blocks as content.

Description

An input for custom content is going to display to the user on the slide switch.

Block Template

A reusable block template selection, from which content reference is been made.

Content 2

Title

Input for the heading is going to be clicked by the user to view the whole content.

Select Source

A selection whether you want to have custom content or want to use reusable blocks as content.

Description

An input for custom content is going to display to the user on the slide switch.

Block Template

A reusable block template selection, from which content reference is been made.

Switch / Toggle

Select Style

Choose a style from a pile we have provided.

Display Switcher Button

Visibility option to show the Switch or not.

Alignment

You can set the Alignment of the Switch to left, right or center.

Label Spacing

Slide to reduce or increase space between the Labels.

Switch/Toggle Size

Slide to reduce or increase the size of the switch.

Label Icon

Option to set icon before title.

Switch 1 Icon

You’ll be displayed a whole list of icons provided by the FontAwesome icon library. If you have purchased licence for the pro plan and activation has been done you’ll use pro icons.

Switch 2 Icon

You’ll be displayed a whole list of icons provided by the FontAwesome icon library. If you have purchased licence for the pro plan and activation has been done you’ll use pro icons.

Connections

Connection ID

Add your carousel anything block ID here to connect the Switcher block with Anything Carousel.

2. Style

The Style tab is used for customizing the appearance of all the Switcher block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Switch / Toggle

Switch Color

A color picker to assign a suitable color to the Switch.

Background Color

A color picker to assign a suitable color to the switch background, selection for on Active is also provided.

Label Color

A color picker to assign a suitable color to the label, selection for on Active is also provided.

Box Shadow

Give Box/Text/Drop shadow effect and color to switch, selection for on Active is also provided.

Switcher Title

Label 1 Typography

Assign a size, weight, spacing and much more to Label 1.

Label 2 Typography

Assign a size, weight, spacing and much more to Label 2.

Switcher Icon

Icon Size

Slide to reduce or increase the size of the icon before the label.

Icon Spacing

Slide to reduce or increase space between the Label and Icon.

Color

A color picker to assign a suitable color to the Icon, selection for on Active is also provided.

Content 1

Typography

Assign a size, weight, spacing and much more to Label 1.

Color

A color picker to assign a suitable color to label 1.

Content 2

Typography

Assign a size, weight, spacing and much more to Label 2.

Color

A color picker to assign a suitable color to label 2.

3. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.