{"id":5773,"date":"2024-04-14T12:14:31","date_gmt":"2024-04-14T04:14:31","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5773"},"modified":"2024-04-14T12:14:31","modified_gmt":"2024-04-14T04:14:31","slug":"insert-and-nest-hyperlinks-in-webflow","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/insert-and-nest-hyperlinks-in-webflow\/","title":{"rendered":"Insert and nest hyperlinks in Webflow"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>Hyperlinks are utilized when a text component will solely contain a hyperlink, such as when you&#8217;re crafting anchor text.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94c1642605b438ffad0c7_6283e593dee39153bc165a10_rppfns-rru7a3n7eqcuz65psi6zxwxjzvfkfudgc-l4_nw16ao5pk7jbtkzpnyn2cxgdum5qkqsaxmsxdcqzv9vkrz5s_nawfdb5nlmzbqkbmzk_f8sttrfflxb97l6ahmp4lm3_aroy-bvhmg.png\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The Text link element is highlighted in the Typography section of the Add panel.\" title=\"64b94c1642605b438ffad0c7_6283e593dee39153bc165a10_rppfns-rru7a3n7eqcuz65psi6zxwxjzvfkudgc-l4_nw16ao5pk7jbtkzpnyn2cxgdum5qksaxmsxdcqzvkvkrz5s_nawfdb5nlmzbqkbmzk_f8sttrfflxb97l6ahmp4lm3_aroy-bvhmg\"><\/div>\n<\/figure>\n<h2>Placing a hyperlink interface<\/h2>\n<p>To incorporate a hyperlink:<\/p>\n<ol>\n<li>Launch the <strong>Add panel<\/strong> &gt; <strong>Elements<\/strong><\/li>\n<li>Drop a <strong>Text link<\/strong> from the <strong>Typography<\/strong> division onto the Webflow canvas<\/li>\n<\/ol>\n<p>To adjust the content, double-tap on the text or highlight the component and click <strong>Enter\/Return<\/strong>.<\/p>\n<h2>Nesting hyperlinks within text<\/h2>\n<p>You have the option to attach hyperlinks to words or phrases in a paragraph by selecting the text and hitting the hyperlink symbol in the font style menu. Consequently, this content transforms into a text link embedded within the paragraph unit.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94c1642605b438ffad0cb_6283e5eff8a85cc073f5ecfd_uv-cr__httv0vtbq2uhbluqonrpfpi0cs6tuhvqjlolkes8_tbcvgyudpblyzqbljxlthrut7leuav-fwynsucszlzplq5vwuof7nwq4twy76eultc4zbza2tpk8rhjv8wlvlg2loqfrkep4yw.png\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The hyperlink option is highlighted in the text formatting menu.\" title=\"64b94c1642605b438ffad0cb_6283e5eff8a85cc073f5ecfd_uv-cr__httv0vtbq2uhbluqonrpfpi0cs6tuhvqjlolkes8_tbcvgyudpblyzqbljxlthrut7leuav-fwynsucszlzplq5vwuof7nwq4twy76eultc4zbza2tpk8rhjv8wlvlg2loqfrkep4yw\"><\/div>\n<\/figure>\n<h2>Hyperlink customization<\/h2>\n<p>There are two methods to append a hyperlink to a text link unit:<\/p>\n<ul>\n<li>Choose the <strong>Text link<\/strong> and tap on the &#8220;cog&#8221; icon next to the Text link descriptor<\/li>\n<li>Opt for the <strong>Text link<\/strong> and navigate to the <strong>Settings panel <\/strong>(shortcut: D)<\/li>\n<\/ul>\n<p>\u200dDiscover further details on hyperlink customization.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94c1642605b438ffad0d3_6283e64b408ad2bbf2f9e621_cljodbwr6sa2r3-kverztrp9lkuovpbi_fx3jd1hmnoi4kj24wten5xnjvzihijd6bs0b1vgj69ykvagd-uxmaytckdfsgkagwzh-feqstmlctnvc25forckyowvogxrfbxkfhwepyf9fm49w.png\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The Link settings section in the Settings panel.\" title=\"64b94c1642605b438ffad0d3_6283e64b408ad2bbf2f9e621_cljodbwr6sa2r3-kverztrp9lkuovpbi_fx3jd1hmnoi4kj24wten5xnjvzihijd6bs0b1vgj69ykvagd-uxmaytckdfsgkagwzh-feqstmlctnvc25forckyowvogxrfbxkfhwepyf9fm49w\"><\/div>\n<\/figure>\n<h2>Customizing a text link appearance<\/h2>\n<p>Hyperlink units are initially styled with blue text and an underline. You hold the power to supersede this standard style by modifying the Text Link element. A clever strategy is to customize the <strong>All links<\/strong> category to ensure uniform styling across all links on your webpage.<\/p>\n<h6><strong>Valuable suggestion:<\/strong> A button essentially comprises a styled text link. It showcases a default blue background, white text, no underline, and internal padding. Read up on buttons for more insights.<\/h6>\n<h2>Modifying All links appearance<\/h2>\n<p>To tweak the <strong>All links<\/strong> category:<\/p>\n<ol>\n<li>Select any link element (e.g., Text links or Link blocks)<\/li>\n<li>Unfold the <strong>Style panel <\/strong>&gt; <strong>Selector field <\/strong>and tap inside to unveil the dropdown<\/li>\n<li>Pick <strong>HTML tags<\/strong> &gt;<strong> All links<\/strong><\/li>\n<\/ol>\n<h6><strong>Reminder:<\/strong> Access the <strong>Selector field <\/strong>via pressing <strong>Command <\/strong>+ <strong>Return<\/strong> (Mac) or <strong>Control<\/strong> + <strong>Enter<\/strong> (Windows). With the <strong>Selector field<\/strong> dropdown open, navigate using the arrow keys to select a tag and conclude with <strong>Enter<\/strong>\/<strong>Return<\/strong>.<\/h6>\n<p>Here lies your avenue to tailor the default appearance of links on your site: this extends to <a href=\"https:\/\/help.webflow.com\/article\/button\">buttons<\/a>, <a href=\"https:\/\/help.webflow.com\/article\/link-block\">link blocks<\/a>, or <a href=\"https:\/\/help.webflow.com\/article\/navbar\">nav links.<\/a> Each new link addition or introduction of a fresh text link will inherit design cues from alterations made to the <strong>All links<\/strong> class.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94c1642605b438ffad0cf_6283e6adf8687210c3480f0b_kicblehjet2rzy9ug7saqd56xc9lf-suecpzcly3vafbzpcbe7ndp2yb-xw3o8tiqxjiijcwpncbbfjv6sofjpqssykxpbxexkccutfgngtroapfeim_dapxylboozr1spgd4lip-3oems1gqa.png\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"In the Style Panel, the All links tag is shown in the Selector field.\" title=\"64b94c1642605b438ffad0cf_6283e6adf8687210c3480f0b_kicblehjet2rzy9ug7saqd56xc9lf-suecpzcly3vafbzpcbe7ndp2yb-xw3o8tiqxjiijcwpncbbfjv6sofjpqssykxpbxexkccutfgngtroapfeim_dapxylboozr1spgd4lip-3oems1gqa\"><\/div>\n<\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Add, nest, and style text links.","protected":false},"author":2,"featured_media":5774,"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-5773","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\/5773","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=5773"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5773\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5774"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5773"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}