Creating an appealing link on the social media bio is essential for anyone looking to increase their online presence. Whether you’re an influencer, entrepreneur, social media specialist, or simply someone who wants to share multiple links with the audience, a well-designed bio link page can be a game-changer.
People commonly use link management tools to create a bio link page, such as Linktree, Taplink, etc. Luckily, if you’re a Divi user, you don’t need that tool, because you can create the bio link page with Divi easily.
In this article, we will show you the process of creating a stunning bio link page using the powerful Divi. With Divi’s flexibility and customization options, you can create a page that perfectly reflects your brand identity and effectively engages your audience.
Steps to Create Bio Link Page with Divi
Step 1: Adding a Section and Row
Section Settings
Alright. Let’s start to design the bio link page. First, add a regular section to a newly created page or open an already-existing one. Afterward, we will apply some changes to the section settings as below:
- Background Color
Navigate to Section Settings and adjust the background color with your preference. In this example, we set the section’s background to white.
- Spacing
Next, we’re going to set the spacing, especially for the padding in this section. To make your bio link page responsive, you must give different values to adapt its layout and styling to any screen size and device.
For your reference, you can check our settings below:
| Devices | Top | Bottom | Left | Right |
|---|---|---|---|---|
| Desktop | 45px | 45px | 38% | 38% |
| Tablet | 45px | 45px | 32% | 32% |
| Phone | 0px | 0px | 0% | 0% |
Row Settings
Next, add a new single-column row to the section.
We are going to make the following adjustments to the row settings without inserting any modules yet:
- Background Color
Choose your preferred background color by navigating to Row Settings. In this case, the backdrop of the row is set to #3d3d3d.
- Sizing
Go to the Sizing option on the Design tab, and then eliminate the entire space between the column and row by applying the changes below:
- Use Custom Gutter Width: YES
- Gutter Width: 1
- Width: 100%
- Min. Height: 300px
- Spacing
To increase between the edge of the element (top and bottom) and its inner content, you can add padding to this row, as below:
- Padding:
- Top: 25px
- Bottom: 25px
- Box Shadow
You can add the box shadow effect to your row to enhance your bio link page’s visual appeal and depth. For your reference, you can check our box shadow settings below:
- Box Shadow Vertical Position: 3px
- Box Shadow Blur Strength: 70px
- Box Shadow Spread Strength: 5px
- Shadow Color: rgba(0,0,0,0.61)
Step 2: Adding Modules
Now that you have styled the section and row, we need to add some modules to display the elements you want to include on your bio link page. In this example, we will add the Image, Text, and Button modules inside the same row.
Add the Image Module
We’re going to start with adding an image module. Upload your preferred 1:1 image ratio that represents your brand identity. For this example, the image we’ve uploaded has dimensions (height and width) of 500 by 500 pixels.
Image Settings
- Alignment: Center
- Sizing:
- Width:
- Desktop: 40%
- Tablet: 38%
- Phone: 33%
- Width:
- Module Alignment: Center
- Border:
- Rounded Corner: 50vw
- Border Width: 5px
- Border Color: #ef00db
- Box Shadow
- Box Shadow Vertical Position: 3px
- Box Shadow Blur Strength: 30px
- Shadow Color: #9b9b9b
Add the Text Module
Next, we will add two Text modules under the image module (in the same row). In the first Text module, we will use it for our brand name and the description for the second module.
1st Text Module Settings
- Text
- Heading Text: Heading 3
- Font Weight: Bold
- Alignment: Center
- Color: #ffffff
- Size: 14px
- Spacing
- Margin:
- Top: 7px
- Margin:
2nd Text Module Settings
Add another Text module, and then edit and style up the text to your preference.
- Text
- Text Color: #ffffff
- Text Size: 9px
- Text Alignment: Center
- Spacing
- Marfin:
- Top: -11px
- Marfin:
Add the Button Module
It is now time to add the bio link page with the main parts of this page, links. Buttons within this page serve as gateways to various destinations, each with a specific purpose.
In this example, we will add four buttons as a shortcut, making it easy for visitors to access the content or actions you want to promote quickly.
1st Button Settings
- Content:
- Text: You can add any text you like
- Button Link URL: Input the destination URL for your button
- Alignment:
- Button Alignment: Center
- Button:
- Use Custom Styles for Button: YES
- Button Text Size: 15px
- Button Text Color: #ffffff
- Button Background: #8300e9
- Button Border Color: #ffffff
- Button Border Radius: 20px
- Show Button Icon: YES
- Button Icon Color: #ffffff
- Button Icon Placement: Left
- Only Show Icon on Hover for Button: NO
- Spacing:
- Margin:
- Top: 40px
- Margin:
2nd, 3rd and 4th Button Modules Settings
Well, the changes that we apply to these modules are almost the same as the previous module settings (1st button), there is only one difference, which is the value of the top margin.
- Spacing:
- Margin:
- Top: 20px
- Margin:
that’s it. Before you save and publish your bio link page, please ensure that your bio link page is a responsive design by clicking the Desktop, Tablet, and Phone View buttons.
The Bottom Line
Now that you’ve learned how to create a bio link page in Divi, explore additional customization options to make your bio link page fully engaging. With a bit of creativity, you can effectively showcase your work, products, or services and connect with your audience on social media platforms.
Experiment with different layouts, colors, and fonts to find a style that reflects your branding. Don’t be afraid to try new things and see what works best for you.
Start customizing today and make your online presence stand out!
