How To Add An Instagram Feed On A Page

Part 1: Navigate To The Page

 

1. Login to TheWebConsole

2. From the left side menu click Manage Pages and choose Content Pages

3. From the content page list either add a new page or edit an existing page

Note: Information on how to Add a New Page and How to Edit an Existing Page can be found in more depth within separate knowledgebase articles.

 

Part 2: Adding A Instagram Feed Module

 

1. Once the drag and drop editor has loaded you will be given the option to add different content modules into the page. All of these content modules first require a “Section” to be added. Once you have added your section and formatted it to your liking, simply click the “Instagram Feed” content module, located in the side menu. Once clicked, drag the module into the page, you will notice a blue highlighted box appear on the page wherever it is possible to add the module.

Note: Adding a section is covered in its own knowledge base article.

 

Part 3: Choosing Your Instagram Feed Layout

 

1.  Once you have added the Instagram feed content module to the page, hover over the module and click, then the edit options will appear. The edit button appears as a pencil icon in the top right of the section.

2. Once the edit window appears you will have the ability to choose the general layout of your feed, you can do this by clicking the drop down field labeled “Template” and choosing your desired template.

Note: If you do not have a custom template simply choose the “Responsive Default” option

 

3. Once you have chosen the template, choose how many images to feed through, you can choose between 2 and 10 images. To do so simply click the drop down field labeled “Media Per Row” and make your choice.

4. Then choose the amount of rows those images should be displayed across, you can choose between 1 and 5 rows. To do so simply click the drop down field labeled “Total Rows” and make your choice.

5. Then choose the size you would like the images to display in, you are given the options of Small, Medium and Large. To do so simply click the drop down field labeled “Image Size” and make your choice

 

Part 4: Styling Your Instagram Feed

 

1.  Once you have added the Instagram feed content module and selected its layout settings you will have the ability to style the feed. This is done via the 2 tabs Image and Container, covered below:

• Image - allows you to style the image and its overlay

  • Text Colour - allows you to choose the colour of the text overlay

  • Font Family - allows you to choose the font family of the text overlay

  • Font Size - allows you to choose the size of the text overlay

  • Font Weight - allows you to choose the boldness of the text overlay

  • Line Height - allows you to add space between lines of text in the overlay

  • Frame Padding - allows you to add space around the images

  • Frame Border - allows you to add a border around each image section

  • Frame Background Colour - allows you to add a background colour to the image section

  • Image Border - allows you to add a border around the image itself

  • Hover Background Colour - allows you to change the overlaid colour when hovering over the image

• Container - allows you to style the background container of the feed

  • Background Colour - allows you to add a background colour to the feed

  • Border - allows you to add a border to the feed

  • Padding and Margin - allows you to add space between the feed and content

 

2. Once you have added your feed, set its layout and applied the styling click the blue “Save and Close” button to save the feed.

3.  Once you have saved the Instagram feed module and made any other page edits required, click the “Save'' button on the bottom of the side menu to save the page.

 

Note: Always remember to follow the final point and save the page itself, or the hard work you have done will not be applied.