Getting Started with VisioLayer

Welcome to the VisioLayer documentation. This guide will help you install, configure, and create your first stunning visual slider in minutes.

What is VisioLayer?

VisioLayer is a high-performance WordPress slider plugin designed for visual impact and ease of use. It allows you to create responsive, layer-based sliders with advanced animations, video backgrounds, and interactive elements without writing any code.

Free vs Pro

VisioLayer comes in two versions tailored to different needs:

Feature Free Version Pro Version
Basic Sliders ✅ ✅
Responsive Design ✅ ✅
Layer Animations Basic Advanced
Templates 5 Starter Templates 100+ Premium Templates
Video Backgrounds ❌ YouTube, Vimeo, HTML5
Dynamic Sources ❌ WooCommerce, Posts, Instagram
Support Community Forum Priority Email Support

System Requirements

To ensure VisioLayer runs smoothly, your environment should meet the following minimum requirements:

  • WordPress Version: 6.0 or higher
  • PHP Version: 8.0 or higher
  • Database: MySQL 5.7+ or MariaDB 10.3+
  • Memory Limit: 256MB (512MB recommended for complex sliders)
  • Browsers: Modern browsers (Chrome, Firefox, Safari, Edge)

Installation

Free Version (from WordPress Repository)

  1. Log in to your WordPress Dashboard.
  2. Navigate to Plugins > Add New.
  3. Search for "VisioLayer".
  4. Click Install Now and then Activate.

Pro Version (Manual Installation)

  1. Purchase and download the visiolayer-pro.zip file from your account dashboard.
  2. Go to Plugins > Add New.
  3. Click Upload Plugin at the top of the screen.
  4. Choose the downloaded .zip file and click Install Now.
  5. Click Activate.
  6. Go to VisioLayer > License to enter your license key for updates.

Creating Your First Slider

  1. Navigate to the VisioLayer tab in your WordPress admin menu.
  2. Click the "New Slider" button.
  3. Choose a Source: Select "Blank Slider" to start from scratch or "Import Template" to use a pre-made design.
  4. Slider Settings: Give your slider a alias (e.g., homepage-hero) and set your desired width and height (e.g., 1920px x 800px).
  5. Editor Interface:
    • Slide List: Manage your slides on the left.
    • Canvas: Drag and drop elements (Text, Images, Buttons) onto the center canvas.
    • Timeline: Control animation timing at the bottom.
  6. Click Save in the top right corner.

Embedding Your Slider

Once your slider is ready, you can add it to any page or post.

Method 1: Gutenberg Block (Recommended)

  1. Edit your page or post.
  2. Click the + (Add Block) button.
  3. Search for VisioLayer and select the block.
  4. Select your slider from the dropdown menu.

Method 2: Shortcode

  1. Go to the VisioLayer main dashboard.
  2. Copy the shortcode for your slider, e.g., [visiolayer alias="homepage-hero"].
  3. Paste this code into any Shortcode block or classic editor content area.

Method 3: PHP (For Theme Developers)

Add the following code to your theme's template file (e.g., header.php):

<?php echo do_shortcode('[visiolayer alias="homepage-hero"]'); ?>

Common Beginner Mistakes

::: warning Avoid these common pitfalls to ensure the best performance: :::

  • Using Huge Images: Do not upload raw 5MB+ images. Optimize and compress your images (WebP format recommended) before uploading. Ideally, keep images under 200KB.
  • Ignoring Mobile View: Building a slider on desktop doesn't guarantee it looks good on phone. Use the Device Switcher in the editor to tweak font sizes and layout for mobile screens.
  • Too Many Layers: Adding dozens of heavy animations on a single slide can slow down the page. Keep it clean and impactful.
  • Missing Alt Text: Always add "Alt Text" to your image layers for SEO and accessibility.
Back to Overview