Create a Link in Bio Landing Page for Instagram

Hi, it’s Aviva from Elementor.

Today we’ll learn how to create a customized | Link in Bio | landing page for Instagram. If you’re an Instagram user (As an Instagram user?), you know how challenging it is not to be able to link from your individual Instagram posts and to be allotted just one link for your entire account.

Instead of updating your link in bio manually every time you create a new post, why not use Elementor to create a customized | Link in Bio|landing page, on your own site? This way you can customize the page to be consistent with your branding, and at the same time, keep the look and feel of Instagram.

And by adding this link to your Instagram bio, you will bring more traffic to your own website and can use your existing Analytics to monitor specific stats, such as how many visitors viewed your posts and other statistics about your audience.

Post setup – Category and Featured Images:

Before we jump in to building our Link in bio page, there are few things we need to set up, to make sure that everything will display properly.

We’ll start by setting the Category. From the WordPress dashboard menu, click Posts, Categories. In the name field type “Linkinbio.” Then click Add New Category. Go to All Posts and select the posts you want to appear on your Instagram landing page. Select edit and click Apply. Select Linkinbio and click Update. Now the Linkinbio category has been applied to the selected posts.

For our photo grid to work properly on our Linkinbio page, we need to make sure that each of our Linkinbio posts has its own featured image. Click on any post to open it, and then click Set featured image. Upload and select your image and click Set featured image once again. You can also update the category from here in any post. Click Update.

Single Post Template Review:
Now let’s check to make sure our Single Post template is set, so when our followers click an image on our Landing Page, they’ll get taken to the corresponding post. To create a Single Post template, go to Templates > Theme Builder in the WordPress menu.

Click Add New, choose Single, then Post and name it. Now click Create Template.

Here, we have the option to choose a template from the template library, or we can create our own. I’ve already created a template, so we’ll open it to see how to set it up to display our posts.

Click Edit with Elementor. Let’s take a quick look at it. It has a post title, excerpt, content, images, and more. Click the Responsive Mode to see that it looks great on mobile too.

Click the Save options arrow and Display Conditions. Click Add Condition, Include > Posts > All and Save and Close. Now your template will display the corresponding information for any post.

Landing Page Design:

Page settings

Now we can move onto the really fun part – designing our Linkinbio landing page!

Although the majority of Instagram users access it via mobile, Instagram does have a Desktop version as well, as some users prefer to access it from Desktop. Similarly, we will create both Desktop and Mobile versions, paying special attention to optimizing the Mobile version for the majority of users.

Back in the WordPress Dashboard, Go to Pages and click Add New. Type in a title; I’ll use Link In Bio. Click Edit with Elementor.

To access the page settings, click the gear icon on the lower left. For page layout, choose Elementor canvas to remove the Header and Footer and start with a blank page. We’ll be creating a new header for our landing page, and we don’t need a footer here, at all.

In Style, click the color picker and choose a light color for the page background. Then click the plus icon to add that color to our palette to use later.

Section 1

Now click the plus to add a new section, and choose a three column section.
Set the Content width to Boxed, 940. This will keep the site width trimmed down, similar to Instagram on Desktop. In Style, change the background color to white and under Border, click Solid and unlink the width so we can set just the bottom border to 1. In color, choose a light grey to keep it subtle. And don’t forget to add this color to the palette as well.

In widgets, drag in an image and click to choose an image. I’ll use the logo and align it to the left. In link, select Custom URL, click the Dynamic Tags icon, and select Site URL.

Under style, set the max width to 65 pixels.

For the second column, we’ll drag in another image widget and choose the wordmark logo. We’ll also align this one to the left, and in style, set the max width to 180 pixels.

For the last column, we’ll drag in the button widget. Use your call to action text here. In link, start typing the name of the destination page. Select it when it pops up. Then align the button to the right.

In style, set the Typography and text color. Make sure to add this one to the palette as well. You may want to use the same Typography heading color that you use on your website, to keep with your branding.

Choose white for the background and set the border type to solid. For border color, use the color you just saved by clicking its swatch. Set the border width to 1. To get sharp corners, set the border radius to 0.

Now set the button hover state. Keep in mind that this will only show on our Desktop site, since there’s no hover state in mobile. For text color, we’ll swap it to white and select the previously saved color for the background color.

Now go to the First column and vertically align it to the middle. To apply this to the other two columns, just right click Copy and on each of the other two columns, right click Paste Style. Go back to the first column and change the column width to 10 percent so that the image widgets are aligned nicely.

Now, we’ll hop over to Mobile preview to make sure things are looking great on the mobile end. The logo and button are a little close to the edge, so you can add some padding. Go to the section settings, and in Advanced, unlink the padding, and add five percent padding on the right and left.

Since we don’t want to crowd the limited space available on mobile, select the second column not to display on mobile. In Advanced, Responsive, click Hide on Mobile. The faded column and grey lines tell us that it won’t display on mobile.

Now we need to bump the button up to the top so it will be vertically aligned with the logo. Select the first column and change the width to 30 and then set the second column width to 70. Now it’s all packaged neatly at the top.

Click the arrow on the left side to hide the panel and preview our design so far. Looking good!
———

Section 2

Let’s jump back to Desktop. Right click the section and Duplicate it. Go to Style and change the background color to transparent. Right click the second column and delete it. Do the same for the last column. Now we are left with just one column.

Select it, and in Advanced, Set the padding to 0. Later, when we add the posts, this will bring our images all the way to the edge of the column.

Go ahead and delete the image widget since we won’t be needing it in this section.

Drag in a Heading widget and paste in some text about the site. You can use the same text as in your Instagram bio or other text, if you prefer. Align it to the center.

In Style, click the color picker and choose a color for the text. Set the typography. And, as before, you may want to use the same styling as on your website.

Duplicate the first heading. Change the text to the site’s URL and for the link, click the Dynamic icon, and choose Site URL.

We’ll make a few changes to the styling. Change the color, and in Typography, the weight.

Now go back to the first heading and add some padding to the top and sides.

Everything is looking good in Desktop. Now let’s head over to mobile to make some adjustments there.

Select the column. Since we copied it from the first section, it kept the column width settings, which we don’t need here. Delete it to set it back to the default. Add some space around the first heading, by selecting it and adding a little padding. Let’s preview. Looks good.
—
Back to Desktop. Here is where we can take advantage of the space we have on our desktop site and show off a striking colorful image. We’ll highlight the most recent post here, as a large number of followers are likely coming to find out more about it.

In Widgets, start typing Posts and select the Posts Widget when it pops up; drag it in. We only want to display one post here, so change columns to 1 and posts per page to 1. We’ll edit the image ratio to crop the image a bit. We want the focus on the image, so we’ll remove most of the text. Hide the Title and remove Comments and Date from the meta data. Hide Read More.

In Query, type and select Term. Begin typing Linkinbio and select Categories Link in Bio. Now let’s style the Excerpt text. We’ll align it to the center, change the color, and update the Typography.

Go back to widgets and add a divider. Choose the same light gray as the first section border.

We’ll need the Posts widget again to display our Instagram grid. To save us some work, right click the Posts widget and right click Paste on the Divider, to insert it below. Now we just need to make a few adjustments instead of setting everything from the beginning.

Change columns to 3 and choose a multiple of three for the Posts per Page so it will always display a full grid. To get square images, change the image ratio to 1. Bring the images closer together in Stye by adjusting the Columns and Rows gap, as well as the Image Spacing.

Let’s preview our Desktop version. It’s customized with our own branding, but still conveys the experience of using Instagram. Perfect!

Lastly, we’ll move to Mobile view and adjust it to bring the same experience to mobile . To keep it minimal, we’ll hide the large image we have on desktop, as well as the divider, by going to Advanced, Responsive and Hide on Mobile.

Select the posts. Set the columns to 3 to turn it into a grid, and the image ratio to 1. We don’t need space around this section in mobile, so select it and delete the Padding.

Click preview. Our Instagram landing page looks amazing. Click an image and see that it takes you straight to its blog post. Nice!

Now every time you post a blog with the Category “Linkinbio,” your landing page will be updated, just like that!

Add Link in Bio
The last step is to add the link to your Instagram bio. You can do this from Desktop or Mobile. Log in to your Instagram account, click Edit Profile, and paste your landing page URL. Submit changes, and you’re all set!

Now when your followers click your link in bio, they’ll go straight to the landing page on you website, where they can view any post in detail or get in touch with you.

Outro

And there you have it! Now you know how to create a customized Link in Bio | landing page on your own site and bring more Instagram traffic to it.

So go ahead and create one for your own needs. Whether it’s promoting ecommerce products or for other targeted calls to action, Elementor has you covered!

What will you display in your Link in Bio? Let us know in the comments below. Thanks for watching. For more tutorials subscribe to our Youtube channel.