Content Switcher

The Content Switcher module shows a two-state switch above two blocks of content. Visitors flip the switch to change which block is visible. Typical uses are monthly and yearly pricing, before and after, or personal and business plans.

Content Tab

Primary

• Show Primary Title: Shows the label on the left of the switch. On by default.
• Primary Title: The label text. Default is "Monthly".
• Content Type: Custom Content or Library.
• Primary Content: The content for this state when Content Type is Custom Content. This field uses the Divi text editor.
• Select Library: Appears when Content Type is Library. Choose a Divi Library layout to show as this state's content.

Secondary

• Show Secondary Title: Shows the label on the right of the switch. On by default.
• Secondary Title: The label text. Default is "Yearly".
• Content Type: Custom Content or Library.
• Secondary Content: The content for this state when Content Type is Custom Content.
• Select Library: Appears when Content Type is Library.

Settings

• Default Display: Which state is active when the page loads, Primary or Secondary. Default is Primary.

Design Tab

Switcher

• Switcher Style: Style 1 or Style 2.
• Switcher Alignment: Left, Center or Right.
• Switcher Size: Default is 15px.
• Switcher Background (Primary) and Switcher Background (Secondary): The switch background color for each state.
• Switcher Border Radius, Trigger Background and Trigger Border Radius: Shape and color of the switch and its moving knob. The trigger also has box shadow options.
• Heading Spacing: The gap between the switch and the labels beside it.
• Bottom Spacing: The gap between the switch row and the content below it.

Content

Background, padding, text alignment and border radius, set separately for the primary and the secondary content.

Primary Title and Secondary Title

Font styling for each label.

Content (font)

Font styling for the body text of both content blocks.