A Beginner's Guide to Installing and Using ​CROCOBLOCK-​​​ ​​JetProductGallery, Plugin

Introduction to ​JetProductGallery Plugin

As we continue our exploration of the robust CROCOBLOCK WordPress plugin suite, we turn our attention to JetProductGallery, a dynamic tool designed to enhance the visual appeal and functionality of your product pages. JetProductGallery provides users with the ability to create stunning and interactive product galleries, providing your customers with a comprehensive visual experience of your products. This tool becomes particularly useful for online retailers who wish to provide their customers with multiple views of their products. So, how can we install and utilize this tool? Let's dive in.

Installation

Before installing JetProductGallery, you must first ensure that you have WordPress installed on your server. Once this is in place, follow these steps:

Navigate to your WordPress dashboard.

Click on 'Plugins' on the left-hand side menu, then click 'Add New'.

In the search bar, type 'CROCOBLOCK' and press 'Enter'.

Locate the CROCOBLOCK plugin in the search results and click 'Install Now'.

After the plugin has been installed, click 'Activate'.

With the CROCOBLOCK suite now activated, navigate to the 'JetProductGallery' option and select 'Install'.

Features and Using

Create a new product gallery

To create a new product gallery, navigate to the page where you want to add the gallery. Click on 'Edit with Elementor'.

Within the Elementor page builder, you'll see the 'JetProductGallery' widget. Drag and drop this widget to the desired location on your page.

Now, you can start configuring your gallery. Under the 'Content' tab, you can select the gallery layout, set the quantity of images visible, and more.

Under the 'Style' tab, you can customize the appearance of your gallery, including image spacing, border type, and arrow style.

When you're satisfied with your gallery, click 'Update' to save your changes.

Remember, the best settings depend largely on the design of your website and the nature of your products. For beginners, a simple grid layout with three images visible at a time can be a great starting point. Explore the features and find what suits your needs best.

Video Integration

JetProductGallery allows you to add video content to your product galleries, providing a more engaging and dynamic user experience. This feature can be accessed from the 'Content' tab within the JetProductGallery widget settings in Elementor. Here, you can add a video URL to your gallery.Activation Steps:

Go to your product page and click 'Edit with Elementor'.

Select the JetProductGallery widget where you wish to add a video.

In the 'Content' tab, find the option to add a video.

Enter the video URL and click 'Update'.

Gallery Thumbnails

Thumbnails provide a user-friendly way to browse through your product images without cluttering the screen. Users can click on a thumbnail to view the full-size image.Activation Steps:

Click on 'Edit with Elementor' on your product page.

Select the JetProductGallery widget.

In the 'Content' tab, locate the 'Thumbnail' section.

Toggle the 'Show Thumbnails' switch to 'Yes' and click 'Update'.

Slider Navigation

JetProductGallery also offers slider navigation. This feature can give your customers the ability to easily slide through the product images.Activation Steps:

Go to the product page and click 'Edit with Elementor'.

Select the JetProductGallery widget.

Under the 'Content' tab, locate the 'Slider Options' section.

Toggle the 'Enable Slider' switch to 'Yes' and click 'Update'.

Zoom Effect

T his feature allows users to zoom in on product images, which can be beneficial for products where finer details matter.Activation Steps:

Edit your product page with Elementor.

Select the JetProductGallery widget.

In the 'Style' tab, go to the 'Images' section.

Toggle the 'Enable Zoom' switch to 'Yes'.

Click 'Update' to save your changes.

Full Screen Viewing

JetProductGallery enables users to view the product images in full screen, providing a more immersive experience.Activation Steps:

Go to the Elementor editing interface on your product page.

Choose the JetProductGallery widget.

Under the 'Style' tab, go to the 'Images' section.

Turn on the 'Enable FullScreen' switch.

Hit 'Update' to apply the changes.

Image Ratio Control

This tool allows users to control the aspect ratio of the product images, which can lead to a more consistent and visually pleasing product gallery.Activation Steps:

On your product page, enter the Elementor editing mode.

Select the JetProductGallery widget.

In the 'Style' tab, find the 'Images' section.

Set your desired ratio in the 'Image Ratio' field.

Press 'Update' to save your settings.

Image Navigation

T h is feature allows users to navigate between product images using navigation arrows. It simplifies the process for customers, making it easier for them to view different product images.Activation Steps:

In the Elementor editing interface, select the JetProductGallery widget on your product page.

Navigate to the 'Settings' tab.

Toggle on the 'Enable Navigation' option.

Click 'Update' to save the settings.

Slider Autoplay

JetProductGallery provides an autoplay feature for the image slider, which can help in creating dynamic product galleries.Activation Steps:

Open the Elementor editor for your product page.

Choose the JetProductGallery widget.

Under the 'Settings' tab, toggle on the 'Autoplay' switch.

Save your changes by clicking on 'Update'.

Thumbnails Positioning

J​This feature allows users to position their product image thumbnails to either the left, right, bottom, or top of the main product image, improving visual appeal and navigability.Activation Steps:

In the Elementor editor, click on your JetProductGallery widget.

Navigate to the 'Settings' tab in the editing pane.

Locate the 'Thumbnails Position' dropdown menu and select your preferred position.

Don't forget to click 'Update' to save your changes.

Additional Image Effect

T h e plugin allows you to add effects to your images, such as a zoom effect, to provide customers with a detailed view of products.Activation Steps:

Go to your JetProductGallery widget in Elementor.

In the 'Settings' tab, locate the 'Image Effect' dropdown.

Select your desired effect (for instance, "Zoom").

Remember to hit 'Update' to apply the changes.

Custom CSS

For those who have a good understanding of CSS, JetProductGallery allows for custom CSS rules to be applied, offering you the ability to create a truly unique and tailored product gallery.Activation Steps:

Open the Elementor editor and click on the JetProductGallery widget.

Scroll down to the 'Advanced' tab and locate the 'Custom CSS' section.

Here, you can write your own CSS rules that apply directly to this widget.

Make sure to save the changes by clicking 'Update'.

Conclusion

In conclusion, the JetProductGallery add-on for CROCOBLOCK is a dynamic and innovative tool that takes product visualization on your WordPress site to new heights. With its variety of features, such as the main gallery, thumbnail gallery, customizable widgets, video gallery integration, bullet navigation, and the capability for custom CSS, this tool can transform a regular product page into an immersive and interactive experience for your customers. By offering the ability to display products from multiple angles and in various contexts, it can help customers make informed buying decisions, improving customer satisfaction, and ultimately contributing to the success of your online store. While it may require a bit of learning and adjustment for newcomers, the potential benefits it offers for your eCommerce platform are undeniable. Just remember to explore, experiment, and adjust the settings to best fit your specific needs and preferences. Happy website building!