How to use Diamond Gallery Widget of Sky Addons for Elementor
Sky Addons Diamond Gallery Widget is a widget that allows users to create visually appealing and unique image galleries with various grid styles like diamond, tile, ellipse, and hexagon. It offers extensive customization options for grid layout, item appearance, hover effects, and lightbox settings.
Description
The Diamond Gallery widget is a powerful tool for showcasing images in an engaging and unconventional way. It goes beyond the standard grid layout, offering unique shapes and arrangements that capture attention. Perfect for portfolios, product showcases, or any visual content, this widget provides complete control over the gallery’s appearance. You can customize the grid style, number of columns, item size, aspect ratio, and even add hover effects and lightbox functionality. As part of the premium Elementor addons, the Diamond Gallery widget enhances your website’s visual appeal and user experience, making it a standout feature. Whether you’re building a creative agency website or an online store, this widget helps you present your images in a memorable and professional manner.
Key Features List
- Multiple grid styles: Diamond, Tile, Ellipse, and Hexagon
- Customizable grid columns and responsive layouts
- Option to hide individual items
- Image size and quality control
- Title and text display options
- Grid settings for edge filling and row shifting
- Lazy loading for improved performance
- Extensive grid item styling options
- Click actions: Lightbox, Redirect, or None
- Hover effects with grayscale, text, and overlay customization
- Comprehensive lightbox settings for enhanced viewing experience
- Gradient and shadow effects for grid items
Insert Diamond Gallery Widget
- Open Elementor Editor. In the Elementor panel, search for “Diamond Gallery”
- Drag and Drop the Widget to the desired location on your page / editor.
Items Section
- Grid Style – Select the grid layout style: Diamond, Tile, Ellipse, or Hexagon.
- Grid Columns – Choose the number of columns for the grid layout.
- Hide Item – Toggle to hide individual gallery items.
- Choose Image – Select the image for the gallery item.
- Title – Add a title for the gallery item.
- Text – Add descriptive text for the gallery item.
- Link – Add a URL to link the gallery item.
- Image Size – Control the size and quality of the images.
- Show Title – Toggle to display the title of the gallery item.
- Title HTML Tag – Select the HTML tag for the title.
- Show Text – Toggle to display the text of the gallery item.
Grid Settings Section
- Grid Fill Edges – Toggle to fill the edges of shifted rows.
- Grid Rows To Shift – Select which rows to shift (even or odd).
- Grid Position – Choose the grid position (inline or outline).
- Lazy Loading – Enable or disable lazy loading for images.
Grid Item Settings Section
- Grid Item Size – Adjust the size of the grid items.
- Grid Item Aspect Ratio – Control the aspect ratio of the grid items.
- Grid Item Border Radius – Set the border radius for the grid items.
- Item Grayscale Level (%) – Adjust the grayscale level of the grid items.
- Grid Item Preloader Color – Set the color of the preloader.
Grid Item Click Settings Section
- Click Action – Select the action when a grid item is clicked (lightbox, redirect, or none).
- Default Redirect URL – Set the default URL for redirection.
- Click Redirect Target – Choose the target for the redirect link (new or same tab).
Grid Item Hover Settings Section
- Enable Grid Item Hover – Toggle to enable hover effects on grid items.
- Hover Grayscale Level – Adjust the grayscale level on hover.
- Grid Item Hover Text – Set the text to display on hover.
- Hover Font Size – Adjust the font size of the hover text.
- Hover Text Color – Set the color of the hover text.
- Hover Text Opacity – Adjust the opacity of the hover text.
- Hover Text Scale – Control the scale of the hover text.
- Hover Overlay Color – Set the color of the hover overlay.
- Hover Overlay Opacity – Adjust the opacity of the hover overlay.
- Hover Image Scale – Control the scale of the image on hover.
Lightbox Settings Section
- Lightbox CSS Class – Add a custom CSS class to the lightbox.
- Lightbox Z-Index – Set the z-index of the lightbox.
- Touch Threshold – Adjust the touch threshold for swipe gestures.
- Keyboard Control – Enable or disable keyboard navigation.
- Mobile Viewport – Set the viewport size for mobile layout.
Lightbox Buttons Section
- Show Controls – Toggle to display lightbox controls.
- Button Style – Select the style for the lightbox buttons (plain or circle).
- Custom Close Button Image – Upload a custom image for the close button.
- Custom Previous Button Image – Upload a custom image for the previous button.
- Custom Next Button Image – Upload a custom image for the next button.
- Control Buttons Color – Set the color for the built-in button styles.
- Close Button Width – Adjust the width of the close button.
- Navigation Button Width – Adjust the width of the navigation buttons.
- Close Button Margin – Set the margin for the close button.
- Navigation Button Margin – Set the margin for the navigation buttons.
Lightbox Content Section
- Content Scale Level – Control the scale level of the content during opening animation.
- Content Maximum Width – Set the maximum width of the lightbox content.
- Content Maximum Height – Set the maximum height of the lightbox content.
Lightbox Caption Section
- Caption Width – Set the width of the lightbox caption.
- Caption Minimum Width – Set the minimum width of the caption for mobile layout.
- Caption Minimum Height – Set the minimum height of the caption for desktop layout.
- Caption Text Color – Set the text color of the lightbox caption.
- Caption Vertical Padding – Adjust the vertical padding of the caption container.
- Caption Horizontal Padding – Adjust the horizontal padding of the caption container.
- Caption Background Color – Set the background color of the caption.
Style Customization
The Diamond Gallery widget offers a wide range of styling options to customize the appearance of your gallery. You can control the colors, typography, shadows, and gradients of the grid items and lightbox elements. This allows you to create a visually stunning gallery that perfectly matches your website’s design and branding.
Grid Item Gradient Section
- Gradient Color – Set the color of the gradient overlay.
- Gradient Opacity (%) – Adjust the opacity of the gradient overlay.
- Gradient Point (%) – Control the position of the gradient point.
Item Shadow Section
- Shadow Size – Adjust the size of the shadow.
- Shadow Color – Set the color of the shadow.
- Shadow Opacity – Adjust the opacity of the shadow.
- Shadow OffsetX – Set the horizontal offset of the shadow.
- Shadow OffsetY – Set the vertical offset of the shadow.
Lightbox Shadow Section
- Content Shadow Size – Adjust the size of the content shadow.
- Content Shadow Opacity – Adjust the opacity of the content shadow.
- Content Shadow Color – Set the color of the content shadow.
- Content Shadow OffsetX – Set the horizontal offset of the content shadow.
- Content Shadow OffsetY – Set the vertical offset of the content shadow.
Lightbox Background Section
- Background Color – Set the background color of the lightbox.
- Background Opacity – Adjust the opacity of the lightbox background.
Title Section
- Color – Set the color of the title.
- Typography – Customize the font appearance of the title.
- Spacing – Adjust the spacing below the title.
Text Section
- Color – Set the color of the text.
- Typography – Customize the font appearance of the text.
Save and Preview
- Once you’ve customized and styled your accordion, click “Publish” or “Update” to save your changes.
- Preview the page to ensure the widget looks and functions as desired.
Troubleshooting
- Images Not Displaying – Ensure that the image URLs are correct and the images are accessible.
- Layout Issues – Check the grid settings and adjust the number of columns and item sizes accordingly.
- Lightbox Not Working – Verify that the click action is set to “Lightbox” and the lightbox settings are configured correctly.
- Hover Effects Not Showing – Make sure that hover effects are enabled and the hover settings are properly configured.
Conclusion
The Sky Addons Diamond Gallery widget provides a unique and visually appealing way to showcase your images. With its extensive customization options and flexible layout styles, you can create stunning galleries that enhance your website’s design and engage your visitors. Whether you’re building a portfolio, product showcase, or any other visual content display, this widget offers the tools and features you need to create a memorable and professional experience.
If you have any questions or encounter any challenges while using, please don’t hesitate to reach out to our dedicated support team at https://wowdevs.com/support/ where our expert team is ready to provide prompt and helpful assistance.