{"id":5557,"date":"2024-04-14T11:47:25","date_gmt":"2024-04-14T03:47:25","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5557"},"modified":"2024-04-14T11:47:25","modified_gmt":"2024-04-14T03:47:25","slug":"format-initial-concluding-strange-uniform-elements-on-your-content-management-system","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/format-initial-concluding-strange-uniform-elements-on-your-content-management-system\/","title":{"rendered":"Format initial, concluding, strange, uniform elements on your Content Management System"},"content":{"rendered":"\n
\n
\n
<\/div>\n<\/figure>\n

In this teaching:<\/strong><\/p>\n

    \n
  1. Configure selectors and design<\/li>\n
  2. Adaptable elements<\/li>\n
  3. Aesthetic inheritance<\/li>\n<\/ol>\n

    Configure selectors<\/h2>\n

    To assign design to specific adaptable list positions (e.g., the initial item) unveil the Statuses<\/strong> dropdown menu in the Selectors<\/strong> of the Design panel<\/strong> and opt for the element(s)<\/strong> you desire to design.<\/p>\n

    Initial and Concluding item<\/h3>\n

    You have the ability to include design to the initial or concluding item in your adaptable list through these steps:<\/p>\n

      \n
    1. Opt for an adaptable item (e.g., Assortment item)<\/li>\n
    2. Opt for Initial item<\/strong>, or Concluding item<\/strong>, in the Statuses<\/strong> dropdown menu<\/li>\n
    3. Augment design attributes in the Design panel<\/strong><\/li>\n<\/ol>\n

      This action will integrate design attributes to the initial or concluding item in your adaptable list.<\/p>\n

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

      <\/p>\n

      This is effective to emphasize these specific elements and enhance your layout a more improved visual hierarchy. For instance, you can bring focus to the latest blog post from your blog list by introducing background and text styles to the initial item.<\/p>\n

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

      Strange and Uniform items<\/h3>\n

      To design strange or uniform items in your adaptable list:<\/p>\n

        \n
      1. Opt for an adaptable item (e.g., Assortment item)<\/li>\n
      2. Opt for Strange items<\/strong>, or Uniform items<\/strong>, in the Statuses<\/strong> dropdown menu<\/li>\n
      3. Augment design attributes in the Design panel<\/strong><\/li>\n<\/ol>\n

        This will integrate design attributes to the strange- or uniform-numbered items in your adaptable list.<\/p>\n

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

        <\/p>\n

        Designing your list elements like this visually divides your list so elements can be recognized between each other more simply. For example, you can segregate your list by adding background and text styles to the odd-numbered items (initial item, third item, fifth item, etc.) so that someone can more effortlessly see each item separately.<\/p>\n

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

        Adaptable elements<\/h2>\n

        You can design elements like Assortment listings<\/strong> on fixed pages, or a list of adaptable elements on a Blueprint<\/strong> page.<\/p>\n

        Commercial<\/h3>\n

        You can also design adaptable elements on the Commercial<\/strong> pages.<\/p>\n

        For instance, you can design the list of items added to someone’s cart when they browse the Checkout<\/strong> and Order confirmation<\/strong> page.<\/p>\n

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

        You can also incorporate interactivity to your elements by altering the way they seem and behave in distinct States. Learn about interactive States.<\/p>\n

        Aesthetic inheritance<\/h2>\n

        All statuses inherit styles from the None<\/strong> status. You can observe from where styles are being inherited by hitting the inheritance indicator right above the selector field.<\/p>\n

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

        After you\u2019ve included styles to a status, the Statuses<\/strong> menu dropdown icon will turn blue. And when you reveal the Statuses<\/strong> dropdown menu, you will see blue circles exhibiting that there are styles in whatever status that\u2019s been styled.<\/p>\n

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

        <\/p>\n

        And that\u2019s designing specific Assortment items in Webflow!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Structure styles allow us to create specific styles for elements in a dynamic list. This gives us the chance to highlight elements in a list to improve visual hierarchy.","protected":false},"author":2,"featured_media":5218,"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-5557","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\/5557","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=5557"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5557\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5273"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5557"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5557"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}