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.
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.
Get started by connecting your Instagram account. Simply log in with Instagram, and the block will handle retrieving the necessary access token.
Login with your Instagram account, or with your Access Token.
Enable Header: Enable this option to display the Instagram Feed Header Block.
Instagram Feed Block for Gutenberg Editor
Instagram Feed Header: Switch on to enable the Instagram Feed Block’s Header.
Instagram Feed Posts: Enable to show the Instagram Posts.
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
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 Controls
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
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
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
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
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.
