Gutenberg Instagram Feed Block Tutorial

Intro

Welcome to the comprehensive guide on utilizing the Gutenberg Instagram Feed Block, a pivotal tool for integrating Instagram content directly into your WordPress site. This Premium Blocks tutorial will navigate you through the seamless integration of your Instagram feed, showcasing how to leverage Instagram feed layout customization for a more engaging visitor experience. Whether you aim to display images, videos, or stories, Gutenberg Instagram Feed Block enriches your site with dynamic, responsive Instagram carousels and posts, bridging the gap between your website and social media presence.

Key Features

  • Access Credentials
  • Layout

Access Credentials

Here, we will go with the initial setup by connecting the block with your Instagram account.

  • Log in with Facebook: You have to log in with your Facebook account, then the Access Token field will fetch automatically.

Layout

In the Layout options, you can set how to display the content of Gutenberg Instagram Feed Block on your site.

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

Instagram Feed Gutenberg Block Support Nested Blocks

  1. Instagram Feed Header: Switch on to enable the Instagram Feed Header Block.
  2. Instagram Feed Posts:  To show the Instagram Posts.

Gutenberg Instagram Feed Block Header Settings

  • Background: Set a background color for the container.
  • Border Type
  • Border Radius
  • Box Shadow: Set box shadow for Instagram Feed Header. The available options are:
    • Color
    • Horizontal
    • Vertical
    • Blur
    • Spread
    • Position
      • Outline
      • Inset.
  • Margin
  • Padding

Gutenberg Instagram Feed Block Posts Settings

Content

Item

  • Click Action: Decide what you want to do in click on the item.
    • None: Do nothing.
    • Redirection: It will redirect you to see the image on the Instagram website rather than opening it in a lightbox.
    • Lightbox: This option will make the Instagram images open in a lightbox Modal.
  • Show Videos On Click: This option will make the videos play upon mouse click.
  • Caption: Decide whether if you want to show the caption and its position.

Layout

  • Maximum Images Number: Set the maximum number of images to show per block.
  • Items Style: List style.
    • Grid: This option will display the layout of the items in Grid style.
    • Masonry: This option will display the layout of the items in a Masonry style.
    • Carousel: Showing Instagram feed in a carousel. You will be able to control the following option if the style is Carousel.
      • Autoplay: Enable/disable the autoplay of the media carousel.
      • Autoplay Speed: Set the autoplay speed.
      • Arrow Position: Adjust the position of carousel arrows.
  • Image Height: Set the height of all images to be at the same height, It’ll be available only when the list style is not Masonry.
  • Items per Row: Decide how many images should be displayed per row, you can select from 1 to 6 columns.
  • Hover Image Effect: Choose from multiple hover effects for the Instagram feed images. The available effects are:
    • Zoom In
    • Zoom Out
    • Scale
    • Gray Scale
    • Blur
    • Sepia
    • Brightness
    • Translate

Style

  • Items Box
  • Caption
  • Container
  • Carousel

Item Box

  • Border Type: Set a border type for Item Box in Instagram Feed Gutenberg Block you can choose from the following border types:
    • None (Default)
    • Solid
    • Double
    • Dashed
    • Groove.
  • Width: Set border width.
  • Color: Choose a color for your border.
  • Border Radius: Set Border Radius for Photo Box using pixels (PX), percentage (%), or em (EM). A higher border-radius means a more circular border.
  • Shadow: Customize the shadow with the following options:
    • Color.
    • Horizontal.
    • Vertical.
    • Blur.
    • Spread.
    • Position.
  • CSS Filters: Customize the filters on images from the following options:
    • Blur.
    • Brightness.
    • Contrast.
    • Saturation.
    • Hue.
  • Margin: Creates space around the Photo Box, outside of any defined borders. You can set the margin in Pixel (px), Em (em), or Percentage (%).
  • Padding: Creates space around the Photo Box, inside of any defined margins and/or borders. You can set Photo Box Padding in Pixel (px), Em (em), or Percentage (%) Note* Padding does not accept negative values.

Same Exact Settings are in Both Normal and Hover in Item Box.

Caption

  • Color: Set a color for the caption text.
  • Typography: Customize Styling font for the caption text.
  • Text Shadow: Set shadow for the caption text.

Container

  • Background: Set a background color for the container.
  • Border Type
  • Border Radius
  • Box Shadow: Set box shadow for Instagram Feed box container. The available options are:
    • Color
    • Horizontal
    • Vertical
    • Blur
    • Spread
    • Position
      • Outline
      • Inset.
  • Margin
  • Padding

Carousel

  • Arrow Color: Set the colors for the carousel arrows.
  • Size: Set the size for the carousel arrows.
  • Background Color: Set a background color for the carousel arrows.
  • Border: Set a border for the carousel arrows.
  • Padding: Set padding for the carousel arrows.

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