Elementor is a popular WordPress plugin that allows you to create custom pages and posts with drag-and-drop ease. One of its many features is the ability to create an image gallery with Elementor in minutes.It makes it easy for users to add and change their website’s gallery page with just a few clicks.
In this article, we will show you how to create an image gallery with Elementor. Elementor is a powerful WordPress plugin that allows you to create custom pages and posts with drag and drop. It also includes a built-in image gallery builder, which makes it easy to create beautiful image galleries. In the following steps, we will show you how to create an image gallery with Elementor.
To create an image gallery with Elementor, you may utilize the Basic Gallery and Gallery widgets. The Basic Gallery Widget makes it simple to build and customize attractive image galleries for your website. On the other hand, The Gallery widget is used to construct a complex gallery that is not available in the free version of Elementor.
To create an image gallery with the Elementor page builder, you have to follow this steps –
A) Plugin Installation
Special Note:
You don’t need the pro version of the Elementor plugin to set it up an Image Gallery; we can work with the free version. So first of all we have to install and activate the Elementor plugin.
You can install the Elementor free version plugin in two ways:
- WordPress Panel: WordPress Dashboard >>Plugins >> Add New Plugin >> Search Plugin >> Elementor Website Builder >> then it needs to be installed and activated.
2) By WordPress.ORG Plugin Sources: https://wordpress.org/plugins/search/elementor/ Clicking on the link will take you to the plugin’s download page, and from there, you will have to download this plugin
Navigate to Plugins >> Add New Plugin >> Upload Plugin>> Choose File >> Select elementor.3.5.5.zip file from your computer.
Press the Install Now button to upload this plugin.After that, Activate this plugin, and it will work perfectly
B) Plugin Setup:
Once installed and activated, it will show the plugin on the dashboard—no need to set up the plugin. You can do everything with the default setup.
C) How to create an Image Gallery with Elementor:
First, you have to choose the web page where you want to insert an Image Gallery. Just navigate to the page that you want to edit —
Dashboard -> All Pages -> [The Page You Want to Edit]
In this tutorial, we are working on TEST Page this page. So click on the Edit option.
After that, we will need to hit the “Edit with Elementor“ button.
When you click on the button, it will open the page with the Elementor customization panel.
Scroll down until you see the General area where you finally find the Basic Gallery widget. Select the Basic Gallery from there. Then you have to drag and drop it over to a suitable place wherever you want to use it.
As soon as you place the widget, you will notice Image Gallery create option below –
D) Image Gallery Contents
Six Content designing options Give your desired style a combined look with effects and make it look outstanding.
Here they are,
1. Image Gallery
2. Image Size
3. Columns
4. Link
5. Lightbox
6. Order By
Image Gallery –
Select the images you wish to add to the gallery using the image selector.
When you click on it, a Create gallery page popup and that will give you the opportunity to set images in the image gallery.
If the images don’t exist in your WordPress media gallery yet, for uploading images, simply click on Select Files. That will permit you to select images, and when you select all the images, just click on the Open button. It will help you upload those images, and you can see all the images in your Media Library.
If you have images on your WordPress media gallery yet, select the images which you want to show in your gallery. Then click the “Create a new gallery” button to add the selected images to the gallery.
As soon as you click on the “Create a new gallery” button, an Edit gallery page popup will appear. Then you have to click on the “Insert gallery” button to create a gallery image.
Here is your Elementor Image Gallery.
Gallery Image widget gives you some excellent options to set the image size, the number of columns, Gallery link, lightbox, and the order by on the Image Gallery block under the Image Selector Tab.
Image Size:
This Image Size block allows you to customize the image size based on your design.
Columns:
You can set your gallery image number of columns to display, from 1 to 10.
Links:
This Link option is used to link images to their respective Media Files, Attachment Pages, and None (You must select Media File if Lightbox is enabled.)
Lightbox:
If you choose Yes or No, that selection will override the Global Default Lightbox setting. Images will only appear in the lightbox if “Media File” is selected as the Link to option.
Order by:
Default or Random help you order images within the gallery.
E) Image Gallery Style
If you want to customize/style your image gallery, you have to go to the Style tab. There you can see Images and Caption Blocks.
Images:
1. Spacing:
You can set the spacing between slides. The set value is 20px by default. Also, you can set custom values that start at 0 px and end at 100 px.
2. Border Type:
You can choose a border type from None, Solid, Double, Dotted, Dashed, or Groove.
3. Border Radius:
It usually helps you set the border radius to control corner roundness.
Caption:
1. Display:
These captions help you show or hide additional options (Text Alignment, Text Color, Typography).
2. Alignment:
You can set the align caption to left, right, center, or justified.
3. Text color:
This section is for the color of the caption text.
4. Typography:
Select the typography settings for the caption text (font style, font family, font size).
5. Text Shadow:
Using the Text Shadow effect in the Image Gallery widget is a great way to create an eye-catching design.
Once you’ve finished customizing your gallery, click on the PUBLISH button on the left panel’s bottom to publish your page. By clicking the eye symbol, you may also get a preview of your page.
Related Post
If you want to create an image gallery using Elementor Pro, this video might show you how to create an image gallery with Elementor in a hands-on way.
F) Conclusion
Now that you’ve learned how to create an image gallery with Elementor, you can do it. This method is easy to use. Please play around with it a little bit to see which one looks best. We think that will give you a good idea. We hope this guide will be useful.With a few clicks, you can create a gallery that will showcase your images in a stylish and professional way. So why not give Elementor a try today? Follow this tutorial on how to create an image gallery with Elementor.
If you have any questions, don’t be afraid to ask us. We are glad to help. Our Code Astrology team is made up of very skilled people. Our goal is to make your web experience better than before. You can contact us for custom plugins and theme development on our official site
