LogoLogo
Webstudio Home
  • Basics
    • 👋Welcome
    • 🔥Intro
    • 🎓Building your first site
    • 🤓Courses
    • 🔗Roadmap & Links
    • ❓FAQs
  • NEWS
    • 🆕April Update
    • 🆕December Update
    • 🆕September Update
    • 🆕Webstudio CMS Beta and Experts Network
  • university
    • ⚛️Foundations
      • 🛠️Anatomy of the Webstudio Builder
      • 🧱CSS Variables
      • 🖌️Design Tokens
      • 🔡Data Variables
      • ➕Expression Editor
      • Animations
      • 💾CMS
      • ↔️Copy-Paste
        • ↔️CSS
        • ↔️Markdown
        • ↔️Webflow
      • Commands & Search
      • 🎯SEO Settings
      • Shortcuts
      • ⚙️Project Settings
      • Modes
      • Share Links & Transferring Projects
      • 🌐Publishing & Custom Domains
    • 🧩Core Components
      • 📦Box
      • 🔗Link
      • 🖼️Image
      • 📃List
      • ⌨️HTML Embed
      • Animation Group
      • Text Animation
      • Video Animation
      • Stagger Animation
      • ✍️Webhook Form
      • ✍️Form
      • ⏯️Vimeo
      • ▶️Vimeo Background Video
      • YouTube
      • 💬Blockquote
      • 🔲Slot
      • Head Slot
      • ➖Separator
      • 📄Code Text
      • 🔘Button
      • 💾Collection
      • 🪜Content Embed
      • 🪜Markdown Embed
      • Content Block
      • 📘XML Node
    • ▫️Radix UI Components
      • Accordion
      • Collapsible
      • Dialog
      • Navigation Menu
      • Popover
      • Radio Group
      • Select
      • Sheet
      • Switch
      • Tabs
      • Tooltip
    • Marketplace
    • 🤖Webstudio AI
    • 📤Self-Hosting
      • ▶️CLI
      • ▶️Download
      • ▶️Cloudflare Pages
      • ▶️GitHub Pages
      • ▶️Netlify
      • ▶️Vercel
      • ▶️AWS with Flightcontrol (Docker)
      • ▶️Digital Ocean with Coolify (Docker)
      • ▶️Hetzner with Coolify (Docker)
    • 🧑‍🏫How-Tos
      • ▶️How to add icons
      • ▶️How to create fluid video backgrounds with Vimeo
      • ▶️How to create a countdown
      • ▶️How to crop an image with out cropping the original image
      • 🍀How to add a GSAP animation
      • ▶️Build Your Own Directory Website with Airtable
      • ▶️Using filters to dynamically display content (Airtable example)
    • 🔗Integrations
      • How to build a frontend for Hygraph using Webstudio
      • How to build a frontend for Airtable using Webstudio
      • How to build a WordPress frontend using Webstudio (no-code builder)
      • How to integrate a Notion database with Webstudio
      • How to integrate Webhook Form with Pabbly
      • How to integrate Webhook Form with Zappier
      • How to integrate Webhook Form with N8N
      • How to integrate a Webhook Form with Airtable
      • How to integrate Flotiq with Webstudio
    • Craft
  • Contributing
    • 🧑‍🎨Contributing for Designers
    • 🧑‍💻Contributing for Developers
    • Contributing to the Marketplace
  • ⚠️Errors
    • ▶️Connecting your Hostinger Domain to Webstudio
    • 🔌Worker not found
    • 🌮AppSumo redemption failed
  • Misc
    • 📊Account Limits
    • 🆘Webstudio Support Process
    • Fixing overflow issues
Powered by GitBook
On this page
  • How to use the Link component
  • How to customize a Link instance's properties
  • Href
  • Target
  • Prefetch
  • How to style the Current Page state

Was this helpful?

Edit on GitHub
  1. university
  2. Core Components

Link

Link lets you link to websites, pages, emails, and more from text, images, and more.

PreviousBoxNextImage

Last updated 5 months ago

Was this helpful?


How to use the Link component

The "Link Component" can be found in Components > General, and you can place it on your canvas by dragging and dropping it or clicking it in the Components panel.

You can convert anything into a link by wrapping it inside the Link component, including text and images. These links can direct users to different pages within your site or lead to external resources, including other websites, downloadable files, or email addresses.


How to customize a Link instance's properties

You can customize the properties of a Link instance by selecting it and going to "Settings." Here is an overview of each property:

Href

The "href" property determines what the Link instance will lead to, such as a URL, page, phone, attachment, or email address.

  1. URL: In its most common form, the "href" property references a URL, linking to another website or page.

  2. Page: You can link to all of your pages within your site here. You can also link to specific sections within those pages. To link to a section on a page, first go to the section and fill out the ID field in Settings. Then go back to the link, select the page, and then in the next dropdown select the ID you just created. Like this:

  3. Email: When you specify an email address as the 'href' value, the link opens the user's default email client (such as Gmail) with the designated email address pre-filled.

  4. Phone: If you set the "href" property to a phone number, the link becomes a prompt for users to initiate phone calls directly from their devices.

  5. Attachment: You can also link to downloadable attachments such as PDFs, documents, or media files, allowing users to initiate file downloads with one click.

Target

You can use the "Target" property to modify a link instance's behavior and define how linked content is displayed.

  1. Self: When you set "Target" to "Self," the linked content will open in the same window or tab. This is the default behavior for links, and it maintains the browsing context.

  2. Blank: If you choose "Blank," the linked content will open in a new tab or window, providing a separate browsing context.

  3. Parent and Top: For web pages involving nested frames, "Parent" will direct the linked content to open in the parent frame or window, maintaining the hierarchy of frames. On the other hand, selecting "Top" will open the link instance in the top-level window, replacing all frames if there are any. This is useful when you want to break out of any frames and provide a full-page experience.

Prefetch

"Prefetch" instructs the browser on how to preload linked resources in the background.

  1. None: This is the default value, and it indicates that the browser will not preload the linked resource. If the linked content is unlikely to be accessed immediately or frequently, selecting "None" can help conserve network resources.

  2. Intent: If you select "Intent," the browser preloads the linked resource in the background when the user hovers over the link. This aims to reduce load times by having the content ready whenever the user decides to navigate to the linked page.

  3. Render: This loads the linked page when the current page renders, improving the load times of subsequent pages. However, it also adds a significant load to the browser, which is why it is primarily recommended for pages with only 1 or 2 links, such as a landing page.

  4. Viewport: If you select the 'Viewport' option, the browser preloads linked content just before it's about to appear in the user's view. This optimization enhances loading and facilitates instant page transitions, maintaining a balance between resource utilization and user experience.

How to style the Current Page state

When using links for navigation and wanting to highlight the current page, the link component has a "Current Page" state in every style source.

🧩
🔗
First add the ID to the section you want to link to
Then add a page link and select the section.