Learn how to build a sleek, mobile-friendly Linktree alternative right in your Flatsome theme! This step-by-step guide makes creating and customizing your own social media landing page simple and efficient.
Step-by-Step Guide
Step 1: Set Up a New Page in WordPress
-
Open WordPress Dashboard – Log in to your WordPress site’s admin panel.
-
Add a New Page – From the left menu, go to Pages > Add New.
-
Name Your Page – Title it something like “Links” or “My Links” to make it easy to find later.
- Tip: You can use any name that best matches your brand.
-
Publish the Page – Once you’re done naming, click Publish to save your page.
Step 2: Edit Page Layout in UX Builder
- Launch UX Builder – Open the page you created and click Edit with UX Builder.
- Set Page Layout – In UX Builder, click on the settings (gear icon) and set the Template to No Header, No Footer. This creates a clean, distraction-free canvas.
Step 3: Add the Linktree Shortcode
- Copy the Shortcode – Select all text within the shortcode block and copy it.
[ux_banner label="Hero" height="400px" height__sm="250px" bg="https://portal.sebdelaweb.com/wp-content/uploads/linktree-hero-sebdelaweb-flatsome-webdesigner.jpg" bg_pos="90% 87%"] [/ux_banner] [section label="Content" bg_color="rgb(248, 248, 254)"] [row h_align="center"] [col span="8" span__sm="12" span__md="10" margin="-100px 0px 0px 0px" align="center"] [row_inner label="Profile" style="collapse" h_align="center" class="flattree-avatar"] [col_inner label="Avatar" span="3" span__sm="6" span__md="4" bg_radius="100"] [ux_image id="https://portal.sebdelaweb.com/wp-content/uploads/sebdelaweb-flatsome-webdesigner-link-avatar.jpg" height="100%" class="circle"] [/col_inner] [col_inner label="Name" span__sm="12" padding="30px 0px 30px 0px" align="center"] [ux_text font_size="1.2" font_size__sm="1" font_size__md="1.1" line_height="0.75"] <h1>@sebdelaweb</h1> <p>Creative resources for Flatsome</p> [/ux_text] [/col_inner] [/row_inner] [row_inner label="Links" col_bg="rgb(255,255,255)" col_bg_radius="10" padding="20px 20px 20px 25px" padding__sm="15px 15px 15px 15px" padding__md="15px 15px 15px 15px"] [col_inner span__sm="12" margin="0px 0px -10px 0px" depth_hover="5" border="1px 1px 1px 1px" border_radius="10" border_color="rgb(237, 237, 237)"] [featured_box img="https://portal.sebdelaweb.com/wp-content/uploads/bakki-sebdelaweb-link-page.png" img_width="70" pos="left" link="https://portal.sebdelaweb.com/flatsome-demos/bakki/"] [gap height="10px" height__sm="5px"] [ux_text line_height="1" line_height__sm="1.2"] <h4>New demo: Bakki</h4> [/ux_text] <p>Trendy shop design kit for Flatsome</p> [/featured_box] [/col_inner] [col_inner span__sm="12" margin="0px 0px -10px 0px" depth_hover="5" border="1px 1px 1px 1px" border_radius="10" border_color="rgb(237, 237, 237)"] [featured_box img="https://portal.sebdelaweb.com/wp-content/uploads/member-area-sebdelaweb-link-page.png" img_width="70" pos="left" link="https://members.portal.sebdelaweb.com/"] [gap height="10px" height__sm="5px"] [ux_text line_height="1" line_height__sm="1.2"] <h4>Member area now open ????</h4> [/ux_text] <p>Visit our brand new video community</p> [/featured_box] [/col_inner] [col_inner span__sm="12" margin="0px 0px -10px 0px" depth_hover="5" border="1px 1px 1px 1px" border_radius="10" border_color="rgb(237, 237, 237)"] [featured_box img="https://portal.sebdelaweb.com/wp-content/uploads/flatsome-basics-tutorials-youtube-playlist-sebdelaweb-link-page.png" img_width="70" pos="left" link="https://www.youtube.com/playlist?list=PLwCrG-TY3gsHVT4AMCkJvMHM-Wdwoekva"] [gap height="10px" height__sm="5px"] [ux_text line_height="1" line_height__sm="1.2"] <h4>Learn the Flatsome basics </h4> [/ux_text] <p>YouTube playlist to get started</p> [/featured_box] [/col_inner] [/row_inner] [row_inner label="Buttons" h_align="center"] [col_inner span__sm="12" padding="10px 0px 0px 0px" margin="0px 0px -10px 0px" align="center"] [button text="Rebuilding Louis Vuitton home" padding="10px 0px 10px 0px" radius="10" expand="true" icon="icon-play" icon_pos="left" link="https://www.youtube.com/watch?v=7DrYRXGIogQ" target="_blank"] [button text="Dark Mode plugin for Flatsome" padding="10px 0px 10px 0px" radius="10" expand="true" icon="icon-play" icon_pos="left" link="https://www.youtube.com/watch?v=xQN8m7YX9Mg&t=3s" target="_blank"] [button text="Seb's new website launched" padding="10px 0px 10px 0px" radius="10" expand="true" icon="icon-play" icon_pos="left" link="https://www.youtube.com/watch?v=8dI8do7NyqU&t=6s" target="_blank"] [/col_inner] [/row_inner] [row_inner label="Social Icons"] [col_inner span__sm="12" align="center"] [follow style="small" scale="110" facebook="https://www.facebook.com/sebdelaweb.page" instagram="https://instagram.com/sebdelaweb" youtube="https://www.youtube.com/sebdelaweb"] [/col_inner] [/row_inner] [/col] [/row] [/section]
- Import in UX Builder – Return to your UX Builder page, select Add Elements on the left, navigate to Import, and paste your shortcode. Press Import to load the elements into your page.
Step 4: Personalize Your Page
-
Add Background Image or Video
- Click on the banner background element to add your choice of image. For a video background, scroll down in the banner settings and paste a YouTube or MP4 link for a looping effect.
-
Update Profile Picture
- Replace the default profile image with your own by clicking on the avatar image. To make it round, use the “circle” class, or remove it for a square image.
-
Change Name and Title Text
- Customize your page title and name by clicking into the text elements.
-
Set Up Your Link Buttons
- For each link button, go to the icon box section, click the URL field on the left, and enter the desired link. Customize the link text and add icons to match your style.
-
Customize Additional Buttons
- Scroll to the bottom to see optional call-to-action buttons. You can adjust the text, colors, and icons on these buttons to add emphasis and contrast. Add links for each button as desired.
-
Add Social Media Icons
- In the Follow Icons section at the bottom, add links to your social profiles to make it easy for visitors to follow you on different platforms.
Step 5: Optimize for Mobile View
-
Preview on Mobile – Since this layout is best for mobile, switch to mobile view in UX Builder to see how it looks. Make sure all elements fit well on smaller screens.
- Note: Large background images sometimes display differently on desktop, so check and adjust as needed.
-
Save and Publish – Once everything looks good, save your page.
Step 6: Share Your Linktree-Style Page
- Copy the URL – Get the link for this new page and add it to your Instagram, Twitter bio, or any other platform where you want a simple, consolidated link to multiple destinations.
And that’s it! You now have a Linktree-style landing page ready to go live!
[ux_banner label="Hero" height="400px" height__sm="250px" bg="https://portal.sebdelaweb.com/wp-content/uploads/linktree-hero-sebdelaweb-flatsome-webdesigner.jpg" bg_pos="90% 87%"] [/ux_banner] [section label="Content" bg_color="rgb(248, 248, 254)"] [row h_align="center"] [col span="8" span__sm="12" span__md="10" margin="-100px 0px 0px 0px" align="center"] [row_inner label="Profile" style="collapse" h_align="center" class="flattree-avatar"] [col_inner label="Avatar" span="3" span__sm="6" span__md="4" bg_radius="100"] [ux_image id="https://portal.sebdelaweb.com/wp-content/uploads/sebdelaweb-flatsome-webdesigner-link-avatar.jpg" height="100%" class="circle"] [/col_inner] [col_inner label="Name" span__sm="12" padding="30px 0px 30px 0px" align="center"] [ux_text font_size="1.2" font_size__sm="1" font_size__md="1.1" line_height="0.75"] <h1>@sebdelaweb</h1> <p>Creative resources for Flatsome</p> [/ux_text] [/col_inner] [/row_inner] [row_inner label="Links" col_bg="rgb(255,255,255)" col_bg_radius="10" padding="20px 20px 20px 25px" padding__sm="15px 15px 15px 15px" padding__md="15px 15px 15px 15px"] [col_inner span__sm="12" margin="0px 0px -10px 0px" depth_hover="5" border="1px 1px 1px 1px" border_radius="10" border_color="rgb(237, 237, 237)"] [featured_box img="https://portal.sebdelaweb.com/wp-content/uploads/bakki-sebdelaweb-link-page.png" img_width="70" pos="left" link="https://portal.sebdelaweb.com/flatsome-demos/bakki/"] [gap height="10px" height__sm="5px"] [ux_text line_height="1" line_height__sm="1.2"] <h4>New demo: Bakki</h4> [/ux_text] <p>Trendy shop design kit for Flatsome</p> [/featured_box] [/col_inner] [col_inner span__sm="12" margin="0px 0px -10px 0px" depth_hover="5" border="1px 1px 1px 1px" border_radius="10" border_color="rgb(237, 237, 237)"] [featured_box img="https://portal.sebdelaweb.com/wp-content/uploads/member-area-sebdelaweb-link-page.png" img_width="70" pos="left" link="https://members.portal.sebdelaweb.com/"] [gap height="10px" height__sm="5px"] [ux_text line_height="1" line_height__sm="1.2"] <h4>Member area now open ????</h4> [/ux_text] <p>Visit our brand new video community</p> [/featured_box] [/col_inner] [col_inner span__sm="12" margin="0px 0px -10px 0px" depth_hover="5" border="1px 1px 1px 1px" border_radius="10" border_color="rgb(237, 237, 237)"] [featured_box img="https://portal.sebdelaweb.com/wp-content/uploads/flatsome-basics-tutorials-youtube-playlist-sebdelaweb-link-page.png" img_width="70" pos="left" link="https://www.youtube.com/playlist?list=PLwCrG-TY3gsHVT4AMCkJvMHM-Wdwoekva"] [gap height="10px" height__sm="5px"] [ux_text line_height="1" line_height__sm="1.2"] <h4>Learn the Flatsome basics </h4> [/ux_text] <p>YouTube playlist to get started</p> [/featured_box] [/col_inner] [/row_inner] [row_inner label="Buttons" h_align="center"] [col_inner span__sm="12" padding="10px 0px 0px 0px" margin="0px 0px -10px 0px" align="center"] [button text="Rebuilding Louis Vuitton home" padding="10px 0px 10px 0px" radius="10" expand="true" icon="icon-play" icon_pos="left" link="https://www.youtube.com/watch?v=7DrYRXGIogQ" target="_blank"] [button text="Dark Mode plugin for Flatsome" padding="10px 0px 10px 0px" radius="10" expand="true" icon="icon-play" icon_pos="left" link="https://www.youtube.com/watch?v=xQN8m7YX9Mg&t=3s" target="_blank"] [button text="Seb's new website launched" padding="10px 0px 10px 0px" radius="10" expand="true" icon="icon-play" icon_pos="left" link="https://www.youtube.com/watch?v=8dI8do7NyqU&t=6s" target="_blank"] [/col_inner] [/row_inner] [row_inner label="Social Icons"] [col_inner span__sm="12" align="center"] [follow style="small" scale="110" facebook="https://www.facebook.com/sebdelaweb.page" instagram="https://instagram.com/sebdelaweb" youtube="https://www.youtube.com/sebdelaweb"] [/col_inner] [/row_inner] [/col] [/row] [/section]
Continue learning
Need a custom design? Hire Seb today
Get the #1 All In One Design Agency for Flatsome