Interactive Product Tabs: Synchronizing Dynamic Background Images

The standard presentation of product or feature tabs can often appear static. With the Alpha Theme’s Synchronized Image Switching feature, you can dramatically improve the user experience: When the customer clicks a tab (e.g., “Material”), not only does the content change, but the background image also changes dynamically to match the selected topic.

The Visual Experience

This feature combines two elements:

1. A Kadence Tabs Block that contains your text information (Material, Dimensions, etc.).
2. A series of layered images that visually represent the context.

When a tab is clicked, the corresponding background image is softly faded in (fade effect), while all other images are hidden. This creates a seamless, interactive, and visually appealing section.

Setting Up the Synchronization

The synchronization is achieved by adding specific CSS classes to the Kadence Blocks. This feature only works if the number of tabs exactly matches the number of images (1:1 Rule).

Step 1: The Main Structure (Row Layout)

Create a Kadence Row Layout block (or a Section block) that encloses the entire section. This serves as the main container for the logic.

• Select the Row Layout block.
• In the block settings (right sidebar), go to Advanced → Additional CSS classes.
• Add the class img-fading-section.

Step 2: The Content (Tabs Block)

Insert a Kadence Tabs Block inside the Row Layout. Add the class img-fading-section-tabs to the tabs block. Create as many tabs as you want features to present (e.g., 5 tabs for material, color, etc.).

Step 3: Placing the Background Images (Images)

Place all the images that will serve as the dynamic background also inside the same Row Layout.

• Use a separate Kadence Image Block or equivalent block for each background image.
• Ensure that the number of images exactly matches the number of tabs.
• Select each image individually and add the class fade-img under Advanced → Additional CSS classes.