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.

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.

Access Credentials

  • Login with your Instagram account, or with your Access Token.
  • Enable Header: Enable this option to display the Instagram Feed Header Block.
Gutenberg Instagram Feed Block , login and layout
Instagram Feed Block for Gutenberg Editor

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

Item

  • Click Action to be None, Redirect, or Lightbox.
  • Show Videos On Click: A toggle switch to play videos directly in the feed when they are clicked.
  • Caption: Display options to be None, Bottom, Top, or Overlay.
Gutenberg Instagram Feed Block Item's CTA and Caption Controls
Gutenberg Instagram Feed Block Item Controls

Layout

  • Maximum Images Number: Input field to set the maximum number of images displayed.
  • Items Style: Arrange images in a traditional grid, masonry, or 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 Layout Controls
Gutenberg Instagram Feed Block Layout Controls

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
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.

About Leap13

Leap13 is a WordPress-focused web development firm specializing in building premium WordPress themes and plugins.

Copyright © 2024 | Built With ❤️ Using Kemet WordPress Theme and Premium Blocks