{"id":6618,"date":"2024-04-14T18:17:45","date_gmt":"2024-04-14T10:17:45","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6618"},"modified":"2024-04-14T18:17:45","modified_gmt":"2024-04-14T10:17:45","slug":"hyperlink-section","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/hyperlink-section\/","title":{"rendered":"Hyperlink section"},"content":{"rendered":"\n
\n

Connecting blocks are akin to Division blocks<\/a> as they can be utilized for organization and arrangement, but the content inside the Hyperlink area transforms into a link. Hyperlink blocks have the capability to convert any element, such as a picture, or any layout, like a poster, into a link.<\/p>\n

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

In this tutorial:<\/strong><\/p>\n

    \n
  1. Integrate a Hyperlink block<\/li>\n
  2. Include additional components within the Hyperlink block<\/li>\n
  3. Establish the link type<\/li>\n
  4. Customize the Hyperlink block<\/li>\n
  5. Transform a Division block into a Hyperlink block and vice versa<\/li>\n<\/ol>\n

    Insert a hyperlink block<\/h2>\n
    \n
    \"Hyperlink<\/div>\n<\/figure>\n

    To include a Hyperlink block in your project, access the Elements Panel<\/strong> (shortcut: A) in the left sidebar, and drag a Hyperlink block element onto your page.<\/p>\n

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

    Incorporate elements into the Hyperlink block<\/h2>\n

    Any component, except for other hyperlinks, can be dragged into the Hyperlink block, either from the Add panel or from the canvas.<\/p>\n

    \n
    A hyperlink block containing an image of pink flowers, a sub-heading \"Photography,\" and an H1 \"Flowers\".<\/div>\n<\/figure>\n
    PRO TIP:<\/strong>\u00a0Other hyperlinks cannot be nested inside a hyperlink block, but you can insert a text block component and style it to resemble a button or use your button class. \u00a0<\/h6>\n

    Determine the link type and value<\/h2>\n

    Similar to Text links<\/a> and Buttons<\/a>, Hyperlink blocks offer the same link choices \u2014 URL, webpage, collection page (when relevant), page section, email, phone, and file. Learn more about link settings.<\/p>\n

    \n
    The Link settings panel presents six icons for link types, a URL text field, a check box for \"Open in new tab,\" a drop-down menu for Preload, and a show all settings button.<\/div>
    For a Hyperlink block, you can also access the link settings by selecting the element and pressing enter.<\/figcaption><\/figure>\n

    Design Hyperlink blocks<\/h2>\n

    Hyperlink blocks are just as versatile as Division blocks when constructing designs and frameworks. They are frequently employed to craft layouts, such as a list of blog entries, that link to other pages.<\/p>\n

    Customize the hover state of Hyperlink blocks<\/h3>\n

    Hyperlink blocks are interactive, so it’s recommended to apply a distinct hover state<\/a> on the Hyperlink block to indicate to users its clickability. Follow these steps to modify the hover state:<\/p>\n

      \n
    1. Select the Hyperlink block<\/strong><\/li>\n
    2. Tap on\u00a0states<\/strong> and opt for hover<\/strong><\/li>\n
    3. Add a box shadow<\/strong> or any other style attribute<\/li>\n\n
    4. Create a\u00a0transition<\/strong>\u00a0for the\u00a0box shadow<\/strong>\u00a0attribute or any other style attribute modified in the hover state<\/li>\n<\/ol>\n
      \n
      \"The<\/div>\n<\/figure>\n
      \n
      \"Step<\/div>\n<\/figure>\n

      Experiment with altering the background image on hover:<\/strong><\/p>\n

        \n
      1. Incorporate a background image to the Hyperlink block<\/li>\n
      2. Access States<\/strong>\u00a0>\u00a0Hover<\/strong><\/li>\n
      3. Modify the background image<\/strong><\/li>\n
      4. Return to the default state<\/strong><\/li>\n
      5. Create a\u00a0transition<\/strong>\u00a0for the\u00a0background image<\/strong>\u00a0attribute<\/li>\n<\/ol>\n

        Replace the blue text<\/h3>\n

        By default, when any text is situated inside a Hyperlink block, it shows up in blue and underlined since that’s the standard text style on all link tags.<\/p>\n

        You can alter the default link style on a specific Hyperlink block by modifying the text decoration and font color:<\/p>\n

          \n
        1. Select the Hyperlink block<\/strong><\/li>\n
        2. Visit the Style Panel<\/strong><\/li>\n
        3. Adjust text decoration<\/strong> to none<\/strong><\/li>\n
        4. Change the font color <\/strong>to black<\/strong><\/li>\n<\/ol>\n
          \n
          \"The<\/div>\n<\/figure>\n
          Setting the text decoration on the text element itself to “none” will not remove the underline from the text. To eliminate the underline, you\u2019ll need to style the Hyperlink block directly.<\/h6>\n

          Convert a Division block into a Hyperlink block and vice versa<\/h2>\n

          Changing Hyperlink blocks to Division blocks and vice versa is advantageous when you realize you mistakenly used a division block instead of a hyperlink block to cluster elements. It’s also handy to swiftly switch one for the other if the block’s functionality needs alteration.<\/p>\n

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

          Convert a Hyperlink block to a Division block<\/h3>\n

          To transform a Hyperlink block into a Division block, right-click on the Hyperlink block and convert it to a Division block.<\/p>\n

          Convert a Division block to a Hyperlink block<\/h3>\n

          To change a Division block to a Hyperlink block, right-click the Division block and convert it to a Hyperlink block.<\/p>\n

          Take note that if your Division block includes any hyperlink element, you\u2019ll encounter an error and the conversion to a Hyperlink block won’t be possible. This is because nesting links is not supported. You must first remove all hyperlink elements nested in the Division block, or convert Hyperlink blocks back to Division blocks.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Learn how to use Link blocks to turn any element, like an image, or any layout, like a banner, into a link.","protected":false},"author":2,"featured_media":6619,"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-6618","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\/6618","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=6618"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6618\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6619"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6618"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}