Image Box Slider

Before setting up the Image Box Slider Widget, ensure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Image Box Slider Widget—completely free! You can also filter between free and pro widgets for easier access.

Introduction

The Image Box Slider Widget displays multiple image boxes in a smooth slider, ideal for showcasing features or visual content.

Key Use Cases for the Image Box Slider Widget in Elementor:

• Showcase multiple image boxes in a sleek, scrollable slider layout.
• Enhance visual storytelling with images, titles, and descriptions in a compact format.
• Customize styling and animation to match your website’s design and improve user engagement.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Image Box Slider Widget?

1. Navigate to Animation Addons → Elements in your WordPress dashboard.
2. Locate the Image Box Slider widget in the list.
3. Toggle the switch to enable the widget.
4. The Image Box Slider Widget is now ready to use in your Elementor editor.

How to Add Image Box Slider Widget in Elementor

• Open the page where you want to add the Image Box Slider Widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Image Box Slider Widget”.
• Drag and drop the widget into your desired section.
• The Image Box Slider Widget is now ready for customization.

How to Configure Image Box Slider Widget

Enable the widget, create a new page, set a title, choose the Elementor Full Width template, and publish the page.

• Adjust page settings as needed.
• In the Elementor panel, search for “Image Box Slider Widget.”
• Drag and drop the widget into your desired section.
• The slider will display image boxes automatically. You can then customize the content, layout, navigation, and styling to match your design preferences.

Configuring Archive Image Box Slider Widget  : A Step-by-Step Guide

Once the Image Box Slider Widget is added to your page, you can configure its settings under different tabs: Content, Style and Advanced.

Content Settings

In the Image Box Slider Widget’s content section, You will get two options like layout and slider option.

Layout

1. Layout Styles (Five Different Styles)

The Image Box Slider offers five layout styles for flexible and dynamic presentation of images and text.

• Style 1: A basic image box slider with an image, title, subtitle, description, and link.
• Style 2: Features an image with a more prominent title and description with a link.
• Style 3: Focuses on image-centric presentation with minimal text.
• Style 4: Includes an image and an icon next to the text elements for added emphasis.
• Style 5: Allows for a more compact design where elements are stacked for better readability on mobile devices.

Item 1: Configuration Options: In Item 1, users can customize the following settings:

• Image Setup: Upload and position an image to be displayed in the slider.
• Title: Set a title for the item. The title can be customized with an HTML tag (e.g., <h1>, <h2>, etc.) to define its importance.
• Subtitle: A secondary title or description that provides additional context.
  • Subtitle Position: You can control whether the subtitle appears above, below, or beside the image.
• Description: A brief description that provides more details about the image.
• Link: Add a clickable link to each item in the slider that directs users to more information or a different page.
• Each layout is fully responsive and can be adjusted for various screen sizes to ensure optimal display across all devices.

2. Image Resolution (Seven Different Styles)

The Image Box Slider widget supports seven different image resolution styles. These options enable you to adjust the image quality based on the visual needs and load time requirements of your website:

• Resolution Options:
  
  1. Low resolution
  2. Medium-low resolution
  3. Medium resolution
  4. High resolution
  5. Very high resolution
  6. Ultra-high resolution &
  7. Custom resolution (user-defined)

These options ensure that images load quickly without compromising too much on quality, thus improving both the user experience and SEO performance.

3. Direction

The direction setting controls the flow of the slider. You can choose from:

• Horizontal: The slider moves left to right or right to left.
• Vertical: The slider moves from top to bottom or bottom to top.

The direction setting allows for the creation of dynamic visual effects tailored to the website’s design and user interaction goals.

4. Gap

This option controls the space between the image boxes in the slider. You can set the gap to:

• Small
  Medium
• Large

Adjusting the gap helps maintain a clean and balanced layout, enhancing the visual flow and user engagement.

5. Link Type

The Link Type setting defines how the link behaves when clicked:

• External URL: Opens an external website or page in a new tab.
• Internal Link: Links to another page or section within the same website.
• No Link: The item does not have a clickable link, providing a purely visual effect.

This flexibility allows users to choose whether they want their image box slider to drive traffic externally or simply enhance user interaction within the site.

6. Alignment

This option allows for precise control over how the text and images are aligned within each image box:

• Left Alignment: Text and elements are aligned to the left side of the box.
• Center Alignment: Text and elements are centered within the box.
• Right Alignment: Text and elements are aligned to the right side of the box.

Alignment ensures that content is placed in the desired manner, creating a polished and professional look.

7. Icon

The Icon option lets you add pre-designed or custom icons to enhance the design and highlight features in the slider.

Slider Option

Below is a detailed explanation of each option, covering how they look, function, and the effects of changing their settings-

1. Sliders to Show

This setting defines how many image boxes are visible at a time in the slider. You can specify the number of slides shown in the viewport. This helps tailor the layout to fit different screen sizes or content needs.

• Effect: Adjusting this number will determine how many image boxes are visible on-screen, allowing for a customized display of content.

1. Autoplay

When enabled, the slider will automatically move through the images after a defined delay. It’s ideal for creating an automated slideshow experience.

• Effect: When activated, images will transition automatically without user interaction, offering a more hands-off display.
• Change: Turning this on makes the slider self-running, providing a seamless experience for viewers.

3. Autoplay Delay

This option allows you to set the time delay (in milliseconds) between each slide transition during autoplay.

• Effect: You can control the speed of the slider’s movement by adjusting the delay between images.
• Change: Increasing the delay results in slower transitions; decreasing it makes the transition faster.

4. Autoplay Interaction

This setting determines whether the autoplay feature is paused when the user interacts with the slider (mouse hover or touch).

• Effect: When enabled, autoplay will pause if a user interacts with the slider, ensuring they can engage with the content without interruption.
• Change: If disabled, autoplay will continue regardless of user interaction.

5. Allow Touch Move

This feature enables touch swipe functionality on mobile devices. Users can swipe left or right to navigate between slides.

• Effect: On touch-enabled devices, users can swipe through slides, providing a mobile-friendly, interactive experience.
• Change: Enabling this feature allows for more intuitive navigation on mobile devices.

6. Loop

When activated, the slider will loop back to the first slide after reaching the last one, creating a continuous cycling effect.

• Effect: The slider will start from the first slide once it reaches the last, creating an endless loop of content.
• Change: Disabling this feature will stop the slider once it reaches the last slide.

7. Mousewheel

This option allows users to navigate through the slides using the mouse wheel.

• Effect: Scrolling the mouse wheel up or down will move the slider between slides.
• Change: Enabling this feature adds another method of navigation, enhancing usability.

8. Animation Speed

This setting controls how quickly the transition between slides occurs. You can set the speed of the animation in milliseconds.

• Effect: A faster animation speed makes transitions quicker, while a slower speed provides smoother, more gradual changes between slides.
• Change: Adjusting the animation speed alters the visual flow of the slider.

9. Space Between

This option sets the amount of space between each slide in the slider.

• Effect: Increasing the space between slides will create a more separated layout, while reducing the space will bring the slides closer together.
• Change: Adjusting this space affects the visual density of the slider and can be used to create more compact or spacious designs.

10. Navigation

This feature allows for customizable navigation controls (previous and next arrows) to move through the slides.

• Effect: Navigation arrows appear on either side of the slider, providing users with the ability to manually control the slider.
• Change: Enabling navigation arrows adds interactivity, while disabling them makes the slider auto-play or swipe-based only.

11. Previous Arrow Icon

This option lets you choose or upload a custom icon for the previous slide navigation arrow.

• Effect: The arrow icon will appear on the left side of the slider to move to the previous slide.
• Change: Customizing the icon allows for design consistency with the website’s theme.

12. Next Arrow Icon

Similar to the previous arrow, this option lets you choose or upload a custom icon for the next slide navigation arrow.

• Effect: The arrow icon will appear on the right side of the slider to move to the next slide.
• Change: Customizing the icon provides a more personalized look for navigation.

13. Pagination

Pagination enables users to see an indicator of the number of slides and navigate directly to a specific slide via clickable dots or other indicators.

• Effect: When enabled, small indicators will appear, showing the user’s position within the slider and allowing them to click to navigate to a particular slide.
• Change: Disabling pagination removes the visual guide, making it harder for users to track slide positions.

14. Pagination Type

You can select between different types of pagination, such as dots, numbers, or custom indicators.

• Effect: The type of pagination selected changes the appearance of the indicators (e.g., dots, numbers, or other shapes).
• Change: Choosing different types of pagination gives you flexibility in design and user navigation.

15. Left/Right Direction

This setting allows you to define the direction in which the slider moves when manually controlled by the user.

• Effect: You can choose whether the navigation will move the slides from left to right or vice versa.
• Change: Changing the direction affects how users interact with the slider and how content flows visually.

16. Direction

This option lets you define the general direction of the slider’s movement—either horizontal or vertical.

• Effect: Horizontal direction moves the slides left to right (or right to left), while vertical direction moves slides up or down.
• Change: Changing the direction alters the overall layout and interaction style of the slider.

17. Centre Slide

When enabled, this option ensures that the active slide is always centered in the viewport.

• Effect: The active slide is always visually in focus and centered, drawing attention to it.
• Change: Disabling this feature can create a more casual, less structured display of slides.

18. Effect

This setting allows you to choose the animation effect applied to the slides during transitions. Common options include fade, slide, or flip.

• Effect: The transition effect adds dynamic movement to the slider, making the changes between slides visually engaging.
• Change: Selecting different effects can change the overall feel of the slider, from smooth fades to more interactive movements.

Style Settings

In the Style section, you’ll find five customizable areas: Image Box, Image, Content, Slider Navigation, and Slider Pagination. Each section allows for detailed styling to match your design preferences and website branding.

Image Box

The Image Box section allows you to customize the container that holds the image and content. Available settings include:

• Height: Set the height of the image box for consistent layout control.
• Max Width: Define the maximum width to ensure responsiveness across devices.
• Padding: Adjust the inner spacing between the content and the box edge.

• Border Type: Choose from solid, dashed, dotted, or none to define the box’s border style.
• Border Radius: Apply rounded corners to soften the edges of the image box.
• Hover Effect: Add interactive visual effects when the user hovers over the box.
• Border Type (Hover): Customize the border style specifically for hover state, enhancing interactivity.

These options provide full control over the visual appearance and interactivity of the image box container.

Image

The Image Box section allows you to customize the container that holds the image and content. Available settings include:

• Height: Set the height of the image box for consistent layout control.
• Max Width: Define the maximum width to ensure responsiveness across devices.
• Padding: Adjust the inner spacing between the content and the box edge.

• Border Type: Choose from solid, dashed, dotted, or none to define the box’s border style.
• Border Radius: Apply rounded corners to soften the edges of the image box.
• Hover Effect: Add interactive visual effects when the user hovers over the box.
• Border Type (Hover): Customize the border style specifically for hover state, enhancing interactivity.

These options provide full control over the visual appearance and interactivity of the image box container.

Content

The Content Section offers full customization of text and visuals within the image box, including options for background, spacing, typography, and color- 

1. Background Type

This setting determines the background style for the content section. You can select from solid colors, gradients, or images as the background.

• Effect: The background adds a visual foundation to the content, enhancing its contrast with the image box.
• Change: Selecting a gradient or image will introduce a more dynamic background compared to a solid color.

2. Padding

This controls the space around the content inside the box, ensuring that text and other elements are well-separated from the edges of the content section.

• Effect: Adjusting padding creates more space around the content, improving readability and appearance.
• Change: Increasing padding will make the content box larger, while reducing it brings the content closer to the edges.

. Title Spacing

This setting adjusts the space between the title and the elements surrounding it, such as the image or subtitle.

• Effect: Title spacing ensures the title is properly separated from other elements, providing a balanced look.
• Change: Increasing the spacing allows the title to stand out more, while decreasing it brings the title closer to adjacent content.

4. Title Color

This option allows you to set the color for the title text, making it stand out against the background and other content.

• Effect: The title color helps draw attention to the heading, influencing its visual hierarchy on the page.
• Change: Choosing a contrasting color ensures the title remains visible, even with complex backgrounds.

5. Title Typography

This setting controls the font style, weight, size, and other typographic properties of the title text.

• Effect: Typography settings help define the font style and size, enhancing the title’s readability and impact.
• Change: Adjusting the font weight and style can make the title more prominent or subtle, depending on the design requirements.

6. Subtitle Spacing

This setting defines the space between the subtitle and surrounding elements, ensuring a clear separation and readability.

• Effect: Subtitle spacing adds balance and harmony between the subtitle and the title or description.
• Change: Increasing the spacing makes the subtitle more distinct from the title, while reducing it brings the elements closer together.

7. Subtitle Color

This option allows you to change the color of the subtitle text, complementing the title and aligning with your overall color scheme.

• Effect: Subtitle color helps differentiate it from the title while maintaining visual consistency with the design.
  Change: Using a softer or lighter color can create a more subtle contrast with the title.

8. Subtitle Typography

Here, you can customize the font, size, weight, and style of the subtitle text.

• Effect: This ensures the subtitle matches the design and hierarchy of the title, offering consistency across the content.
• Change: You can adjust the subtitle’s appearance for emphasis or to create visual hierarchy between the title and description.

9. Description Spacing

This controls the space between the subtitle and the description, ensuring proper separation for readability.

• Effect: Description spacing prevents text from appearing too cluttered, making the content more digestible.
• Change: Increasing the spacing improves readability, while reducing it can create a more compact layout.

10. Description Color

This setting allows you to modify the color of the description text to enhance readability and design harmony.

• Effect: The description color influences the visual contrast and legibility against the background.
• Change: Choosing a darker or lighter color ensures optimal readability depending on the background type.

11. Description Typography

Here, you can customize the font family, weight, size, and other typographic properties for the description text.

• Effect: Typography settings ensure the description is easy to read and visually aligned with the title and subtitle.
• Change: Adjusting the typography makes the description text fit better within the overall design of the slider.

12. Icon Spacing

This setting defines the space around the icon, ensuring that it is well-separated from the text and other elements in the image box.

• Effect: Icon spacing ensures that the icon doesn’t appear too close to the content, maintaining a balanced look.
• Change: Increasing the icon spacing can create a cleaner, more spacious design, while reducing it allows for a more compact layout.

13. Icon Color

Here, you can customize the color of the icon to match the content design, making sure it aligns with the overall aesthetic.

• Effect: The icon color affects its visibility and integration with the content section’s style.
• Change: A contrasting icon color helps the icon stand out, while a muted color blends it with the design.

14. Icon Size

This option allows you to adjust the size of the icon, ensuring it is proportional to the content.

• Effect: Icon size determines how prominent or subtle the icon will be within the design.
• Change: Increasing the size makes the icon more noticeable, while decreasing it can give a more minimalist appearance.

15. Icon Rotate

This feature allows you to rotate the icon, providing an interactive and dynamic effect.

• Effect: Rotating the icon can add a unique visual effect or animation to the image box.
• Change: You can rotate the icon slightly for a subtle effect or rotate it dramatically for more visual interest.

Slider Navigation

The Slider Navigation section allows you to fully customize the navigation controls for the image box slider, offering various visual and interactive settings. Below is a breakdown of each option:

1. Size

This setting controls the overall size of the navigation elements (e.g., arrows or dots) within the slider.

• Effect: Adjusting the size changes how large or small the navigation controls appear.
• Change: Increasing the size makes the controls more prominent, while decreasing them results in a more minimalist appearance.

2. Circle Size

If circular navigation elements (such as dots) are used, this option allows you to control their diameter.

• Effect: Adjusting the circle size changes the visual prominence of the navigation dots.
• Change: Larger circles make the navigation more noticeable, while smaller ones offer a subtler look.

3. Border Type

This option defines the style of the border around the navigation elements. You can choose from solid, dashed, dotted, or no border.

• Effect: The border type adds definition to the navigation controls.
• Change: A solid border offers a clean look, while dashed or dotted borders introduce a more dynamic, creative style.

4. Border Radius

This controls the roundness of the corners for the navigation elements, including arrows or dots.

• Effect: Border radius softens the edges of the navigation elements, creating a more rounded or square look.
• Change: A higher radius makes the elements more rounded, while a lower value creates sharper edges.

5. Padding

Padding adjusts the space inside the navigation elements, ensuring proper spacing between the content (such as arrows) and the element border.

• Effect: Adjusting padding affects the inner spacing within the navigation element.
• Change: Increasing the padding creates more breathing room for the content inside, while decreasing it tightens the layout.

6. Animation (Normal & Hover)

This option defines the animation effects applied to the navigation elements during normal interaction and when the user hovers over them.

• Effect: Normal animation applies to the default state of the navigation, while hover animation activates when the user hovers over the element.
• Change: You can set different animations (e.g., fading, sliding) for both states, enhancing interactivity and visual appeal.

7. Color

This option controls the color of the navigation elements, including arrows or dots.

• Effect: Color settings define the visual contrast of the navigation against the background.
• Change: Adjusting the color can help the navigation blend or stand out, depending on your design preferences.

8. Background Type

This setting determines the background style for the navigation elements, which can include a solid color, gradient, or image.

• Effect: Background type adds visual depth to the navigation controls, making them either blend in or stand out.
• Change: A gradient or image background adds more design variation, while a solid color provides a cleaner, simpler look.

9. Position Type

Position type controls where the navigation elements are placed within the slider container. You can position them relative to the container or set fixed positioning.

• Effect: This affects where the navigation appears (e.g., top, bottom, left, or right) within the slider.
• Change: Adjusting the position allows for flexible placement of navigation controls based on the layout needs.

10. Alignment

This option controls the alignment of the navigation elements within their designated area, such as left, center, or right alignment.

• Effect: Alignment determines where the navigation elements are positioned within their container.
• Change: Left or right alignment places the controls at the edges, while center alignment brings them to the middle of the container.

11. Gap

Gap adjusts the space between multiple navigation elements, such as arrows or dots.

• Effect: Gap helps space out the navigation elements evenly.
• Change: Increasing the gap creates more space between the elements, while reducing it places them closer together.

Slider Pagination

The Slider Pagination section allows customization of pagination controls (dots or numbers) for slider navigation. Here’s a quick overview of each option:

1. Color: This setting controls the color of the pagination elements, such as the active and inactive dots or numbers.

• Effect: The color option affects the visibility and aesthetic of the pagination elements.
• Change: Adjusting the color ensures that the pagination elements contrast with the background for better visibility.

2. Active Color: This option sets the color of the active pagination element (the dot or number that represents the current slide).

• Effect: The active color highlights the current slide’s pagination element, indicating the user’s position in the slider.
• Change: A bright or distinct active color makes it easier for users to identify which slide is currently being viewed.

3. Size: This option controls the size of the pagination elements, such as dots or numbers.

• Effect: The size adjustment alters how large or small the pagination elements appear on the page.
• Change: Increasing the size makes the pagination elements more prominent, while decreasing the size results in a more subtle look.

4. Gap: Gap defines the space between each pagination element, such as dots or numbers.

• Effect: Gap controls how spaced out the pagination elements are, providing a more visually appealing layout.
• Change: Increasing the gap separates the pagination elements more, while decreasing it brings them closer together.

5. Border Type: This option sets the style of the border around the pagination elements. You can choose from solid, dashed, dotted, or none.

• Effect: Border type adds a clear definition to the pagination elements.
• Change: A solid border offers a clean and clear look, while dashed or dotted borders can add a more dynamic or playful design.

6. Border Radius: This setting controls the roundness of the corners for the pagination elements.

• Effect: Border radius softens the corners, giving the pagination elements a more rounded or squared appearance.
• Change: A higher radius makes the elements more circular, while a lower value keeps them sharp and angular.

7. Direction: Direction controls the orientation of the pagination elements, whether they are displayed horizontally or vertically.

• Effect: The direction setting determines whether the pagination controls are placed in a row (horizontal) or a column (vertical).
• Change: Horizontal pagination is commonly used for a sleek, linear design, while vertical pagination is often used for unique, dynamic layouts.

8. Position: This option sets the position of the pagination elements within the slider container, allowing you to place them at the top, bottom, left, or right.

• Effect: Position defines where the pagination will appear relative to the slider content.
• Change: You can adjust the position based on the desired layout, whether you want the pagination at the top, bottom, or on the sides.

9. Alignment: Alignment controls the alignment of the pagination elements within their container, allowing you to position them to the left, center, or right.

• Effect: Alignment ensures the pagination is placed in a specific position within the slider, either to the left, center, or right.
• Change: Left or right alignment positions the pagination at the edges, while center alignment places it at the middle of the container.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Image Box Slider Widget in Elementor to create dynamic and visually appealing image sliders with customizable titles, descriptions, and links.

For any further assistance or inquiries, feel free to contact our support team!