{"id":29142,"date":"2022-09-10T12:00:00","date_gmt":"2022-09-10T09:00:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=29142"},"modified":"2024-03-07T12:10:38","modified_gmt":"2024-03-07T10:10:38","slug":"creating-an-intro-container","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/creating-an-intro-container\/","title":{"rendered":"Create an Intro section"},"content":{"rendered":"\n

One of the most fundamental sections on a website is an intro\/splash section. This is generally a welcoming title with a tagline. It is also a good place to start interacting with the user by adding buttons to direct them to additional information or a purchase.  In this tutorial, we will teach you how to create this using containers.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Get Started<\/h2>\n\n\n\n

To get started, first create a new page on your website and begin editing with Elementor.<\/p>\n\n\n\n

Add a Container<\/h2>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
    \n
  1. Add a container to the page by clicking the + icon<\/li>\n\n\n\n
  2. Select the single container layout<\/li>\n\n\n\n
  3. From the Container Width<\/strong> dropdown, select Full Width<\/li>\n\n\n\n
  4. Set the Minimum Height<\/strong> of the container to a desired value (example 60VH)<\/li>\n\n\n\n
  5. From the Style Tab, give your container a color or background image. You may save time by selecting a global color as we demonstrate in the example<\/li>\n<\/ol>\n\n\n\n

    Add a welcome heading<\/h2>\n\n\n\n
    \"\"<\/a><\/figure>\n\n\n\n
      \n
    1. From the Panel, drag and drop a Heading widget into your container.<\/li>\n\n\n\n
    2. In the HTML tag you may leave set at the default H2<\/li>\n\n\n\n
    3. In the alignment, select the Center option by clicking the icon<\/li>\n\n\n\n
    4. From the Style Tab, you may style the heading manually, or chose a global as shown<\/li>\n\n\n\n
    5. In the Advanced Tab, give the Heading a value of 100% to allow it to be able to use up to the full width of the container. You will use this in the later steps*<\/a> <\/li>\n<\/ol>\n\n\n\n

      Add a tagline message<\/h2>\n\n\n\n

      You will now add a subheading to your welcome message. This could be a mission statement or branding tagline.<\/p>\n\n\n\n

      \"\"<\/a><\/figure>\n\n\n\n
        \n
      1. From the Panel, drag another Heading widget to the container<\/li>\n\n\n\n
      2. In the HTML tag<\/strong>, select the H3 option<\/li>\n\n\n\n
      3. Choose Center <\/strong>alignment by clicking the icon<\/li>\n\n\n\n
      4. You may style the heading from the Style Tab or use your preset Global Styles as show here<\/li>\n\n\n\n
      5. From the Advanced Tab, once again set the Width value to 100% <\/li>\n<\/ol>\n\n\n\n

        Add the Button(s)<\/h2>\n\n\n\n

        You will now add the button(s) to the container. You may add additional ones if needed or none at all. For this tutorial you will be using two. <\/p>\n\n\n\n

        \"\"<\/a><\/figure>\n\n\n\n
          \n
        1. From the Panel, drag and drop a Button widget to the container<\/li>\n\n\n\n
        2. Set the Size <\/strong>option to Large in the dropdown selector<\/li>\n\n\n\n
        3. You may link your button(s) at this time but for the example it will be left blank<\/li>\n\n\n\n
        4. Duplicate the button by right clicking and selecting the option.<\/li>\n<\/ol>\n\n\n\n

          Setting the container flex properties<\/h2>\n\n\n\n

          In this step you will finally use the power of the flex properties in the container. The widgets are all in place but now need to be positioned within the container properly.  Begin by editing your container. Then navigate to the Items accordion of the Layout Tab.<\/p>\n\n\n\n

          \"\"<\/a><\/figure>\n\n\n\n
            \n
          1. Change the Direction <\/strong>of the container to row. This will force the items to all be bunched together horizontally. Do not worry as we will correct this next.<\/li>\n\n\n\n
          2. Set the Wrap <\/strong>property to Wrap. This will now allow the larger Heading widgets to use their 100% full width (*This is why the heading Widths were set previously)<\/li>\n\n\n\n
          3. Set the Justify Content<\/strong> property to Center. This will align the items equally in the container horizontally. The buttons will align correctly under the headings<\/li>\n\n\n\n
          4. From the Justify Items<\/strong> dropdown located below the Wrap select the Center option (Wrap must be enabled for this property to show)<\/li>\n\n\n\n
          5. You may now increase the gap of the items to a desired value (example: 34PX)<\/li>\n<\/ol>\n\n\n\n

            Check the responsive modes<\/h2>\n\n\n\n

            You may now check the responsive views and make the minor adjustments needed. If you have used Global Settings for your fonts and buttons, you may only need to adjust the Height of the container and the Gaps.<\/p>\n\n\n\n

            \"\"<\/a><\/figure>\n\n\n\n

            Get Creative<\/h2>\n\n\n\n
            \"\"<\/a><\/figure>\n\n\n\n

            Now that you have learned the basic structure, let your imagination run wild. By changing the flex properties in various combinations, you can create endless possibilities. By simply adding a background image and positioning the content to the lower right, this simple layout takes on a much more polished look.<\/p>\n\n\n\n

            Next steps<\/h2>\n\n\n\n

            Check out some other layouts you can create with containers:<\/p>\n\n\n\n

            Creating a Hero Section using Flexbox Containers<\/a><\/p>\n\n\n\n

            Creating a Call to Action Section using Flexbox Containers<\/a><\/p>\n\n\n\n

            Creating A Services Section using Flexbox Containers<\/a><\/p>\n\n\n\n

            Creating a Hero Image Gallery using Flexbox Containers<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

            One of the most fundamental sections on a website is an intro\/splash section. This is generally a welcoming title with a tagline. It is also a good place to start interacting with the user by adding buttons to direct them to additional information or a purchase.  In this tutorial, we will teach you how to […]<\/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":["659eb152946466759562e94f"],"footnotes":""},"categories":[1436],"tags":[],"class_list":["post-29142","post","type-post","status-publish","format-standard","hentry","category-building-your-first-page-or-post"],"acf":[],"yoast_head":"\nCreate an Intro section | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Create an Intro section in this article from Elementor's Knowledge Base. Get Elementor tips & 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-an-intro-container\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create an Intro section | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Create an Intro section in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/creating-an-intro-container\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-10T09:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-07T10:10:38+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-an-intro-container\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/creating-an-intro-container\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"Create an Intro section\",\"datePublished\":\"2022-09-10T09:00:00+00:00\",\"dateModified\":\"2024-03-07T10:10:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/creating-an-intro-container\/\"},\"wordCount\":709,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/creating-an-intro-container\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Intro-Container-1-1024x492.png\",\"articleSection\":[\"Building your first page or post\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/creating-an-intro-container\/\",\"url\":\"https:\/\/elementor.com\/help\/creating-an-intro-container\/\",\"name\":\"Create an Intro section | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/creating-an-intro-container\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/creating-an-intro-container\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Intro-Container-1-1024x492.png\",\"datePublished\":\"2022-09-10T09:00:00+00:00\",\"dateModified\":\"2024-03-07T10:10:38+00:00\",\"description\":\"Learn everything about Create an Intro section in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/creating-an-intro-container\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/creating-an-intro-container\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/creating-an-intro-container\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/creating-an-intro-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\":\"Building your first page or post\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/building-your-first-page-or-post\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Create an Intro section\"}]},{\"@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 an Intro section | Elementor","description":"Learn everything about Create an Intro section 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-an-intro-container\/","og_locale":"en_US","og_type":"article","og_title":"Create an Intro section | Elementor","og_description":"Learn everything about Create an Intro section in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/creating-an-intro-container\/","og_site_name":"Help","article_published_time":"2022-09-10T09:00:00+00:00","article_modified_time":"2024-03-07T10:10:38+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-an-intro-container\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/creating-an-intro-container\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"Create an Intro section","datePublished":"2022-09-10T09:00:00+00:00","dateModified":"2024-03-07T10:10:38+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/creating-an-intro-container\/"},"wordCount":709,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/creating-an-intro-container\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Intro-Container-1-1024x492.png","articleSection":["Building your first page or post"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/creating-an-intro-container\/","url":"https:\/\/elementor.com\/help\/creating-an-intro-container\/","name":"Create an Intro section | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/creating-an-intro-container\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/creating-an-intro-container\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Intro-Container-1-1024x492.png","datePublished":"2022-09-10T09:00:00+00:00","dateModified":"2024-03-07T10:10:38+00:00","description":"Learn everything about Create an Intro section in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/creating-an-intro-container\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/creating-an-intro-container\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/creating-an-intro-container\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/creating-an-intro-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":"Building your first page or post","item":"https:\/\/elementor.com\/help\/elementor-editor\/building-your-first-page-or-post\/"},{"@type":"ListItem","position":4,"name":"Create an Intro section"}]},{"@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\/29142","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=29142"}],"version-history":[{"count":6,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/29142\/revisions"}],"predecessor-version":[{"id":46926,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/29142\/revisions\/46926"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=29142"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=29142"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=29142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}