< All Topics

Background Switcher

The Background Switcher Block allows you to create interactive background transitions that respond to user interactions. It’s perfect for showcasing multiple images, each with its own title and description, making your section more dynamic and engaging.

Adding the block

To add the block:

  • Click the “+” button to add a new block.
  • Search for “Background Switcher” and select it.
  • For detailed instructions on how to add blocks in Gutenberg, please refer to the official WordPress Block Editor documentation.

General Settings

Display

  • Switcher Orientation:
    Choose between Horizontal or Vertical layout for your switcher items.
  • Content Vertical Align:
    Align the content to Top, Center, or Bottom within each item.
  • Item Height (px):
    Set the height of each background item.
  • Responsive Height (px):
    Define the height for smaller screens to ensure a consistent layout.
  • Blur on Hover (px):
    Add a blur effect when hovering over items for a stylish visual transition.

Individual Item Settings

Each Background Switcher Item includes its own content and background options.

Content

  • Title:
    Add a title for the specific item.
  • Description:
    Enter a short description or caption related to the image.
  • Background Image:
    Upload or select a background image for this item.
  • Background Image Size:
    Choose from Cover, Fit, Actual Size, or Stretch to Fill.
  • Background Image Position:
    Adjust the position of the background image (Top, Center, Bottom, etc.).
  • Background Image Repeat:
    Set whether the image repeats or not (No Repeat).
  • Background Image Blend:
    Select the blending mode (Normal, Multiply, or Screen) for creative effects.
  • Show Button:
    Enable a button on the item if you wish to add a clickable link or call-to-action.

Design Settings

Global Design Options

  • Title and Description Styling:
    Customize typography, alignment, color, and spacing for both title and description text.

Individual Item Design
Each background switcher item includes design controls for its Title and Description allowing you to personalize font, color, size, and layout individually.