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.
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
Switch Type: Select the switch type. Choose between Rounded or Button.
Show Labels: Switch to enable or disable showing labels for the content switcher.
Show Left Toggle Icon: Switch to enable or disable showing the left toggle icon.
Type: Select the toggle type between icon, image, SVG, or Lottie.
Show Right Toggle Icon: Switch to enable or disable showing the right toggle icon.
Type: Select the toggle type between icon, image, SVG, or Lottie.
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.
Size: Adjusts the size of the switcher style, with a slider to control the level.
Left Icon Color: Set the left icon toggle color.
Right Icon Color: Set the right icon toggle color.
Controller Left Background: A set of controls for customizing the background for the left controllers and switcher.
Controller Right Background: A set of controls for customizing the background for the right controllers.
Controller Shadow: Toggle and customize the shadow effect around the controller.
Controller Border Radius: Increasing the border radius adds circular corners to the area behind the controller. You can adjust the border radius in pixels or %.
Switcher Background – Background Type: Allows you to choose the type of background for the left and right 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 switcher’s corners, with units in pixels (PX) or percentage (%).
Background Type: Allows you to choose the type of background for the box, such as a solid color, gradient, or image.
Box Shadow: An option to add and customize a shadow effect behind the 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 box, with units in pixels (PX), ems (EM), or percentage (%).
Label 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.
Active Text Color: A color picker to choose the color of the active label text.
Inactive Text Color: A color picker to choose the color of the inactive 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 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 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? Premium Blocks 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.
