{"id":3066,"date":"2021-06-23T08:54:05","date_gmt":"2021-06-23T08:54:05","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=3066"},"modified":"2023-02-21T10:42:17","modified_gmt":"2023-02-21T10:42:17","slug":"how-to-use-image-gallery-widget-on-elementor-page-builder-plugin","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-use-image-gallery-widget-on-elementor-page-builder-plugin\/","title":{"rendered":"How to Use Image Gallery Widget on Elementor Page Builder Plugin"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3066\" class=\"elementor elementor-3066\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-21e24dd9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"21e24dd9\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5f9f7cb5\" data-id=\"5f9f7cb5\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9b4fe02 elementor-widget elementor-widget-video\" data-id=\"9b4fe02\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=Ed3dmxVTgfA&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5036cc53 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5036cc53\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5c6a4824\" data-id=\"5c6a4824\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-386bdf8b elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"386bdf8b\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-9461\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-9461\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-9462\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-9462\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-9461\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-9461\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-9461\" tabindex=\"0\" hidden=\"false\"><p>Easily add images galleries to WordPress with Elementor. Download Elementor Page Builder<\/p><p>If you are looking for the best, and easiest plugin to add an image gallery to your WordPress website, then look no further, because it&#8217;s actually easier and less of a burden on your WordPress to use your Elementor page builder plugin for that. It is simple to use and comes in handy when you want to display a clean grid like gallery on your page.<\/p><p>First, we search for the widget called &#8216;Image Gallery&#8217;. <br \/>Once it is dragged in its place you will see the style area and the content area.<br \/>Let&#8217;s select the images, and insert them.<br \/>I have the image size setting, to control the size of the images.<br \/>The number of columns, and the &#8216;link to&#8217; setting. <br \/>We can choose to randomize the order of the images.<br \/>I can also change the spacing, and add a border or set a border radius.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-9462\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-9462\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-9462\" tabindex=\"0\" hidden=\"hidden\"><p>hey guys this is Noah from Elementor in<br \/>this tutorial we&#8217;re going to go over the<br \/>image gallery widget it is simple to use<br \/>and comes in handy when wanting to<br \/>display a clean grid size gallery on<br \/>your page to begin we&#8217;ll click on the<br \/>edit with element button okay first I&#8217;m<br \/>going to search for the widget and drag<br \/>it and once it&#8217;s dragged in its place<br \/>you will see the content area and the<br \/>style area in the content area you have<br \/>full control over the images of the<br \/>image gallery widget so first of all<br \/>let&#8217;s select the images let&#8217;s go to the<br \/>media library and let&#8217;s choose our<br \/>images<br \/>all right as you can see all these<br \/>images have captions and I&#8217;ll show you<br \/>later on how to display the captions on<br \/>your page now let&#8217;s insert them now if<br \/>you want later on you could add images<br \/>by clicking right here and now you have<br \/>the image size where you could choose<br \/>the size of the images in the widget<br \/>thumbnail medium medium large etc you<br \/>have the number of columns for the<br \/>widget and you have the link to setting<br \/>where you could choose whether to link<br \/>the images to a media file or to an<br \/>attachment page or none and you have the<br \/>ordering which you could set as default<br \/>or randomize it which randomizes the<br \/>images order with every refresh of the<br \/>page all right that was the content area<br \/>of the widget we&#8217;ll move on to the style<br \/>area where you have the style settings<br \/>for the images and for the captions in<br \/>the images style area you have the<br \/>spacing which you could choose as<br \/>default or customize it it sets the<br \/>spacing between the images in the widget<br \/>and you have the border type where you<br \/>could choose the type of border for the<br \/>images which is very cool and you could<br \/>choose the borders width and its color<br \/>and you could set the border-radius<br \/>let&#8217;s say 50 or 100 so you could see the<br \/>images are circle now alright those were<br \/>the image style options we&#8217;ll move on to<br \/>the caption style options where first of<br \/>all we&#8217;ll click on show the captions<br \/>which actually displays the captions<br \/>that I said before for the images once<br \/>they&#8217;re shown you have the alignment as<br \/>left center right justified its color<br \/>and typography which you could set as<br \/>default or customize it you have size<br \/>family weights transform style line<br \/>height and letter spacing<br \/>all right I hope you enjoyed this video<br \/>for more videos and tutorials subscribe<br \/>our YouTube channel or visit us at Doc&#8217;s<br \/>Elementor calm<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview Easily add images galleries to WordPress with Elementor. Download Elementor Page Builder If you are looking for the best, and easiest plugin to add an image gallery to your WordPress website, then look no further, because it\u2019s actually easier and less of a burden on your WordPress to use your Elementor page [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4204,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-3066","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Use Image Gallery Widget on Elementor Page Builder Plugin - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-use-image-gallery-widget-on-elementor-page-builder-plugin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Image Gallery Widget on Elementor Page Builder Plugin - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Easily add images galleries to WordPress with Elementor. Download Elementor Page Builder If you are looking for the best, and easiest plugin to add an image gallery to your WordPress website, then look no further, because it\u2019s actually easier and less of a burden on your WordPress to use your Elementor page [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-use-image-gallery-widget-on-elementor-page-builder-plugin\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-23T08:54:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T10:42:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Image-Gallery-Widget-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Image Gallery Widget on Elementor Page Builder Plugin - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/how-to-use-image-gallery-widget-on-elementor-page-builder-plugin\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Image Gallery Widget on Elementor Page Builder Plugin - Academy","og_description":"Overview Transcript Overview Easily add images galleries to WordPress with Elementor. Download Elementor Page Builder If you are looking for the best, and easiest plugin to add an image gallery to your WordPress website, then look no further, because it\u2019s actually easier and less of a burden on your WordPress to use your Elementor page [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-use-image-gallery-widget-on-elementor-page-builder-plugin\/","og_site_name":"Academy","article_published_time":"2021-06-23T08:54:05+00:00","article_modified_time":"2023-02-21T10:42:17+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Image-Gallery-Widget-2.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-use-image-gallery-widget-on-elementor-page-builder-plugin\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-image-gallery-widget-on-elementor-page-builder-plugin\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Use Image Gallery Widget on Elementor Page Builder Plugin","datePublished":"2021-06-23T08:54:05+00:00","dateModified":"2023-02-21T10:42:17+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-image-gallery-widget-on-elementor-page-builder-plugin\/"},"wordCount":645,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-image-gallery-widget-on-elementor-page-builder-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Image-Gallery-Widget-2.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-use-image-gallery-widget-on-elementor-page-builder-plugin\/","url":"https:\/\/elementor.com\/academy\/how-to-use-image-gallery-widget-on-elementor-page-builder-plugin\/","name":"How to Use Image Gallery Widget on Elementor Page Builder Plugin - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-image-gallery-widget-on-elementor-page-builder-plugin\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-image-gallery-widget-on-elementor-page-builder-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Image-Gallery-Widget-2.jpg","datePublished":"2021-06-23T08:54:05+00:00","dateModified":"2023-02-21T10:42:17+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-image-gallery-widget-on-elementor-page-builder-plugin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-use-image-gallery-widget-on-elementor-page-builder-plugin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-use-image-gallery-widget-on-elementor-page-builder-plugin\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Image-Gallery-Widget-2.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Image-Gallery-Widget-2.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-use-image-gallery-widget-on-elementor-page-builder-plugin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to Use Image Gallery Widget on Elementor Page Builder Plugin"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3066","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=3066"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3066\/revisions"}],"predecessor-version":[{"id":9381,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3066\/revisions\/9381"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4204"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=3066"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=3066"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=3066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}