Close Menu
Open Menu

Link-in-Bio

  1. Home
    2. ›
  2. Blocks
    3. ›
  3. Link-in-Bio

Link-in-Bio

Because you shouldn’t have to pay extra to promote your brand.

View Demo

Usage

Link-in-bio pages are excellent ways to showcase partnerships, and draw attention to your pages important to your brand. The Link-in-bio block is a standalone area to display links in a structured manner. This page will often be linked to from social media sites that restrict the amount, or placement of links.

The link-in-bio block comes preloaded on link-in-bio pages. These pages are already styled to remove the header and footer, providing a real landing page style experience to your visitors. Due to some WordPress quirks, these pages will always include the /link-in-bio/ slug in it’s permalinks. If you want to change your landing page URL, you can place a link-in-bio block on any regular page, and select the landing page template (Page > Template > Landing Page) to remove the header and footer. You can even set it as your homepage while building the rest of your site!

Content Fields

The link-in-bio block can have three different content fields, Avatar, Handle, and Bio. You can edit these inline or in the sidebar.

If you delete a field (such as the handle field), it will remove it from the inline editor. You can always get it back by typing in the sidebar.

Link Styles

Text Style

The Text Style (sometimes called Headline Style) option controls the display of your text.

The Text Style (or Headline Style) will default to a different value depending on the block, but can be changed to any of the other available options. These styles are defined in your Customizer under Styles. For more information on changing your styles visit Customizing Styles.

One important thing to note is that this only changes how the headlines appear visually. The underlying html will be determined by the block that uses this features.

Show More Show Less

Text Size

The Text Size option controls the display of your link descriptions.

Corners

There are two Corners options, and they control how round the corners of your links and link images are.

Padding

The Padding option controls the amount of background space around each of your links.

Image Size

The Image Size option controls the size of the images associated with each individual link.

Reverse Print

Toggling reverse print will flip the colors from your standard palette to white, which increases contrast and readability when text is placed on dark backgrounds.

You’ll find the reverse print toggle in the block sidebar. Enabling reverse print will affect the block its enabled on as well as everything inside of it. If the block contains Inner Blocks, reverse print will cascade to all descendants.

We recommend using reverse print whenever a block has a dark background and using white text would increase its contrast. While you can set text color on core blocks like Headings and Paragraphs, we strongly recommend using the block-level reverse print instead. This way, you’ll be able to quickly toggle all the content if you change the background color in the future. All Inner Blocks will respect the reverse print setting, even those without color settings themselves.

To read more about contrast requirements on the web, visit here.

Show More Show Less

The Link Background options style the card area behind each individual link. You can adjust both the color and opacity of this background.

Block Settings

Reverse Print

Toggling reverse print will flip the colors from your standard palette to white, which increases contrast and readability when text is placed on dark backgrounds.

You’ll find the reverse print toggle in the block sidebar. Enabling reverse print will affect the block its enabled on as well as everything inside of it. If the block contains Inner Blocks, reverse print will cascade to all descendants.

We recommend using reverse print whenever a block has a dark background and using white text would increase its contrast. While you can set text color on core blocks like Headings and Paragraphs, we strongly recommend using the block-level reverse print instead. This way, you’ll be able to quickly toggle all the content if you change the background color in the future. All Inner Blocks will respect the reverse print setting, even those without color settings themselves.

To read more about contrast requirements on the web, visit here.

Show More Show Less

Max Width

The Max Width option controls the width of the blocks display.

Background Color

Choose any color from your palette to create a background.

Background Image

Use a photo from your media library or upload a new one to use as a background.

Background Pattern

Use a repeatable pattern as a background.

Gradient Background

A smooth transition between two colors from your palette.

Choosing a Background Color

You can choose a color from the block sidebar that will fill your block with a background color. The color options presented here will be colors from your site’s color palette, which you can edit in the Customizer. When using a dark background color, be sure to toggle the Reverse Print option to make sure your text remains legible.

Choose a Background Image

You can choose a background image in the block sidebar by clicking on the ‘Choose Photo’ button. You’ll be prompted to select a photo from your media library or upload a new one.

Once you’ve selected a photo to use as your background, new options will take the place of the one you used to select the photo. The first is a simple button to remove the image that you’ve selected, allowing you to start this over.

The second is the Focal Point selector. This tool allows you to select the most important point of your photo that your website will try to always keep visible. Because of the responsive nature of the web, images used as a background must stretch and cover the area when viewed on different device sizes, but this focal point allows you to keep what’s important in frame.

Set an Overlay

Whether you need to darken or tint an image to maintain the legibility of text on top of it or as a stylistic choice, there are many situations where you’ll want to add an overlay to your background image. The overlay tool in your block sidebar lets you choose a color from your palette (with the addition of pure black or pure white). The overlay opacity slider will determines how much overlay to apply to the background image, with 100% being solid color.

Select X as the overlay color to disable the overlay completely, or set its opacity to 0%.

Background Attachment

Some blocks allow you to set the background attachment. A background with Fixed attachment will remain anchored to the browser window as the user scrolls, creating a parallax effect.

Choose a Background Pattern

You can choose a background pattern in the block sidebar by clicking on the ‘Choose Pattern’ button. You’ll be prompted to select an image from your media library or upload a new one. This can be any image, but we recommend SVG (or PNG if SVG isn’t available) and we suggest using a pattern that repeats seamlessly.

Select a Background Size

The Background Size range field will scale the background pattern. Choose a size that looks good on both desktop and mobile.

The Background Size control in action. Be sure to select one that not only looks good, but also doesn’t get in the way of your content.

Set an Overlay

The overlay tool in your block sidebar lets you choose a color from your palette (with the addition of pure black or pure white). The overlay opacity slider determines how much overlay to apply to the background image, with 100% being solid color. With most patterns, you’ll be able to completely tint your pattern with an overlay color, so if you upload one pattern SVG file in black or white you’ll be able to use it in any of your site’s palette colors simply by using the overlay tool.

Select X as the overlay color to disable the overlay completely, or set its opacity to 0%.

Background Attachment

Some blocks allow you to set the background attachment. A background with Fixed attachment will remain anchored to the browser window as the user scrolls, creating a parallax effect.

Choosing the Colors

Gradient backgrounds consist of two colors which you can choose from the block sidebar. The color options presented here will be colors from your site’s color palette, which you can edit in the Customizer. The end color has an additional X option for no color. This is useful for nested backgrounds, where you’d like the parent background to bleed through.

Make sure to toggle the Reverse Print switch if you are using dark background colors.

Gradient Direction

Controls the direction you’d like the gradient to go, from Start color to End Color. For example, with the lower right arrow selected, the End color will be predominantly in the lower right corner of the background.

Background Attachment

Some blocks allow you to set the background attachment. A background with Fixed attachment will remain anchored to the browser window as the user scrolls, creating a parallax effect.

In this way, nested backgrounds with one layer being a fixed background can yield interested results. Try it out!

←

Link-in-Bio

→

Up Next