{"id":379,"date":"2020-01-06T08:21:51","date_gmt":"2020-01-06T08:21:51","guid":{"rendered":"http:\/\/www.gutentor.com\/weblog\/?p=379"},"modified":"2020-01-06T08:21:51","modified_gmt":"2020-01-06T08:21:51","slug":"how-to-add-gallery-in-wordpress-website","status":"publish","type":"post","link":"https:\/\/www.gutentor.com\/weblog\/how-to-add-gallery-in-wordpress-website\/","title":{"rendered":"How to Add Gallery in WordPress Website (with Gutentor)?"},"content":{"rendered":"<p>Image galleries are the best way to showcase your images and keep your visitors interested. In fact, the gallery is one of the essential page of every website where you display the related images along with a description in different ways.\u00a0There are basically three types of image gallery layout on a website. They are explained below &#8211;<\/p>\n<h3>Grid Gallery<\/h3>\n<p>A grid gallery is a column-based gallery where images are displayed in a symmetrical grid layout \u2013 all images are displayed in the same height-width dimension and each image is vertically and horizontally aligned.<\/p>\n<h3>Tiles Gallery<\/h3>\n<p>A tiles gallery is similar to a grid gallery in that images are displayed in a grid layout. But unlike the grid gallery where it\u2019s column-based, the tiles gallery is row-based. The result is a mosaic-style gallery like this:<\/p>\n<h3>Masonry gallery<\/h3>\n<p>A masonry gallery is a cascading grid-style gallery where images are positioned like irregular bricks in an old stone wall. It does not have fixed row heights. The images are shown as it is on the gallery layout.\u00a0 This is one of the benefits of having a masonry gallery because the size of your images is not taken into consideration \u2013 your images are not resized to a uniformed dimension and thus, don\u2019t lose their quality.<\/p>\n<h2>How to Design Gallery in WordPress Gutentor?<\/h2>\n<p>In this article, we will show you how to create beautiful image galleries using the Gutentor Plugin.\u00a0Gutentor &#8211; a Gutenberg based page builder offers several stunning gallery layouts for you to choose from, including masonry, grid, and tiles. <strong><a href=\"https:\/\/www.bestwpresources.com\/gutentor\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gutentor<\/a><\/strong> is no doubt, the best plugin for building a stunning website without touching a single line of code. You just have to drag and drop the readymade block and template to create a website.<\/p>\n<p>Check out some designs of Gutentor-<\/p>\n<p><img decoding=\"async\" class=\"wp-image-380 size-full aligncenter\" src=\"http:\/\/www.gutentor.com\/weblog\/wp-content\/uploads\/sites\/2\/2020\/01\/Gallery-Design-1.jpg\" alt=\"Gallery Design 1xa\" width=\"1000\" height=\"947\" srcset=\"https:\/\/www.gutentor.com\/weblog\/wp-content\/uploads\/sites\/2\/2020\/01\/Gallery-Design-1.jpg 1000w, https:\/\/www.gutentor.com\/weblog\/wp-content\/uploads\/sites\/2\/2020\/01\/Gallery-Design-1-300x284.jpg 300w, https:\/\/www.gutentor.com\/weblog\/wp-content\/uploads\/sites\/2\/2020\/01\/Gallery-Design-1-768x727.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p><img decoding=\"async\" class=\"wp-image-381 size-full aligncenter\" src=\"http:\/\/www.gutentor.com\/weblog\/wp-content\/uploads\/sites\/2\/2020\/01\/gallery-design-2.jpg\" alt=\"gallery design 2\" width=\"1000\" height=\"734\" srcset=\"https:\/\/www.gutentor.com\/weblog\/wp-content\/uploads\/sites\/2\/2020\/01\/gallery-design-2.jpg 1000w, https:\/\/www.gutentor.com\/weblog\/wp-content\/uploads\/sites\/2\/2020\/01\/gallery-design-2-300x220.jpg 300w, https:\/\/www.gutentor.com\/weblog\/wp-content\/uploads\/sites\/2\/2020\/01\/gallery-design-2-768x564.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<ul>\n<li>Download the <a href=\"https:\/\/www.gutentor.com\/thank-you\/?download=gutentor\" target=\"_blank\" rel=\"noopener noreferrer\">Gutentor Plugin,<\/a> install and activate the plugin.<\/li>\n<li>Go to the page and create a new page.<\/li>\n<li>Once you create a page go to the &#8220;Template Library&#8221; and in the &#8220;Blocks&#8221; section, you will see the list of blocks. You chose the available Gallery blocks as shown in the image below.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"wp-image-386 size-full aligncenter\" src=\"http:\/\/www.gutentor.com\/weblog\/wp-content\/uploads\/sites\/2\/2020\/01\/gallery-gutentor-scaled.jpg\" alt=\"gallery gutentor\" width=\"2560\" height=\"1214\" srcset=\"https:\/\/www.gutentor.com\/weblog\/wp-content\/uploads\/sites\/2\/2020\/01\/gallery-gutentor-scaled.jpg 2560w, https:\/\/www.gutentor.com\/weblog\/wp-content\/uploads\/sites\/2\/2020\/01\/gallery-gutentor-300x142.jpg 300w, https:\/\/www.gutentor.com\/weblog\/wp-content\/uploads\/sites\/2\/2020\/01\/gallery-gutentor-1024x486.jpg 1024w, https:\/\/www.gutentor.com\/weblog\/wp-content\/uploads\/sites\/2\/2020\/01\/gallery-gutentor-768x364.jpg 768w, https:\/\/www.gutentor.com\/weblog\/wp-content\/uploads\/sites\/2\/2020\/01\/gallery-gutentor-1536x729.jpg 1536w, https:\/\/www.gutentor.com\/weblog\/wp-content\/uploads\/sites\/2\/2020\/01\/gallery-gutentor-2048x971.jpg 2048w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/p>\n<p>You can insert any block you want and start customizing it. The customization of the block is really easy. You have all the customization options on the right side of the page.<\/p>\n<p>You can customize the following options.<\/p>\n<ul>\n<li>Typography (Fonts, Size, Colors)<\/li>\n<li>Margin and padding<\/li>\n<li>Templates styles<\/li>\n<li>Masonry and normal gallery layout<\/li>\n<li>Pop up icons<\/li>\n<li>The number of columns etc.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"wp-image-389 size-full aligncenter\" src=\"http:\/\/www.gutentor.com\/weblog\/wp-content\/uploads\/sites\/2\/2020\/01\/blocks-setting-gutentor.jpg\" alt=\"blocks setting gutentor\" width=\"2448\" height=\"1438\" srcset=\"https:\/\/www.gutentor.com\/weblog\/wp-content\/uploads\/sites\/2\/2020\/01\/blocks-setting-gutentor.jpg 2448w, https:\/\/www.gutentor.com\/weblog\/wp-content\/uploads\/sites\/2\/2020\/01\/blocks-setting-gutentor-300x176.jpg 300w, https:\/\/www.gutentor.com\/weblog\/wp-content\/uploads\/sites\/2\/2020\/01\/blocks-setting-gutentor-1024x602.jpg 1024w, https:\/\/www.gutentor.com\/weblog\/wp-content\/uploads\/sites\/2\/2020\/01\/blocks-setting-gutentor-768x451.jpg 768w, https:\/\/www.gutentor.com\/weblog\/wp-content\/uploads\/sites\/2\/2020\/01\/blocks-setting-gutentor-1536x902.jpg 1536w, https:\/\/www.gutentor.com\/weblog\/wp-content\/uploads\/sites\/2\/2020\/01\/blocks-setting-gutentor-2048x1203.jpg 2048w\" sizes=\"(max-width: 2448px) 100vw, 2448px\" \/><\/p>\n<p>If you still feel confused regarding the Gallery Block, here is the <a href=\"https:\/\/www.youtube.com\/watch?v=VV4-mbaOziA\" target=\"_blank\" rel=\"noopener noreferrer\">video tutorial.<\/a><\/p>\n<p><iframe title=\"Design Gallery Page in WordPress Using Gutentor\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/VV4-mbaOziA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><strong>Other Posts:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.gutentor.com\/weblog\/how-to-design-testimonial-in-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\"><b>How to Create a Testimonial Page (Section) in WordPress?<\/b><\/a><\/li>\n<li><a href=\"https:\/\/www.gutentor.com\/weblog\/how-to-design-restaurant-menu-is-wordpress-using-gutentor\/\" target=\"_blank\" rel=\"noopener noreferrer\"><b>How to Creat Restaurant Menu in WordPress Website(With Gutentor)?<\/b><\/a><\/li>\n<li><strong><a href=\"https:\/\/www.gutentor.com\/weblog\/how-to-design-pricing-section-in-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to Create a Pricing Page (Section) in WordPress?\u00a0<\/a><\/strong><\/li>\n<\/ul>\n<p>Keep in touch with our social media channels for each and every updates, tutorials and guides<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/www.youtube.com\/channel\/UCkPtdikwcTsBhJknaa6r10w?view_as=subscriber\" target=\"_blank\" rel=\"noopener noreferrer\">Youtube\u00a0<\/a><\/strong><\/li>\n<li><a href=\"https:\/\/bit.ly\/2keKDYC\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Facebook\u00a0<\/strong><\/a><\/li>\n<li><a href=\"https:\/\/bit.ly\/2kBWm3L\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Twitter<\/strong><\/a><\/li>\n<li><a href=\"https:\/\/www.linkedin.com\/in\/gutentor\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>LinkedIn<\/strong><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Image galleries are the best way to showcase your images and keep your visitors interested. In fact, the gallery is one of the essential page of every website where you display the related images along with a description in different ways.\u00a0There are basically three types of image gallery layout on a website. They are explained [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":392,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[19,18],"class_list":["post-379","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-gutentor-tips","tag-image-gallery"],"gutentor_comment":25,"jetpack_featured_media_url":"https:\/\/www.gutentor.com\/weblog\/wp-content\/uploads\/sites\/2\/2020\/01\/How-to-add-gallery-in-wordpress-with-gutentor.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gutentor.com\/weblog\/wp-json\/wp\/v2\/posts\/379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gutentor.com\/weblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gutentor.com\/weblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gutentor.com\/weblog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gutentor.com\/weblog\/wp-json\/wp\/v2\/comments?post=379"}],"version-history":[{"count":0,"href":"https:\/\/www.gutentor.com\/weblog\/wp-json\/wp\/v2\/posts\/379\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gutentor.com\/weblog\/wp-json\/wp\/v2\/media\/392"}],"wp:attachment":[{"href":"https:\/\/www.gutentor.com\/weblog\/wp-json\/wp\/v2\/media?parent=379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gutentor.com\/weblog\/wp-json\/wp\/v2\/categories?post=379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gutentor.com\/weblog\/wp-json\/wp\/v2\/tags?post=379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}