{"id":5071,"date":"2024-04-14T11:22:42","date_gmt":"2024-04-14T03:22:42","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5071"},"modified":"2024-04-14T11:35:22","modified_gmt":"2024-04-14T03:35:22","slug":"trim-picture-to-text-span","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/trim-picture-to-text-span\/","title":{"rendered":"Trim picture to text span"},"content":{"rendered":"
\n

Merge the potential of text spans and image text fills to craft Headings that standout \u2014 all while still retaining selectability and search engine friendliness.<\/p>\n

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

In this tutorial, you’ll discover:<\/p>\n

    \n
  1. How to envelop text with a span<\/li>\n
  2. How to insert a background image to the text span<\/li>\n
  3. How to trim the image background<\/li>\n<\/ol>\n

    How to envelop text with a span<\/h2>\n

    To impact specific text within a Heading, include a span around it:<\/p>\n

      \n
    1. Pick your Heading<\/strong> and double-click it to initiate editing<\/li>\n
    2. Highlight the word or words you wish to enclose in the span<\/li>\n
    3. Choose the Wrap with Span<\/strong> “brush” icon located in the options above your selection<\/li>\n<\/ol>\n
      \n
      The \"Wrap with span\" brush icon button appears after selecting a word in a multi-word Heading<\/div>\n<\/figure>\n

      Excellent! Now you have established a span within your Heading.<\/p>\n

      \n
      After wrapping one word with a span in a multi-word Heading, the word becomes a distinct \"Text span\"<\/div>\n<\/figure>\n

      Remember to assign a class to your span to keep your formatting organized (e.g., “Image background).<\/p>\n

      \n
      After creating a Text span on a word, assign a class name to the Text span (e.g., \"Image background\")<\/div>\n<\/figure>\n

      Discover more about inline text formatting using text spans.<\/p>\n

      How to insert a background image to the text span<\/h2>\n

      Let’s attach a background image to the text span \u2014 this picture will be visible within the text:<\/p>\n

        \n
      1. Access Style panel\u00a0<\/strong>>\u00a0Backgrounds<\/strong><\/li>\n
      2. Tap the Image and gradient<\/strong> “plus” icon<\/li>\n
      3. Choose Choose Image<\/strong> to designate the image for your text fill<\/li>\n
      4. Set the Size to Cover<\/strong><\/li>\n
      5. Click a dot below Position<\/strong> to modify how your background image is showcased (e.g., select the central dot)<\/li>\n<\/ol>\n

        Read more about background images.<\/p>\n

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

        Crucial: <\/strong>Ensure to verify your text span’s image color contrast and readability to guarantee the text is accessible with its background. Delve deeper with our accessibility course.<\/p><\/blockquote>\n

        How to trim the image background<\/h2>\n

        Lastly (this is where the enchantment occurs), let’s trim the image background to the text span:<\/p>\n

          \n
        1. Select the text span<\/strong><\/li>\n
        2. Access Style panel <\/strong>> Backgrounds<\/strong><\/li>\n
        3. Opt for \u201cClip background to text\u201d from the Clipping<\/strong> drop-down menu<\/li>\n<\/ol>\n

          Discover more about gradient and image text fills in the Webflow Designer.<\/p>\n

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

          And that’s all! You’ve formulated a visually captivating Heading on your site to astonish your site visitors.<\/p>\n

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

          \u200d<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Add some variety to your site’s copy with text spans and image text fills.","protected":false},"author":2,"featured_media":5236,"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-5071","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\/5071","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=5071"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5071\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5181"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}