In this document, we will demonstrate the use of the Draggable widget. The Draggable Gallery widget allows you to showcase images in an interactive, drag-to-scroll gallery layout. Instead of traditional navigation or pagination, users can smoothly drag the gallery items horizontally or vertically, creating a modern and engaging browsing experience.

Key Features

• Drag-to-Navigate Gallery – Users can drag images using mouse or touch gestures for smooth navigation.
• Responsive & Touch-Friendly – Works seamlessly on desktop, tablet, and mobile devices.
• Flexible Layout Options – Supports horizontal and vertical gallery directions.
• Smooth Animation & Performance – Optimized for smooth dragging with fluid motion effects.
• Custom Spacing & Alignment – Control image spacing, alignment, and sizing for a polished layout.
• Lightweight & Fast – Optimized code ensures minimal performance impact.
• Easy Elementor Integration – Simple drag-and-drop setup with Elementor controls.
• Creative Use Cases – Perfect for portfolios, photography, product highlights, and visual storytelling.

Enable the Draggable Widget

Go to WP Dashboard Pixel Gallery > Core Widgets

To use the Draggable widget from Pixel Gallery, first, you have to enable the Core Widgets. Navigate to the WordPress Dashboard.

1. Go to Pixel Gallery > Core Widgets section.
2. Search by the Widget Name ” Draggable ” and it will appear the.
3. Now Enable the Switcher of the Draggable Widget.
4. Hit the Save Settings button.

Insert Draggable Widget

1. Go to the Elementor Editor page and click the Add Element “+” icon.
2. Search for the Draggable widget by name.
3. The widget will appear — you can check the Pixel Gallery logo on the top-right corner.
4. Select the widget, then drag and drop it onto the editor page.

Content Tab Customization

Items Section

Go to Content > Items

1. It demonstrate all the items. Select any single item and click on it. It will open item accordion and select it.

2. Choose Media: Select the media from the library section.
3. Title: Set the title for the image.
4. Link: Set the link for this. It will navigate to the link.
5. Text: Set the text of the Image.

6. Add as more as item you want , Just click on the ” + Add Item ” button.

Additional Options Section

Go to Content > Additional Options

1. Show Title: Enable the switcher to demonstrate the Title of the item.
2. Title HTML Tag: Set any HTML Tag for Title ( H1, H2, H3, H4, H5, H6, p, span ). The title tag is essential for both user experience and search engine optimization (SEO).
3. Show Text: Enable the switcher to demonstrate the Text of the item.
4. Zoom Level ( % ): Set the Zoom Level of the image.
5. Grid Item Gap: Set the grid gap between the items.

Designing with the Style Tab

The Style Tab offers a range of options to enhance the visual appearance of elements, enabling precise adjustments and creative design possibilities. It helps create polished and engaging layouts effortlessly.

Title Section

Go to Style > Title

1. Color: Set the color for the Image title.

2. Hover Color: Set the hover color for the Title.

3. Margin: Set the margin for the Title.
4. Typography: Choose the best typography for Title. Different typography options are available, like Font size, font weight, etc.
5. Text Shadow: Set the shadow for the Text. It appear the shadow effect for the Text.
6. Text Stroke: It’s beautiful way to demonstrate the Text. Set the Stroke for the Title.

Text Section

Go to Style > Text

1. Color: Click on the color plate and choose any color for the Text.
2. Margin: It’s set the outer space for the text. Adjust the room by setting the Margin.
3. Typography: Select the typography best for the Text.

Image Section

Go to Style > Image

1. Border Type: Choose the border type for the Image, Different types are Solid, Dashed, Dotted etc.
2. Border Width: Set the thickness of the Border.
3. Border Color: Choose the color for the border. Click on the color plate and select it.
4. Border Radius: Make the border corner edges rounded by setting the border radius.

5. CSS Filters: Filter image in different shades by using the CSS Filters. It’s an interactive feature for demonstrating the image according to your need.
6. Box Shadow: Make shadow for the box items.

Content Section

Go to Style > Content

1. Max Width: Set the width for the content. The content is based on the Modal area.
2. Margin: Make room for the content area by setting the margin.

Modal

1. Width: Set the width for the modal. Adjust the width according to your needs.
2. Background Type: Set the type color for modal. It will appear the selected color only. No image will be visible if you set the Background.

Close Button Section

Go to Style > Close Button

1. Color: Choose the color for the Close Button.

2. Hover Color: Select the Hover color for the close button. It will demonstrate on mouse hover over the Close button.

3. Size: Set the size for the close button. Different size can be applied to different devices.
4. Offset: Set the offset for the close button. Adjust position in horizontally or vertically.

Video Assistant

Video Tutorial Is Coming Soon!
We appreciate your support.