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:

Image Gallery in Elementor

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
Image Gallery in Elementor

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:

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.

Image Gallery in Elementor

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:

Image Gallery in Elementor

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.

Image Gallery in Elementor

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
Basic Gallery in Elementor

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.

Basic Gallery Widget

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

Basic Gallery Widget

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
Elementor Style Tab

Style Tab

  • Images -> Spacing -> Custom -> 10px;
  • Display -> Caption : Hide
Elementor Style Tab
Elementor Advance Tab

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 {
   margin-top: -50% !important;

selector + 1) {
   grid-column: 1 / 3;
selector + 2) {
   grid-column: 3 / 5;
selector + 3) {
   grid-column: 5 / 7;
selector + 4) {
   grid-column: 2 / 4;
selector + 5) {
   grid-column: 4 / 6;

Elementor Custom CSS

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.

Image Gallery in Elementor

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



Leave a Reply

Sajjad Hossain
about me

Sajjad Hossain Sajib

Hey. Welcome to my profile. I am a professional web designer and developer. Mainly I am specialized in Wordpress and e-Commerce. I love to learn things and share. So stay connected with WebExtent to get the latest tips and tricks, and tutorials.