{"id":4328,"date":"2024-04-15T03:14:34","date_gmt":"2024-04-14T19:14:34","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4328"},"modified":"2024-04-15T03:14:34","modified_gmt":"2024-04-14T19:14:34","slug":"data","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/data\/","title":{"rendered":"Data"},"content":{"rendered":"\n
\n

Data enable you to store dimensions, hue, and text formatting so you can reuse them for a uniform design experience. When a variable value is modified, this adjustment will reflect everywhere it\u2019s utilized on the website. Additionally, they are accessible in a central spot for enhanced visibility into your site\u2019s formats.<\/p>\n

Within this lecture, you will discover:<\/p>\n

    \n
  1. What exactly are data elements?<\/li>\n
  2. The process of generating, modifying, and erasing data elements<\/li>\n
  3. How to apply data elements on the canvas<\/li>\n
  4. The method to detach a variable from an item<\/li>\n
  5. How to organize data elements in clusters<\/li>\n
  6. Effectively using terms that represent other terms<\/li>\n
  7. Implementing data elements in interactions<\/li>\n<\/ol>\n

    Defining Data Elements<\/h2>\n

    There exist 3 varieties of data elements:<\/p>\n

      \n
    • Measurement data elements<\/li>\n
    • Color data elements<\/li>\n
    • Text style data elements<\/li>\n<\/ul>\n

      Measurement Data Elements<\/h3>\n

      You can designate measurement data elements for:<\/p>\n

        \n
      • Space around and within \u2014 top, bottom, left, right<\/li>\n
      • Placement \u2014 top, bottom, left, right<\/li>\n
      • Column and row separations for exhibition configurations and Quick Stack<\/li>\n
      • Height and breadth dimensions (also involving minimum and maximum)<\/li>\n
      • Grid column and row proportions<\/li>\n
      • Typographic features \u2014 font size, line spacing, letter spacing<\/li>\n
      • Border curvature and breadth<\/li>\n
      • Filter and backdrop filter haze radius<\/li>\n<\/ul>\n

        Color Data Elements<\/h3>\n

        You can designate color data elements for:<\/p>\n

          \n
        • Text hues<\/li>\n
        • Background hues<\/li>\n
        • Border and text contour hues<\/li>\n
        • Gradient hue terminations<\/li>\n<\/ul>\n
          Caution: <\/strong>Color swatches have been shifted to color data elements. Previously created swatches can be found in the Data elements panel.<\/h6>\n

          Text Style Data Elements<\/h3>\n
            \n
          • Font category<\/li>\n<\/ul>\n

            The Process of Establishing, Modifying, and Erasing Data Elements<\/h2>\n

            To initiate a data element, navigate to the Data<\/strong>elements panel<\/strong>, press New data element<\/strong>, and pick the type of data element you desire to establish (for example, Hue<\/strong>, Measure<\/strong>, or Font Family<\/strong>).<\/p>\n

            To alter the default data element title, hover over the name and click the configuration \u201cgear<\/strong>\u201d icon.<\/p>\n

            You can modify the content of the data element by clicking on the content. Hue data elements allow you to select a hue from the picker. Measurement data elements allow you to choose a numerical value and unit. Text style data elements allow you to select a font category from the dropdown. Any custom fonts (including those from Google and Adobe) uploaded to your site or Workspace are accessible when choosing a font family data element.<\/p>\n

            Once the value of a data element is altered in the Data elements panel<\/strong>, any linked items will be automatically updated.<\/p>\n

            Note:<\/strong> Names and values of data elements can also be adjusted directly in the Format panel<\/strong>. Hover over a section currently tied to a data element, then click the \u201cedit<\/strong>\u201d icon to initiate the data element editing modal.<\/h6>\n

            If a data element value is changed in the Data elements panel<\/strong> or the Format panel<\/strong>, any linked items will automatically reflect the modifications.<\/p>\n

            Data elements can be deleted by moving to the Data elements panel<\/strong>, hovering over the name, and tapping the configuration \u201cgear<\/strong>\u201d icon. Afterward, choose Delete<\/strong>.<\/p>\n

            Utilizing Data Elements on the Canvas<\/h2>\n

            After establishing your data elements in the Data elements panel, you can employ those elements while designing. Data elements can be used in the Format panel and the Interactions panel.<\/p>\n

              \n
            • To apply hue<\/strong> data elements \u2014 tap the violet dot on the upper-left corner of a swatch<\/li>\n
            • To apply measurement<\/strong> data elements \u2014 tap the violet dot on the upper-left corner of a measurement input field<\/li>\n
            • To implement font<\/strong> data elements \u2014 tap the violet dot on the upper-left corner of the Font<\/strong> field within the Typographic<\/strong> section<\/li>\n<\/ul>\n
              Caution:<\/strong> When a data element is utilized in the Format panel, the value of that element will be highlighted in violet.<\/h6>\n
              Professional recommendation:<\/strong> You can also incorporate data elements directly from the Format panel<\/strong>. Choose an item, tap the violet dot on the upper-left corner of a data element input field (such as a swatch, measurement input field, font field), click the \u201cplus<\/strong>\u201d icon, establish your data element with a title<\/strong> and content<\/strong>, then hit Save<\/strong>. If you wish to tie the value to an existing data element, click the violet dot on the upper-left corner of the content<\/strong> field and pick an existing element to link.<\/h6>\n

              The Method to Detach a Data Element from an Item<\/h2>\n

              To unlink a hue or font data element from an item, press the content in the Format panel that is presently linked to an element (e.g., background hue, font, etc.). Then, tap Unlink<\/strong>.<\/p>\n

              To unlink a measurement data element from an item, select the content in the Format panel that is presently linked to a data element, press the data element title in the menu, and tap Unlink<\/strong>.<\/p>\n

              Managing Data Elements in Clusters<\/h2>\n

              You possess the ability to arrange data elements in clusters. This grants more insight into your group\u2019s design choices and systems.<\/p>\n

              To cluster data elements, provide titles with this structure: group title\/element title. For instance, if you want a cluster labelled \u201cShades,\u201d you could establish 2 elements named \u201cShades\/Scarlet\u201d and \u201cShades\/Sapphire.\u201d They will show up grouped in a \u201cShades\u201d fragment in the Data elements panel<\/strong>.<\/p>\n

              To detach an element from a cluster, remove the group title (e.g., \u201cShades\u201d) from the element title.<\/p>\n

              Using Alternate Names<\/h2>\n

              Alternate names enable you to produce new elements that reference the values of existing elements. Subsequently, if one of the associated elements is altered, all alternate names will automatically be updated. To set up an alternate name, tap the \u201cdot<\/strong>\u201d icon to the right of your new element. A list will appear featuring existing elements that you can select to reference.<\/p>\n

              Caution:<\/strong> Only elements of the same kind can be used to generate alternate names (for instance, color elements can be utilized to create alternate names of color elements, but not color elements pointing to measurement elements).<\/h6>\n

              To unlink alternate names, tap the element value you intend to detach, then press Unlink<\/strong>.<\/p>\n

              Utilizing Data Elements in Interactions<\/h2>\n

              Hue, measurement, and font data elements can be applied within customized animations. When selecting an operation for your custom animation, you can opt to Set data element value<\/strong>. This allows you to modify item hues, measurements, or font styles in an interaction using existing data elements.<\/p>\n

              To set a data element value in your animation, proceed to Set data element value <\/strong>> Element <\/strong>and pick your data element value from the list.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use variables to store and manage frequently used styles.","protected":false},"author":2,"featured_media":5202,"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-4328","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\/4328","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=4328"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4328\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5293"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=4328"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=4328"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=4328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}