{"id":5714,"date":"2024-04-14T12:04:22","date_gmt":"2024-04-14T04:04:22","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5714"},"modified":"2024-04-17T21:55:05","modified_gmt":"2024-04-17T13:55:05","slug":"independent-worker-420-construct-website-landing-page-grid-based-hero-section","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/independent-worker-420-construct-website-landing-page-grid-based-hero-section\/","title":{"rendered":"Independent Worker \u2014 420 | Construct Website | Landing Page: grid-based hero section"},"content":{"rendered":"\n
\n

An initial section on your website’s landing page offers an excellent opportunity to capture the attention of your visitors using images, text, and call-to-action buttons (CTAs). You can achieve this more efficiently by utilizing a grid to organize your content.\u00a0<\/p>\n

This guide will teach you how to establish a hero section based on a grid layout by implementing the following:<\/p>\n

    \n
  1. Insert a grid<\/li>\n
  2. Add an image<\/li>\n
  3. Construct a content block<\/li>\n
  4. Create an overlapping design<\/li>\n
  5. Update the Body (All pages) tag<\/li>\n<\/ol>\n

    Include a Grid
    <\/h2>\n

    The grid forms the core structure of your hero section.\u00a0<\/p>\n

    To incorporate a Grid<\/strong> in your page:<\/p>\n

      \n
    1. Navigate to the Add panel<\/strong> > Other<\/strong> section<\/li>\n
    2. Drag a Grid<\/strong> onto your page<\/li>\n<\/ol>\n

      By default, the Grid<\/strong> presents 2 rows and 2 columns, which we’ll utilize for this demonstration.\u00a0<\/p>\nGrid<\/strong> and assign a name to it:\u00a0\u00a0<\/p>\n

        \n
      1. Click the Done<\/strong> button to save your Grid<\/strong> layout\u00a0<\/li>\n
      2. Assign a class to your Grid<\/strong> (e.g., “Landing hero section”)\u00a0<\/li>\n<\/ol>\n
        \n
        <\/div>\n<\/figure>\n

        <\/p>\nEdit Grid<\/strong> option in the menu:\u00a0<\/p>\n

          \n
        1. Click the plus icon to add rows or columns<\/li>\n
        2. Hover over an existing row or column and press the trash icon to delete it<\/li>\n<\/ol>\n
          \n
          <\/div>\n<\/figure>\n

          <\/p>\n

          Note:<\/strong> The dimensions of the Grid<\/strong> are influenced by the contained content. Adding content will automatically adjust the size of the Grid<\/strong>.<\/p><\/blockquote>\nGrid<\/strong> to match the viewport’s height:<\/p>\n

            \n
          1. Choose the Grid<\/strong>\u00a0<\/li>\n
          2. Access the Style panel <\/strong>> Size<\/strong>\u00a0<\/li>\n
          3. Set the Height<\/strong> to 100 VH (viewport height)\u00a0<\/li>\n<\/ol>\n

            Insert an image
            <\/h2>\nDiv block<\/strong> within the Grid:<\/p>\n
              \n
            1. Drag a Div block<\/strong> from the Add elements<\/strong> panel into your Landing hero section<\/li>\n
            2. Assign a class name to the new Div block<\/strong> (e.g., “Landing hero image”)<\/li>\n<\/ol>\n
              \n
              <\/div>\n<\/figure>\n

              <\/p>\nBackground image<\/strong> on the Div block<\/strong> you just created:<\/p>\n

                \n
              1. Select the Div block\u00a0<\/strong><\/li>\n
              2. Access Style panel<\/strong> > Backgrounds<\/strong> and click the plus icon to add a Background image<\/strong><\/li>\n
              3. Click Choose image<\/strong> to select an Image<\/strong> from the Assets<\/strong>panel<\/strong><\/li>\n<\/ol>\n
                \n
                <\/div>\n<\/figure>\n

                <\/p>\nCover<\/strong> the Div block<\/strong> with the Image<\/strong> to prevent tiling:\u00a0<\/p>\n

                  \n
                1. Click Cover<\/strong><\/li>\n
                2. Click the center dot under Position <\/strong>to align the image at the center of the Grid<\/strong> cell<\/li>\n<\/ol>\n
                  \n
                  <\/div>\n<\/figure>\nDiv block<\/strong> with the Image<\/strong>, you can resize the Image<\/strong> or span it across 2 columns or rows. This technique also maintains the central point of the Image<\/strong> within your layout.<\/p>\n

                  Develop a content block
                  <\/h2>\n\n
                    \n
                  1. Introduce a Div block<\/strong> from the Add elements panel<\/strong> into the upper right corner of the Grid<\/strong><\/li>\n
                  2. Add a class to the new Div block<\/strong> (e.g., “Landing hero content”)<\/li>\n<\/ol>\nH1 Heading<\/strong>, a Paragraph,<\/strong> and 2 distinct Buttons<\/strong> inside the Div block<\/strong> you just created.\u00a0<\/p>\nDiv block<\/strong> (or any specific area on your page):<\/p>\n
                      \n
                    1. Launch the Navigator panel <\/strong>from the left toolbar<\/li>\n
                    2. Access the Add elements panel\u00a0<\/strong><\/li>\n
                    3. Drag a Heading<\/strong> directly into the Navigator<\/strong>, and position it within the Home hero content Div block<\/strong>\u00a0<\/li>\n<\/ol>\n
                      \n
                      <\/div>\n<\/figure>\n

                      <\/p>\nHeading<\/strong> is an H1<\/strong>. Modify the Heading<\/strong> content by double-clicking it and entering your new text (e.g., \u201cWe transform living spaces into elegant sanctuaries\u201d).<\/p>\nHeader<\/strong> a category (for example, \u201cPrimary title\u201d).\u00a0<\/p>\n

                      Given that the Header<\/strong> now has a category, let\u2019s customize it:<\/p>\n

                        \n
                      1. Pick a new font you want to utilize In Design panel <\/strong>> Text <\/strong>> Font<\/strong><\/li>\n
                      2. Select the font\u2019s Thickness<\/strong> from the dropdown<\/li>\n<\/ol>\n

                        Modify the Header <\/strong>hue:<\/p>\n

                          \n
                        1. Activate the Color picker<\/strong> tool in Shades <\/strong>panel<\/li>\n
                        2. Hover above the Backdrop image<\/strong> in the initial Section unit <\/strong>and select a hue from the Picture<\/strong><\/li>\n
                        3. Tweak the hue as necessary by shifting the Color<\/strong> and Translucency <\/strong>sliders<\/li>\n<\/ol>\n
                          \n
                          <\/div>\n<\/figure>\n

                          <\/p>\n

                          Let\u2019s append more data to the data block. Append a Section<\/strong>:<\/p>\n

                            \n
                          1. Open the Include components panel<\/strong> and drag a Section<\/strong> into the Primary title content Section unit<\/strong><\/li>\n
                          2. Position it beneath the Header<\/strong> you previously included\u00a0<\/li>\n<\/ol>\n

                            Add Buttons <\/strong>to the data block:<\/p>\n

                              \n
                            1. Drag a Tab <\/strong>from the Include components panel<\/strong> into the Primary title content Section unit<\/strong><\/li>\n
                            2. Place it beneath the Area<\/strong> you just appended\u00a0<\/li>\n
                            3. Twice click the Tab<\/strong> wording to adjust, and rename it (for instance, \u201cLet\u2019s converse\u201d).\u00a0\u00a0<\/li>\n
                            4. Assign a category to the Tab<\/strong> (like, \u201cButton\u201d)\u00a0<\/li>\n<\/ol>\n

                              Modify the hue of your Tab to preserve layout uniformity:<\/p>\n

                                \n
                              1. Pick the Tab<\/strong><\/li>\n
                              2. Hit the default hue sample in Design panel <\/strong>> Background<\/strong>> Color<\/strong><\/li>\n
                              3. Switch it to the hue you employed for your Header<\/strong><\/li>\n<\/ol>\n

                                Let\u2019s establish some space for the content you\u2019ve presently appended.\u00a0<\/p>\n

                                Append Space<\/strong> to the lower end of the Header<\/strong>:<\/p>\n

                                  \n
                                1. Hit the Header<\/strong><\/li>\n
                                2. Unlock Design panel <\/strong>> Separation<\/strong>\u00a0<\/li>\n
                                3. Set the base Space<\/strong> to 20 px<\/li>\n<\/ol>\n

                                  Considering you already attached a category of \u201cButton,\u201d you can copy\/paste that Tab<\/strong> element to produce a sum of 2 Buttons<\/strong>:<\/p>\n

                                    \n
                                  1. Evaluate the initial Tab<\/strong><\/li>\n
                                  2. Copy\/paste the Tab<\/strong><\/li>\n
                                  3. Twice click the subsequent Tab\u2019s<\/strong> wording and alter it (for example, \u201cView our projects\u201d)<\/li>\n<\/ol>\n

                                    Note:<\/strong> If you modify components of the Tab<\/strong> class, it\u2019ll influence both Buttons<\/strong> at once since they have a similar category (like, \u201cButton\u201d).\u00a0<\/p><\/blockquote>\n

                                    For example, if you insert Space<\/strong> to the right of one Tab<\/strong>, the Space<\/strong> increment happens on both Buttons<\/strong>:\u00a0<\/p>\n

                                      \n
                                    1. Select one of your Buttons<\/strong><\/li>\n
                                    2. Unlock Design panel <\/strong>> Separation<\/strong>\u00a0<\/li>\n
                                    3. Set the right Space<\/strong> to 10 px<\/li>\n<\/ol>\n

                                      Design an overlapping layout
                                      <\/h2>\n

                                      An overlapping layout signifies certain of your Grid<\/strong> components overlap each other. In this illustration, let\u2019s form the data block overlap the Backdrop image<\/strong>.\u00a0<\/p>\n

                                      Select the Primary title content Section unit<\/strong>.\u00a0<\/p>\n

                                      Since its Placement<\/strong> is configured to Auto<\/strong>, it acquires the first obtainable cell in the Grid<\/strong> \u2014 the upper right cell.\u00a0<\/p>\n

                                      Let\u2019s position it in the bottom right cell of the Grid<\/strong>:\u00a0<\/p>\n

                                        \n
                                      1. Unlock Design panel <\/strong>> Grid Child <\/strong>> Placement<\/strong><\/li>\n
                                      2. Establish the placement of the Primary title content Section unit<\/strong> to Manual<\/strong><\/li>\n
                                      3. Drag the Section unit<\/strong> to the bottom right cell<\/li>\n<\/ol>\n
                                        \n
                                        <\/div>\n<\/figure>\n

                                        Let\u2019s repeat the same process on the Primary title Picture<\/strong>:<\/p>\n

                                          \n
                                        1. Elect the Primary title Picture<\/strong><\/li>\n
                                        2. Unlock Design panel <\/strong>> Grid Child <\/strong>> Placement<\/strong><\/li>\n
                                        3. Establish the placement of the Picture <\/strong>to Manual<\/strong><\/li>\n
                                        4. Drag the lower right handle of the Picture<\/strong> across both Grid<\/strong> columns and rows to cover the entire Grid<\/strong>\u00a0<\/li>\n<\/ol>\n

                                          To make your data visible over the Picture<\/strong>, alter the Section unit<\/strong> backdrop hue:\u00a0<\/p>\n

                                            \n
                                          1. Choose the Primary title content Section unit<\/strong><\/li>\n
                                          2. Unlock Design panel <\/strong>> Backgrounds <\/strong>> Color<\/strong><\/li>\n
                                          3. Hit the sample and choose a hue (for instance, white)<\/li>\n<\/ol>\n
                                            \n
                                            <\/div>\n<\/figure>\n

                                            <\/p>\n

                                            Tweak the size or quantity of rows and columns in your Grid<\/strong>:\u00a0<\/p>\n

                                              \n
                                            1. Evaluate the Primary title segment Section unit<\/strong> (the prime element)<\/li>\n
                                            2. Press Enter<\/strong> or click the adjust Grid<\/strong> symbol\u00a0<\/li>\n<\/ol>\n
                                              \n
                                              <\/div>\n<\/figure>\n

                                              <\/p>\n

                                              Currently segment height is set to Auto<\/strong>. Let\u2019s alter this to a precise size:\u00a0<\/p>\n

                                                \n
                                              1. Click the bar that states Auto<\/strong> beside the peak Grid<\/strong> row to display the row sizing menu.\u00a0<\/li>\n<\/ol>\n
                                                \n
                                                <\/div>\n<\/figure>\n
                                                  \n
                                                1. Specify the top row as 1 FR (fraction unit)<\/li>\n
                                                2. Repeat the process for the second row\u00a0<\/li>\n<\/ol>\n

                                                  By assigning 1 FR to each row, they will each occupy 50% of the viewport height using flexible FRs.\u00a0<\/p>\n

                                                  Replicate the above instructions to modify the row height. If you maintain the top row at 1 FR but switch the bottom row to Auto, the top row will utilize all the available space, and the bottom row’s height will adjust automatically based on the content within.\u00a0<\/p>\n

                                                  Click Done<\/strong> to complete editing the Grid<\/strong>.\u00a0<\/p>\n

                                                  Next, let’s enhance the content to improve its appearance.<\/p>\n

                                                  Adjust the Heading Margin<\/strong>:<\/p>\n

                                                    \n
                                                  1. Select the Heading<\/strong><\/li>\n
                                                  2. Access Style panel<\/strong> > Spacing<\/strong><\/li>\n
                                                  3. Tap the top Margin<\/strong> and modify it to 0 px<\/li>\n
                                                  4. Tap the bottom Margin<\/strong> and modify it to 20 px<\/li>\n<\/ol>\n

                                                    Tweak the Paragraph Margin<\/strong>:\u00a0<\/p>\n

                                                      \n
                                                    1. Select the Paragraph<\/strong><\/li>\n
                                                    2. Access Style panel<\/strong> > Spacing<\/strong><\/li>\n
                                                    3. Adjust the default bottom Margin<\/strong> to 30 px\u00a0<\/li>\n<\/ol>\n

                                                      You can also manage the spacing of the elements within the content block \u2014 your Heading<\/strong>, Paragraph<\/strong>, and Buttons<\/strong>:<\/p>\n

                                                        \n
                                                      1. Select the Home hero content Div block<\/strong><\/li>\n
                                                      2. Access Style panel<\/strong> > Spacing<\/strong><\/li>\n
                                                      3. Adapt its padding (the space within an element)<\/li>\n
                                                      4. Press Shift<\/strong>,and drag inside the Padding<\/strong> control to change all 4 sides to 30 px<\/li>\n<\/ol>\n

                                                        Revise the Body (All pages) tag
                                                        <\/h2>\n

                                                        Modifying the Body (All pages) tag<\/strong> readies your site and saves you time. For instance, altering the Font<\/strong> with the Body (All pages) tag <\/strong>selected influences the default Font<\/strong> for elements across your project.\u00a0<\/p>\n

                                                        The Body<\/strong> element acts as the top-level element of any page. To revise the Body (All pages) tag<\/strong>:<\/p>\n

                                                          \n
                                                        1. Launch the Navigator<\/strong> and choose the Body<\/strong><\/li>\n
                                                        2. Click the Selector<\/strong> field and opt for the Body (All pages)<\/strong>tag<\/strong> from the dropdown<\/li>\n<\/ol>\n
                                                          \n
                                                          <\/div>\n<\/figure>\n

                                                          <\/p>\n

                                                          Time to adjust the Font<\/strong> for the Body (All pages) tag<\/strong>:<\/p>\n

                                                            \n
                                                          1. Click the Selector<\/strong> field and pick the Body (All pages)<\/strong>tag<\/strong> from the dropdown\u00a0<\/li>\n
                                                          2. Access Typography<\/strong> > Font <\/strong>andchoose a font (e.g., \u201cSource Sans Pro)<\/li>\n
                                                          3. Modify the Font size<\/strong> to 15 px<\/li>\n
                                                          4. Alter the Font<\/strong> line Height<\/strong> to a unitless measurement of 1.4 by typing in 1.4 and a hyphen (-)<\/li>\n<\/ol>\n
                                                            \n
                                                            <\/div>\n<\/figure>\n

                                                            Using unitless line height is advantageous as it scales the Font\u2019s <\/strong>line height with the Font <\/strong>size. Discover more about Unitless line height.\u00a0<\/p>\n

                                                            Text elements without previously set overrides will inherit the modifications you made from the Body (All pages) tag<\/strong>.\u00a0<\/p>\n

                                                            You are now equipped with an enticing hero section \u2014 you hero, you!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Create a grid-based hero section for a homepage.","protected":false},"author":2,"featured_media":5715,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[306],"tags":[],"class_list":{"0":"post-5714","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-kb","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5714"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5714\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5715"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}