{"id":29193,"date":"2022-09-02T12:00:00","date_gmt":"2022-09-02T09:00:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=29193"},"modified":"2024-01-10T17:02:44","modified_gmt":"2024-01-10T15:02:44","slug":"creating-a-hero-image-gallery-container","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/","title":{"rendered":"Create a Hero Images gallery"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>In this tutorial you will learn how to use the container&#8217;s flex properties to make an image gallery hero section. For this tutorial you will be using a parent container with two child-containers. The content may be added to the left or right. An image gallery is created in the other. This will help you learn more about the flex properties of the container.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Hero-Gallery-1.png\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Hero-Gallery-1-1024x495.png\" alt=\"\" class=\"wp-image-29194\"\/><\/a><\/figure>\n\n\n\n<p><strong>Can I just use a Gallery widget?<\/strong><br>Yes, a Gallery widget may be used. However, learning the techniques used here will help you make more advanced designs later on. The Gallery image also cannot link individual images so this will overcome that limitation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Getting started<\/h2>\n\n\n\n<p>Begin by creating a new page on your website or editing an existing one. For this tutorial the page has been set to Canvas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Add a new container layout<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Step-One-2.gif\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Step-One-2.gif\" alt=\"\" class=\"wp-image-29195\"\/><\/a><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add a new container to your page by clicking the + icon<\/li>\n\n\n\n<li>Select the two container layout<\/li>\n\n\n\n<li>A margin may be applied to the parent container in the Advanced tab to allow for \u201cwhite space\u201d<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">The content container<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Step-Two-1.gif\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Step-Two-1.gif\" alt=\"\" class=\"wp-image-29196\"\/><\/a><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Drag a Heading widget to the left child-container and edit the text as needed<\/li>\n\n\n\n<li>In the Style tab you may adjust the font size in the Typography settings or choose a preset global style<\/li>\n\n\n\n<li>Next drag a Text Editor widget below the heading and edit its content (you may leave as the placeholder text for now)<\/li>\n\n\n\n<li>Add two Button widgets to the container and edit their text. You may also link these if you are ready<br><br>Note: For this tutorial, two buttons are used so that the Direction and Wrap properties can be demonstrated.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Adjusting the content with flex properties<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Step-Three-1.gif\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Step-Three-1.gif\" alt=\"\" class=\"wp-image-29197\"\/><\/a><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select and edit the content\u2019s container. In the Layout tab, the default Width and Height properties will be kept at this time<\/li>\n\n\n\n<li>Select the Wrap property option by clicking the icon<\/li>\n\n\n\n<li>Change the Direction property to row to align the buttons side by side<\/li>\n\n\n\n<li>A bit of Padding is applied to the container in the Advanced tab (example: 21PX)\u00a0<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">The gallery container&nbsp;<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Step-Four-2.gif\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Step-Four-2.gif\" alt=\"\" class=\"wp-image-29198\"\/><\/a><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select and edit the right child container<\/li>\n\n\n\n<li>In the Layout tab, the container Width and Height properties are left at default<\/li>\n\n\n\n<li>In the Items section, select the Direction to Row<\/li>\n\n\n\n<li>In the Gap property set the value to 0px as padding on the images will be used. This will improve the workflow of using 50\/50 or 33.3% in the gallery in the following steps (unless you like math)<\/li>\n\n\n\n<li>Set the Wrap property by clicking the icon<\/li>\n\n\n\n<li>Once the Wrap property is applied, the Align Content property will appear. Select the Flex Start option from the dropdown menu.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Adding Images<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Step-Five.gif\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Step-Five.gif\" alt=\"\" class=\"wp-image-29199\"\/><\/a><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Drag an Image widget to the gallery container<\/li>\n\n\n\n<li>In the link options, the image may be set to lightbox by setting the link option to media file, or you may link to a location<\/li>\n\n\n\n<li>In the Advanced tab, set the Width property to 50% to define the widget\u2019s wrapper width<\/li>\n\n\n\n<li>Padding is now applied to the image widget. This is used rather than the Gap property for faster workflow when learning (example: 5PX)<\/li>\n\n\n\n<li>Open the Style tab the image will now be adjusted to allow consistency once duplicated<\/li>\n\n\n\n<li>From the Width property, increase the slider to 100% or enter the value<\/li>\n\n\n\n<li>The Height property will be used to keep the images a consistent size<\/li>\n\n\n\n<li>When the Height property is used, the Object Fit options appear. Select the Cover option.<br>Note: This will cause some clipping in your images depending on their size but allow the gallery to be consistent without editing each image.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Duplicating and selecting the images<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Step-Six.gif\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Step-Six.gif\" alt=\"\" class=\"wp-image-29200\"\/><\/a><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Right click on your image and duplicate it. For this tutorial, four images will be used<\/li>\n\n\n\n<li>You may now choose the images from your media library to be added or uploaded from your computer. Since the width, height, and padding properties have been previously set, the images should fit naturally without resizing.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Adding additional image row(s)<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Step-Seven.gif\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Step-Seven.gif\" alt=\"\" class=\"wp-image-29201\"\/><\/a><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Once again, duplicate the final image from your already added Image widgets by right-clicking<\/li>\n\n\n\n<li>In the Advanced tab set the Width of the widgets wrapper to 33.3%<\/li>\n\n\n\n<li>In the Style tab, the height of the image should also be adjusted (example: 125PX)<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Duplicating and selecting the images<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Step-Eight.gif\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Step-Eight.gif\" alt=\"\" class=\"wp-image-29202\"\/><\/a><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Duplicate the image by right clicking. For this gallery three images are used<\/li>\n\n\n\n<li>Select the desired images from your media library or upload them from your computer<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Responsive mode<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/HeroHighRes.gif\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/HeroHighRes.gif\" alt=\"\" class=\"wp-image-29209\"\/><\/a><\/figure>\n\n\n\n<p>Select and view the responsive breakpoints. Make minor adjustments as needed. You may find that the flex properties of the container already do most of the heavy lifting for you.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Congratulations<\/h2>\n\n\n\n<p>You can now make an image gallery using the container. By using the techniques in the tutorial, you will find making more advanced layout designs in the future to be less confusing.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Level Up<\/h2>\n\n\n\n<p>You may also mix and match images with video and other elements to create amazing possibilities.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/image-7.png\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/image-7-1024x495.png\" alt=\"\" class=\"wp-image-29216\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Next steps<\/h2>\n\n\n\n<p>Check out some other layouts you can create with containers:<\/p>\n\n\n\n<p><a href=\"https:\/\/elementor.com\/help\/creating-an-intro-container\/\">Creating an Intro Section using Flexbox Containers<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/elementor.com\/help\/creating-a-hero-section-with-containers\/\">Creating a Hero Section using Flexbox Containers<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/elementor.com\/help\/creating-a-call-to-action-container\/\">Creating a Call to Action Section using Flexbox Containers<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/elementor.com\/help\/creating-a-services-container\/\">Creating A Services Section using Flexbox Containers<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction In this tutorial you will learn how to use the container&#8217;s flex properties to make an image gallery hero section. For this tutorial you will be using a parent container with two child-containers. The content may be added to the left or right. An image gallery is created in the other. This will help [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["659eb195ae5ecc4339dbbe46"],"footnotes":""},"categories":[1440],"tags":[],"class_list":["post-29193","post","type-post","status-publish","format-standard","hentry","category-advanced-functionality"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create a Hero Images gallery | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Create a Hero Images gallery in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\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\/help\/creating-a-hero-image-gallery-container\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Hero Images gallery | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Create a Hero Images gallery in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-02T09:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-10T15:02:44+00:00\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"Create a Hero Images gallery\",\"datePublished\":\"2022-09-02T09:00:00+00:00\",\"dateModified\":\"2024-01-10T15:02:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/\"},\"wordCount\":856,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Hero-Gallery-1-1024x495.png\",\"articleSection\":[\"Advanced functionality\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/\",\"url\":\"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/\",\"name\":\"Create a Hero Images gallery | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Hero-Gallery-1-1024x495.png\",\"datePublished\":\"2022-09-02T09:00:00+00:00\",\"dateModified\":\"2024-01-10T15:02:44+00:00\",\"description\":\"Learn everything about Create a Hero Images gallery in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Widgets\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Advanced functionality\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/advanced-functionality\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Create a Hero Images gallery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create a Hero Images gallery | Elementor","description":"Learn everything about Create a Hero Images gallery in this article from Elementor's Knowledge Base. Get Elementor tips & more.","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\/help\/creating-a-hero-image-gallery-container\/","og_locale":"en_US","og_type":"article","og_title":"Create a Hero Images gallery | Elementor","og_description":"Learn everything about Create a Hero Images gallery in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/","og_site_name":"Help","article_published_time":"2022-09-02T09:00:00+00:00","article_modified_time":"2024-01-10T15:02:44+00:00","author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"Create a Hero Images gallery","datePublished":"2022-09-02T09:00:00+00:00","dateModified":"2024-01-10T15:02:44+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/"},"wordCount":856,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Hero-Gallery-1-1024x495.png","articleSection":["Advanced functionality"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/","url":"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/","name":"Create a Hero Images gallery | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Hero-Gallery-1-1024x495.png","datePublished":"2022-09-02T09:00:00+00:00","dateModified":"2024-01-10T15:02:44+00:00","description":"Learn everything about Create a Hero Images gallery in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Widgets","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/"},{"@type":"ListItem","position":4,"name":"Advanced functionality","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/advanced-functionality\/"},{"@type":"ListItem","position":5,"name":"Create a Hero Images gallery"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/29193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=29193"}],"version-history":[{"count":4,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/29193\/revisions"}],"predecessor-version":[{"id":44360,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/29193\/revisions\/44360"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=29193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=29193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=29193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}