Digishift Slider: The Ultimate Guide

The Digishift Slider is a flexible, powerful slider system built directly into your theme. You can create stunning hero sections, product carousels, and promotional sliders with full control over every design and functional aspect.

Creating and Managing Slides #

1. Navigate to your WordPress Dashboard.
2. Find the Digishift Slider menu item in the sidebar.
3. To create a new slider, click Add New Slide.
4. Give your slider a descriptive title (e.g., Hero Slide 1, Hero Slide 2).
5. After that, publish the slide.
6. Click Edit with Elementor.
7. Inside Elementor, create one slide section as you want.
8. You can create as many slides as needed, but make sure the height is consistent across all slides. Otherwise, the slider may look uneven.

Assign Slides to Category #

1. After creating multiple slides, you may want to group certain slides together into one slide.
2. To do this, you need to assign a category.
3. Go to Slider Categories from the menu.
4. Enter your desired category name in the input field and press Enter or click Add Category. This will create a new slider category.
5. Now, return to the Digishift Slides list.
6. For each slide you want in the slider, assign it to the category you created.
7. Each category will behave as a complete slider, and each slide inside that category will act as a slide section.

Digishift Slider “Elementor Widget” #

The Digishift Slider (Elementor Widget) lets you insert fully customizable sliders into any Elementor section. Instead of relying on third-party plugins, this widget is built directly into the Digishift theme, giving you complete control over slider design and functionality.

1. Edit any page with Elementor.
2. In the left widget panel, search for Digishift Slider.
3. Drag and drop the widget into your desired section or column.
4. From the widget settings, select your previously created slider from the dropdown list.
5. Update the page to save changes.

Content #

Filter Slides #

This section lets you control which slides are displayed by filtering based on categories.

• Category: Use the dropdown to select a specific category of slides. Choosing a category will display only the slides assigned to that category.
  • All Categories: Displays all available slides regardless of category.
  • Specific Category: Limits the display to only slides within that category.

This feature is useful if you have different groups of slides (e.g., product categories, events, or promotions) and want to show only the relevant set on a particular page.

Slides #

This section allows you to manually select the slides you want to display.

• Choose Slides: Click the + icon to add slides from the available list.
• Slide Order: Selected slides appear in the order chosen. You can rearrange them to set the display sequence.
• Mix & Match: You can select multiple slides across categories if needed, giving full control over which slides are shown.

This option is best when you want to hand-pick specific slides for a section rather than relying on category filters.

Settings #

This section controls the functionality of the slider. Access it from the main slider editing screen.

• Autoplay: Toggle to enable or disable automatic slide advancement.
• Autoplay Delay (ms): The delay between slide transitions in milliseconds (e.g., 3000 = 3 seconds).
• Transition Speed (ms): How long the slide animation itself takes (e.g., 600 = 0.6 seconds).
• Loop Slides: Allows the slider to seamlessly loop from the last slide back to the first.
• Slides Per View: Set how many slides are visible at once (set to 1 for a standard hero slider).
• Space Between (px): The gap between slides if multiple are visible.
• Show Navigation Arrows: Toggle the visibility of the Next/Prev arrows.
• Pagination Type: Choose between styles like dots (“bullets”), fraction indicator (e.g., 1/3), or progress bar.
• Transition Effect: Choose the animation type: Slide, Fade, Cube, etc.

Style #

Each slide is built by configuring the following options:

Styling “Navigation Arrows” #

Customize the appearance of the next/previous buttons.

• Normal / Hover: Set colors for both the default and mouse-hover states.
• Arrow Color: Color of the arrow icon itself.
• Background Color: Color of the button’s background.
• Arrow Size: Controls the size of the arrow icon (in pixels).
• Button Box Size: Controls the overall size of the circular/square button (in pixels).
• Border Radius: Makes the button circular (50%) or square (0px).
• Box Shadow: Adds a shadow effect to the button for depth.
• Vertical Position: Moves the arrows up or down on the slider (e.g., 50% for the center).
• Horizontal Offset: Moves the arrows closer to or farther from the edge of the slider.

Styling “Pagination” (Dots/Progress Bar) #

Customize the slider navigation dots or progress bar.

• Vertical / Horizontal Position: Controls where the pagination is placed (e.g., bottom: 10px).
• Pagination Color: The color of the inactive pagination dots/bar.
• Active / Fill Color: The color of the active dot or the progress bar fill.
• Bullet Size: The diameter of the pagination dots (in pixels).
• Bullet Weight: Can control the border-width or size of inactive dots.
• Bullet Border Radius: Allows for square or rounded bullets.
• Progress Bar Height: The vertical height of the progress bar (if that pagination type is selected).

Using the Slider on Your Site #

Once your slider is created and published, you can display it anywhere on your site in two primary ways:

1. Using a Theme-Specific Block/Widget (Recommended):
   • When editing a template or page with Elementor, look for the “Digishift Slider” widget.
   • Simply select the slider you want to display from a dropdown list.

Tips and Best Practices #

• Image Sizes: For optimal performance and quality, use images that are the same size as your slider’s container to prevent loading delays and layout shifts.
• Mobile View: Always check how your slider looks and functions on mobile devices. Text size and button positioning might need adjustment.
• Video Fallback: Always set a fallback image for video backgrounds for the best mobile compatibility and loading experience.
• Performance: While impressive, sliders with multiple large images or videos can slow down your site. Optimize all media before uploading.