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:
In the settings, you can select between an Image, solid Color, or None (default), and set the block to Full Width
You can add a title and a sub title to the block, and adjust their colors.
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.
Further Education about the Spark Editor and Spark Pages:
- Spark Editor: Getting familiar with the basics
- Spark Editor: Blocks - Header
- Spark Editor: Blocks - Areas
- Spark Editor: Blocks - About
- Spark Editor: Blocks - Call To Action
- Spark Editor: Blocks - Content
- Spark Editor: Blocks - Testimonials
- Spark Editor: Blocks - Blog
- Spark Editor: Blocks - Team Members
- Spark Editor: Blocks - Forms
- Spark Editor: Blocks - Listing
- Spark Editor: Blocks - Service
- Spark Editor: Layouts