Documentation

Learn how to build, customize, and optimize your sliders. Access step-by-step guides.

1. Overview & Core Features

SplitView – Interactive Multi-Panel Showcase for WordPress is an advanced, highly customizable WordPress slider plugin that organizes your content into clean vertical columns that dynamically expand, zoom, or shift on hover to reveal descriptive overlays, CTA buttons, and custom background swaps.

2. Installation Guide

Make sure your server meets WordPress minimum requirements (PHP 7.4 or higher, MySQL 5.6 or higher) before starting.

Option A: Installation via WordPress Dashboard

  1. Log in to your WordPress Dashboard.
  2. Go to Plugins > Add New in the left sidebar.
  3. Click the Upload Plugin button at the top.
  4. Click Choose File and select splitview-slider.zip.
  5. Click Install Now.
  6. Wait for the upload to finish and click Activate Plugin.

Option B: Installation via FTP / File Manager

  1. Extract splitview-slider.zip on your local machine.
  2. Log in to your server using an FTP client or cPanel File Manager.
  3. Navigate to the WordPress plugins folder: /wp-content/plugins/.
  4. Upload the unzipped splitview-slider folder directly to that directory.
  5. Log in to your WordPress Dashboard, navigate to Plugins > Installed Plugins, locate “SplitView – Interactive Multi-Panel Slider”, and click Activate.

3. Creating a Slider

Once activated, the plugin registers a custom post type. In your dashboard sidebar, you will see a new item: SplitView – Multi Slider.

Option A: Start with a Blank Canvas

  1. Navigate to SplitView – Multi Slider in your dashboard.
  2. Click Add New Slider.
  3. If redirected to the template selection page, click the Blank Canvas box.
  4. Enter a title (e.g., “Home Page Bento Grid”) to identify your slider, then add slides in the Slides Manager.

Option B: Quick-Start with Ready-Made Slider Templates (Pro Version Only)

Avoid manual styling and import pre-configured templates instantly:

  1. Navigate to SplitView – Multi Slider and click Add New Slider.
  2. The plugin redirects you to the visual Ready-Made Slider Templates wizard.
  3. Browse the layout categories (such as SaaS Landing, Agency Hero, or eCommerce grids).
  4. Click the One-Click Import button on any template card. The plugin will automatically create the post CPT, configure all layout, height, and style options, and sideload demo images directly into your local WordPress Media Library.

Slides Manager & Fallbacks

Each slide item acts as a vertical card panel in the front-end layout.

Fallback Placeholder Rule: Under visual quality rules, empty containers are unacceptable. You must provide either a Background Image or a Title for each slide card. If a slide card is completely empty, it will fall back to a styled grey placeholder container to preserve the visual integrity of the CSS flex grid.

  • Click Add New Slide to create a new grid column.
  • Select Image: Launches the native WordPress Media Library to let you assign a background image.
  • Title (Static Bottom): Text that is constantly visible near the bottom of the column card.
  • Description: Brief text that appears as an overlay on hover.
  • Target Link URL: Makes the entire panel column clickable, redirecting the user to the specified URL when clicked.
  • Button Text & Button Link URL: Create a Call-To-Action button inside the hover slide-up panel.

Ordering Panels: You can easily reorder slides by clicking and dragging the dashicon menu handle at the top-left of each slide item. Expand or collapse all slides using the header buttons for a clearer screen view.

4. Grid Layout & Spacing Settings

Fine-tune column counts, container height rules, and border designs under the Grid Layout settings tab.

Panel 1
Panel 2
Panel 3
Panel 4
Setting Option Version Support Functionality & Parameters
Desktop Columns Both Defines how many columns/panels to display side-by-side on desktop viewports. Choose from 2 Columns to 6 Columns. Defaults to 4 Columns.
Grid Height Both Sets the vertical height of the slider container. Supports:
• CSS Units: e.g., 100vh, 600px, 50em.
• Aspect Ratios: e.g., 16/9, 16:9, 4:3. If an aspect ratio is entered, it automatically calculates the proportional height based on viewport width (e.g. 16:9 dynamically generates CSS aspect-ratio: 16/9), resetting to auto !important on mobile stack views to prevent squashing.
Mobile Behavior Both Selects how the columns adjust on mobile screens (viewport width under 768px):
• Adaptive Mobile Stack: Columns stack vertically, rendering at a fixed height of 300px each.
• Tap-to-Reveal Grid: Arranges items into a 2-column mobile grid where tapping a card flips open the description overlays.
• Constant 2-Column Grid: A compact layout display forcing a constant 2-column look on mobile.
• CSS Scroll Snap Carousel: Generates a touch-swipe-friendly horizontal slider carousel complete with navigation arrow markers.
Border Color Both Sets the color of the divider lines between panels. Uses the native WordPress Color Picker. Default is white (#ffffff).
Border Opacity Both Controls the transparency of the divider lines from 0.0 (fully transparent) to 1.0 (solid color). Defaults to 0.1.
Border Size Both The thickness of the border lines in pixels. Input 0 to hide lines entirely. Defaults to 1.

5. Transitions & Hover Indicator Settings

Customize swap effects, overlay opacity filters, visual pulsing indicators, autoplay cycles, and navigation controls in the Animations tab.

Setting Option Version Support Functionality & Parameters
Hover Transition Speed Both Adjusts the background swap and reveal animation durations in seconds. Accepts decimal values from 0.0 to 5.0. Defaults to 0.5.
Hover Transition Effect Both Choose the animation styling triggered when the background swap takes place:
• Standard Fade-in: Soft opacity crossfade.
• Zoom In / Zoom Out: Proportional scale-up/scale-down zooms.
• Slide Up / Down / Left / Right: Smooth directional slides.
Hover Indicator Both Adds a modern, pulsing glowing indicator dot on the panel cards:
• Disabled: No indicator dot.
• Always Visible: Displays the pulsing indicator constantly.
• Visible on Hover Only: The indicator dot fades and scales in only when that specific card panel is hovered.
Indicator Location Both Positioning alignment for the pulsing dot:
• Top Left / Top Right / Center of the card box.
• Next to Title: Places the pulsing indicator dot directly next to the static bottom title inline with a 20px spacer gap.
Indicator Color Both Color picker to adjust the inner dot color and outer pulsing glow ring. Outer rings fade using automated PHP-side HEX-to-RGB alpha conversion. Defaults to white (#ffffff).
Overlay Color Both Sets the color of the dark overlay gradient mask sitting behind the text content (ensures high contrast readability). Defaults to black (#000000).
Overlay Opacity Both Adjusts the opacity level of the background mask overlay from 0.0 to 1.0. Defaults to 0.3.
Autoplay Enabled Both Toggle to enable automatic looping through the slides. Autoplay automatically pauses on desktop hover or mobile touch-drag interactions to ensure smooth user controls, and resumes when the interaction ends.
Autoplay Delay Both Determines the speed interval (in milliseconds) between automated slide swaps. Default is 5000 (5 seconds).
Navigation Style Both Renders interactive controls over the slider:
• None: Standard hover swap only.
• Dots: Interactive circle bullet indicators at the bottom.
• Arrows: Directional next/previous arrow navigation.
• Both: Displays both dots and arrows. Dots and arrows remain fully synchronized with hovers, manual scrolls, and autoplay loops.
Smart Positioning Both Toggle to automatically calculate positioning offsets for content boxes and overlays, keeping alignments neat when visual navigation dots or arrows are active.

6. Typography & Glassmorphism Settings

Control font sizes, family overrides, content alignments, and glass card overlays inside the Typography tab.

Setting Option Version Support Functionality & Parameters
Font Family Both Applies custom typography styling. Choose from system font stacks or Google Web Fonts loaded dynamically in the header:
• System: Theme Default, System Sans-serif, System Serif.
• Google: Montserrat, Inter, Roboto, Open Sans, Playfair Display, Outfit, Poppins, Lora, Plus Jakarta Sans, Space Grotesk, Syne, Bebas Neue, Cinzel, Cormorant Garamond.
Text Position Both Determines the vertical alignment of the text card wrapper inside the panel: Bottom (Default), Center, or Top.
Static Title Color / Size Both Color picker and numerical input (in pixels) for the panel titles. Sizes scale down automatically on mobile screen sizes. Defaults: #ffffff, 22px.
Description Color / Size Both Color picker and numerical input (in pixels) for description text. Defaults: #dddddd, 14px.
Enable Glass Panel Style Both Toggle switch to display a blurred glass backdrop card (using CSS backdrop-filter: blur()) surrounding the text overlay areas.
Glass Panel BG Color / Opacity Both Sets the background color and transparency level specifically for the glassmorphic card bubble, independent of the main overlay mask. Defaults: #000000, 0.45.
Show Details on Hover Only Both If enabled, descriptions and CTA buttons start collapsed/hidden on load, sliding upwards smoothly only when a user hovers over the cell column.

7. Call-to-Action Button Settings

Customize the visual styling of buttons shown in slide details in the Panel & Buttons settings tab.

Setting Option Version Support Functionality & Parameters
Button Background Color Both Color of the button's background container in its idle state. Default is white (#ffffff).
Button Background Hover Color Both Color of the button's background container when hovered. Default is blue (#2563eb).
Button Text Color Both Color of the button's text label in its idle state. Default is dark grey (#333333).
Button Text Hover Color Both Color of the button's text label when hovered. Default is white (#ffffff).
Button Border Radius Both Defines button corner rounding in pixels. Enter 0 for sharp square buttons or 30 for pill-shaped buttons. Defaults to 4.

8. Backup & Maintenance

SplitView – Interactive Multi-Panel Showcase for WordPress includes custom backup tools, letting you migrate your sliders or perform clean database updates.

Exporting Configurations

To export your configuration:

  1. Open the slider post editing screen in WordPress.
  2. Find the Backup & Migration section in the sidebar.
  3. Click Export JSON. A structured .json file containing all slides, layouts, and style parameters will download to your computer.

Importing Configurations

To restore or migrate configurations:

  1. Create a new slider post or edit an existing one.
  2. Click the Import JSON button in the sidebar.
  3. Select the previously exported .json file from your machine.
  4. Confirm the overwrite. The page fields will update automatically. Click Update / Publish to save changes.

Clean Uninstall Mode

By default, WordPress plugins leave metadata entries inside database option tables after deletion. SplitView – Interactive Multi-Panel Showcase for WordPress includes a database cleanup option:

  • Enable the **Clean Uninstall (Delete Data)** switch inside the Panel & Buttons tab.
  • When enabled, deleting the plugin through the **Plugins** dashboard page permanently wipes all CPT tables, metabox settings, and related database keys, keeping your database clean.

9. Shortcode Usage & Page Builders

Place your sliders on pages, posts, or custom widget areas using clean shortcode wrappers.

Shortcode Syntax:

To display your slider, pass the slider post ID parameter in the shortcode:

(Find the ID value inside your browser URL bar or the Slider Listing Table.)

Page Builder Integrations

SplitView – Interactive Multi-Panel Showcase for WordPress is compatible with major builders, including Elementor, Divi, and WPBakery.

  1. Edit your page using Elementor.
  2. Search for the Shortcode widget in the left elements panel.
  3. Drag it into your page section.
  4. Paste the shortcode (e.g. [splitview_slider id="YOUR_ID"]).
  5. Click Apply / Update. The grid renders in the frontend.
  1. Edit your page using the Divi Visual Builder.
  2. Add a new Row, and search for the Code module (or a standard Text module).
  3. Paste your shortcode inside the code textarea.
  4. Save the module and publish the page updates.
  1. Open your page editor in backend or frontend WPBakery mode.
  2. Click Add Element and select Text Block or the dedicated Shortcode element.
  3. Paste your shortcode directly inside the editor area.
  4. Save changes and update the page.
  1. Click the + icon to insert a new block in Gutenberg.
  2. Search for Shortcode and insert it.
  3. Paste your shortcode and save the page.

10. Troubleshooting & FAQs

Review solutions to common setup issues:

By default, panels use object-fit: cover to fill the column boxes without stretching. If you notice unwanted cropping, use a proportional Aspect Ratio (e.g. 16/9, 4/3, or 1:1) inside the Grid Height setting input instead of a fixed pixel height (like 600px). This forces the columns to scale their height dynamically relative to their width, preserving your image composition.

Setting the height to 100vh makes the slider match the height of the browser window. If your theme has a sticky header navigation bar (e.g., 80px tall), the bottom of the slider will be pushed down by that amount, causing scrollbars to appear.
Solution: Enter a CSS calculation formula in the Grid Height field, such as:
calc(100vh - 80px) (replace 80px with your header height) to fit the grid perfectly on the screen.

If you uninstalled the plugin while the Clean Uninstall (Delete Data) option was enabled, all database tables and settings were permanently erased.
Recommendation: Always click the Export JSON button inside the sidebar to save a local backup of your configurations before deleting or updating your plugins.

Some premium page builders inject padding margins into columns or force responsive stacking overlays. The plugin's styling includes reset classes (e.g. resetting mobile snapped aspects to auto !important) to maintain compatibility. If conflicts occur, inspect the parent container margins or reach out to support for quick custom CSS snippet overrides.