Gutenberg Content Switcher Block Tutorial

Are you looking for a way to create a Monthly/Yearly content switcher in Gutenberg page builder? Introduce a seamless way to toggle between different content types, such as Monthly and Yearly plans or any other dual-content scenarios. Premium Blocks’ guide walks you through adding and customizing a content switcher to your Gutenberg pages, enhancing user engagement through dynamic content display.

---

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.

---

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

---

Conclusion

Gutenberg Content Switcher Block Tutorial empowers you to add dynamic, interactive elements to your website, enabling users to seamlessly toggle between different content types. By customizing the layout and style to fit your website’s theme, you create an engaging user experience that not only looks great but also provides functional value. Check out the demo page for inspiration and begin incorporating content switchers into your web design strategy today.