{"id":6140,"date":"2024-04-14T14:00:32","date_gmt":"2024-04-14T06:00:32","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6140"},"modified":"2024-04-14T14:00:32","modified_gmt":"2024-04-14T06:00:32","slug":"custom-properties","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/custom-properties\/","title":{"rendered":"Custom properties"},"content":{"rendered":"\n
\n

HTML properties define attributes (i.e., the behavior or look) of an HTML element. For instance, category<\/code> is an HTML trait that provides a method to classify similar elements, and is employed with CSS to include styles to elements that share that category. url<\/code> is another HTML trait that specifies a link\u2019s target URL.<\/p>\n

You can produce some HTML properties using native Webflow elements, styles, and configurations (e.g., links, categories, ids, etc.). You can develop others using custom properties<\/strong>, which are beneficial for a variety of purposes \u2014 building tooltips, boosting your site\u2019s accessibility with ARIA characteristics, expanding custom code and page styling capabilities with CMS data, and more.<\/p>\n

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

    \n
  1. How to craft custom properties<\/li>\n
  2. How to utilize CMS data in custom properties<\/li>\n
  3. How to utilize component features in custom properties<\/li>\n
  4. How to design components and CMS data with the category property<\/li>\n
  5. How to control custom properties<\/li>\n<\/ol>\n
    Remember: <\/strong>Some custom properties are reserved, as you are already able to generate them using native Webflow elements, styles, and configurations. For example, you can’t designate url<\/code> as a custom property to an existing element to mimic a link, but you can define a link target URL on link elements using link settings.<\/h6>\n

    How to craft custom properties<\/h2>\n

    To formulate a new custom property:<\/p>\n

      \n
    1. Select the element for which you wish to create a custom property<\/li>\n
    2. Head over to Element settings panel<\/strong> > Custom properties<\/strong><\/li>\n
    3. Press the \u201cplus<\/strong>\u201d icon<\/li>\n
    4. Enter the title<\/strong> of your custom property (e.g., tooltip<\/code>, aria-label<\/code>, etc.) along with its content<\/strong><\/li>\n<\/ol>\n
      Pro tip: <\/strong>You can access a complete list of HTML attributes in the Mozilla HTML attribute reference<\/a>.<\/h6>\n
      \n
      \"A<\/div>\n<\/figure>\n

      How to utilize CMS data in custom properties<\/h2>\n

      You can link your CMS data to custom properties to form a connection between design, code, and dynamic data \u2014 and empower more strength and flexibility in your design. This enables you to manage integrations or widgets that utilize HTML data properties (e.g., maps or social widget previews), employ custom CSS to adjust page styling based on the value of a CMS field, enhance site accessibility by employing CMS data to populate ARIA properties, and more.<\/p>\n

      Essential: <\/strong>You can exclusively link CMS data to custom properties on Collection pages or within Collection lists.<\/p><\/blockquote>\n

      To link your CMS data to custom properties:<\/p>\n

        \n
      1. Select the element for which you want to craft a custom property<\/li>\n
      2. Visit Element settings panel<\/strong> > Custom properties<\/strong><\/li>\n
      3. Click the \u201cplus<\/strong>\u201d icon<\/li>\n
      4. Enter the title<\/strong> of your custom property (e.g., tooltip<\/code>, aria-label<\/code>, etc.)<\/li>\n
      5. Click the violet \u201cdot<\/strong>\u201d icon in the content<\/strong> field<\/li>\n
      6. Choose the Collection field you desire to link to your custom property<\/li>\n<\/ol>\n
        Pro tip: <\/strong>You can also attach your CMS data to ID properties, which are handled separately from custom properties in the Element settings panel<\/strong>. This allows you to set up unique IDs to recognize specific CMS items, which you can utilize to target those items with custom code.<\/h6>\n
        \n
        \"A<\/div>\n<\/figure>\n

        How to utilize component attributes in custom properties<\/h2>\n

        You can also relate custom properties to component attributes. These can be utilized, for example, to facilitate and regulate complex styling and CMS fields. Discover more about component attributes.<\/p>\n

        To connect component attributes to custom properties:<\/p>\n

          \n
        1. Modify the primary component that embraces the element for which you want to craft a custom property<\/li>\n
        2. Select the element for which you want to forge a custom property<\/li>\n
        3. Go to Element settings panel<\/strong> > Custom properties<\/strong><\/li>\n
        4. Click the \u201cplus<\/strong>\u201d icon<\/li>\n
        5. Enter the title<\/strong> of your custom property (e.g., tooltip<\/code>, aria-label<\/code>, etc.)<\/li>\n
        6. Click the violet \u201cdot<\/strong>\u201d icon in the content<\/strong> field<\/li>\n
        7. (Optional) Establish a new component attribute<\/li>\n
        8. Choose the component attribute you want to link to your custom property<\/li>\n<\/ol>\n
          \n
          <\/div>\n<\/figure>\n

          How to design CMS data and components with the category<\/code> attribute<\/h2>\n

          You can apply the category<\/code> attribute to generate style variations on CMS data and components with custom code classes or classes you’ve established in Webflow (i.e., crafted in the Styling panel). For example, you could apply the category<\/code> attribute to employ light and dark themes on card components throughout your site.<\/p>\n

          Remember: <\/strong>The category<\/code> attribute can solely be utilized with text-based CMS data and component attributes.<\/h6>\n

          Note that the classes you devise in Webflow are lowercase and exclude spaces. For instance, if you generate a class in the Styling panel known as my awesome class<\/code>, the derived class is my-awesome-class<\/code> \u2014 thus to reference its styles in the category<\/code> attribute, you would input my-awesome-class<\/code>.<\/p>\n

          Moreover, Webflow adds an underscore to single-letter classes produced in the Designer (e.g., a class named c<\/code> turns into _c<\/code>).<\/p>\n

          Essential: <\/strong>The Style selectors panel<\/strong> doesn’t recognize any classes referenced on CMS data or component attributes. Before clearing out unused styles, make certain unused classes listedin the Panel of Style selectors<\/strong>, they are not utilized in any custom attributes on your website. <\/p><\/blockquote>\n

          Data of Content Management System<\/h3>\n

          To customize CMS data with the class<\/code> attribute: <\/p>\n

            \n
          1. Choose the element for which you desire to generate a specialized attribute <\/li>\n
          2. Head to Panel of Element settings<\/strong> > Special attributes<\/strong><\/li>\n
          3. Tap on the \u201cadd<\/strong>\u201d symbol<\/li>\n
          4. Insert class<\/code> into the Identifier<\/strong> section<\/li>\n
          5. Tap on the purple \u201cdot<\/strong>\u201d symbol within the Value<\/strong> section <\/li>\n
          6. Select the Collection section which you desire to link to the class<\/code> attribute<\/li>\n<\/ol>\n
            Reminder: <\/strong>You are only able to associate CMS data with customized attributes on Collection pages or inside Collection lists.<\/h6>\n

            Elements<\/h3>\n

            To customize components with the class<\/code> attribute: <\/p>\n

              \n
            1. Edit the primary component that encompasses the element in which you want to include a class<\/code> attribute<\/li>\n
            2. Select the element where you wish to incorporate a class<\/code> attribute<\/li>\n
            3. Proceed to Panel of Element settings<\/strong> > Special attributes<\/strong><\/li>\n
            4. Tap on the \u201cadd<\/strong>\u201d symbol<\/li>\n
            5. Insert class<\/code> into the Identifier<\/strong> section<\/li>\n
            6. Tap on the purple \u201cdot<\/strong>\u201d symbol in the Value<\/strong> section <\/li>\n
            7. (Optional) Form a fresh aspect of the component<\/li>\n
            8. Select the feature of the component you wish to connect to the class<\/code> attribute (e.g., \u201cTheme\u201d)<\/li>\n<\/ol>\n

              After that, to apply styles to this element within a component instance: \u00a0<\/p>\n

                \n
              1. Select the component instance on the canvas<\/li>\n
              2. Access the Panel of Props<\/strong><\/li>\n
              3. Insert a class title (one you’ve specified in Webflow or in tailored code) as the content for the component feature attached to the class<\/code> attribute (e.g., you could insert dark<\/code> as the content for the \u201cTheme\u201d component feature) <\/li>\n<\/ol>\n

                Explore further into component aspects.<\/p>\n

                Techniques to handle bespoke attributes <\/h2>\n

                To amend a customized attribute: <\/p>\n

                  \n
                1. Select the element where you need to revise a customized attribute<\/li>\n
                2. Head to Panel of Element settings<\/strong> > Special attributes<\/strong><\/li>\n
                3. Tap on the customized attribute you wish to amend<\/li>\n
                4. Renew the identifier<\/strong> and\/or contents<\/strong> of the customized attribute<\/li>\n<\/ol>\n

                  To erase a customized attribute: <\/p>\n

                    \n
                  1. Select the element where you seek to remove a customized attribute<\/li>\n
                  2. Access the Panel of Element settings<\/strong> > Special attributes<\/strong><\/li>\n
                  3. Tap on the \u201cgarbage bin<\/strong>\u201d symbol adjacent to the customized attribute you intend to erase<\/li>\n<\/ol>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use custom attributes to define characteristics of an HTML element.","protected":false},"author":2,"featured_media":5249,"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":[290],"tags":[],"class_list":{"0":"post-6140","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-elements","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6140","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=6140"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6140\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5164"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}