{"id":5463,"date":"2024-04-14T21:34:24","date_gmt":"2024-04-14T13:34:24","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5463"},"modified":"2024-04-17T21:54:50","modified_gmt":"2024-04-17T13:54:50","slug":"homepage-main-section","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/homepage-main-section\/","title":{"rendered":"Homepage: main section"},"content":{"rendered":"\n
\n

Consider your main section as the front page of a popular novel \u2014 captivate your visitor\u2019s attention with strong text and attractive visuals to encourage them to discover more about your distinct brand.<\/p>\n

\n
<\/div>\n<\/figure>\n

<\/p>\n

In this tutorial, you will discover ways to craft your main section using these steps:<\/p>\n

    \n
  1. Arrange the main section<\/li>\n
  2. Integrate the text components<\/li>\n
  3. Modify the Body (All pages) tag<\/li>\n
  4. Introduce the main visual<\/li>\n<\/ol>\n

    Go through and grab the resources<\/a> for this tutorial.<\/p>\n

    Arrange the main section<\/h2>\n

    Prior to adding any elements to the page, import your resources \u2014 your image files \u2014 into the Asset panel<\/strong>:<\/p>\n

      \n
    1. Choose the resources on your machine<\/li>\n
    2. Drag the resources directly into your project (they will be automatically included in the Asset panel<\/strong>)<\/li>\n<\/ol>\n

      Let\u2019s establish the primary layout of the main section \u2014 a Container<\/strong> within a Section<\/strong>:\u00a0<\/p>\n

        \n
      1. Drop a Section<\/strong> component from the Add panel <\/strong>onto the page (the Section<\/strong> has a default width of 100%)<\/li>\n
      2. Insert a Container<\/strong> into the Section<\/strong>\u00a0<\/li>\n<\/ol>\n
        \n
        <\/div>\n<\/figure>\n

        <\/p>\n

        The Container<\/strong> maintains all content neatly contained within that Section<\/strong>, hence you will be dragging many of your added elements into that Container<\/strong>.<\/p>\n

        Integrate the text components<\/h2>\n

        Let\u2019s incorporate our initial text element:<\/p>\n

          \n
        1. Drag a Text block<\/strong> from the Add panel<\/strong> into the Container<\/strong><\/li>\n
        2. Double-tap the default text to change it (e.g., \u201cWelcome!\u201d)\u00a0<\/li>\n<\/ol>\n

          \u00a0Let\u2019s add our second text component:\u00a0<\/p>\n

            \n
          1. Pull a Heading<\/strong> from the Add panel<\/strong> into the Container<\/strong> below the Text block<\/strong><\/li>\n
          2. Update the default text by double-clicking it (e.g., \u201cI enhance user experiences through telekinesis.\u201d)\u00a0<\/li>\n<\/ol>\n

            The text components you\u2019ve applied to the Container<\/strong> influence the height of the Container<\/strong>, consequently affecting the height of the Section<\/strong>.\u00a0<\/p>\n

            If you select the Section<\/strong> and observe its Spacing<\/strong> in the Style panel<\/strong> to the right, by default it lacks padding \u2014 the space inside an element\u2019s boundary. And it also lacks margin \u2014 the space outside an element\u2019s boundary. The text abuts the edge of the Section<\/strong>.<\/p>\n

            You can regulate the space around the Section<\/strong> using margin and padding to provide your Section<\/strong> and its content more breathing space.\u00a0<\/p>\n

            Begin by altering the default Spacing<\/strong> values of the Section<\/strong> to incorporate padding<\/strong> on the top and bottom:<\/p>\n

              \n
            1. Select the Section<\/strong><\/li>\n
            2. Access Style panel<\/strong> > Spacing<\/strong><\/li>\n
            3. Include top and bottom padding <\/strong>of 60 pixels\u00a0<\/li>\n<\/ol>\n

              <\/p>\n

              \n
              <\/div>\n<\/figure>\n

              <\/p>\n

              Note:<\/strong> To quickly apply margin or padding to opposite sides of an element, hold down Option <\/strong>(on Mac) or Alt<\/strong> (on Windows), and adjust one of the margin<\/strong> or padding<\/strong> controls.\u00a0<\/p><\/blockquote>\n

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

              Modifying the Body (All pages) tag<\/strong> allows you to establish default styles that will be inherited across your project. For instance, you can define a default font, introduce new fonts, etc.<\/p>\n

              Initiate by selecting the Body (All pages) tag<\/strong> for updating:<\/p>\n

                \n
              1. Choose the Body<\/strong> element from the Navigator<\/strong><\/li>\n
              2. Enter the Selector <\/strong>field in the Style panel<\/strong><\/li>\n
              3. Choose the Body (All pages)<\/strong>tag<\/strong> from the dropdown<\/li>\n<\/ol>\n
                \n
                <\/div>\n<\/figure>\n

                <\/p>\n

                Let\u2019s append some fresh fonts to our project:\u00a0<\/p>\n

                  \n
                1. Go to Style panel<\/strong> > Typography <\/strong>and click on the current font to reveal the Fonts<\/strong> menu\u00a0<\/li>\n
                2. Select Add fonts<\/strong>\u00a0<\/li>\n<\/ol>\n
                  \n
                  <\/div>\n<\/figure>\n

                  <\/p>\n

                  Select the 2 fonts you wish to introduce to your project:<\/p>\n

                    \n
                  1. Include Inter<\/strong> from the Google Fonts selection<\/li>\n
                  2. Tick Regular<\/strong> and 600 <\/strong>as the variations to add<\/li>\n
                  3. ClickInclude typeface<\/strong>\u00a0<\/li>\n<\/ol>\n

                    Recapitulate the aforementioned process to integrate the second style into your venture, DM Serif Display<\/strong> with Regular<\/strong> as the classification.\u00a0<\/p>\n

                    Click on the Creator<\/strong> tab on your control panel to navigate back to your project.\u00a0<\/p>\n

                    \n
                    <\/div>\n<\/figure>\n

                    <\/p>\n

                    Now that you’re back at the Creator<\/strong>, reselect the Body<\/strong> element and pinpoint the Body (All pages) tag<\/strong> in the Selector bar<\/strong> to continue tweaking the default design styles of your venture.\u00a0<\/p>\n

                    Update your default project typeface to the recently integrated one:\u00a0<\/p>\n

                      \n
                    1. Unveil the Design panel<\/strong> > Typography<\/strong><\/li>\n
                    2. Tap on the existing typeface to explore the Fonts<\/strong> choices\u00a0<\/li>\n
                    3. Select a fresh typeface (e.g., \u201cInter\u201d)<\/li>\n<\/ol>\n

                      Furthermore, let’s modify the backdrop hue:\u00a0<\/p>\n

                        \n
                      1. Access the Design panel<\/strong> > Backgrounds<\/strong><\/li>\n
                      2. Activate the standard color palette to reveal the color selector<\/li>\n
                      3. Adjust the color to a dark grey shade (e.g., \u201c#141414\u201d)\u00a0<\/li>\n<\/ol>\n

                        Given that the default textual hue is also dark grey, the present text over the dark grey backdrop isn’t easily readable. While keeping the Body (All pages) tag<\/strong> selected, let’s transition the default textual hue to a more readable option:\u00a0<\/p>\n

                          \n
                        1. Open the Design panel<\/strong> > Typography<\/strong><\/li>\n
                        2. Click on the standard color palette to unveil the color selector<\/li>\n
                        3. Elevate the contrast between the backdrop hue and the textual hue by opting for a lighter textual hue (e.g., \u201cwhite\u201d)<\/li>\n<\/ol>\n

                          Now that you\u2019ve refined some of the Body (All pages) tag <\/strong>default styles that will be spread across your venture, you can start styling some of the distinct components you’ve introduced.\u00a0<\/p>\n

                          Let\u2019s refine the Title <\/strong>with an alternative typeface:<\/p>\n

                            \n
                          1. Pick the Title<\/strong><\/li>\n
                          2. Expose the Design panel<\/strong> > Typography<\/strong><\/li>\n
                          3. Opt for a new Typeface<\/strong> (e.g., \u201cDM Serif Display\u201d)<\/li>\n
                          4. Select a Thickness<\/strong> of 400<\/li>\n<\/ol>\n

                            Furthermore, let\u2019s stipulate a maximum width on the Title<\/strong>:\u00a0<\/p>\n

                              \n
                            1. Pick the Title<\/strong><\/li>\n
                            2. Access the Design panel<\/strong> > Size<\/strong><\/li>\n
                            3. Adjust the Max W<\/strong> (maximum width) to 450 pixels<\/li>\n<\/ol>\n

                              Note:<\/strong> when resizing the width or height of an element, you can swiftly move up or down by 10 pixels by pressing Shift<\/strong> together with the up<\/strong> or down<\/strong> arrows.\u00a0<\/p><\/blockquote>\n

                              Also, let’s transform the typeface styles of the Text bloc<\/strong> atop our design:\u00a0<\/p>\n

                                \n
                              1. Pick the Text bloc<\/strong><\/li>\n
                              2. Access the Design panel<\/strong> > Typography<\/strong><\/li>\n
                              3. Choose a Thickness<\/strong> of 600<\/li>\n
                              4. Press the \u201cMore typography options\u201d reveal button and choose Capitalize<\/strong>\u00a0<\/li>\n
                              5. Configure the Character spacing<\/strong> to 2 pixels<\/li>\n
                              6. Decrease the Dimension <\/strong>to 12 pixels<\/li>\n
                              7. Press the default color palette to reveal the color selector<\/li>\n
                              8. Decrease the Transparency<\/strong> (the Alpha) to 70<\/li>\n<\/ol>\n
                                \n
                                <\/div>\n<\/figure>\n

                                Construct the protagonist visual<\/h2>\n

                                Let\u2019s integrate the protagonist visual into our venture:\u00a0<\/p>\n

                                  \n
                                1. Open the Assets panel<\/strong><\/li>\n
                                2. Drag the protagonist visual into the Enclosure <\/strong>beneath the text<\/li>\n<\/ol>\n

                                  Let\u2019s tweak the maximum width of the Enclosure<\/strong> to enhance the appearance of the content on the page:<\/p>\n

                                    \n
                                  1. Select the Enclosure<\/strong><\/li>\n
                                  2. Open Design panel<\/strong> > Size<\/strong><\/li>\n
                                  3. Configure the Max W<\/strong> (maximum width) to 1200 pixels<\/li>\n<\/ol>\n

                                    Since our protagonist visual is contained within the Enclosure<\/strong>, it’s confined by the width of that Enclosure<\/strong>. To make the protagonist visual occupy the entire width of the browser, let\u2019s move the protagonist visual out of the Enclosure<\/strong> and into the Segment<\/strong>:<\/p>\n

                                      \n
                                    1. Select the protagonist visual<\/li>\n
                                    2. Move the visual into the Segment<\/strong><\/li>\n<\/ol>\n
                                      \n
                                      <\/div>\n<\/figure>\n

                                      <\/p>\n

                                      Note:<\/strong> you can grasp the edge of the canvas and resize it left or right to preview the design on various screen widths.<\/p><\/blockquote>\n

                                      Let\u2019s adjust the spacing between the Title <\/strong>and the protagonist visual to provide some room to breathe:\u00a0<\/p>\n

                                        \n
                                      1. Pick the Title<\/strong><\/li>\n
                                      2. Incorporate a bottom margin<\/strong> of 60 pixels<\/li>\n<\/ol>\n
                                        \n
                                        <\/div>\n<\/figure>\n

                                        <\/p>\n

                                        You\u2019ve now successfully laid out the fundamental framework of your section! Great job!<\/p>\n

                                        <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Create an eye-catching hero section to draw the attention of your site visitors.","protected":false},"author":2,"featured_media":5464,"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-5463","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\/5463","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=5463"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5463\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5464"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}