How to install and configure Vivid Slider for WordPress

Table of Contents

Installation

You can install the Vivid Slider plugin in 2 ways:

1. Natively (most common)

  • log into your WordPress Dashboard
  • select Plugins -> Add New -> Upload plugin -> Choose file and select vivid-slider-x.x.x.zip
  • click Install Now
  • click Activate plugin

2. Manually, using an (S)FTP client

  • unzip vivid-slider-x.x.x.zip
  • browse to your wp-content/plugins directory
  • upload the vivid-slider folder
  • log into your WordPress Dashboard
  • click Activate plugin

Create Your First Slider

Once you have Vivid Slider activated you can start creating your slider. To create your first slider you need to go to the Vivid Slider‘s admin page, and select “NEW SLIDER”.

You can start adding images (JPG/PNG), or videos (MP4) to your slider by selecting “IMAGE/VIDEO”.

Next, you can edit the slider’s options like autoplay, navigation, pagination, transitions, animations, fonts, colours, and so on.

Slider Options

General Settings

The General Settings section provides essential configurations for the overall behavior and appearance of the slider. Here are the key options available:

  • Slider Name [String]: This is the name of your slider. It helps you identify the specific slider when managing multiple sliders.
  • Initial Slide [Number]: Set the initial slide to be displayed when the page loads. This option allows you to start the slider from any specific slide rather than the first one.
  • Slider Shadow [effect1 | effect2 | effect3 | effect4 | effect5 | effect6 | off]: Choose from six pre-built shadow effects to enhance the visual depth of your slider. Selecting “off” will remove the shadow effect.
  • Grab Cursor [On | Off]: Enable or disable the grab cursor. When enabled, the cursor will change to a grab icon when hovering over the slides, indicating that the slides can be dragged.
  • Stop on Last Slide [On | Off]: Enable this option to stop the slider when it reaches the last slide. If disabled, the slider will loop back to the first slide.
  • Animation: Choose from various transition effects that control how one slide moves to the next (e.g., fade, slide, zoom).
  • Start Time (ms): Determines the delay before the slider begins after the page loads, measured in milliseconds.
  • Slide Type: Select the type of slide content, such as text-based, image-based, or video-based, to meet different media needs.
  • Auto Play [On | Off]: Toggle this option to automatically cycle through slides without user interaction.
  • Loop [On | Off]: When enabled, the slider will loop continuously from the last slide back to the first.
  • Pause on Hover [On | Off]: Pauses the slider when the user hovers over it, providing better control and user interaction.
  • Slide Duration (ms): Set the amount of time each slide is displayed before transitioning to the next, measured in milliseconds.
  • Slide Background: Select a background color or image that will be displayed behind the slides in the slider.

Size Settings

The Size Settings section is dedicated to configuring the dimensions and layout of the slider, ensuring it displays correctly on different devices:

  • Responsive Mode [On | Off]: Automatically resizes the slider to fit its parent container, overriding the fixed size settings below.
  • Responsive Ratio [Number]: Set the responsive ratio as: slider width/slider height. Leave this blank to use the default value.
  • Ratio Mobile [Number]: Set the responsive ratio specifically for mobile devices, using the formula: slider width/slider height.
  • Ratio Tablet [Number]: Set the responsive ratio specifically for tablet devices, using the formula: slider width/slider height.
  • Mobile Size [Number]: Set the maximum width for mobile devices. The default value is 768px.
  • Tablet Size [Number]: Set the maximum width for tablet devices. The default value is 1024px.
  • Mobile Height [Number]: Set the height of the slider for mobile devices, measured in pixels.
  • Tablet Height [Number]: Set the height of the slider for tablet devices, measured in pixels.
  • Layer Width [Number]: Define the layer width on desktop devices in pixels. This is a global option but can be overridden in individual slides.
  • Layer Height [Number]: Define the layer height on desktop devices in pixels. This is a global option but can be overridden in individual slides.
  • Layer Width Mobile [Number]: Define the layer width on mobile devices in pixels. This is a global option but can be overridden in individual slides.
  • Layer Height Mobile [Number]: Define the layer height on mobile devices in pixels. This is a global option but can be overridden in individual slides.
  • Layer Width Tablet [Number]: Define the layer width on tablet devices in pixels. This is a global option but can be overridden in individual slides.
  • Layer Height Tablet [Number]: Define the layer height on tablet devices in pixels. This is a global option but can be overridden in individual slides.
  • Fullscreen Mode [On | Off]: Enable this mode to have the slider cover the entire screen by both width and height, overriding the ratio options above.
  • Fixed Mode: Use this setting to specify a fixed size for the slider if “Responsive Mode” is turned off. Input the desired width and height for the slider.
  • Height (for Slider width under 1800px) [Number]: Set the height for sliders when the width is less than 1800px.
  • Height (for Slider width under 1200px) [Number]: Set the height for sliders when the width is less than 1200px.
  • Height (for Slider width under 900px) [Number]: Set the height for sliders when the width is less than 900px.
  • Height (for Slider width under 600px) [Number]: Set the height for sliders when the width is less than 600px.

Autoplay Settings

The Autoplay Settings section controls how the slider behaves when autoplay is enabled:

  • Enable [On | Off]: Toggle autoplay to automatically start the slider when the webpage loads.
  • Delay Between Transitions [Number – ms]: Set the delay time in milliseconds between slide transitions during autoplay.
  • Disable on User Interaction [On | Off]: When enabled, autoplay will stop if the user interacts with the slider.
  • Reverse Direction [On | Off]: Enable this option to make the slide transitions occur in the reverse direction.

The Navigation Settings section provides options to control how users navigate through the slider:

  • Arrows Enable [On | Off]: Toggle to show or hide navigation arrows that users can click to move between slides.
  • Style [effect1 | effect2 | effect3 | effect4 | effect5 | effect6 | effect7 | effect8 | effect9 | effect10]: Choose from 10 different pre-built styles for the navigation arrows.
  • Keyboard Enable [On | Off]: Enable or disable keyboard navigation using the left and right arrow keys.

Pagination Settings

The Pagination Settings section controls the visibility and style of pagination indicators:

  • Pagination [On | Off]: Enable or disable pagination, which indicates the current slide number and allows for quick navigation.
  • Style [effect1 | effect2 | effect3 | effect4 | effect5 | effect6]: Choose from six different styles for pagination indicators.
  • Clickable [On | Off]: Allow or disallow users to interact with the pagination indicators. When enabled, clicking on a pagination dot will move the slider to the corresponding slide.
  • Dynamic [On | Off]: Enable dynamic pagination to only show a subset of pagination dots, which is useful when there are many slides.

Hash Navigation

The Hash Navigation section configures URL-based navigation for the slider:

  • Enable [On | Off]: Enable this option to allow navigation to specific slides using URL hashes. For example, appending #slide1 to the URL will take the user to the second slide.

Loading Settings

The Loading Settings section controls the behavior and appearance of the slider while it is loading:

  • Fade In/Out [On | Off]: Set the preloader to slowly fade in and out as the slider loads.
  • Background Color: Choose the background color for the preloader, which appears while the slider content is loading.

The Lightbox Settings section manages the display of images when clicked:

  • Enable Lightbox: Toggle to allow images within the slider to be opened in a lightbox overlay.
  • Type: Choose the type of lightbox display, such as image, gallery, or video.
  • Background: Set the background color or transparency for the lightbox overlay.
  • Caption: Enable or disable captions for images displayed in the lightbox.
  • Close on Click: Specify whether the lightbox should close when the user clicks outside the image.

Thumbnails Settings

The Thumbnails Settings section configures how thumbnails are displayed for each slide:

  • Enable Thumbnails: Toggle this to show or hide thumbnails below or beside the slider.
  • Size: Adjust the size of the thumbnails.
  • Spacing: Set the amount of space between each thumbnail.
  • Border: Configure the border around thumbnails, including color and width.
  • Hover Style: Choose a hover effect for the thumbnails to highlight them when hovered over by the user.

Preview Slider

During your editing, you can press “PREVIEW” at any time to see your changes live in action. Pressing the “PREVIEW” button will also automatically save your slider options.

Add More Slides

To add more slides, simply press the “IMAGE/VIDEO” button again.

Delete Slide

To delete a slide, press the delete button inside the specific slide.

Delete All Slides

To delete all slides, press the delete button in the right-side menu.

Save Slider

When you are satisfied with the changes made, press “SAVE” to save your slider.

Slide Options

Each slide can have its own options. To open slide options, press “EDIT” or the settings icon.

Slide Options – General

Click the General tab to open general slide settings (transition effects, duration, etc.).

  • Transition Duration [ms]: The duration between the current and next slide.
  • Transition Effect [Default | Roll | Stretch | Warp | Zoom | Powerzoom | Flash | Fade | Twirl]: Select a transition effect from one of the pre-built options or leave it as Default.
  • Transition Direction [Left | Right | Top | Bottom | Top left | Top right | Bottom left | Bottom right | Random]: Choose the direction for the transition effect.
  • Transition Brightness [Default | Flash | Fade]: Set the brightness between the current and next slide.
  • Transition Distance [Default | Long | Short]: Define the distance between the current and next slide.
  • Transition Easing [Default | Slow | Elastic]: Set the easing style for the transition between the current and next slide.
  • Edit [Select from WordPress Media Library]: Select any image or video from the media library. Supported formats include JPG, PNG, and MP4.

Slide Options – Layers

Click the Layers tab to open layer settings. Here you can add any text, button, or image to your slide.

Add Text

  • Content: Here you can write any custom text.
  • Text Color: Change the text color.
  • Font Size [px]: Change the font size in pixels.
  • Font Family [Google Font]: Select any font from Google Fonts. Examples include Montserrat, Gugi, Pacifico, etc.
  • Padding [px]: Set padding in the order: top-right-bottom-left.
  • Background Color [Hexadecimal or RGB or RGBA]: Choose any color from the color picker.
    • Examples:
      • Hexadecimal color: #eaeaea
      • RGB color: rgb(0,0,0)
      • RGBA color: rgba(0,0,0,0.5) – Here you can also set opacity from 0-1 (0.5 is 50% transparent).
  • Position X [Left | Center | Right]: Choose the text’s X coordinate.
  • Position Y [Top | Center | Bottom]: Choose the text’s Y coordinate.
  • Offset X [px]: Set the text’s X coordinate offset.
  • Offset Y [px]: Set the text’s Y coordinate offset.
  • Custom CSS: Add your own custom CSS properties to the text.

Start Animation

  • Animation Name: Choose one of the pre-built text animations. Examples can be found at Animate.css.
  • Speed [ms]: Set the speed of the incoming text animation in milliseconds (when loading the current slide).
  • Delay [ms]: Set the delay of the incoming text animation in milliseconds (when loading the current slide).

End Animation

  • Animation Name: Choose one of the pre-built text animations. Examples can be found at Animate.css.
  • Speed [ms]: Set the speed of the outgoing text animation in milliseconds (when moving to the next slide).
  • Delay [ms]: Set the delay of the outgoing text animation in milliseconds (when moving to the next slide).

Add Button

  • URL: Redirect to a custom URL on button click (or leave blank for no click action).
  • Content: Here you can write any custom text inside the button.
  • Text Color: Change the button text color.
  • Font Size [px]: Change the button font size in pixels.
  • Font Family [Google Font]: Select any font from Google Fonts. Examples include Montserrat, Gugi, Pacifico, etc.
  • Padding [px]: Set padding in the order: top-right-bottom-left.
  • Background Color [Hexadecimal or RGB or RGBA]: Choose any color from the color picker.
    • Examples:
      • Hexadecimal color: #eaeaea
      • RGB color: rgb(0,0,0)
      • RGBA color: rgba(0,0,0,0.5) – Here you can also set opacity from 0-1 (0.5 is 50% transparent).
  • Position X [Left | Center | Right]: Choose the button’s X coordinate.
  • Position Y [Top | Center | Bottom]: Choose the button’s Y coordinate.
  • Offset X [px]: Set the button’s X coordinate offset.
  • Offset Y [px]: Set the button’s Y coordinate offset.
  • Custom CSS: Add your own custom CSS properties to the button.

Start Animation

  • Animation Name: Choose one of the pre-built button animations. Examples can be found at Animate.css.
  • Speed [ms]: Set the speed of the incoming button animation in milliseconds (when loading the current slide).
  • Delay [ms]: Set the delay of the incoming button animation in milliseconds (when loading the current slide).

End Animation

  • Animation Name: Choose one of the pre-built button animations. Examples can be found at Animate.css.
  • Speed [ms]: Set the speed of the outgoing button animation in milliseconds (when moving to the next slide).
  • Delay [ms]: Set the delay of the outgoing button animation in milliseconds (when moving to the next slide).

Add Image

  • Position X [Left | Center | Right]: Choose the image’s X coordinate.
  • Position Y [Top | Center | Bottom]: Choose the image’s Y coordinate.
  • Offset X [px]: Set the image’s X coordinate offset.
  • Offset Y [px]: Set the image’s Y coordinate offset.
  • Custom CSS: Add your own custom CSS properties to the image.

Start Animation

  • Animation Name: Choose one of the pre-built image animations. Examples can be found at Animate.css.
  • Speed [ms]: Set the speed of the incoming image animation in milliseconds (when loading the current slide).
  • Delay [ms]: Set the delay of the incoming image animation in milliseconds (when loading the current slide).

End Animation

  • Animation Name: Choose one of the pre-built image animations. Examples can be found at Animate.css.
  • Speed [ms]: Set the speed of the outgoing image animation in milliseconds (when moving to the next slide).
  • Delay [ms]: Set the delay of the outgoing image animation in milliseconds (when moving to the next slide).

Publish Slider

Once your slider is ready and saved, you can publish it by copying the shortcode into a Page or Post. Click the “COPY” button, go to the page or post, and paste the shortcode. The slider will appear wherever the shortcode is placed.