Gutenberg Content Switcher Block Tutorial

Introduction

Enrich your WordPress website’s functionality with Gutenberg Content Switcher Block, which allows users to effortlessly switch between monthly and yearly information. Our comprehensive content switcher tutorial for Gutenberg’s page builder is designed by Premium Blocks to assist you in integrating this interactive feature into your site. With straightforward instructions, you can add a dual-view content switcher that is perfect for displaying subscription options, time-based services, or any content that requires a periodic perspective. This addition will simplify your site’s navigation, making it more accessible and accommodating for users who wish to compare different plans or data over various time frames.

Requirements

To get this Gutenberg block on your WordPress website, make sure to install and activate the following plugin(s).

  • Premium Blocks for Gutenberg – The Free WordPress Plugin.
  • Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg Content Switcher Block?

Once you’ve enabled Premium Blocks, the beginning is effortless just add Premium Content Switcher Block to your Gutenberg editor. From there, you can easily use it and customize it to fit your layout.

Layout Settings

  • Switcher: Switch to enable or disable showing labels for the content switcher.
  • HTML Tag: Options to choose HTML tag types (H1 through H6) for the content displayed within the switcher.
  • Display: Opt between inline or block display for switcher and labels.
  • Alignment: Align the switcher to the left, center, or right of its container.
A screenshot of a "content switcher" interface with options layout, style, advanced settings
Gutenberg Content Switcher Block – Layout Settings

Switcher Style

  • Switcher Style – Size: Adjusts the size of the switcher style, with a slider to control the level.
  • Controller Background: A set of controls for customizing the background.
  • Background Type: Offers different options for the background, such as solid color, gradient, or image.
  • Background Color: A color picker for selecting the background color.
  • Position: Provides different choices for the positioning of an element.
  • Repeat: Defines how a background image is repeated.
  • Size: Sets the size of an element.
  • Fixed Background: A toggle switch to set the background as fixed or dynamic.
Gutenberg Content Switcher Block Styling Options.
Gutenberg Content Switcher Block – Styling Options

Switcher Background

  • Switcher Background – Background Type: Allows you to choose the type of background for the switcher, such as a solid color, gradient, or image.
  • Background Color: Switch to enable choosing a color for the background.
  • Switcher Shadow: A button to apply and customize a shadow effect for the switcher.
  • Switcher Border Radius: Adjust the roundness of the controller’s corners, with units in pixels (PX) or percentage (%).
  • Switcher Border Radius: A slider to adjust the roundness of the switcher’s corners, with units in pixels (PX) or percentage (%).
Gutenberg Content Switcher Block Switcher Background Style.
Gutenberg Content Switcher Block – Switcher Background Style

Label Style

  • Labels Style – Spacing: Adjusts the space between labels, with a slider for precise control over the spacing value.
  • First Label / Second Label: Text fields to input the text for the first and second labels respectively.
  • Typography: Customize the font style, including font family, size, weight, and style.
  • Text Color: A color picker to choose the color of the label text.
  • Background Color: Select a background color for the labels.
  • Text Shadow: Add and customize a shadow effect behind the text.
  • Box Shadow: An option to add and customize a shadow effect behind the label box.
  • Border: Controls to define the border style, including line style (solid, dotted, dashed) and color.
  • Border Radius: Set the radius for the corners of the border, allowing for individual adjustments for top, right, bottom, and left sides.
  • Padding: Input fields to set the internal space between the content and the border of the label, with units in pixels (PX), ems (EM), or percentage (%).
Gutenberg Section Block Labels Style.
Gutenberg Content Switcher Block – Labels Style

Container Style

  • Background Type: This control allows the user to select a type of background such as a solid color, gradient, or image.
  • Box Shadow: Adds a shadow around the container and provides options to customize the shadow’s appearance.
  • Border: Defines the border style with options for solid, dotted, or dashed lines.
  • Border Radius: Adjusts the curvature of the container’s corners, with separate controls for the top, right, bottom, and left corners.
  • Margin: Sets the outer spacing around the container, with the ability to adjust for each side independently, in pixels (PX), ems (EM), or percent (%).
  • Padding: Controls the inner spacing between the content and the borders of the container, with individual adjustments for each side, in pixels (PX), ems (EM), or percent (%).
Gutenberg Content Switcher Block container style.
Gutenberg Content Switcher Block – Container Style

Conclusion

Gutenberg Content SwitcherBlock tutorial by Premium Blocks effectively guides users through setting up an interactive content switcher in WordPress. This tool simplifies site navigation, enhancing the display of time-sensitive or subscription-based information by allowing users to easily compare different data perspectives, thus improving overall user experience.


Need Further Help?

Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

About Leap13

Leap13 is a WordPress-focused web development firm specializing in building premium WordPress themes and plugins.

Copyright © 2024 | Built With ❤️ Using Kemet WordPress Theme and Premium Blocks