{"id":7013,"date":"2024-04-14T17:34:20","date_gmt":"2024-04-14T09:34:20","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=7013"},"modified":"2024-04-14T17:34:20","modified_gmt":"2024-04-14T09:34:20","slug":"commencement-library","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/commencement-library\/","title":{"rendered":"Commencement Library"},"content":{"rendered":"\n
\n

You can integrate Webflow\u2019s Commencement Library layouts into your empty canvas and kick-start your design process, or integrate the layouts within an existing site. Utilizing these Commencement Library layouts can save you from reconstructing standard designs (for example, navigation bars, testimonials, footers) from the ground up.<\/p>\n

Throughout this tutorial, you will grasp:<\/p>\n

    \n
  1. The method to enter the Commencement Library<\/li>\n
  2. Varieties of designs present in the Commencement Library<\/li>\n<\/ol>\n

    Approaching the Commencement Library<\/h2>\n

    To reach the Commencement Library in the Webflow Designer, you can navigate to Add panel <\/strong>> Layouts<\/strong> tab or utilize the Quick find feature.<\/p>\n

    Gaining access to the designs in a Library<\/h3>\n

    The Commencement Library comprises designs (such as navigation bars, hero sections, footers) that you can insert into your site. To reach these designs:<\/p>\n

      \n
    1. Navigate to Add panel<\/strong> > Layouts <\/strong>tab<\/li>\n
    2. Select Commencement Library<\/strong><\/li>\n
    3. Choose a design category dropdown to unveil the designs in that area (e.g., clicking Navigation<\/strong> for accessing navigation designs)<\/li>\n<\/ol>\n
      \n
      \"The<\/div>\n<\/figure>\n

      Subsequently, you can employ these designs as you would any other element. To append a design from your Library to the Webflow canvas, you can:<\/p>\n

        \n
      • Click on the design in the Layouts<\/strong> tab to insert it on the canvas<\/li>\n
      • Drag the design to the canvas<\/li>\n
      • Drag it into the Navigator<\/li>\n<\/ul>\n
        Please note: <\/strong>If you insert a design on the canvas with a class already existing on your site, the class name will be displayed with an incremented number. For example, if you already have a “Button” class on your site and you insert a design containing the same “Button” class, the design class name will change to “Button-2” in the Selector field.<\/h6>\n

        Learn more about utilizing Libraries.<\/p>\n

        Varieties of designs in the Commencement Library<\/h2>\n

        The Commencement Library is a standard, Webflow-created Library comprising 34 designs that you can implement on any site. The 34 designs are segregated into the following categories:<\/p>\n

          \n
        1. Navigation<\/li>\n
        2. Hero<\/li>\n
        3. Team<\/li>\n
        4. Emblems<\/li>\n
        5. Gallery<\/li>\n
        6. Traits<\/li>\n
        7. Pricing<\/li>\n
        8. Endorsement<\/li>\n
        9. Footer<\/li>\n<\/ol>\n

          Navigation<\/h2>\n

          Three variants of navigation<\/strong> designs, referred to as navbars, are available. These are typically employed at the top of website pages to allow easy access to website links and the homepage. All three navigation designs incorporate a logo, links, a dropdown, and a call-to-action button.<\/p>\n

          Centered Navbar with Logo<\/h3>\n

          The centered navbar with logo<\/strong> design utilizes flexbox to arrange 2 text links and a dropdown on the left, a logo placeholder in the center, and a text link and call-to-action button on the right.<\/p>\n

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

          Left-Aligned Navbar with Logo<\/h3>\n

          The left-aligned navbar with logo<\/strong> design employs flexbox to organize a logo placeholder on the left, 3 text links and a dropdown in the center, and a text link and call-to-action button on the right.<\/p>\n

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

          Shadowless Navbar<\/h3>\n

          The shadowless navbar<\/strong> design employs flexbox to organize a logo placeholder on the left, 4 text links and a dropdown in the center, and a call-to-action button on the right.<\/p>\n

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

          Additional Navbar Configurations<\/h3>\n

          Upon reaching breakpoints smaller than the desktop breakpoint, everything except the logo will automatically condense into a navbar menu button, also known as a hamburger menu. You have the option to override this behavior to showcase the navbar menu button on all or none of the breakpoints.<\/p>\n

          To modify the appearance of the navbar menu button:<\/p>\n

            \n
          1. Select the Navbar <\/strong>design or any internal element<\/li>\n
          2. Access Settings panel<\/strong> > Navbar settings<\/strong><\/li>\n
          3. Utilize the device options slider to determine when the menu button<\/strong> will be displayed initially<\/li>\n<\/ol>\n
            \n
            \"The<\/div>\n<\/figure>\n

            You can also build a navbar interaction that responds to scrolling. Learn more about displaying and hiding the<\/p>\n

            Scrolling changes the navigation bar.<\/p>\n

            Illustration of a genuine navigation bar<\/h3>\n
            \n
            \n\n<\/div>
            The Airtable website showcases a navigation bar that includes the Airtable emblem and shortcuts to Product, Solutions, Pricing, Enterprise, and Resources. It also presents a \u201cContact sales\u201d tab, a Sign up tab, and a Sign in link.<\/figcaption><\/figure>\n

            Main Section<\/h2>\n

            There are 7 variations of main section layouts. The main section is a segment that captures the attention of website visitors towards content placed at the top of a webpage like an image, product, or an invitation for action. All 7 main section layouts comprise a title, a paragraph, and a call-to-action button. Several layouts accommodate an extra placeholder for an image or video, whereas others feature an editable subscription form (e.g., newsletter registration, product updates).<\/p>\n

            Centered Main Section Heading<\/h3>\n

            The centered main section heading<\/strong> layout employs flexbox to structure a centered heading, a paragraph, and a call-to-action button on the left, along with a placeholder image on the right.<\/p>\n

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

            Left-Aligned Main Section Heading<\/h3>\n

            The left-aligned main section heading<\/strong> layout uses flexbox to arrange a left-aligned heading, paragraph, and call-to-action button, together with a placeholder image on the right.<\/p>\n

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

            Right-Aligned Main Section Heading<\/h3>\n

            The right-aligned main section heading<\/strong> layout uses flexbox to organize a placeholder image on the left, combined with a heading, paragraph, and call-to-action button on the right.<\/p>\n

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

            Main Section in a Stack<\/h3>\n

            The main section stack layout<\/strong> arranges a heading, paragraph, call-to-action button, and placeholder image in a stack.<\/p>\n

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

            Main Section with Left-Aligned Subscription<\/h3>\n

            The main section with left-aligned subscription<\/strong> layout utilizes flexbox to structure a heading, paragraph, registration form, and a \u201cSign up with Google\u201d link on the left, along with a placeholder image on the right.<\/p>\n

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

            Main Section with Right-Aligned Subscription<\/h3>\n

            The main section with right-aligned subscription<\/strong> layout uses flexbox to organize a placeholder image on the left, along with a heading, paragraph, registration form, and a \u201cSign up with Google\u201d link on the right.<\/p>\n

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

            Main Section without Image<\/h3>\n

            The main section without image<\/strong> layout applies flexbox to centralize a heading, paragraph, and call-to-action button within the section.<\/p>\n

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

            Illustration of a genuine main section<\/h3>\n
            \n
            <\/div>
            The Figma website homepage hero section which includes a depiction of Figma on the left side and an embellished image on the right side.<\/figcaption><\/figure>\n

            Crew<\/h2>\n

            There exist 2 varieties of crew<\/strong> layouts. The crew design showcases diverse members of your team along with their identities, positions, biographies, etc.<\/p>\n

            Staff circles<\/h3>\n

            The staff circles<\/strong> arrangement begins with a title and a paragraph at the top, utilizing a grid system to arrange circular placeholder illustrations, names of team members, and various details under each illustration. This format encompasses 6 modifiable staff cards.<\/p>\n

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

            Crew slider<\/h3>\n

            The crew slider<\/strong> design starts with a title and a paragraph on the top, beneath which lies a slider with 6 placeholder team blocks. Each block includes a sample image, team member’s name, their bio, and a link \u201cHow we can support you,\u201d which is customizable for displaying varied calls to action.<\/p>\n

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

            Emblems<\/h2>\n

            There are 5 kinds of emblems<\/strong> formations. These are frequently employed to exhibit logos of partnering firms or your clientele, though they can encompass testimonials, visuals, etc.<\/p>\n

            All 5 emblems setups incorporate logo placeholders that can be substituted with logos of your clients, and 2 of them include a container for client testimonials.<\/p>\n

            Emblems quotation section<\/h3>\n

            The emblems quotation section<\/strong> model utilizes flexbox to organize a placeholder customer quote, their image, and details on the left side, while arranging 6 placeholder logos on the right in a grid-like format.<\/p>\n

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

            Emblems quote separation<\/h3>\n

            The emblems quote separation<\/strong> format resembles the emblems quotation section<\/strong> layout, except the customer panel lacks a preset background color, and additional placeholder text above the client quote provides further context to the statement.<\/p>\n

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

            Emblems heading extensive<\/h3>\n

            The emblems heading extensive<\/strong> structure consists of a title and a div block beneath, organizing 5 logo placeholders utilizing flexbox.<\/p>\n

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

            Emblems heading small<\/h3>\n

            The emblems heading small<\/strong> layout mirrors the emblems heading extensive<\/strong> organization but substitutes the title with a compact text block.<\/p>\n

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

            Emblems lacking header<\/h3>\n

            The emblems lacking header<\/strong> format is identical to the emblems heading extensive<\/strong> layout except for the absence of a title placeholder.<\/p>\n

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

            Instance of a genuine logo section<\/h3>\n
            \n
            <\/div>
            Logos presented on the Figma website pricing section.<\/figcaption><\/figure>\n

            Collection<\/h2>\n

            There are 3 variations of collection<\/strong> arrangements. These may be utilized to showcase multiple visuals or clips within a segment on your webpage.<\/p>\n

            The initial 2 collection structures present a full-screen grid layout of placeholder visuals (at the desktop breakpoint), along with editable text and connections. The last collection design applies a slider to feature 2 visuals concurrently.<\/p>\n

            Collection synopsis<\/h3>\n

            The collection synopsis<\/strong> design employs a grid with 3 columns to arrange the content. The left column contains a title, text, list, and a call-to-action button. The center and right columns are embedded grids with a placeholder visual in each row.<\/p>\n

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

            Collection scroll<\/h3>\n

            The collection scroll<\/strong> configuration features a fixed wrapper on the left that includes 5 placeholder connections. The fixed wrapper guarantees that the connections will persist in the same spot on the display while the visual segment scrolls down with the page. The connections in the fixed wrapper can also be linked to the placeholder visuals in the right grid; hence, a click on a connection will directly transport a site visitor to that visual.<\/p>\n

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

            Collection carousel<\/h3>\n

            The collection carousel<\/strong> design employs a grid with a title and text in the left column, and 2 carousel placeholder visuals in the subsequent 2 columns.<\/p>\n

            The carousel holds a total of 4 visuals, with 2 on the initial slide and 2 on the subsequent slide. The second slide will alter the first slide when a site visitor hits the arrow or uses their keyboard to progress the carousel.<\/p>\n

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

            Illustrative carousel scenario<\/h3>\n
            \n
            <\/div>
            A collection scroll section on the Designer page of the primary Webflow site. The left side features a depiction of Webflow\u2019s reusable CSS classes and a client commendation below it. The right section showcases 8 placeholder connections with the \u201cClasses\u201d link highlighted.<\/figcaption><\/figure>\n

            Characteristics<\/h2>\n

            There are 3 types of characteristics<\/strong> arrangements. These models can be utilized to exhibit the distinct characteristics of your business or product.<\/p>\n

            Traits inventory<\/h3>\n

            The traits inventory<\/strong> configuration utilizes flexbox to arrange a title, text, and a \u201cDiscover more\u201d link on the left, and a list on the right containing placeholder visuals and textual content in each item.<\/p>\n

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

            Characteristics statistics<\/h3>\n

            The characteristics statistics<\/strong> configuration employs flexbox to organize 4 customizable div blocks horizontally. These div blocks can contain significant statistics that you wish to make visible to your users.<\/p>\n

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

            Comparison Table<\/h3>\n

            Within the comparison table<\/strong>, there is a header and a descriptive section above the main contrast container. Each row in this comparison container is segmented into its own grid, composed of 2 columns and 1 row. Such an arrangement facilitates the comparison or differentiation of products, features, etc.<\/p>\n

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

            Cost Overview<\/h2>\n

            There exist 3 variants of pricing<\/strong> structures. Typically, these pricing structures are used to exhibit product costs, compare pricing options, or direct visitors to other product pages within your website.<\/p>\n

            Pricing Comparison<\/h3>\n

            The arrangement of the pricing comparison<\/strong> employs a grid layout to present an array of features across 3 distinct cards. Such a layout is beneficial for contrasting prices and features among various pricing plans. Each card integrates a generic image, a header, a subheader, price details, a paragraph, a “Consult with an expert” button, and a list section that can be modified to emphasize plan features.<\/p>\n

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

            Price Points<\/h3>\n

            The layout of price points<\/strong> incorporates a flexbox to centrally align 3 cards. These cards can be utilized to showcase products and their key statistics. Each card features a placeholder image on its left side, while the right side contains a content block comprising a product title, a prominently displayed price, and specific pricing details.<\/p>\n

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

            Pricing Summary<\/h3>\n

            The layout of pricing summary<\/strong> comprises a centrally aligned header and a paragraph, followed by a grid below. Within this grid, there are 3 pricing cards, each equipped with a generic image, a header, a paragraph, and a “Explore further” hyperlink.<\/p>\n

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

            Client Feedback<\/h2>\n

            There are 6 variations of client feedback<\/strong> structures. These are commonly employed to exhibit feedback regarding a product or service. These structures include predefined spaces for titles, author names and images, as well as testimonials.<\/p>\n

            Dark Testimonial Column<\/h3>\n

            The configuration of the dark testimonial column<\/strong> features a header and a grid encompassing 3 testimonial sections. The primary testimonial on the left side holds crucial or impactful reviews. It showcases a large placeholder image, a quote, the author’s name, and an explanatory text section to include the author’s position or company. On the right side, there are 2 smaller testimonials, each with a compact quote, image, author name, and an explanation of their testimonial.<\/p>\n

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

            Bright Testimonial Column<\/h3>\n

            The setup of the bright testimonial column<\/strong> includes a header and 3 equally sized testimonial cards organized within a single row grid. Each testimonial card comprises a placeholder quote, an image, the author’s name, and their job title.<\/p>\n

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

            Image-First Testimonial<\/h3>\n

            The format of image-first testimonial<\/strong> emphasizes a primary testimonial. It leverages flexbox to position a placeholder image on the left, juxtaposed with introductory text, a quote, the author’s name, and their job title on the right side.<\/p>\n

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

            Large review slider<\/h3>\n

            The large review slider<\/strong> format utilizes a slider element with 4 placeholder testimonials. Each slider card features a testimonial, author’s name, author’s image, and author’s job title on the left, complemented by a larger image on the right.<\/p>\n

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

            Small review slider<\/h3>\n

            The small review slider<\/strong> layout displays a centered heading and paragraph with a slider below them. Each testimonial card includes a quote, placeholder image, author’s name, and author’s job title. There are 2 testimonials in each slide, totaling 4 testimonials within this design.<\/p>\n

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

            Review stack<\/h3>\n

            The review stack<\/strong> layout utilizes flexbox to highlight a single, significant testimonial. This arrangement presents introductory text, a quote, an author’s picture, the author’s name, and the author’s job title.<\/p>\n

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

            Real-life testimonial instance<\/h3>\n
            \n
            <\/div>
            An authentic testimonial example showcased on the primary Webflow website homepage.<\/figcaption><\/figure>\n

            Footer<\/h2>\n

            There exist 3 variations of footer<\/strong> layouts. These layouts are commonly utilized to exhibit page links (e.g., Privacy Policy, Terms and Conditions, etc.), copy, social media links, and copyright details below your website’s primary content.<\/p>\n

            Dark footer<\/h3>\n

            The dark footer<\/strong> design employs flexbox and a grid structure to present crucial links and information. It consists of a placeholder image on the left for a company logo and a grid on the right with 3 segments (“Company,” “Resources,” and “About”), in addition to social media links. The design also contains a section dedicated to displaying copyright information.<\/p>\n

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

            Light footer<\/h3>\n

            The light footer<\/strong> design features essential links and information using flexbox. It integrates a placeholder company logo image on the left, two sections with links below (“Company” and “Quick link”) in the middle, and a subscription form on the right where visitors can input their email addresses to subscribe to your content (e.g., product updates, monthly newsletter, etc.). The layout also includes a section beneath the main footer region to display both copyright details and social media links.<\/p>\n

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

            Subscribe footer<\/h3>\n

            The subscribe footer<\/strong> structure encompasses 3 horizontal sections. The upper section features a prominent subscription form. The middle section contains 5 navigation links and social media links. The bottom section exhibits copyright information, a link to the “Terms of Use,” and a link to the “Privacy Policy.”<\/p>\n

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

            <\/p>\n

            Actual footer example<\/h3>\n
            \n
            <\/div>
            The Figma website’s footer presenting the Figma logo, social media links, and 4 sections: Use cases, Explore, Resources, and Compare.<\/figcaption><\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Save time building common layouts from scratch with the Starter Library.","protected":false},"author":2,"featured_media":5290,"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":[284],"tags":[],"class_list":{"0":"post-7013","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/7013","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=7013"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/7013\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5333"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=7013"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=7013"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=7013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}