Instafeed Initial Setup

Important: In order to get this block working, you will need to have your Instafeed plugin setup, with some specific requirements.

Once you have completed the initial part, you can return to this tutorial, and place the feed on your website.

Placing the feed on the page

To add this block, click on the Add New Block.

And scroll all the way down to find the Instafeed Block.

Let's see what can be adjusted as you add the block:

Settings

In the settings, you can select between an Image, solid Color, or None (default), and set the block to Full Width

Title

You can add a title and a sub title to the block, and adjust their colors.

Feed

This is where all the fun stuff comes in. Here you can control:

  • Posts Count - enter the number of posts you want to showcase
  • Gutter Width - white empty space between the images
  • Number of Columns - for example if you want 6 columns, you should add 2 more numbers to it. 6/5/4/3/2/1
  • Image Border Width - Option to set image borders (in pixels)
  • Image Border Color - Set the color of the border
  • Hover Color Effect - Add hover color Effect (lower transparency recommended)

As mentioned above, it's recommended to have a lower transparency for the hover color effect and here is why:

Example 1: Here you have the transparency at 1.0 or 100%

Example 2: Here, the transparency is set to 0.6 or 60%

This will ensure your site visitors can see your suprised cat image after hovering over it. 🙀

After you have made the necessarry edits, make sure to save the page in the bottom left corner.

Instafeed Example:

Further Education about the Spark Editor and Spark Pages:

  1. Spark Editor: Getting familiar with the basics
  2. Spark Editor: Blocks - Header
  3. Spark Editor: Blocks - Areas
  4. Spark Editor: Blocks - About
  5. Spark Editor: Blocks - Call To Action
  6. Spark Editor: Blocks - Content
  7. Spark Editor: Blocks - Brag
  8. Spark Editor: Blocks - Testimonials
  9. Spark Editor: Blocks - Blog
  10. Spark Editor: Blocks - Team Members
  11. Spark Editor: Blocks - Forms
  12. Spark Editor: Blocks - Listing
  13. Spark Editor: Blocks - Service
  14. Spark Editor: Layouts
Did this answer your question?