Gutenberg Content Switcher Block Tutorial

Are you looking for a way to create a Monthly/Yearly content switcher in Gutenberg page builder? Now, you can achieve that using Content Switcher Gutenberg Block to add a switcher to your content. In Gutenberg Content Switcher Block, you can toggle between two different content

Check Gutenberg Content Switcher Block demo page from here.

Red Arrow Pointing to Gutenberg Content Switcher Block
Gutenberg Content Switcher Block


Content Switcher Gutenberg Block Layout Settings

  1. Show Labels: Enable to show content switcher labels.
  2. HTML Tag: Set content switcher label heading HTML level from H1 to H6.
  3. Display: Set content and switcher display settings:
    1. Inline: All labels and switcher on one line.
    2. Block: Labels and switcher will be displayed on separate lines.
  4. Alignment: Algin switcher to left, center or right.

Style Settings for Content Switcher Gutenberg Block

Style Content Switcher block switcher, labels and containers.

Gutenberg Content Switcher Block Style Options
Style Gutenberg Content Switcher Block

Switcher Style for Gutenberg Content Switcher Block

  1. Size
  2. Controller Background
  3. Switcher Background
  4. Controller Shadow
  5. Switcher Shadow
  6. Controller Border Radius
  7. Switcher Border Radius

Labels Style for Gutenberg Content Switcher Block

  1. Spacing
  2. First and Second Label:
    1. Typography
    2. Text Color
    3. Background Color
    4. Text Shadow
    5. Box Shadow
    6. Border
    7. Padding

Container Style for Gutenberg Content Switcher Block

  1. Background Type
  2. Box Shadow
  3. Border
  4. Padding

Related Docs: