How To Create a Link In Bio Landing Page for Instagram With ElementorThe following is a transcript of the video shown above.
Hey there, it’s Aviva from Elementor. Today we’ll learn how to create a customized Link In Bio landing page for Instagram.
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’ll bring more traffic to your own website. In addition, you can use your existing analytics to monitor specific stats such as how many visitors viewed your posts and other statistics about your audience.
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.
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. Now click the Plus icon 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.
In Widgets, drag in an Image Widget and click to choose an image. I’ll use the website logo and align it to the left. In Link, select Custom URL. Click the Dynamic Tags icon and select Site URL to link it to the home page. The image is pretty large so under Style, set the 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 width to 180 pixels.
For the last column, 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. You may want to use the same typography and 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. Set the Border Width to one. To get sharp corners, set the Border Radius to zero.
Now set the Button Hover state. Keep in mind that this will only function on our desktop site since there’s no hover state in mobile. Our Text Color, we’ll swap it to white. And choose a 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% so that the image widgets are nicely aligned. 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 5% 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 gray 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 horizontally aligned with the logo. Select the first column and change the width to 30% and then set the second column width to 70%.
Click the arrow on the left side to hide the panel and preview our design. So far, looking good. Now it’s all packaged neatly at the top.
Okay, 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 zero. Later when we add the posts, this will bring all the images 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 can 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 the width to set it back to the default. Although it doesn’t display in the panel the padding for the heading is retaining the desktop settings, as you can see in the editor. Change it to better suit a mobile device.
Let’s preview. Looks good so far. Now back to the desktop.
Here’s where we can take advantage of the space we have on our desktop site and show off a large 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 to focus on the image so we’ll remove most of the text.
Hide the title and remove the date and comments from the metadata. Also hide Read More.
Now we’ll set which posts we see here. In Query Select > Term. Begin typing “Link In Bio” and select Categories > Link In Bio. Choosing the category ensures that only our Link In Bio posts will display on our Instagram landing page.
Speaking of categories, here’s how to set them up in WordPress. In the WordPress dashboard, click Posts > Categories. In the Name field, type Link In Bio, then click Add New Category, and just like that, we’ve created our Link In Bio category.
Click on any post to open it. For a photo grid to work properly on our Link In Bio page, we need to make sure that each of our Link In Bio posts has its own featured image. You can also update the category from here in any post.
Okay let’s get back to our landing page. 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 sections border. We’ll need the Posts widget again to display our Instagram grid. To save us some work, Right-click > Copy on the Posts widget and Right-click > Paste on the Divider. This will insert it below.
Now we just need to make a few adjustments. Instead of setting everything from the beginning, change Columns to three and choose a multiple of three for the Posts Per Page so we’ll always display a full grid. To get square images, change the Image Ratio to 1. Hide the excerpt. Now we only see the photos.
Bring the images closer together in Style 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 the desktop version as well as the divider by going to Advanced > Responsive and Hide On Mobile.
Select the Posts. Set the Columns to three to turn it into a grid and the Image Ratio to one. We don’t need space around this section in mobile so select it and delete the padding.
Our page is all ready so click Publish to take it live. Hide the panel to 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, Link In Bio, your landing page will be updated just like that.
The last step is to add the link to your Instagram bio. You can do this from desktop or mobile. Login to your Instagram account, click Edit Profile and type in 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 your website where they can view any post in detail or get in touch with you.
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 needs. Whether it’s promoting eCommerce products or for other targeted calls to action, Elementor has you covered.
