{"id":5336,"date":"2024-04-14T21:53:46","date_gmt":"2024-04-14T13:53:46","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5336"},"modified":"2024-04-14T22:31:49","modified_gmt":"2024-04-14T14:31:49","slug":"text-overlays","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/text-overlays\/","title":{"rendered":"Text overlays"},"content":{"rendered":"
\n

Seize the attention of your website visitors by employing background gradients and image text overlays to elevate your Heading presentation. Impress them with a scroll effect that unveils your background image within the characters of your text.<\/p>\n

\n
\"A<\/div>\n<\/figure>\n

In this instructional module, you will discover how to integrate text overlays into any textual content in your project by following these steps:\u00a0<\/p>\n

    \n
  1. Gradient text overlay\u00a0<\/li>\n
  2. Image text overlay<\/li>\n
  3. Fixed image text overlay<\/li>\n<\/ol>\n

    Gradient text overlay<\/h2>\n

    Begin by inserting a Heading<\/strong> on our page and adjusting its font to a heavier weight for enhanced visibility of the text overlay within its characters:\u00a0<\/p>\n

      \n
    1. Access the Add panel<\/strong><\/li>\n
    2. Drop a Heading<\/strong> onto the page<\/li>\n
    3. Unveil the Style panel <\/strong>> Typography<\/strong> and configure the font <\/strong>(e.g., \u201cInter 700 – Bold\u201d)<\/li>\n<\/ol>\n

      Apply a gradient<\/strong> to the Heading<\/strong>:<\/p>\n

        \n
      1. Choose the Heading<\/strong><\/li>\n
      2. Access the Style panel <\/strong>> Backgrounds<\/strong><\/li>\n
      3. Click on the \u201cplus\u201d icon under Image and gradient<\/strong><\/li>\n
      4. Select Linear gradient<\/strong> as the Type<\/strong><\/li>\n
      5. Define multiple gradient <\/strong>stops as desired and use the color picker<\/strong> to assign a color for each gradient stop<\/li>\n
      6. Modify the angle<\/strong> of your gradient by interacting with the direction dial dot, utilizing the arrows, or inputting the angle degree directly<\/li>\n<\/ol>\n

        Learn more about background gradients.\u00a0<\/p>\n

        \n
        \"Background<\/div>\n<\/figure>\n

        Note:<\/strong> Safari interprets (and interpolates) gradients to a transparency as \u201ctransparent black\u201d. Thus, the transparent color might appear black to Safari users.\u00a0<\/p><\/blockquote>\n

        Now for the enchantment \u2014 let\u2019s implement the gradient<\/strong> solely to the Heading <\/strong>text:\u00a0<\/p>\n

          \n
        1. Select the Heading<\/strong><\/li>\n
        2. Access Style panel <\/strong>> Backgrounds<\/strong><\/li>\n
        3. Opt for \u201cClip background to text\u201d from the Clipping<\/strong> dropdown menu<\/li>\n<\/ol>\n
          \n
          \"\u201cClip<\/div>\n<\/figure>\n
          \n
          \"A<\/div>\n<\/figure>\n

          Image text overlay<\/h2>\n

          Let\u2019s append another Heading<\/strong> to our page:<\/p>\n

            \n
          1. Access the Add panel<\/strong><\/li>\n
          2. Drop a Heading<\/strong> onto the page<\/li>\n
          3. Access Style panel <\/strong>> Typography<\/strong> and set the font <\/strong>(e.g., \u201cInter 700 – Bold\u201d)<\/li>\n<\/ol>\n

            Utilize a Background image<\/strong> as our text overlay:\u00a0<\/p>\n

              \n
            1. Select the Heading<\/strong><\/li>\n
            2. Access Style panel <\/strong>> Backgrounds<\/strong><\/li>\n
            3. Click on the \u201cplus\u201d icon under Image and gradient<\/strong><\/li>\n
            4. Tap on \u201cChoose image\u201d to designate the image<\/strong> for your text overlay<\/li>\n
            5. Adjust the image to Cover<\/strong><\/li>\n
            6. Click a dot beneath Position <\/strong>to tailor how your image is exhibited (e.g., pick the lower left dot)<\/li>\n<\/ol>\n

              Find more information about background images.<\/p>\n

              \n
              \"A<\/div>\n<\/figure>\n

              We\u2019ll repeat the same process as earlier to clip our gradient to the text:\u00a0<\/p>\n

                \n
              1. Select the Heading<\/strong><\/li>\n
              2. Access Style panel <\/strong>> Backgrounds<\/strong><\/li>\n
              3. Pick \u201cClip background to text\u201d from the Clipping<\/strong> dropdown menu<\/li>\n<\/ol>\n
                \n
                \"\u201cClip<\/div>\n<\/figure>\n
                \n
                \"A<\/div>\n<\/figure>\n

                Stable image text fill<\/heading>In order to make our text behave like a cutout \u2014 a window \u2014 into our background image, we’ll follow these steps. As your visitor scrolls down the page, the Heading<\/strong> text discloses parts of the background image behind it. <\/description>

                Select the Heading<\/strong><\/point1>Launch Style panel <\/strong>> Backgrounds<\/strong><\/point2>Select Stable<\/strong> to ensure the background covers the entire viewport and stays fixed as you scroll<\/point3><\/listing>\n
                \n
                \"A<\/div>\n<\/figure>\n

                There you have it – impress your guests with visually captivating text!
                <\/description><\/div>\n","protected":false},"excerpt":{"rendered":"Add a pop of visual interest to your designs with gradient and image text fills.","protected":false},"author":2,"featured_media":5158,"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-5336","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\/5336","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=5336"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5336\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5204"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5336"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}