Create a Diamond Shape Awesome Image Gallery in Elementor

Do you want to smartly showcase your images on your web page? Follow this tutorial to learn how to make an awesome image gallery utilizing Elementor Basic Gallery Widget!

Sometimes, you will want to make an Image gallery section on your website, for example, on a landing page, project page, portfolio page, or a dedicated gallery page.

It’s very easy to make a Gallery with the Elementor Basic Gallery widget. Only a few steps are required to completely add an image gallery on your web pages.

With the default options of the Basic Gallery widget, you will be able to create an Image Gallary like this in the screenshot below:

But we are going to modify the layout of the basic image gallery like this one with some tweaks in Elementor.

Image Gallery in Elementor Using Elementor Basic Gallery Widget

Now let’s jump into the tutorial part to create an image gallery in Elementor as we showed above. Before doing it, you need to install and activate these required plugins below:

• Elementor
• Elementor Pro

Create a New Page or Use Existing One for Image Gallery

At first, you will need to create a new page for showing the Image Gallery Section. Or you can edit an existing page where you want to show the image gallery.

By Going to WordPress Dashboard> Pages> Add New Page, you can create a new page or edit the existing page where you want to add the Elementor image gallery section.

Add the Basic Image Gallery Widget 

Now go to the Elementor design canvas by clicking Edit with Elementor. The page looks like the below one:

Search the Basic Gallery widget in the search box of the Elementor left sidebar. The widget will show up on top. Then select and drag the widget to the design section.

Once you drag the widget, the widget options will show up in the left sidebar of the page.

• Add images that you want to insert into the image gallery
• Set the image size
• Determine how many columns you want
• Check lightbox yes or no
• Set the order

Click on the upload icon from the left sidebar to add some images. From the gallery, select multiple images that you want to add to the image gallery In Elementor. Once you’re done, click on the Insert button

But before you add them, you will get some options to add an Image caption and change their order. After doing that, click the final Insert gallery to show them on the gallery page.

When you are done adding images, you will get a similar layout to this one.

Now, we are going to change the layout of the image gallery in Elementor to our own style we mentioned above like a diamond shape of each image.

We need to change some settings and add custom CSS to achieve that.

Now, Update the settings of image gallery widget as follows:

Content Tab : 

• Image size: Full
• Columns: 4

Style Tab

• Images -> Spacing -> Custom -> 10px;
• Display -> Caption : Hide

Advanced Tab

Custom CSS -> Add the following CSS code in the Custom CSS area box of Elementor Image Basic Gallery Widget;

selector img {
   -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
   clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
   width: 100%;
}
selector img:hover {
   opacity: 0.7;
}
selector figure,
selector img {
   aspect-ratio: 1/1;
}
selector .gallery {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   padding-top: 200px;
   padding-bottom: 100px;
}

selector figure.gallery-item {
   margin-top: -50% !important;
}

selector figure.gallery-item:nth-child(5n + 1) {
   grid-column: 1 / 3;
}
selector figure.gallery-item:nth-child(5n + 2) {
   grid-column: 3 / 5;
}
selector figure.gallery-item:nth-child(5n + 3) {
   grid-column: 5 / 7;
}
selector figure.gallery-item:nth-child(5n + 4) {
   grid-column: 2 / 4;
}
selector figure.gallery-item:nth-child(5n + 5) {
   grid-column: 4 / 6;
}

After all these settings are done, click on the UPDATE or PUBLISH button to see the actual results.

Finally, In the preview, we will see our desired Elementor Image Gallery section.

Hopefully, this tutorial will help you to give some inspiration for creating some beautiful Image Gallery in Elementor.

Check our another blog on How To Create Restricted Content Page Using Elementor

Tags: Elementor Elementor Gallery image gallery wordpress WordPress tips WordPress tricks