Hover Split Effect

The Hover Split Effect allows you to create an interactive layout where a section or row is divided into two sliding panels.
When a user hovers over one side, the corresponding panel expands while the other contracts, creating a dynamic and immersive visual experience.

This effect is commonly used for:

• Hero sections
• Category or service comparisons
• Promotional banners
• Interactive landing page sections

You can see an example in Seo3.

Porto provides different implementations depending on the page builder and layout mode:

WPBakery Page Builder

• Available in the Porto Row element
• Configuration is located in the Porto Addons tab

Elementor – Section Mode

• Available in the Section
• Configuration path: Layout Tab → Porto Additional Settings → Use As → Split Layer

Elementor – Container Mode

• Since Section elements are not available in Container mode, Porto provides a dedicated element Alpus Interactive Banner

• This element is designed specifically to reproduce the Hover Split Effect within Elementor’s Flexbox Container system.

WPBakery Page Builder

1. Add a Porto Row
2. Open the Porto Addons tab
3. Enable Mouse Hover Split
4. Add two columns inside the row

Elementor (Section Mode)

1. Add a Section
2. Go to the Layout tab
3. Open Porto Additional Settings
4. Set Use As to Split Layer
5. Add two inner columns

After enabling Hover Split Effect:

• The section or row must contain exactly two columns

• Each column must have

  • Hover Split Slide option set
  • The slide direction matching the parent row or section
• This ensures consistent animation behavior during hover interaction

Parent Row / Section

Inner Columns

• Use contrasting background colors or images for each side
• Keep content minimal to maintain visual clarity
• Ensure both columns share the same minimum height
• Avoid placing more than two columns in a split layout