How to Make Instagram Feed on Bottom of Squareapce
One of the most popular trends in website design that I've noticed over the past few years is having a full-with Instagram feed in the footer of your website. And it's popular for a reason - we all know that connecting with our audience on social media is important, plus having beautiful images spanning the bottom of your website looks really good.
While many website platforms have this option built-in, Squarespace doesn't, which can be frustrating when so many people request this feature. Today I'm sharing two ways that you can add a full-width Instagram feed to your website.
*Note: these only work if you're using a Brine family template . This is the template family preferred by most designers because it offers more flexibility.
Adding a full-width instagram feed to your website's footer
To get started, you'll need to add an Instagram feed to your footer. Templates in the Brine family offer three different footer sections (top, middle, and bottom), which is important for this option to work.
1. Remove any content from one of the three footer sections depending on where you want your Instagram feed to be. Most people out their Instagram feed in the top section so that it acts as a divider between the website page's content and the footer information, but you can place it in any of the three.
2. Add an Instagram block to the section you've chosen. You'll find this under Social Blocks at the bottom of the options.
3. Choose which Instagram account you want to connect to and set the number of images you want to display. I like to use 6-8 images for full-width feeds because the images aren't too large, but still make an impact.
If you don't see the account you want to connect to, make sure you've set up the connection under Settings > Connected Accounts. Not sure how to do that? Check out this article from Squarespace.
4. Make sure the Design layout is set to "Grid" and change the number of thumbnails per row to match the number of images you want displayed. You can also adjust the amount of padding between images. Most websites have this set to 0, but you can include padding if you want to.
5. Save your changes and make sure your Instagram feed loads.
6. Add this code to the Custom CSS section of your website under Design > Custom CSS.
.Footer-inner { padding: 0px 0px !important; } .tweak-footer-layout-stacked .Footer-blocks--top { background-color: #e2e0dd; padding-bottom: 0px; } If you placed your Instagram feed in the middle or bottom footer section change .Footer-blocks—top to —middle or —bottom accordingly.
The background-color here is optional - if your footer has a background color, the default is to match that, but if you've used a different background color to the section above or below, you'll want to set this to match.
You may also find that if you add the Instagram feed to the middle or bottom section, you also need to add padding-top: 0px; under the padding-bottom section, but this will depend on how you want the spacing to look.
Adding a full-width instagram feed to An Index Page
This is a little more complicated because you'll need to know more information, but it's a great option if you want to include your Instagram feed in another part of your website as a divider or if you want it to look like part of the footer on some, but not every page of your website.
1. Add a new section to the Index page where you want your Instagram feed to go. Note the URL Slug of this new section.
2. Add an Instagram block to your new section. You'll find this under Social Blocks at the bottom of the options. Then follow Steps 3-5 to set up the design of your Instagram feed.
3. Make sure to delete the Text Block that is automatically added to new pages. If you don't remove it, the code won't work. Then save your changes.
4. Check the Block ID of your Instagram block note it. If you aren't sure how to do this, the Squarespace Collection/Block Identifier extension for Chrome is the easiest option.
5. Add this code to the Custom CSS area of your website.
#index-page-url-slug { .Index-page-content { max-width:none; } .Index-page-content { padding: 0px !important; margin-bottom: -10px !important; } #block-id { padding-bottom: 0px; } } Use the URL Slug of the index section you created and the Block ID of the Instagram block to customize the code to your website. If you want to create the same look on other pages, simply add the other URL Slugs and Block IDs after the first with a comma separating them (#block-id, #block-id)
Remember, these options only work on the Brine family of Squarespace templates. If your aren't sure what template you're using, you can check that under Design > Template.
Source: https://www.lemonandthesea.com/blog/create-a-full-width-instagram-feed
0 Response to "How to Make Instagram Feed on Bottom of Squareapce"
Post a Comment