How do I add a "follow on Instagram" button to my website using Webflow?
TL;DR
- Add a Button or Link Block where desired in Webflow and set it to your Instagram profile URL.
- Customize the button with text or an icon, enable "Open in new tab," and style it to match your site.
To add a "Follow on Instagram" button in Webflow, you'll create a link that opens your Instagram profile and either style it as a button or use an Instagram icon.
1. Create or Choose a Section for the Button
- Open your Webflow project in the Designer.
- Navigate to the place where you want to add the Instagram button (e.g., in the footer or contact section).
2. Add a Link Element
- Drag a Button or Link Block from the Add panel into the canvas.
- If you use a Link Block, you can customize it with text and/or an icon manually.
3. Set Link to Instagram Profile
- Select the link element.
- In the Settings panel (right sidebar), under Link Settings:
- Choose External URL.
- Enter your Instagram profile URL, e.g.,
https://www.instagram.com/yourusername/. - Enable “Open in new tab” to ensure it doesn’t navigate away from your site.
4. Add Text or Icon
- For a Button, edit the label to say something like "Follow on Instagram".
- For a Link Block, you can:
- Add a Text Block with your label.
- Optionally, add an Icon using Webflow’s built-in icons or upload an Instagram logo as an Image.
5. Style the Button
- Select the element and use the Style panel to adjust padding, color, font, border radius, hover states, etc.
- To match the Instagram style, you can use their brand colors or gradients.
Summary
To add a "Follow on Instagram" button in Webflow, place a Button or Link Block, set it to your Instagram URL, and style it with text and/or an icon. Make sure it opens in a new tab and matches your website’s design.
