Skip to content
ClickFunnels Help CenterClickFunnels Help CenterClickFunnels Help CenterGo to CF Classic Help Center

Link: Add Anchor Links

Published: Updated:

The Link element in ClickFunnels allows you to easily create hyperlinks or navigation links, guiding users to other sections, pages, or external URLs. This element is a versatile alternative to buttons, allowing you to provide clickable text links for various actions like opening pop-ups, submitting forms, or navigating to another page. In this article, you’ll learn how to add a Link element to your page and customize its settings for optimal user experience.

Requirements

Section titled “Requirements”

  • An active ClickFunnels account

  • A page created in your workspace

Adding a Link Element in the Page Editor

Section titled “Adding a Link Element in the Page Editor”

  1. Inside the page editor, add a Section where you want to place the element.

  2. Add a Row within that section.

  3. Click the orange + Plus or Add New Element button inside the row to insert a new element.

  4. From the Content category, select the Link element.

Once the Link element is added, you can customize its appearance to fit your page design.

Section titled “Customizing the Link Element”

When you hover over an element, its border will be highlighted in orange. To access an element’s settings, click on the gear ⚙️ icon or click directly on the element.

Top Margin

The Top Margin setting lets you control the space between the current container (section, row, flex, and element) and the container directly above it. If no previous container exists, the margin will be applied relative to the parent container. If no preceding container is added, the Body will be the parent.

You can set top margin values independently for desktop and mobile by using the device icons (🖥️ & 📱 ). If no mobile value is specified, it will inherit the desktop setting by default. Use the slider or manually enter a value in pixels (px) or percentage (%) to create consistent spacing across screen sizes.

Link Settings

The Link Settings let you set the link’s text and choose what happens when a visitor clicks it.

Link Name and Link action on click set to Go To... and Custom URL, with the Open in new window checkbox

  • Link Name: Enter the display text for your link. This is the clickable text users will see on the page.

  • Link action on click: Choose what happens when a user clicks the link. The available actions are:

    • Nothing Happens: Clicking the link does nothing.

    • No Link: This option is also listed in the dropdown.

    • Go To…: Choose Custom URL, Custom Action Link, Store Page, or Blog Home Page. Custom URL always adds https:// in front of what you type, so use it only for web addresses. For a relative path such as /terms-and-condition, a custom action command such as #open-popup, or phone, text message, and email links, use Custom Action Link. Check Open in new window to open the link in a new browser tab.

    • Submit Order/Form: Submits the order or form on the page. Check Enable Redirect Override to choose where visitors go after submitting.

    • 1 Click Upsell: Available only on funnel step pages. After selecting it, click Add Product to choose the product to offer.

    • Scroll To…: Scrolls the page to the section, row, or element you choose.

    • Show Or Hide…: Shows or hides the elements, sections, or rows you choose. Learn more in the article How to Show / Hide Contents on Button Click.

    • Open Pop-up…: Opens the page pop-up.

    • Close Pop-up…: Closes the active pop-up.

    • Mark Complete…, Go to Next Lesson…, Go Back to Previous Lesson…, and Restart Lesson…: Course lesson actions for links on course pages. Learn what each one does in Setting Up Actions for Buttons, Text, and Images.

    • Redirect to Next Step: Takes the visitor to the next step in your funnel.

    • Download File…: Attaches a file that visitors get when they click the link. Learn more in the article Turn a Button Into a File Download.

Padding

The Padding settings control the space between the content and the inside edge of its container (such as a section, row, column, or element). This internal spacing helps ensure your content has room to breathe and appears visually balanced. Use the slider or manually enter a value in pixels (px) or percentage (%) to create consistent spacing across screen sizes.

Padding Options:

  • Top: Add space between the top of the element container and its content.

  • Bottom: Add space between the bottom of the element container and its content.

  • Left + Right: Adjust the horizontal spacing between the element container and its content.

  • Gap: In particular elements, such as the Accordion, the gap property is added to establish spacing between the items within the container. For example, it is possible to adjust the gap between each accordion item within the Accordion element without defining padding at the top and bottom.

Desktop & Mobile (🖥️ & 📱)Customization:

The padding settings allow you to define separate values for desktop and mobile views. Use the device toggle at the top of the padding controls to switch between screen modes and adjust spacing accordingly. If no mobile value is specified, it will inherit the desktop setting by default.

This feature ensures your layout remains optimized for different screen sizes, enhancing the mobile and desktop experience.

Typography

The Typography settings allow you to control the appearance of text in your element. At the top, choose a text style preset from your Style Guide: S, M, L, or XL. With a preset selected, click Edit Style to change that preset in your Style Guide (this affects every element that uses it), or click Override to adjust the font settings for this element only. Select … to skip the presets and set the font settings directly.

  • Font Family: This option allows you to select the font type for your text. ClickFunnels provides a range of popular fonts from the Google Fonts library. Additionally, you can upload and use your own custom fonts by navigating to Workspace Settings > My Assets > Fonts. Once uploaded, your custom fonts will appear in the selection list for use.

  • Weight: This option defines the thickness of the text. The weights you can choose depend on the selected font, because each font lists only the weights it supports (for example, Thin, Regular, Semi Bold, or Bold). Lighter weights provide a subtle look, while bolder weights create more visual impact.

  • Font Size: You can adjust the text size using the slider or manually inputting a specific value. Additionally, you can choose between rem or px for the size measurement, such as 2rem or 32px. You can also set font size values independently for desktop and mobile by using the device icons (🖥️ & 📱 ).

    • Rem is a relative unit based on the base font size defined in your style guide. For example, if you select a text size of 2rem and your style guide specifies a base font size of 16px for desktop, the resulting text size will be 32px for desktop view (i.e., 2rem × 16px = 32px).

    • Px is an absolute measurement, providing precise control over the text size.

  • Letter Spacing: Adjust the space between individual letters. You can increase or decrease the value using the slider or input a specific value (measured in rem). More spacing spreads the letters apart, while less spacing brings them closer together. You can also set letter spacing values independently for desktop and mobile by using the device icons (🖥️ & 📱 ).

  • Line Height: Controls the vertical space between lines of text. This is typically expressed as a percentage of the font size. A higher percentage increases the space between lines, improving readability, especially for larger blocks of text. You can also set line height values independently for desktop and mobile by using the device icons (🖥️ & 📱 ).

  • Link: Use the color picker to select the color of the link text. You can choose a predefined color from the Style Guide or create a custom color. When using the Custom color picker, you can select the color using the slider or input a specific HEX code. Additionally, you can adjust the opacity (Alpha value) using the second slider—moving it to the left reduces the opacity and makes the color more transparent, while moving it to the right makes it fully opaque. The Link element doesn’t have separate Color, Bold, or Icon Color options.

  • Text Casing: Select how your text should appear in terms of capitalization:

    • Lowercase: All text in lowercase.

    • Uppercase: All text in uppercase.

    • Capitalize: Capitalize the first letter of each word.

  • Decoration: Add text decorations such as:

    • Underline: Draw a line beneath your text.

    • Strikethrough: Cross out your text with a horizontal line.

    • Underline + Overline: Draw a line both below and above your text.

  • Opacity: Adjust the opacity of the text. The slider allows you to make the text more or less transparent. Moving the slider to the left (0) decreases the opacity (making the text more transparent), while moving it to the right (1) makes the text fully opaque.

  • Align: Set the alignment of your text within its container. Based on your page design, you can choose to align the text to the left, center, or right. You can set a different alignment for desktop and mobile by using the device icons (🖥️ & 📱 ).

Background

The Background section allows you to set the element’s background color. You can choose a predefined color from the Style Guide or create a custom color. When using the Custom color picker, you can select the color using the slider or input a specific HEX code.

Text Shadow

The Text Shadow section adds a subtle shadow behind your text, creating depth and improving readability. You can control the following parameters:

  • Offset X and Offset Y: Adjust the horizontal and vertical positioning of the shadow.

  • Blur: Set how blurred or sharp the shadow appears.

  • Color: Choose the shadow color to match or contrast your page design.

Control Panel

The Control Panel appears at the bottom of every container(Section, Row, Flex, and Element) in the page editor, offering quick access to essential settings and actions for that container. Here’s what each icon represents:
Headline settings panel with the Code (</>) icon in the header and the Visibility, All, Desktop, Mobile, eye and trash icons in the bottom bar

  • ALL: The container will be visible on all devices (desktop, tablet, and mobile).

  • Desktop (🖥️) Icon: The container will only be visible in desktop view (screens 771px and wider).

  • Mobile (📱) Icon: The container will only be visible in mobile view (screens up to 770px wide).

  • Eye (👁️) Icon: Hides the container on all devices. It isn’t deleted. To show it again, select All, Desktop, or Mobile in this panel, or open Layout in the top bar and turn the container’s desktop or mobile toggle back on.

  • Code (</>): Opens the code editor for this container, where you can add custom CSS to change its styling. The editor shows the container’s CSS ID Selector so your CSS targets only this container. Open it from the code icon at the top of the settings panel, or hover over the container on the page and click Code in its toolbar.

  • Trash (🗑️) Icon: Removes the container from the page editor entirely.

Advanced Settings

To further customize your container (section, row, column, and element), ClickFunnels provides Advanced settings that allow you to control style, advanced CSS, animation, and rendering logic. We’ve separated these advanced features into dedicated articles to avoid overwhelming you with too much content in one place and to keep our documentation concise. Explore the following resources for more details: