Content Switcher Element

The Porto Content Switcher lets you display two different contents in the same area and switch between them using a toggle.
It’s ideal for comparisons such as pricing plans, feature differences, or alternative layouts—without duplicating page space or adding custom scripts.

1. Add the Porto Content Switcher element to the page
2. Define labels and content for both switch states
3. Adjust alignment and spacing
4. Style labels and switch appearance
5. (Optional) Insert Porto Blocks using shortcodes for advanced layouts

Content Options

• First Label - Text shown for the first switch state
• Second Label - Text shown for the second switch state
• First Content (HTML) - Content displayed when the first label is active
• Second Content (HTML) - Content displayed when the second label is active
• Switch Alignment - Align the switcher (left, center, or right)
• Content Padding - Inner spacing for the switch content area

Note:
Both content fields support shortcodes. You can insert Porto Block shortcodes created under Porto → Template Builder → Block to render complex layouts inside the switcher.

Style Options

• Typography - Control font family, size, weight, and line height of labels
• Label Spacing - Adjust spacing between labels and the switch
• Switch Size - Set the size of the toggle switch
• Label Colors
  • Normal label color
  • Active label color
• Switch Colors
  • Switch color
  • Background color
  • Border color

To reuse layouts inside the switcher:

1. Create a block in Porto → Template Builder → Block
2. Copy the generated shortcode
3. Paste the shortcode into First Content or Second Content

This allows grids, banners, sliders, or any Porto layout to be displayed dynamically inside the switcher.

• Monthly / Yearly pricing tables
• Feature comparisons
• Product overview vs specifications
• Compact content toggling