{"id":5378,"date":"2024-04-14T11:35:30","date_gmt":"2024-04-14T03:35:30","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5378"},"modified":"2024-04-17T21:55:18","modified_gmt":"2024-04-17T13:55:18","slug":"homepage-footer","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/homepage-footer\/","title":{"rendered":"Homepage: footer"},"content":{"rendered":"\n
\n

When the guests who navigate your site reach the bottom of the page, encourage interaction with a footer that showcases a second navigation leading to your projects and offers easy access to your social media profiles. Save time on design in the future by converting the footer into a Symbol for repetitive use in your project.\u00a0<\/p>\n

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

In this tutorial, you will discover how to include a reusable footer for navigation at the end of each page by following these steps:<\/p>\n

    \n
  1. Create the structure of the footer<\/li>\n
  2. Style the footer<\/li>\n
  3. Transform the footer into a Symbol<\/li>\n<\/ol>\n

    Join in and obtain the resources<\/a> needed for this tutorial.<\/p>\n

    Create the footer structure<\/h2>\n

    In our homepage layout, we feature our navigation and 3 Zones<\/strong>, each containing our main image, our client projects, and our contact form.\u00a0<\/p>\n

    Let\u2019s introduce a fourth Zone<\/strong> to store our footer:\u00a0<\/p>\n

      \n
    1. Access the Add panel<\/strong><\/li>\n
    2. Insert a Zone<\/strong> into the Navigator <\/strong>and position it below the existing 3 Zones<\/strong><\/li>\n<\/ol>\n
      \n
      <\/div>\n<\/figure>\n

      We can apply the \u201cZone\u201d class to our new Zone<\/strong> to maintain the 60 pixels of padding at the top and bottom that we previously styled:\u00a0<\/p>\n

        \n
      1. Open the Style panel<\/strong><\/li>\n
      2. Click into the Selector field<\/strong><\/li>\n
      3. Select \u201cZone\u201d from Existing classes<\/strong><\/li>\n<\/ol>\n

        Include a Container <\/strong>within the new Zone<\/strong> to organize our elements neatly:<\/p>\n

          \n
        1. Access the Add panel<\/strong><\/li>\n
        2. Drop a Container<\/strong> into the new Zone<\/strong><\/li>\n
        3. Pick the Container <\/strong>and click into the Selector field<\/strong><\/li>\n
        4. Choose \u201cContainer\u201d from Existing classes<\/strong><\/li>\n<\/ol>\n

          Remember:<\/strong> When assigning a class to an element, all styling modifications performed on this element are saved in that class. You can reuse the class on new elements to automatically apply the saved styles from the class you established.\u00a0<\/p><\/blockquote>\n

          Style the footer<\/h2>\n

          Deliberate visual repetition is a commendable design approach, so let\u2019s incorporate a logo into our footer to echo the logo integrated into our navigation at the page’s top:\u00a0<\/p>\n

            \n
          1. Access the Assets panel<\/strong><\/li>\n
          2. Drop your logo (e.g., \u201cLogo.svg\u201d) into the Container<\/strong> in your latest Zone<\/strong><\/li>\n<\/ol>\n

            Introduce a Div block<\/strong> to contain your footer content:<\/p>\n

              \n
            1. Access the Add panel<\/strong><\/li>\n
            2. Insert a Div block<\/strong> inside the Container\u00a0<\/strong><\/li>\n
            3. Select the Div block<\/strong> and click into the Selector field<\/strong><\/li>\n
            4. Assign it a class (e.g., \u201cFooter holder\u201d)\u00a0<\/li>\n
            5. Drag the logo into the \u201cFooter holder\u201d Div block<\/strong> and resize it (e.g., 187 by 27 pixels)<\/li>\n<\/ol>\n
              \n
              <\/div>\n<\/figure>\n

              Align the content of the \u201cFooter holder\u201d Div block <\/strong>in the center:\u00a0<\/p>\n

                \n
              1. Select the \u201cFooter holder\u201d Div block<\/strong> and access Style panel <\/strong>> Layout<\/strong><\/li>\n
              2. Indicate Display<\/strong> as Flex<\/strong><\/li>\n
              3. Set Direction <\/strong>to vertical <\/strong>and Align<\/strong> to center<\/strong><\/li>\n<\/ol>\n
                \n
                <\/div>\n<\/figure>\n

                Let\u2019s include a Paragraph<\/strong> in the footer and provide some spacing between it and the logo:<\/p>\n

                  \n
                1. Access the Add panel<\/strong> and insert a Paragraph<\/strong> into the Container<\/strong> beneath the logo<\/li>\n
                2. Select the logo and access Style panel<\/strong> > Spacing<\/strong><\/li>\n
                3. Add 30 pixels of bottom margin<\/strong><\/li>\n<\/ol>\n

                  To prevent the Paragraph<\/strong> from spanning the full width of the Container<\/strong>, let\u2019s set a maximum width restriction:\u00a0<\/p>\n

                    \n
                  1. Select the Paragraph<\/strong>\u00a0<\/li>\n
                  2. Access Style panel <\/strong>> Size<\/strong><\/li>\n
                  3. Specify the Max W<\/strong> (maximum width) as 600 pixels<\/li>\n
                  4. Remove any redundant text from the Paragraph<\/strong><\/li>\n<\/ol>\n
                    \n
                    <\/div>\n<\/figure>\n
                    \n
                    <\/div>\n<\/figure>\n

                    We will insert lower navigation links into the footer by initially placing a Collection list<\/strong>:\u00a0<\/p>\n

                      \n
                    1. Access the Add panel<\/strong> and drop a Collection list<\/strong> inside the \u201cFooter holder\u201d Div block<\/strong> below the Paragraph<\/strong><\/li>\n
                    2. Choose \u201cProjects\u201d from the Source<\/strong> dropdown in theSettings for the list of collections<\/strong> popup to connect your Grouping<\/strong><\/li>\n<\/ol>\n

                      In order to finalize the lower navigation, we should include a Connection section<\/strong> to a Assembly element<\/strong>:<\/p>\n

                        \n
                      • Initiate the Incorporate panel<\/strong> and pull a Connection section<\/strong> into any Assembly element<\/strong><\/li>\n<\/ul>\n
                        \n
                        <\/div>\n<\/figure>\n

                        Reminder: <\/strong>A Connection section <\/strong>is similar to a Division element<\/strong>, except it functions as a clickable hyperlink. Explore more about Connection sections<\/strong>.<\/p><\/blockquote>\n

                        Let’s introduce a Documentation section<\/strong> within the freshly incorporated Connection section<\/strong> to provide our users with something to interact within our lower navigation: <\/p>\n

                          \n
                        • Initiate the Incorporate panel<\/strong> and pull a Documentation section<\/strong> inside the Connection section<\/strong><\/li>\n<\/ul>\n

                          To eliminate the preset hyperlink design, let’s modify the appearance of all our hyperlinks:<\/p>\n

                            \n
                          1. Pick the Connection section<\/strong><\/li>\n
                          2. Launch the Design panel<\/strong> and navigate to the Identifier field<\/strong><\/li>\n
                          3. Select All hyperlinks<\/strong> from HTML tags<\/strong><\/li>\n<\/ol>\n
                            \n
                            <\/div>\n<\/figure>\n

                            Toggle off the preset underline and opt for a distinct hyperlink color: <\/p>\n

                              \n
                            1. Access Design panel<\/strong> > Typography<\/strong><\/li>\n
                            2. Define decoration<\/strong> as \u201cNone\u201d <\/li>\n
                            3. Click on the palette<\/strong> and set a new shade (e.g., \u201civory\u201d) <\/li>\n<\/ol>\n

                              Let\u2019s associate our Documentation section<\/strong> with our Grouping <\/strong>information to enable the automatic extraction of each project’s titles: <\/p>\n

                                \n
                              1. Choose the Documentation section<\/strong> inside the Connection selection<\/strong><\/li>\n
                              2. Tap on the label’s cog icon to reveal the Documentation section\u2019s<\/strong> configurations<\/li>\n
                              3. Tick off \u201cRetrieve text from Projects\u201d<\/li>\n
                              4. Unfold the \u201cPick field\u201d dropdown and designate the field to integrate with the Documentation section<\/strong> (e.g., \u201cProject designation\u201d) <\/li>\n<\/ol>\n

                                We will utilize Lattice <\/strong>to showcase the project designations in a structured layout: <\/p>\n

                                  \n
                                1. Select the Grouping list<\/strong><\/li>\n
                                2. Access Design panel<\/strong> > Arrangement<\/strong><\/li>\n
                                3. Assign Display<\/strong> as Lattice<\/strong><\/li>\n<\/ol>\n

                                  By default, our project designations are showcased in a 2 by 2 format. Let’s distribute our project designations across a single row: <\/p>\n

                                    \n
                                  1. Select the Lattice<\/strong> and press Modify lattice<\/strong> below Arrangement<\/strong> in the Design panel<\/strong><\/li>\n
                                  2. Hit the \u201cdelete\u201d symbol next to one row <\/strong>for its removal<\/li>\n
                                  3. Click the columns<\/strong> \u201cplus\u201d symbol twice to append 2 extra columns<\/strong><\/li>\n<\/ol>\n
                                    \n
                                    <\/div>\n<\/figure>\n
                                    \n
                                    <\/div>\n<\/figure>\n

                                    Lets formulate evenly distributed space among the elements within our Lattice<\/strong>: <\/p>\n

                                      \n
                                    1. Select the Lattice<\/strong><\/li>\n
                                    2. Access the Design panel <\/strong>> Arrangement<\/strong><\/li>\n
                                    3. Define Align<\/strong> as \u201cJustify elements: center\u201d<\/li>\n<\/ol>\n

                                      Craft a gap between the Statement <\/strong>and the Lattice<\/strong>:<\/p>\n

                                        \n
                                      1. Pick the Statement<\/strong><\/li>\n
                                      2. Define the lower spacing <\/strong>to 30 pixels<\/li>\n<\/ol>\n

                                        Let\u2019s establish an amalgamation category for our footer Segment<\/strong>:<\/p>\n

                                          \n
                                        1. Select the Segment<\/strong> enclosing the footer<\/li>\n
                                        2. Launch the Design panel<\/strong> and navigate to the Identifier field<\/strong><\/li>\n
                                        3. Post the existing \u201cSegment\u201d category, type in a fresh amalgamation category (e.g., \u201cFooter\u201d) <\/li>\n<\/ol>\n
                                          \n
                                          <\/div>\n<\/figure>\n

                                          Valuable information:<\/strong> An amalgamation category is a distinct category constructed based on another category. This independent group enables the application of style alterations to the primary category to formulate a unique variant. Delve into more details about amalgamation categories. <\/p><\/blockquote>\n

                                          Lets modify the \u201cFooter Segment\u201d Backdrop shade<\/strong>:<\/p>\n

                                            \n
                                          1. Access Design panel <\/strong>> Backgrounds<\/strong><\/li>\n
                                          2. Click on the palette<\/strong> and set the shade to the principal brand hue<\/li>\n<\/ol>\n

                                            Let\u2019s include 3 societal networking buttons situated within a wrapper:<\/p>\n

                                              \n
                                            1. Initiate the Incorporate panel<\/strong><\/li>\n
                                            2. Drag a Division element <\/strong>into the \u201cFooter holder\u201d Division element <\/strong>under the Grouping list wrapper<\/strong><\/li>\n
                                            3. Access the Design panel<\/strong> and navigate to the Identifier field<\/strong><\/li>\n
                                            4. Title the Division element<\/strong> with a category (e.g., \u201cSocial wrapper\u201d) <\/li>\n<\/ol>\n

                                              We should introduce Connection sections<\/strong> inside the \u201cSocial wrapper\u201d Division element <\/strong>to generate clickable connections: <\/p>\n

                                                \n
                                              1. Initiate the Incorporate panel<\/strong> and drag a Connection section<\/strong> into the \u201cSocial wrapper\u201d<\/li>\n
                                              2. Launch the Resources panel<\/strong> and insert a societal media Picture<\/strong> into the Connection section<\/strong> (e.g., \u201cTwitter\u201d) <\/li>\n
                                              3. Select the Connection section<\/strong>, tap into the Identifier field <\/strong>and append a category (e.g., \u201cSocial link\u201d) <\/li>\n
                                              4. Copy and paste the \u201cSocial link\u201d twice more for a total of 3 societal media connections<\/li>\n<\/ol>\n

                                                Let\u2019s enhance the 2 supplementary societal link Pictures<\/strong>: <\/p>\n

                                                  \n
                                                1. Click twice on the second social hyperlink Picture<\/strong> and opt for \u201cSubstitute picture\u201d\u00a0<\/li>\n
                                                2. Pick your fresh social Picture<\/strong> from the Library panel<\/strong> (e.g., \u201cInstagram\u201d)\u00a0<\/li>\n
                                                3. Iterate the preceding 2 actions to exchange the third Picture<\/strong> (e.g., \u201cLinkedIn\u201d)<\/li>\n<\/ol>\n

                                                  Equally distribute the social hyperlinks and provide them with some space to breathe:\u00a0<\/p>\n

                                                    \n
                                                  1. Choose a \u201cSocial hyperlink\u201d<\/li>\n
                                                  2. Unfold the Design panel<\/strong> > Spacing<\/strong><\/li>\n
                                                  3. Incorporate a left and right margin <\/strong> of 10 pixels<\/li>\n
                                                  4. Pick the \u201cSocial wrapper\u201d<\/li>\n
                                                  5. Unfold the Design panel <\/strong>> Spacing<\/strong><\/li>\n
                                                  6. Incorporate a top margin <\/strong> of 30 pixels<\/li>\n<\/ol>\n

                                                    Remark:<\/strong> You can promptly append margin or padding to opposite sides of an element by pressing Option<\/strong> (on Mac) or Alt<\/strong> (on Windows), and dragging one of the margin<\/strong> or padding<\/strong> controls.\u00a0<\/p><\/blockquote>\n

                                                    Incorporate URLs to each \u201cSocial hyperlink:\u201d\u00a0<\/p>\n

                                                      \n
                                                    1. Choose a \u201cSocial hyperlink\u201d and tap the cog symbol of the label to open the link settings<\/li>\n
                                                    2. Enter your social channel\u2019s external URL in the URL field<\/strong><\/li>\n
                                                    3. Redo the previous 2 actions for the 2 remaining \u201cSocial hyperlinks\u201d<\/li>\n<\/ol>\n

                                                      To make our project links more prominent from the rest of the footer text, let\u2019s modify the weight of the text:\u00a0<\/p>\n

                                                        \n
                                                      1. Choose the Collection list<\/strong><\/li>\n
                                                      2. Unfold the Design panel <\/strong>> Typography<\/strong><\/li>\n
                                                      3. Adjust the font weight<\/strong> to a higher figure (e.g., \u201c600 – Semi bold\u201d)\u00a0<\/li>\n<\/ol>\n

                                                        Transform the footer into a Symbol<\/h2>\n

                                                        Let\u2019s convert the footer into a Symbol<\/strong> to facilitate its reuse across our project:\u00a0<\/p>\n

                                                          \n
                                                        1. Choose the Segment<\/strong> that encompasses our footer items<\/li>\n
                                                        2. Right-click the label of the Segment<\/strong> and choose \u201cEstablish a Symbol\u201d from the menu<\/li>\n
                                                        3. Assign a name to your Symbol<\/strong> (e.g., \u201cFooter\u201d)\u00a0<\/li>\n<\/ol>\n

                                                          Remark:<\/strong> To promptly generate a Symbol <\/strong>with shortcut keys, select the element you wish to convert into a Symbol<\/strong>, and hit Command + Shift + A<\/strong> (on Mac) or Control + Shift + A<\/strong> (on Windows).\u00a0<\/p><\/blockquote>\n

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

                                                          An impressive way to conclude your page with flair and engage your visitors!<\/p>\n","protected":false},"excerpt":{"rendered":"Design a reusable footer to act as a second navigation for your project.","protected":false},"author":2,"featured_media":5379,"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-5378","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\/5378","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=5378"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5378\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5379"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}