Creating your Instagram Link Page for Free with Mavenseed

On popular social networks, there is typically a single real-estate option to drop in your precious link to your: portfolio site, Youtube channel, blog article you're promoting, and or direct link to purchase from your e-shop.

Which one should you choose? 🤔

This creates the problem of having to give priority to a single product vs your audience being able to choose. Nevermind the added overhead management of swapping out links if you're on top of it. Now there are some paid services out there that will help you create your single link page, even we did it before starting Mavenseed. Stop doing this. 

In this tutorial, I'm going to show you how to create your own custom link page for Instagram on Mavenseed for free. (Similar to my personal set up for https://wesburke.com/p/links) 

Step 01: Create your free Mavenseed Account

During signup choose your custom domain, and fill in the basic information. No need to connect a Stripe account unless you plan on selling something through Mavenseed. Which of course we'd appreciate you keep us in mind if that time comes! 

Step 02: Creating your Page 

Think of your page as a home for your links. The name, or specifically the slug of the page you create will be the link URL you send your audience to. So keep it clean and on-brand! 

While logged in as admin, go to Content > Pages and then click New Page in the upper right corner. Enter in the title which will become the URL you'd like to link. e.g. a title of "Links" will be http://yourdomain.mavenseed.com/p/links or if you have a full custom domain http://yourdomain.com/links 

With your page created there are somethings you can set up right away to match your brand. 

Step 03: Customizing your page layout

Link pages tend to be simple: a list of links with minimal styling. In this example, after creating your page let's edit its layout by scrolling down to reveal the header-layout and styling options specific to this link page. 

1. Under Header Layout choose "none". This will remove any of the top navigation. 
2. Under Page Layout choose "Contained" for this example, 
3. Choose "Small" for your Page Width,
4. Ensure Default Styles is "unchecked". This will enable us to have a little more freedom with the styling of our links. Though depending on the style you're going for you could leave this on. 

Step 04: Let's add a bit of color

Continuing to scroll down you'll see additional options to upload a background image, and custom background color specific to this page. 

In this example, I'm going to go with a darker background color. #323f4b If you're building along with me, choose a color that matches your brand. Click Update Theme and head over to the Page Builder to preview your theme and start building! 

Step 05: Building header information with the Hero Leaf

Here is where a bit of creative freedom comes into play. With the Mavenseed Page Builder, you can craft your links page to be as simple or as complex as you'd like. Seriously, you could embed a YT intro video, images, and more into your links page.

For this tutorial, the two leafs I'll be using will be the Hero and Text leaf to get the job done. 

1. Drag and drop a Hero leaf to the top of your page, 
2. Once in place customize what you'd like the top to say. In this case, I'm going to put "My Instagram Links" with a subtitle of, "Because there can only be one".  To add some flair I've added an emoji to my title. 
3. My text was black to start, so scroll down on the Hero Leaf settings I'm going to choose an off-white color for my font to pop off the page. #f2f2f2
4. Finally, I'm going to add some bottom margin to give my content some breathing room, 3x should do it. 

Step 06: Adding your first link with a Text Leaf

The good news is once we finish setting up a single link,  we'll be able to duplicate this leaf quickly to add additional links. 

1. Drag and drop a Text leaf just below the Hero leaf, 
2. Enter in the text & link information you'd like to use. In this case I'm going to use my portfolio site "My Personal Site" linked to http://wesburke.com, 
3. Set the Font Size to 24, 
4. Set Alignment to Center,
5. With Padding Top and Bottom to 3x
6. In the Custom, CSS Classes field enter in the class, "insta-links" and click save. 

We're going to leave the background and color blank for the moment, controlling the rest through the custom CSS class you added at the bottom. 👍

Step 07: Setting up how your links look with the power of custom CSS

What I love about Mavenseed is the hidden powers beneath the surface. In this case, we created a custom CSS class called, insta-links and will be using this to finish off how our links look. Don't fret if you're not well versed at CSS,  I'm going to supply the scripts I'm using so you can copy/paste modifying to your own design. 

On your admin dashboard, next click on Settings > Scripts to reveal the possibility to include custom scripts on your Mavenseed site. (read about header scripts on Mavenseed)

Add in the following code: 

<style>

/* This sets the background of the text widget to white, adds a rounded border, shadow and bolds your font */.insta-link {
.insta-links {
  background: white;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  font-weight: bold;
}

/* What color you'd like your hyperlink */
.insta-links a:link {
    color: #323f4b;
}

/* What color should your link be when you mouse over it */
.insta-links a:hover {
  text-decoration: underline;
}
</style>

Clicking Update Script, will then apply this styling to the custom CSS class you created. 

You're now set to duplicate the first text leaf and add as many links as you'd like. 

Step 08: Duplicate the text leaf to add other links

With the initial leg-work completed, you can now click the Duplicate Icon on the leaf to create similar link widgets. 

That's it! You now will no longer have to choose which link to add on Instagram, and or pay for a service to do so! (Gasp!) 

Step 09: Bonus to help out Mavenseed

The best way to help us out is through a referral. While this is not required we'd appreciate it if you included a "Powered by Mavenseed ❤️" link below your links. 

How to set up a Powered by Mavenseed bragging link. 😎

1. Drag and drop a fresh text leaf onto your link page at the bottom, 
2. Type, "Powered by Mavenseed ❤️" into the content section
3. In my case, I added 2X margin and changed the text color to white (#ffffff). I also added a custom CSS class of "ms-powered-by". 

Back in the header script section of your Mavenseed site Settings > Scripts add in the following styling script. 

/* This ensures the link is visible on the darker background and underlined */
.ms-powered-by a:link, .ms-powered-by a:visited {
      color: #fff;
      text-decoration: underline;
}

Click Update Site Scripts. 

You're done! 

I'd encourage you to push your links page further by leaning on other Page Builder leafs: images, embed YouTube videos and more... 

Happy creating! 

Wes Burke