Introducing Instant Gallery for Elementor: Your comprehensive solution for effortlessly creating captivating galleries. Featuring Grid, Masonry, Mosaic, Justified, and Carousel layouts, Instant Gallery seamlessly showcases images, videos, albums, PDFs, iframes, dynamic templates, and audio files. Enhance user interaction with its filter, search, and load more features, complemented by over 15+ filter and overlay animations. Plus, its fully responsive design ensures your galleries maintain impeccable presentation across all devices. Elevate your Elementor website’s visual appeal effortlessly with Instant Gallery, the top choice for dynamic and engaging content presentation.
Key Benefits:
- Versatile layouts including Grid, Masonry, Mosaic, Justified, and Carousel.
- Easily display images, videos, albums, PDFs, iframes, dynamic templates, and audio files within your galleries.
- Enhanced user experience with filters, search, and load more features.
- Over 15+ filter and overlay animations for dynamic visual effects.
- Fully responsive design for seamless viewing on all devices.
- Seamless integration with Elementor for easy implementation.
- Fully customization options for personalized galleries.
- Elevates visual appeal, creating engaging content presentations.
Requirements:
To add the Instant Gallery Elementor widget to your WordPress website, ensure you have both the Elementor Page Builder and the Instant Gallery Plugin installed and activated.
Installation Guide:
To seamlessly integrate the Instant Gallery for Elementor into your WordPress website, follow the step-by-step guide outlined below. Make sure you have already purchased and downloaded the widget from the Downloads section of your CodeCanyon account before proceeding.
Step 1: Log in to your WordPress dashboard using your credentials.
Step 2: In the dashboard, locate the ‘Plugins’ menu and select the ‘Add New’ submenu.
Step 3: Click the ‘Upload Plugin’ button at the top of the page to initiate the plugin upload process.
Step 4: Choose the plugin zip file you previously downloaded to your local computer. Click the ‘Install Now’ button and allow the installation process to complete.
Step 5: Once the installation is complete, click the ‘Activate’ button to activate the Instant Gallery plugin on your website.
Step 6: After installing the Instant Gallery For Elementor, it is recommended to also install and activate the Elementor plugin for optimal performance and compatibility.
By following these steps, you can seamlessly integrate the Instant Gallery For Elementor, enhancing the visual appeal and interactivity of your Elementor-powered WordPress websites.
How to Use Instant Gallery for Elementor
Integrating the Instant Gallery for Elementor is a breeze, following these steps:
Step 1: Open your WordPress dashboard and navigate to the page you wish to edit using Elementor.
Step 2: Locate the Elementor editor and add a new section or choose an existing one where you want to place the gallery.
Step 3: Within the Elementor editor, navigate to the Instant Gallery panel. Here, you’ll find various gallery types such as image, album, video, and advanced.
Step 4: Choose the gallery type that suits your requirements. For demonstration, let’s drag the advanced gallery to the section.
Step 5: Proceed to the Content Tab and select the Gallery Section. Within this section, you’ll find five layouts: grid, masonry, mosaic, justified, and carousel. Choose the layout that best fits your preferences. For demonstration, let’s select the masonry layout.
Step 6: After choosing your preferred gallery and grid style, scroll down to find multiple filter groups labeled by default. Click on any filter group and rename it according to your preference.
Step 6: To set a featured image, click on the Featured Image option. Choose an image from your media library or upload one from your PC.
Step 7: Moreover, you have the option to select the Lightbox Content type, which includes image, album, audio, video, iframe, pdf, and dynamic template. You can choose a different or the same content type for each gallery item as per your preference.
Step 8: Select an item from your media library or upload one from your PC according to the chosen content type.
Likewise, add the featured and gallery images to complete the setup. The outcome will resemble the following.
How To Add Filters In Instant Gallery
To enhance your gallery’s appeal, you can incorporate multiple filters. Here’s how to begin:
Step 1: Simply go to the Gallery Section and enable the filter. You can then set multiple filters for various items within the Gallery Section.
Step 2: Let’s add animation to your gallery when filters are clicked. In the Filter section, select from over 15+ stunning filter animations.
Whenever a visitor switches between your gallery filters, a distinct animated transition will occur, similar to the following:
How To Add Search Functionality To An Instant Gallery
To boost your gallery’s appeal, consider integrating a search feature. Here’s how to get started:
Just go to the Search Section in the Content Tab. Toggle the “Show Search” button to enable search in the gallery. Additionally, ensure that the search functionality works on both item title and description by enabling or adding title and description
How to Add Load More Feature in Instant Gallery
Integrating a Load More feature optimizes the content presentation on your page, aiding in showcasing other prominent features. Users can conveniently access additional content by clicking or scrolling.
Navigate to the Load More section in the Content Tab, where you’ll load more settings. Now, you have the flexibility to switch the Load More option from “none” to any of the following options: Click or Scroll. Once you’ve made your selection, you can specify the number of items per page.
This is a demonstration of an attractive preview customized to meet our specific requirements.
How To Create Mosaic Layout Using Instant Gallery
Get the Mosaic gallery layout for your Elementor website, fulfilling a long-standing need! With our robust Instant Gallery addon, crafting stunning mosaic layouts is effortless and quick. Mosaic layouts offer an attractive, randomized, and artistic aesthetic for your gallery.
Understanding how the Mosaic Layout operates is crucial—it arranges images where the smallest dimension item equals 1 column, ensuring a cohesive look across all images. Let’s dive into an example for clarity: Utilized a 300×300 image as the smallest resolution.
Step 1: Navigate to the Content Tab, select the Gallery Section, and choose the masonry layout. Add images, using the smallest item’s width and height as the base column size. Ensure other images have dimensions that are multiples or the same of this base size, or set custom width and height to fit the mosaic layout.
Step 2: After this, you can set the number of items per row. If the smallest item is 300×300, this defines the column size. An item that is 600×600 will occupy four columns. The items will be arranged in order from top to bottom.
Now, incorporate some captivating images following the same process and ensure that the images adhere to the specified sizes mentioned earlier. The end result will resemble something similar to this.
How To Create Justified Layout Using Instant Gallery
The justified layout works similarly to the mosaic layout but relies on the images themselves for arrangement. You can set a custom row height, but the columns will adjust based on the width of each item. The width of the smallest item will define one column.
Step 1: Navigate to the Content Tab, select the Gallery Section, and choose the justified layout. Add images, using the smallest item’s width as the base column width. Ensure other images have width that are multiples or the same of this base size, or set a custom width.
Step 2: After this, you can set the number of items per row. If the smallest item is 300×300, this defines the column width. An item that is 300×600 will occupy two columns.
Now, include some captivating images following the same process, making sure they adhere to the specified sizes mentioned earlier. The final outcome will resemble something similar to this.
How To Create Carousel Layout Using Instant Gallery
Let’s delve into creating a carousel gallery layout. This layout is seamlessly integrated into an instant gallery, featuring added functionalities like filter options, search capability, and a load more feature. With this setup, users can effortlessly navigate through images using the carousel layout, alongside filtering images based on specific criteria, searching for particular images, and dynamically loading more images. These enhancements elevate the overall user experience and accessibility of the gallery.
Step 1: Navigate to the Content Tab, select the Gallery Section and choose Carousel Layout. Then, add images into the filter group items accordingly for organized viewing.
Step 2: Following that, proceed to the settings section where you can activate multiple gallery features such as captions, descriptions, nav arrows, and dot navigation for enhanced customization.
After meticulous adjustments, this is the definitive outcome of the carousel layout.
In conclusion, Instant Gallery stands out as the premier choice for creating filterable galleries within Elementor. Its seamless integration, diverse layout options, and robust filtering capabilities make it the ultimate solution for showcasing your content with elegance and efficiency. Elevate your Elementor website with Instant Gallery and experience the power of dynamic and engaging content presentation firsthand.