{"id":19711,"date":"2021-02-01T17:00:46","date_gmt":"2021-02-01T16:00:46","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=19711"},"modified":"2021-08-26T12:50:05","modified_gmt":"2021-08-26T10:50:05","slug":"how-to-create-wordpress-image-gallery","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-wordpress-image-gallery\/","title":{"rendered":"How to Create a WordPress Image Gallery"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]People love all things visual, so it\u2019s no wonder we use images to grab someone\u2019s attention and direct it where we want to, explain complex concepts in an easy-to-digest way, inspire people to take action, and help them learn new information more quickly. Brands understand well the unparalleled appeal of graphic content, so they create attractive image galleries on their websites to showcase their products and the services they offer. Creatives use them to exhibit their works and share them with the public, while travel bloggers make galleries to post and organize pictures from their trips.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To create a WordPress image gallery, you can use Elementor widgets, the WordPress\u2019s default gallery options, an <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-photo-gallery-plugins\/\">image gallery plugin<\/a>, or a <a href=\"https:\/\/qodeinteractive.com\/theme-shortcode\/image-gallery-wordpress-themes\">premium WordPress theme with an image gallery shortcode<\/a> for more styling and editing options. We will show you how all three methods work and explain how to effortlessly create captivating photo galleries on your WordPress website:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#create-wordpress-image-gallery-with-qi-addons-for-elementor\">How to Create a WordPress Image Gallery With Qi Addons for Elementor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#create-wordpress-image-gallery-without-plugin\">How to Create a WordPress Image Gallery Without a Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#create-wordpress-image-gallery-with-plugin\">How to Create a WordPress Image Gallery With a Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#create-wordpress-image-gallery-with-qode-interactive-premium-theme\">How to Create a WordPress Image Gallery With a Qode Interactive Premium Theme<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"create-wordpress-image-gallery-with-qi-addons-for-elementor\"><\/a>How to Create a WordPress Image Gallery With Qi Addons for Elementor<\/h2>\n<p>[\/vc_column_text][vc_column_text]If Elementor is your preferred page builder, the easiest way to create an image gallery on your website is by using our <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\">Qi Addons for Elementor<\/a> plugin &#8211; <strong>a collection of 60 completely free widgets that add more functionalities and power to Elementor.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Qi Addons for Elementor includes three widgets for creating image galleries \u2013 one is specifically devised for making standard photo galleries while the other two allow for crafting pinterest and masonry photo galleries. In this article, we will focus on the <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/image-gallery\/\">Image Gallery widget<\/a>, which includes a plethora of customization settings and layout options, enabling you to create image galleries exactly to your taste. If you would prefer watching a tutorial instead of reading, you can take a look at this video:[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/_F3KYPSUXpA\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you install and activate Qi Addons for Elementor on your WordPress website, open the page or a post where you wish to display a photo gallery and then add the <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/image-gallery\/\">Image Gallery<\/a> widget to it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Gallery-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Image Gallery Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Gallery-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Gallery-Widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Gallery-Widget-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Gallery-Widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, let\u2019s drag the widget to the right. The widget will appear empty because there aren\u2019t any pictures in the gallery yet. To change that, click on the image icon with the \u201c+\u201d sign, located in the left sidebar.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"539\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Add-Image.jpg\" class=\"attachment-full size-full\" alt=\"Add Image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Add-Image.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Add-Image-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Add-Image-768x427.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Add-Image-620x345.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, select the pictures you wish to display in the image gallery and click on <em><strong>Create a New Gallery<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Create-Gallery-1.jpg\" class=\"attachment-full size-full\" alt=\"Create Gallery\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Create-Gallery-1.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Create-Gallery-1-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Create-Gallery-1-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Create-Gallery-1-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, press the<em><strong> Insert Gallery<\/strong><\/em> button and the images will appear on your page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"570\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Insert-Gallery.jpg\" class=\"attachment-full size-full\" alt=\"Insert Gallery\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Insert-Gallery.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Insert-Gallery-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Insert-Gallery-768x452.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Insert-Gallery-620x365.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This is what our gallery looks like by default.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"425\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Default-Gallery.jpg\" class=\"attachment-full size-full\" alt=\"Default Gallery\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Default-Gallery.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Default-Gallery-300x132.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Default-Gallery-768x337.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Default-Gallery-620x272.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Our images are placed in three columns and two rows, and there are gaps between the photos. Now, if you would like to rearrange the pictures in your gallery, you can do so by opening the <em><strong>Edit Gallery<\/strong><\/em> window. To do that, click on the field for adding images, change the order of your photographs, and click on <em>Insert Gallery<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1018\" height=\"557\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Gallery-Reorder.gif\" class=\"attachment-full size-full\" alt=\"Image Gallery Reorder\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can now manipulate the <em><strong>Gallery Settings<\/strong><\/em> to make them suit your requirements. For example, you can <strong>enable custom links, activate a lightbox popup<\/strong> (if set to <em>Yes<\/em>, when someone clicks on an image, it will open in the same window and appear as an overlay), <strong>choose image proportions<\/strong> (thumbnail, landscape, portrait, etc.), <strong>specify the number of columns you\u2019d like your images to appear in, set column responsiveness<\/strong> (if you select <em>Custom<\/em>, you can specify the number of columns to display on various screen sizes), <strong>adjust the space between photos, select the image hover effect<\/strong> (if you select an image hover effect, you can also specify which part of the image will be zoomed in, e.g., center, top, bottom, etc.), as well as <strong>select the image overlay color and the overlay hover color.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>We decided to leave the lightbox popup effect active and keep original image proportions. We did, however, modify the space between items and set it to 25px. We also made changes to the column responsiveness. For the screen size of 681 x 768px (the portrait mode on laptops) we chose to display our gallery in two columns, and for 481 x 680 px (the landscape orientation on mobile phones) and 0 x 480 px (the portrait orientation on mobile phones) we opted for one column.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Gallery-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Gallery Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Gallery-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Gallery-Settings-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Gallery-Settings-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Gallery-Settings-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]When you finish making changes to your gallery in <em>Settings<\/em>, don\u2019t forget to press the <em><strong>Update<\/strong><\/em> button.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now, the gallery is, by default, displayed in grid. If you wish to make your content take up 100% of the screen\u2019s width, you first need to select the appropriate page layout. To do that, head over to Elementor\u2019s <em><strong>Settings<\/strong><\/em> and under <em><strong>Page Layout<\/strong><\/em> select <em><strong>Elementor Full Widt<\/strong><strong>h<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Page-Layout-Full-Width.jpg\" class=\"attachment-full size-full\" alt=\"Page Layout Full Width\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Page-Layout-Full-Width.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Page-Layout-Full-Width-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Page-Layout-Full-Width-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Page-Layout-Full-Width-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As you can see, we also have the <em><strong>Qi Full Width<\/strong><\/em> option under the <em>Page Layout<\/em> settings. That\u2019s because we\u2019ve installed the <a href=\"https:\/\/qodeinteractive.com\/qi-theme\/\">Qi Theme<\/a>, Qode Interactive\u2019s free WordPress theme. If you\u2019re also using the Qi Theme, you can feel free to select either Elementor\u2019s or Qi Theme\u2019s <em>Full Width<\/em> template as both have the same purpose.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you make adjustments to the page width, you should also change the section width. That can be done simply by clicking on the <em>Image Gallery<\/em> section and then going to Elementor\u2019s <em><strong>Layout<\/strong><\/em> options. Under <em><strong>Content Width<\/strong><\/em>, you need to select the <em><strong>Full Width<\/strong><\/em> option and your gallery will now span from one side of the screen to the other.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Layout.jpg\" class=\"attachment-full size-full\" alt=\"Layout\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Layout.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Layout-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Layout-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Layout-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>We decided to keep our image gallery in grid<\/strong> so this is what it ended up looking like after all the changes we\u2019ve made:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"529\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/End-Result.jpg\" class=\"attachment-full size-full\" alt=\"End Result\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/End-Result.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/End-Result-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/End-Result-768x419.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/End-Result-620x338.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As you can see, the Image Gallery widget offers a myriad of customization settings, allowing you to control every aspect of your image gallery. And best of all, with Qi Addons for Elementor, you get it completely free.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"create-wordpress-image-gallery-without-plugin\"><\/a>How to Create a WordPress Image Gallery Without a Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]Creating an image gallery without a plugin differs from one page builder to the next. We will share with you a step-by-step process using some of the most popular editors &#8211; the Classic Editor and Gutenberg.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">How to Create a WordPress Image Gallery in the Classic Editor<\/h3>\n<p>[\/vc_column_text][vc_column_text]First up, let\u2019s see how to create an image gallery using the Classic Editor.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You should open the page or post where you wish to add the gallery and click on <em><strong>Add Media<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Classic-Editor-Add-Media.jpg\" class=\"attachment-full size-full\" alt=\"Classic Editor Add Media\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Classic-Editor-Add-Media.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Classic-Editor-Add-Media-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Classic-Editor-Add-Media-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Classic-Editor-Add-Media-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This action will launch your media library. In the newly opened window, look at the menu <em><strong>Actions<\/strong><\/em> displayed on your left-hand side and select the <em><strong>Create Gallery<\/strong><\/em> option.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Create-Gallery.jpg\" class=\"attachment-full size-full\" alt=\"Create Gallery\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Create-Gallery.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Create-Gallery-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Create-Gallery-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Create-Gallery-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, choose the photos you wish to add to your gallery or upload new files. We highly advise you to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-optimize-images-for-web\/\">optimize images<\/a> first before adding them to your site.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can use WordPress\u2019 default editor to <strong>rename photos, add a description, caption, enter image link, specify image link target, and more.<\/strong> All options are featured on the right side of the menu. And when you\u2019re happy with all the tweaking, press the <em><strong>Create a New Gallery<\/strong><\/em> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Create-a-New-Gallery.jpg\" class=\"attachment-full size-full\" alt=\"Create a New Gallery\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Create-a-New-Gallery.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Create-a-New-Gallery-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Create-a-New-Gallery-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Create-a-New-Gallery-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can now <strong>edit your gallery<\/strong>, i.e. rearrange images, specify how many columns you want the gallery to have, adjust <em>Link To<\/em> settings, set the size of an image, and randomize their order if you like.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Edit-Gallery.jpg\" class=\"attachment-full size-full\" alt=\"Edit Gallery\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Edit-Gallery.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Edit-Gallery-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Edit-Gallery-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Edit-Gallery-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once everything is set, click on <em><strong>Insert Gallery<\/strong><\/em> in the bottom right corner of the page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Insert-Gallery-Button.jpg\" class=\"attachment-full size-full\" alt=\"Insert Gallery Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Insert-Gallery-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Insert-Gallery-Button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Insert-Gallery-Button-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Insert-Gallery-Button-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">How to Create a WordPress Image Gallery in Gutenberg<\/h3>\n<p>[\/vc_column_text][vc_column_text]To start making your image gallery in Gutenberg, you need to add the <em><strong>Gallery<\/strong><\/em> block to your page or post.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Gallery-Block.jpg\" class=\"attachment-full size-full\" alt=\"Gallery Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Gallery-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Gallery-Block-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Gallery-Block-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Gallery-Block-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, select the files from your media library or add the new ones, edit them according to your preferences (customization options are the same as in the Classic editor), and click the <em><strong>Create a New Gallery<\/strong><\/em> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Create-a-New-Gallery.jpg\" class=\"attachment-full size-full\" alt=\"Create a New Gallery\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Create-a-New-Gallery.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Create-a-New-Gallery-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Create-a-New-Gallery-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Create-a-New-Gallery-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Gutenberg allows you to do some more editing once the gallery is added to your site. For instance, you can <strong>insert a caption for the gallery, specify the number of columns, choose between thumbnail and full size for your images, add links, and crop images to make them align.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"650\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Gallery-Options.jpg\" class=\"attachment-full size-full\" alt=\"Gallery Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Gallery-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Gallery-Options-300x201.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Gallery-Options-768x515.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Gallery-Options-620x416.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"create-wordpress-image-gallery-with-plugin\"><\/a>How to Create a WordPress Image Gallery With a Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]Whenever you wish to add functionality to WordPress and enhance its power, the easiest way to go about that is by adding plugins to your site. If you\u2019re not using Elementor and, therefore, can\u2019t install the Qi Addons pack, you can try one of the <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-photo-gallery-plugins\/\">photo gallery plugins<\/a> we reviewed in one of our previous articles. We will now show you how to create an image gallery using the popular Photo Gallery plugin by 10Web.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Photo-Gallery-by-10Web.jpg\" class=\"attachment-full size-full\" alt=\"Photo Gallery by 10Web\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Photo-Gallery-by-10Web.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Photo-Gallery-by-10Web-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Photo-Gallery-by-10Web-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Photo-Gallery-by-10Web-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/wordpress.org\/plugins\/photo-gallery\/\" target=\"_blank\" rel=\"noopener\">Photo Gallery<\/a> by 10Web is a users\u2019 staple when it comes to creating attractive photo galleries in WordPress. This plugin currently counts more than 300.000 active downloads from the official WordPress plugin repository. Several <a href=\"https:\/\/10web.io\/plugins\/wordpress-photo-gallery\/#pricing_plans\" target=\"_blank\" rel=\"noopener\">premium plans<\/a> are available as well with the prices ranging from $30 to $100.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first thing you should do upon installing the plugin on your site is configure and personalize its global options. Photo Gallery is filled to the brim with customization settings allowing you to control every single aspect of your gallery. To explore them all, head over to <em><strong>Photo Gallery &gt; Global Settings<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<em><strong>General<\/strong><\/em> tab is where you can decide on <strong>what will happen after users click on gallery thumbnails<\/strong> (open lightbox, redirect them to an URL, or decide to forego any action), set the quality of gallery images, <strong>activate lazy load<\/strong>, enable preload images, disable visitors from using right-click on your images, auto-fill metadata, and heaps more.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"601\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Global-Settings.jpg\" class=\"attachment-full size-full\" alt=\"10Web Global Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Global-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Global-Settings-300x186.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Global-Settings-768x476.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Global-Settings-620x385.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To choose a gallery layout, select the <em><strong>Gallery Views<\/strong><\/em> tab. The free version enables you to pick between thumbnails, masonry, slideshow, and the image browser layout. Premium plans, on the other hand, include masonry, mosaic, blog style, and carousel views, as well as the possibility to create customized gallery views by tweaking the colors, choosing desired font types, altering control buttons, to name a few.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There is also an option to <strong>set the thumbnail size, the number of gallery columns, enable pagination, add a search box, show gallery and image description, etc.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"571\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Gallery-Views.jpg\" class=\"attachment-full size-full\" alt=\"10Web Gallery Views\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Gallery-Views.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Gallery-Views-300x177.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Gallery-Views-768x453.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Gallery-Views-620x365.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This powerful plugin allows you to <strong>group galleries<\/strong> and showcase all of them together. All settings regarding group galleries are placed under the <em><strong>Group of Gallery Views<\/strong><\/em> tab. They are similar to those from <em>Gallery Views<\/em>, except they refer to groups.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you enable the lightbox effect, open the <em><strong>Lightbox<\/strong><\/em> tab to select the animation effect for image lightbox, its duration, activate lightbox auto-play, enable filmstrip, etc.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"697\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Lightbox.jpg\" class=\"attachment-full size-full\" alt=\"10Web Lightbox\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Lightbox.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Lightbox-300x216.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Lightbox-768x552.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Lightbox-620x446.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There is also an option that enables you to add watermark to your images, allow specific <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-user-roles\/\">user roles<\/a> to edit your galleries, add advertisements, embed your entire Instagram account, and a myriad of other practical features that allow you to create a gallery to your liking.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And to make your first WordPress image gallery, go to <em><strong>Photo Gallery &gt; Add Galleries\/Images<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Add-Gallery.jpg\" class=\"attachment-full size-full\" alt=\"10Web Add Gallery\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Add-Gallery.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Add-Gallery-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Add-Gallery-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Add-Gallery-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can <strong>enter a title for your gallery, set a cover image for it, add slugs, a description, and select gallery content type.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"702\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Name.jpg\" class=\"attachment-full size-full\" alt=\"10Web Name\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Name.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Name-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Name-768x556.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Name-620x449.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Below all of these settings, you have the option to add images, import files from the media library, embed media, or opt for the social bulk embed.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Add-Images.jpg\" class=\"attachment-full size-full\" alt=\"10Web Add Images\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Add-Images.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Add-Images-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Add-Images-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Add-Images-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you upload the desired image files, you can <strong>modify their thumbnail, insert a photo title and description, set up a redirect URL, and add tags.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Image-Options.jpg\" class=\"attachment-full size-full\" alt=\"10Web Image Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Image-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Image-Options-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Image-Options-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Image-Options-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you click on <em><strong>Edit<\/strong><\/em>, the plugin lets you <strong>apply one of the several available filters on your image, as well as flip and rotate your file<\/strong> if needed.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Filters.jpg\" class=\"attachment-full size-full\" alt=\"10Web Filters\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Filters.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Filters-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Filters-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/10Web-Filters-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To make the Photo Gallery plugin even more practical, you can <strong>power it up with a few handy add-ons<\/strong>. Use them to enable the import and export functionality on your site and link and display Google photos in your gallery.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"create-wordpress-image-gallery-with-qode-interactive-premium-theme\"><\/a>How to Create a WordPress Image Gallery With a Qode Interactive Theme<\/h2>\n<p>[\/vc_column_text][vc_column_text]Almost all of Qode Interactive themes come with the Image Gallery shortcode which makes gallery creation as easy as it can be. Even if you\u2019re still new to WordPress, you will find that the plugin is simple to use no matter the page builder you use. We will show you how it works in WPBakery (the shortcode looks the same in Elementor) using our <a href=\"https:\/\/qodeinteractive.com\/wordpress-theme\/amedeo-multi-concept-artist-and-creative-agency-theme\/\">Amedeo<\/a> theme.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First up, let\u2019s add the plugin to a page where we wish to add a gallery.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Gallery-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Image Gallery Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Gallery-Shortcode.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Gallery-Shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Gallery-Shortcode-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Gallery-Shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The shortcode allows you to create a gallery slider or the classic kind of gallery. You can see both types in Amedeo <a href=\"https:\/\/amedeo.qodeinteractive.com\/elements\/image-gallery\/\">here<\/a>. We will focus on the classic type (we\u2019ve named it \u201cImage Grid\u201d within the shortcode).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let\u2019s open the shortcode options, select <em><strong>Gallery Type &gt; Image Grid<\/strong><\/em>, and upload desired images.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"600\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Gallery-Grid.jpg\" class=\"attachment-full size-full\" alt=\"Image Gallery Grid\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Gallery-Grid.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Gallery-Grid-300x186.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Gallery-Grid-768x476.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Gallery-Grid-620x384.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Most of our themes let you choose between several gallery styles, depending on your requirements and preferences. If you can\u2019t decide on just one, no worries because you can add as many gallery types as you like to a page.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As for the <em><strong>Image Size<\/strong><\/em> option, if you leave this field empty (as we did), the shortcode will use its default values. To change them, simply enter the dimensions you wish.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"520\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Gallery-Options.jpg\" class=\"attachment-full size-full\" alt=\"Image Gallery Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Gallery-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Gallery-Options-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Gallery-Options-768x412.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Image-Gallery-Options-620x333.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moreover, the plugin allows you to customize <em><strong>Image Behavior<\/strong><\/em>. You can choose <em>Open Lightbox, Open Custom Link, Zoom<\/em> and <em>Grayscale<\/em>. We\u2019re going with the lightbox option here.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"520\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Open-Lightbox.jpg\" class=\"attachment-full size-full\" alt=\"Open Lightbox\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Open-Lightbox.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Open-Lightbox-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Open-Lightbox-768x412.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Open-Lightbox-620x333.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Number of Columns<\/strong> is another handy option that lets you modify the number of columns you would like to display in your gallery. In this particular theme, you can pick between one and six columns. We\u2019ve selected three.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"520\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Number-of-Columns.jpg\" class=\"attachment-full size-full\" alt=\"Number of Columns\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Number-of-Columns.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Number-of-Columns-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Number-of-Columns-768x412.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Number-of-Columns-620x333.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And lastly, you can also <em><strong>Set Space Between Items<\/strong><\/em>. We\u2019re going to set this to <em>Normal (15)<\/em>, which means that the padding around an item is going to be 15 px and space between items 30px.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"524\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Space-Between-Items.jpg\" class=\"attachment-full size-full\" alt=\"Space Between Items\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Space-Between-Items.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Space-Between-Items-300x162.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Space-Between-Items-768x415.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Space-Between-Items-620x335.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]By setting everything the way we did, the final result will look like the one from our demo.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"586\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Amadeo-Image-Gallery.jpg\" class=\"attachment-full size-full\" alt=\"Amadeo Image Gallery\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Amadeo-Image-Gallery.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Amadeo-Image-Gallery-300x181.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Amadeo-Image-Gallery-768x464.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Amadeo-Image-Gallery-620x375.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Words<\/h2>\n<p>[\/vc_column_text][vc_column_text]Image-rich content is an indispensable tool in bringing you and your work closer to your audience. Appealing and well-organized photo galleries will help you retain your audiences\u2019 attention, keep them on your website longer, and increase user engagement.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To create a WordPress image gallery, you can either rely on the default features of the platform, use some pretty cool widgets and premium themes, or install a photo gallery plugin.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As you can see, the powerful and free Qi Addons for Elementor plugin is a good choice because it packs a myriad of customization options, allowing you to craft an image gallery to your taste. Alternatively, you can purchase a Qode Interactive premium theme that contains the powerful Image Gallery shortcode. You could also try the great Photo Gallery plugin by 10Web &#8211; the free version includes lots of handy features, while the premium edition raises the bar even higher.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The bottom line is, the WordPress\u2019 default gallery features will suffice if you wish to create a simple photo gallery. However, if you would like to have more editing options at hand, go for either Qi Addons, a premium Qode Interactive theme with the Image Gallery plugin, or a third party plugin. If you would like to save some money and still have lots of cool options at hand, we suggest you choose Qi Addons for Elementor. You can install it free of charge and get another 59 widgets, including a variety of slider and gallery widgets (besides the standard gallery) that will allow you to showcase your images in a plethora of immersive and attractive ways.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Learn how to quickly create a WordPress image gallery using the platform\u2019s default options or one of the best image gallery plugins on the market<\/p>\n","protected":false},"author":4,"featured_media":19774,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[4,13],"class_list":["post-19711","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/19711","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=19711"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/19711\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/19774"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=19711"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=19711"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=19711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}