Mega Slider Plugin Documentation

1. Getting Started

After installing and activating the Mega Slider Plugin, you’ll find a new Mega Slider menu in your WordPress dashboard. From here, you can:

• Create new sliders.
• Access the settings menu to import/export sliders.
• Configure global settings.

To create your first slider, go to Mega Slider > Add New and follow the prompts to set up and customize your slider.

2. Using the Settings Menu

The Settings Menu in Mega Slider allows you to manage and configure various aspects of your sliders, including exporting, importing, and accessing shortcodes for easy embedding.

How to Access

Navigate to Mega Slider > Slider Settings in your WordPress dashboard to open the settings menu.

Tabs Overview

The settings menu consists of several tabs for specific functions:

• Export Sliders: Select and download JSON files of existing sliders to back up or transfer to another site.
• Manual Import Sliders: Upload a JSON file to add or restore sliders.
• Import Demo Sliders: View and import pre-designed demo sliders.
• Shortcodes: Learn how to use shortcodes to display sliders on pages and posts.

Settings Fields and Their Functions

Export Sliders

• Checkbox for Each Slider: Select the sliders you want to export by checking the box next to each slider title.
• Preview Thumbnail: A preview image appears for each selected slider to give you a visual reference.
• Export Button: Click "Export Sliders" to download a JSON file of the selected sliders.

Manual Import Sliders

• File Upload: Select a JSON file from your computer that contains custom or backed-up sliders.
• Import Button: After selecting the file, click "Import Sliders" to add these sliders to your site.

Import Demo Sliders

• Demo Sliders List: Displays available demo sliders with a preview image, title, and "Import" button.
• Individual Demo Import Button: Click "Import" on a demo slider to add it to your slider collection.

Shortcodes

Information on using shortcodes to display sliders, complete with examples for slider IDs and titles.

3. Creating and Editing Sliders

The following steps cover how to create and edit sliders in the Mega Slider Plugin.

Adding a New Slider

1. Go to Mega Slider in your WordPress dashboard, then click Add New.
2. Edit Slider Content: Use the block editor to add, arrange, and customize text, images, or videos for each slide.
3. Customize Button Options: Configure button text, URL, and styles such as background color, font color, and border settings.
4. Background Options: Set a background color, upload an image, or add a video (YouTube, Vimeo, or custom URL).
5. Animation Settings: Apply entry and exit animations with delays for the subhead, heading, and content text.
6. Overlay Settings: Add an overlay color and opacity on top of background images or videos.

Editing an Existing Slider

1. Go to Mega Slider in your dashboard and click the slider you want to edit.
2. Make necessary adjustments to the text, images, videos, or layout settings.
3. Click Update to save your changes.

4. Slider Settings and Customization

Each slider offers extensive customization options, allowing you to control content, layout, and design. Below is a detailed breakdown of each setting.

1. Slide Content Settings

Text Fields: Each slide supports three main text elements:

• Subhead: Smaller text displayed above the main heading, often used as a subtitle or introductory label.
• Heading: The central, most prominent text of the slide.
• Content: An additional text field for a more detailed description.

Text Customization Options: Each text element (subhead, heading, and content) has individual customization options:

• Font Family: Choose a font from Google Fonts for a distinct style.
• Font Size: Set the font size (in pixels) to control prominence.
• Font Color: Choose a custom color for each text element.
• Font Weight: Adjust the thickness of the text (e.g., light, regular, bold).
• Animation: Choose animations like fade-in, bounce, or zoom to create dynamic text effects.
• Animation Delay: Set a delay (in seconds) for the animation to start after the slide appears.

2. Button Settings

Each slide can include a clickable button that directs to any URL. The button settings include:

• Button Text: The text displayed on the button.
• Button URL: The destination link the button will lead to when clicked.
• Button Background Color: Customize the button background color.
• Button Font Color: Set the color of the button text.
• Button Border Radius: Adjust the roundness of the button’s corners.
• Button Border Color: Define the color of the button border.
• Button Border Size: Set the thickness of the border in pixels.
• Button Hover Color: Change the button background color when hovered over.

3. Background Settings

Customize each slide's background to include images, colors, or videos.

Background Options

• Background Color: Set a solid color for the slide’s background.
• Background Image: Upload an image as the background.
• Background Size: Scale the image (cover, contain, or auto).
• Background Position: Adjust the positioning (e.g., center, top-left).
• Background Repeat: Choose whether the image repeats or not.

Background Video Options

• Custom Video URL: Link to a self-hosted video.
• YouTube URL: Embed a YouTube video by entering its URL.
• Vimeo URL: Embed a Vimeo video using its URL.
• Video Settings: Background videos are muted and looped by default for smooth autoplay.

Overlay Options

• Overlay Color: Adds a color overlay on top of the background image or video for visual consistency.
• Overlay Opacity: Adjust the transparency of the overlay.

4. Animation Settings

Enhance slide engagement by applying animations to each text element.

• Animation Type: Select from different animation styles (e.g., fade, bounce, slide, zoom).
• Animation Delay: Set a delay (in seconds) to control the timing and order of animations.

5. Layout and Positioning

Control the layout of each slide and its elements.

• Content Alignment: Set alignment (left, center, right) for the text and button elements.
• Layout Type: Options include:
  • Full Width: Expands slide content to fill the container width.
  • Two Column: Creates a side-by-side layout with two columns for text and image/video.
  • Switch Column Layout: Toggle the position of the two columns.
• Left Column Image: Upload an image specifically for the left column (if using two columns).
• Left Column Image Width & Height: Set dimensions for the left column image.
• Left Column Image Border Radius: Adjust border radius to round the image corners.

Spacing Options

• Padding: Define padding (in pixels) around slide content for each side (top, right, bottom, left).
• Margin: Set spacing around the slide container.
• Border Radius: Round each corner individually (top-left, top-right, bottom-right, bottom-left).

6. Global Slider Settings

These settings apply globally to all slides within a single slider:

• Show Arrows: Enable or disable navigation arrows to move between slides.
• Show Dots: Enable or disable pagination dots below the slider.
• Minimum Height: Set the minimum height (in pixels) for the slider container.
• Pagination Dots Alignment: Align pagination dots to the left, center, or right.
• Layout Style: Choose between a Boxed or Full Width layout for the entire slider.

7. Social Media Icons

Add social media icons to link to your profiles within each slider.

• Social Icon: Choose icons from options like Facebook, Twitter, Instagram, etc.
• Icon URL: Add a URL link for each social media icon.
• Icon Color: Set the default color for the icons.
• Icon Hover Color: Define the color for icons when hovered.
• Icon Size: Adjust icon size (in pixels).
• Icon Position: Position icons vertically (left or right) or in a bottom corner.

5. Shortcodes

Display a Specific Slider

To display a specific slider, use the [mega_slider_display] shortcode with either the slider’s ID or title.

Attributes:

• slider_id: (Optional) ID of the slider to display.
• slider_title: (Optional) Title of the slider to display.

Examples:

Tip: Use either slider_id or slider_title, but not both simultaneously.

List All Sliders

To list all available sliders with their respective shortcodes, use [mega_slider_list]. This displays each slider’s title and a shortcode for embedding.

Usage:

Add [mega_slider_list] to a page or post to display all sliders with their shortcodes.

6. FAQs and Troubleshooting

How do I add a slider to a page or post?

Add the [mega_slider_display] shortcode with the slider’s ID or title in the editor.

How do I import a demo slider?

Go to Mega Slider > Slider Settings > Import Demo Sliders and click "Import" on any demo slider.

What if a slider doesn’t display?

Ensure the slider is published, and verify that the shortcode matches an existing slider.

How do I back up my sliders?

Go to Mega Slider > Slider Settings > Export Sliders, select sliders to export, and click "Export Sliders."

This comprehensive guide should help you maximize the potential of the Mega Slider Plugin for WordPress. Let me know if you need any further assistance or specific details!