Gutenberg Instagram Feed Block Tutorial

Introduction

Gutenberg Instagram Feed Block is your seamless connection to showcasing Instagram content directly on your website. With the widespread use of Instagram for sharing and engagement, embedding your feed into your site with this block couldn’t be easier. Whether for personal branding or corporate storytelling, this block links your Instagram presence with your website, providing fresh content automatically.

Visit Demo Page

Free Download

Requirements

To get this Gutenberg block on your WordPress website, make sure to install and activate the following plugin(s).

Premium Blocks for Gutenberg – The Free WordPress Plugin.
Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg Instagram Feed Block?

Get started by connecting your Instagram account. Simply log in with Instagram, and the block will handle retrieving the necessary access token.

Layout

Enable Header: Enable this option to display the Instagram Feed Header Block.

Instagram Feed Gutenberg Block Support Nested Blocks

Instagram Feed Header: Switch on to enable the Instagram Feed Block’s Header.
Instagram Feed Posts: Enable to show the Instagram Posts.

Header General Setting

Background Type: Choose the type of background (color, gradient, image, or video).
Box Shadow: Add or adjust the shadow effect behind the element to create depth.
Border: Set the border style (solid, dotted, dashed, etc.) around the element.
Border Radius: Adjust the roundness of the element’s corners.
Margin: Set the space outside the border of the element, affecting how far it is from other elements.
Padding: Set the space inside the border of the element, affecting how far the content is from the element’s border.

Gutenberg Instagram feed block header settings — Gutenberg Instagram Feed Block – Header Settings

Gutenberg Instagram Feed Block Posts Settings

Content

Item

Click Action:
None: No action will be taken when an item is clicked.
Redirection: Redirects to the Instagram post on the Instagram website when clicked.
Lightbox: Opens the image or video in a modal/lightbox on the site when clicked.
Show Videos On Click: A toggle switch to play videos directly in the feed when they are clicked.
Caption:
None: Do not display captions with the Instagram posts.
Bottom: Display captions at the bottom of the posts.
Top: Display captions at the top of the posts.
Overlay: Overlay captions on the image or video within the posts.

Layout

Maximum Images Number: Input field to set the maximum number of images displayed.
Items Style
Grid: Arrange images in a traditional grid format.
Masonry: Align images in a masonry layout, accommodating different image sizes.
Carousel: Display images in a sliding carousel format.
Image Height: Slider to adjust the height of images.
Images per Row: Select the number of images to display per row, with options ranging from 1 to 6.
Image Hover Effect: Dropdown to choose an effect when the mouse hovers over an image.

Gutenberg Instagram Feed Block Styling Controls

Item Box – Style

Tabs (Normal/Hover): Switch between styling options for the normal state and when the mouse hovers over an item.
Background: Enable custom background settings.
Border: Choose the border style (solid, dotted, dashed, etc.) for the item.
Border Radius: Input fields to set the corner roundness for the top, right, bottom, and left sides of the item.
Box Shadow: Enable and customize the shadow effect around the item.
CSS Filters: Apply and customize CSS filter effects such as blur or brightness.
Margin: Set the space outside the border of the item for the top, right, bottom, and left sides.
Padding: Set the space inside the border of the item for the top, right, bottom, and left sides.

Gutenberg Instagram Feed Block Posts Styling Controls

Container- Style

Background Type: Choose the type of background for the container (color, gradient, image, or video).
Color: Adjust the background color of the container.
Border: Set the style of the border around the container (solid, dotted, dashed, etc.).
Border Radius: Control the roundness of the container’s corners by setting the radius for the top, right, bottom, and left sides.
Box Shadow: Add a shadow effect around the container to create depth; customize the shadow’s appearance.
Margin: Adjust the outer space around the container, defining the distance from other elements.
Padding: Adjust the inner space within the container’s border, defining the distance between the border and the content inside.

Gutenberg Instagram Feed Block Posts' Container Styling Controls — Gutenberg Instagram Feed Block Posts’ Container Styling Controls

Carousel Arrows – Style

Size: Adjust the size of the carousel arrows.
Normal/Hover: Tabs to switch between styling for the default state (Normal) and when the mouse hovers over the arrows (Hover).
Color: Select the color of the arrows.
Background Type: Choose the background type for the arrow area (solid color, gradient, image, or video).
Box Shadow: Add a shadow effect around the container to create depth; customize the shadow’s appearance.
Border Radius: Set the roundness of the arrow corners.
Padding: Adjust the space around the arrow icon within the arrow button.

Gutenberg Instagram Feed Block Carousel Arrows Styling Controls

Need Further Help?

Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

Contact Support

Facebook Group

Gutenberg Instagram Feed Block Tutorial

Table Of Content

Introduction

Requirements

How to Use Gutenberg Instagram Feed Block?

Layout

Instagram Feed Gutenberg Block Support Nested Blocks

Header General Setting

Gutenberg Instagram Feed Block Posts Settings

Content

Item

Layout

Gutenberg Instagram Feed Block Styling Controls

Item Box – Style

Container- Style

Carousel Arrows – Style

Need Further Help?

Global Features

Help Center

Our Products

About Leap13