How to add a Photo Gallery to a Website. The Complete Tutorial

Image Gallery is an extremely useful instrument, it can be beneficial in many different ways. A Gallery will beautify ecommerce websites, personal blogs, and enhance portfolios. It will highlight all the best works and push talents over and beyond. Photo Gallery might be a great idea for photographers, bloggers, artists, designers, event and wedding agencies.

Photo Gallery widget for website

Adding images and videos separately one by one to the website is not that difficult, however, you might come across some difficulties in uniting them into a coherent element of a website. It’s also quite problematic to build a catchy and professional grid out of them. 

Fortunately, you can find tons of trendy, minimal and clean Gallery widgets with super creative image arrangements. 

Photo Gallery widget is a tool which allows you to organize a series of photos in close to no time, because all the materials and components in it are ready-to-use. It is totally user- and beginner-friendly. You simply upload images to the gallery, customize texts, copy installation code and paste it to the website’s code. It’s easy as abc, and even a total newbie will be able to do it.

There are thousands of photo galleries on the internet, but you should look no further. Start using Elfsight Photo Gallery, as it comes with numerous amazing features:

• Aptitude to determine user gallery width and an opportunity to check the gallery on tabs and smartphones
• Seven different and stunning layouts: common Grid, Vertical and Horizontal Masonry, Slider, and others.
• Reorganize images as necessary or select random option to present them mixed up
• Heaps of text styling settings
• Chance to attach any number of videos and images
• Variable form of photos: from rounded to rectangle
• Different actions on photo click: Open image in a popup, Redirect to a link, and Nothing

Coding will never be necessary if you use a ready-made widget by Elfsight. Try all the features of Photo Gallery in the free online demo, and create your own widget without registration there.

Photo Gallery by Elfsight can be integrated into all the most popular platforms. It will look and function great on Squarespace, WordPress, Blogger, Webflow, and Wix. It will be a perfect match for ecommerce website builders and CMS, such as Shopify and Weebly. Employ all the sample materials and have a widget up and running right after reading the processes of installation.

How to add a Photo Gallery with the help of GTM

As we’ve mentioned above, almost all the most popular platforms for building websites allow anyone to add a custom piece of HTML code (this is what we’ll need while adding a widget to a website). However, a small number of them doesn’t create such an opportunity. There is no need to worry, and you won’t need to buy their own solution in any case. You will need to use a special instrument called GTM (or Google Tag Manager). 

It creates a tag and a trigger to activate it on a website. You’ll have to have only two lines of Elfsight installation code, and that’s it. Here’s how the process looks like for adding Photo Gallery with the help of GTM:

1. Log in or sign up to Google Tag Manager
2. Make a new tag there, select ‘Custom HTML’
3. Put the first line of the Elfsight installation code to the created tag
4. Create a trigger and the tag to the web page
5. Save the tag and publish the changes

Well done! You are going to have images on a website as soon as this.

How to create an HTML Photo Gallery

You always have an opportunity to create a Photo Gallery in HTML and CSS, but it won’t be easy to code it’s behavior and appearance. 

You can use a ready-made solution called Photo Gallery widget and make your life a whole lot simpler. It will allow you to build a gallery without needing to program. All its templates will be your faithful assistants, and you’ll create your unique design for the Gallery with the help of visual configurator and minimum number of settings. 

After all the configurations, you’ll get just two lines of code, which contain all the information of your created widget. Simply paste it to the code of a web page where you need to present a Gallery, and here’s what you’ll have to do:

1. Create widget in online configurator
2. Copy installation code
3. Open HTML of the web page where you’ll need to paste the widget
4. Paste widget’s code where you need it to appear
5. Save the changes and check your website

Wonderful job! Your Photo Gallery will appear there as soon as this! You can also explore other features of the Gallery and the process in a video guide on this page: Photo Gallery for HTML.

How to add the Photo Gallery to Squarespace

Squarespace is among the very best platforms for those who create sites for their businesses. Most likely you need to save your time and truly need your files to look masterly on the site. In this case, the best choice is to use an exclusive plugin. 

Benefits you get by using a plugin

1. You don’t need to code anything in your Squarespace Gallery
2. There are a lot of templates offering professional ideas for your Gallery
3. You build the Photo Gallery yourself, with no web designer or developer, and you should never bother about the widget design and functionality
4. You can test the plugin in a free online demo

With the Elfsight plugin you can instantly spot any galleries on the site, enhance the UX in just seconds and personalize the Photo Gallery the way you need.

Features of the Elfsight Photo Gallery for Squarespace

• Rearrange visuals as you need or select random option to mix them
• Seven different and stunning layouts: classical Grid, Horizontal and Vertical Masonry, Slider and others
• Chance to add as many photos and videos as you want
• Changeable form of photos: from rounded to rectangle
• Various actions on photo click: Redirect to a link, Open image in a popup, and Nothing
• Capacity to determine custom gallery width and a chance to test the gallery look on tabs and smartphones
• Loads of text formatting options

You can get a closer look at the widget in the online configurator without registration. 

What is more, take into consideration that there are 6 ready-made adjustable templates which you can quickly discover in the free online demo. You are free to discover how to show different types of Photo Gallery, whether it’s for a photographer, an interior designer, or product seller. Here are some of the examples, have a look: 

• Wedding Photographer
• Interior Designer
• Product Manager

How to add a Photo Gallery plugin to a Squarespace website

You can add the Embed plugin to Squarespace in diverse ways. You can effortlessly do it on your own after minding a video and reading our guideline on this page. 

Here are some more methods to install the Photo Gallery on Squarespace. For instance, you can attach the tool with the help of Google Tag manager. 

Install the plugin through Squarespace admin panel

1. Log into the website admin panel
2. Near the area where you need to present the widget, click ‘Edit’
3. Find the option ‘Code’
4. Paste installation code to the ‘Code’ block
5. Save the changes

This is like this, your widget will appear on the web page as soon as this! 

Ask a professional Elfsight support team for help:)

Yes, in case you use a widget on any paid plan, you can always drop them a note and they’ll be happy to install the Photo Gallery plugin for you. Barely contact them through the Elfsight Help Center and obtain the Photo Gallery plugin installed by professionals!

How to add the Photo Gallery to WordPress

WordPress is among the very best platforms for those who build sites for their businesses. Probably you want to save your time and truly wish your files to look professional on the site. In this case, the wisest choice is to apply an exclusive plugin. 

Benefits you get by using a plugin

1. You don’t have to code anything in your WordPress Gallery
2. There are many templates presenting professional ideas for your Gallery
3. You create the Photo Gallery on your own, with no web designer or developer, and you will never bother about the widget functionality and design
4. You have an option to try out the widget in a free visual configurator

With the Elfsight plugin you can promptly place any galleries on the website, strengthen the UX in just minutes and customize the Photo Gallery anyhow you want.

Features of the Elfsight Photo Gallery for WordPress website

• Variable form of photos: from rectangle to rounded
• Various actions on image click: Open image in a popup, Nothing, Redirect to a link
• 7 different and stunning layouts: Slider, Vertical and Horizontal Masonry, classical Grid and others
• Heaps of text formatting settings
• Reorganize images as you need or choose random option to present them all mixed together
• Aptitude to set user-defined gallery width and an option to check the gallery look on smartphones and tablets
• Option to attach any number of photos and videos

You can get a closer look at the widget in the online configurator without registration. 

In addition, take into consideration that there are six professional customizable templates which you are free to quickly find in the free online demo. You can consider how to show diverse types of Photo Gallery, whether it’s for a product seller, an interior designer, or a photographer. Here are some of the examples, have a look:

• Wedding Photographer
• Interior Designer
• Product Manager

How to add a Photo Gallery plugin to a WordPress website

There’s a chance to add the Embed plugin to WordPress in a few various ways. You can easily do it on your own after watching a video and viewing our guideline on this page. 

Below you’ll find a few more methods to add the Photo Gallery to WordPress. For example, you may attach the widget with the help of Google Tag manager. 

Install the plugin through WordPress admin panel

1. Copy your installation code at Elfsight apps
2. Go to WordPress admin panel
3. Go to Pages in left-hand menu and select the page to display the widget
4. Add a custom HTML block to the required part of the page
5. Paste your widget code to this block
6. Update the web page

This is like this, your widget will appear on the website right after you finish! 

Ask a professional Elfsight support team for help:)

Yes, in case your widget is on any paid plan, you are always most welcome to ask them for installation and they’ll be happy to install the Photo Gallery plugin for you. Barely contact them through the Elfsight Help Center and acquire the Photo Gallery widget installed by professional developers!

How to add the Photo Gallery to Blogger

Blogger is among the main platforms for anyone creating a site for their business. It’s pretty obvious that you are willing to save your money and time, and the best idea here is to use a no-code solution called plugin. 

Benefits you get by using a plugin

1. You don’t need to write JavaScript code in your Blogger Gallery
2. There are various templates putting forward professional ideas for your Gallery
3. You make the Photo Gallery on your own, without a web developer or designer, and you will never bother about the widget's design and functionality
4. You can test the widget in a online demo

With the Elfsight plugin you can instantly spot any galleries on the site, improve the UX in mere seconds and personalize the Photo Gallery anyhow you need. 

Features of the Elfsight Photo Gallery for Blogger website

• Loads of text styling possibilities
• Capacity to establish user-defined gallery width and an option to test the gallery on tablets and smartphones
• Seven different and stunning layouts: classical Grid, Vertical and Horizontal Masonry, Slider and others
• Reorder visuals as necessary or choose random option to present them all mixed together
• Changeable form of pictures: from rectangle to rounded
• Different actions on photo click: and Nothing, Open image in a popup, Redirect to a link
• Opportunity to attach as many photos and videos as you want

You are free to get a closer look at the widget in the online configurator for free. 

Moreover, take into account that there are six ready-made customizable templates which you are free to quickly discover in the free online demo. You are welcome to explore how to present diverse types of Photo Gallery, whether it’s for a photographer, an interior designer, or product seller. Here you can find some of the templates, have a look: 

• Wedding Photographer
• Interior Designer
• Product Manager

How to add a Photo Gallery plugin to a Blogger website

You can add the plugin to Blogger in different ways. You may smoothly do it yourself after watching a video and viewing our guideline on this page. 

Here are some more methods to add the Photo Gallery to Blogger. For example, you can add the tool with the help of Google Tag Manager. 

Install the plugin through Blogger admin panel

1. Log in to your Blogger Admin Panel
2. Go to “Pages” and select the required page
3. Press “HTML” button to open the page's HTML editor
4. Paste the widget's code to HTML Source Editor window 
5. Press “Update”

That’s it, your widget will show up on the website right after you finish! 

Ask a professional Elfsight support team for help:)

And, of course, in case you use a widget on any paid plan, you can always drop them a note and they’ll be happy to install the Photo Gallery widget for you. Just contact them through the Elfsight Help Center and obtain your Photo Gallery widget added by professional developers!

How to add the Photo Gallery to Webflow

Webflow is one of the main platforms for those who build sites for small businesses. Most likely you want not to waste time and truly need your files to look masterly on the website. In this case, the wisest decision is to use a special widget. 

Benefits you get by using a plugin

1. You don’t have to write JS code in your Webflow Gallery
2. There are numerous templates presenting professional ideas for your Gallery
3. You make the Photo Gallery yourself, without a web designer or developer, and you will never bother about the widget functionality and design
4. You can test the widget in a online demo

With the Elfsight plugin you may promptly place any galleries on the website, strengthen the UX in just minutes and adjust the Photo Gallery the way you need.

Features of the Elfsight Photo Gallery for Webflow website

• Seven different and stunning layouts: Slider, Horizontal and Vertical Masonry, classy Grid and others
• Capacity to determine user-defined gallery width and a chance to test the gallery look on smartphones and tabsOption to upload as many images and videos as you want
• Tons of text formatting options
• Reorganize photos as necessary or select random option to present them mixed up
• Changeable form of images: from rounded to rectangle
• Various actions on photo click: Nothing, Open image in a popup, Redirect to a link

You are free to explore the widget in greater detail in the online configurator for free. 

Also, take into consideration that there are six professional adjustable templates which you can quickly find in the free online demo. You can consider how to display various types of Photo Gallery, whether it’s for a photographer, product seller, or an interior designer. Below, are some of the examples, enjoy: 

• Wedding Photographer
• Interior Designer
• Product Manager

How to add a Photo Gallery plugin to a Webflow website

You can add the plugin to Webflow in various ways. You may effortlessly do it yourself after checking our guideline and watching a video on this page. 

Below you’ll find a few more ways to install the Photo Gallery on Webflow. For example, you can attach the widget with the help of Google Tag Manager. 

Install the plugin through Webflow admin panel

1. Log into the admin panel, choose a website for the widget. 
2. Click “Add Elements”
3. Drag and drop “Embed” element to the place where you need to display the widget. 
4. Paste the installation code to this block and click “Save and Close”. 
5. To visually separate the widget from the rest of the content, we recommend adding 20 pixels margins. 
6. Publish the changes.

This is like this, your widget will show up on the website right after you finish! 

Ask a professional Elfsight support team for help:)

Yes, if you use a widget on any paid plan, you are always most welcome to drop them a line and they’ll be happy to add the Photo Gallery widget for you. Just reach them out through the Elfsight Help Center and get the Photo Gallery plugin installed by professionals!

How to add the Photo Gallery to Wix

Wix is among the very best platforms for anyone creating a website for their business. It’s pretty apparent you need to save your money and time, and the best idea here is to use an already created no-code solution called plugin. 

Benefits you get by using a plugin

1. You don’t have to write JavaScript code in your Wix Gallery
2. There are numerous templates putting forward professional ideas for your Gallery
3. You build the Photo Gallery yourself, with no web designer or developer, and you never have to bother about the widget functionality and design
4. You can try out the widget in a online demo

With the Elfsight plugin you can promptly place any galleries on the website, enhance the UX in just seconds and adjust the Photo Gallery the way you want.

Features of the Elfsight Photo Gallery for Wix website

• Option to upload any number of videos and images
• Capacity to set user gallery width and an option to check the gallery on tablets and smartphones
• Seven different and stunning layouts: Horizontal and Vertical Masonry, classical Grid, Slider and others
• Heaps of text formatting options
• Changeable form of images: from rounded to rectangle
• Various actions on image click: Open image in a popup, Redirect to a link, and Nothing
• Reorganize images as necessary or select random option to present them all mixed together

You are free to explore the widget in greater detail in the online configurator without registration. 

Also, take into account that there are 6 professional adjustable templates that you can conveniently find in the free online demo. You can discover how to display different types of Photo Gallery, whether it’s for an interior designer, a photographer, or product seller. Below, you can find some of the examples, enjoy: 

• Wedding Photographer
• Interior Designer
• Product Manager

How to add a Photo Gallery plugin to a Wix website

There’s a chance to add the Embed plugin to Wix in a few different ways. You may smoothly do it on your own after reading our guideline and watching a video on this page. 

Here are some more ways to add the Photo Gallery to Wix. For example, you may add the tool with the help of Google Tag Manager. 

Install the plugin through Wix admin panel

1. Log into Wix admin panel and click ‘Edit site’
2. Click a Plus icon in the left panel and choose ‘Embed’ section
3. Pick ‘HTML iframe
4. Move the widget block where you want it to appear and modify its size
5. Click ‘Enter code’ and paste the installation code there.
6. Click ‘Apply’

That’s it, your widget will appear on the web page as soon as this! 

Ask a professional Elfsight support team for help:)

And, of course, if your widget is on any paid plan, you can always ask them for installation and they’ll be happy to add the Photo Gallery plugin for you. Just reach them out through the Elfsight Help Center and get the Photo Gallery widget installed by professionals!

How to add the Photo Gallery to Shopify

Wix is among the main platforms for those who make sites for their businesses. Very likely you want not to waste your time and genuinely want your files to appear masterly on the site. In this case, the best decision is to apply a special widget. 

Benefits you get by using a plugin

1. You don’t need to code anything in your Wix Gallery
2. There are numerous templates putting forward professional ideas for your Gallery
3. You create the Photo Gallery on your own, with no web developer or designer, and you would never bother about the widget design and functionality
4. You may check the plugin in a free visual editor

With the Elfsight plugin you can promptly position any galleries on the site, improve the UX in mere seconds and personalize the Photo Gallery the way you want. 

Features of the Elfsight Photo Gallery for Shopify

• Capacity to establish custom gallery width and an option to check the gallery on smartphones and tablets
• Heaps of text formatting settings
• Opportunity to upload any number of photos and videos
• 7 different and stunning layouts: common Grid, Slider, Vertical and Horizontal Masonry and others
• Changeable form of photos: from rectangle to rounded
• Various actions on image click: Redirect to a link, Open image in a popup, and Nothing
• Reorder visuals as necessary or choose random option to mix them

You can explore the widget in more detail in the online configurator without registration. 

In addition, bear in mind that there are six professional customizable templates which you can easily discover in the free online demo. You are free to explore how to show various types of Photo Gallery, whether it’s for an interior designer, a photographer, or product seller. Here you can find some of the templates, have a look: 

• Wedding Photographer
• Interior Designer
• Product Manager

How to add a Photo Gallery plugin to a Shopify website

You can add the Embed plugin to Shopify in diverse ways. You may smoothly do it on your own after minding a video and checking our guideline on this page. 

Below you’ll find some more methods to install the Photo Gallery on Shopify. For instance, you can attach the widget with the help of Google Tag Manager. 

Install the plugin through Shopify admin panel

1. Log in to your Shopify Admin Panel
2. Go to the “Online Store” section and press “Customize”. 
3. Click “Add Section” in the left-hand menu and then click “Add” in “Custom Content”. 
4. Remove the pre-installed sections. 
5. Click “Add Content” and select “Custom HTML”. 
6. Paste the widget’s installation code to the “HTML” field. 
7. Save the changes.

That’s it, your widget will come out on the web page as soon as this! 

Ask a professional Elfsight support team for help:)

And, of course, in case your widget is on any paid plan, you are always most welcome to drop them a line and they’ll be happy to install the Photo Gallery widget for you. Just reach them out through the Elfsight Help Center and get your Photo Gallery plugin added by professionals!

How to add the Photo Gallery to Weebly

Weebly is one of the best platforms for those who create websites for their businesses. It’s somewhat apparent that you wish to save your time and money, and the best choice here is to use a ready-made instrument called a plugin. 

Benefits you get by using a plugin

1. You don’t have to code anything in your Weebly Gallery
2. There are various templates putting forward professional ideas for your Gallery
3. You make the Photo Gallery yourself, with no web designer or developer, and you never have to bother about the widget's design and functionality
4. You have an option to try out the widget in a online demo

With the Elfsight plugin you may immediately position any galleries on the site, enhance the UX in mere minutes and customize the Photo Gallery the way you need. 

Features of the Elfsight Photo Gallery for Weebly

• Reorder photos as required or choose random option to mix them
• Opportunity to upload as many videos and images as you wish
• 7 different and stunning layouts: classy Grid, Slider, Vertical and Horizontal Masonry and others
• Ability to set custom gallery width and a chance to test the gallery on smartphones and tablets
• Heaps of text styling settings
• Variable form of images: from rectangle to rounded
• Different actions on image click: Redirect to a link, Nothing, Open image in a popup

You can explore the widget in more detail in the online configurator without registration. 

What is more, keep in mind that there are six premade customizable templates that you are free to easily discover in the free online demo. You are free to consider how to show various types of Photo Gallery, whether it’s for an interior designer, product seller, or a photographer. Below, are some of the examples, have a look: 

• Wedding Photographer
• Interior Designer
• Product Manager

How to add a Photo Gallery plugin to a Weebly website

There’s a chance to add the Embed plugin to Weebly in a few diverse ways. You may easily do it yourself after viewing our guideline and minding a video on this page. 

Here are a few more ways to install the Photo Gallery on Weebly. For instance, you may add the tool with the help of Google Tag Manager. 

Install the plugin through Weebly admin panel

1. Log in to your Weebly Admin Panel, click on “Edit Site”. 
2. Drag and drop “Embed Code” element to the right page area. 
3. Click on the block on the page and then press “Edit Custom HTML”. 
4. Paste the widget’s installation code into the block and publish the changes.

That’s it, your widget will come out on the website right after you finish! 

Ask a professional Elfsight support team for help:)

Yes, if your widget is on any paid plan, you can always ask them for installation and they’ll be happy to install the Photo Gallery plugin for you. Simply reach them out through the Elfsight Help Center and obtain the Photo Gallery widget added by professional developers!

Photo Gallery Examples

You can find a great lot of Photo Gallery templates of Elfsight widget. They might be helpful for everyone: from photographers to designers, from online sellers to interior designers. Be inspired by our beautiful and professional ready-prepared templates!

Traveler

This template is amazing for anyone wishing to present gorgeous landscapes and spectacular sceneries. Thumbnail layout is used here to highlight the best photos and for users to consider the most important details.

Product seller

This example of Photo Gallery will be perfect for anyone selling goods online. You customers will be able to see the chosen item in greater details, and with vertical Thumbnail layout you'll be able to present them in the most favourable light.

Photo Shoots

You'll be able to present vertical images for users to better consider the brightest visuals of yours. It's an absolute way to show your photographer talent and promote your job.

Wishing to see more splendid templates, or even choose the one to copy and paste to the website? You can try their demos and the way they function from your users' perspective on this page.

FAQ

Mastering a Photo Gallery widget for websites, you might wish to learn more about its settings, or about some other solutions and their differences from the Elfsight Gallery. Here, we've combined a couple more questions about the Photo Gallery and answers to them. Enjoy!