Instagram Feed element in Max Addons for Bricks Builder allows you to display your Instagram posts directly on your WordPress website. This helps keep your website fresh with social content while encouraging visitors to engage with your Instagram profile.
Using this element, you can showcase Instagram posts in grid, masonry, or carousel layouts, control how images appear, add captions, and display a follow button to grow your audience.
This guide will walk you through how to add the Instagram Feed element and customize its settings step-by-step.
Getting Started#
Before using the Instagram Feed element, make sure the following tools are installed and activated on your WordPress website:
Once both tools are active, you can start adding the Instagram Feed element to your page.
How to Add the Instagram Feed Element#
Follow these steps to add the element to your page:
- Open an existing page in the Bricks Builder editor, or create a new page.
- In the elements panel, use the search bar and type “Instagram”.
- Add the Instagram Feed element to your page.
To ensure you are using the element from Max Addons, check for the “MAX” label displayed in the top-left corner of the element.
Once the element is selected, you will see two main tabs in the settings panel:
- Content
- Style
Most functional settings are located in the Content tab, while design customization options are available in the Style tab.
Let’s explore the Content tab in detail.
Content Tab#
Content tab contains all the main settings required to fetch and display your Instagram feed. Inside this tab, you will find the following sections:
- Settings
- Images
- Caption
- Follow Text
- Overlay
Each section controls a specific part of the Instagram feed display.
Settings#
Settings section is where you connect your Instagram account and configure how the feed is displayed.
- Global Access Token: If you have already added an Instagram Access Token in the Max Addons backend settings, you can enable this option to automatically display the feed across your website wherever the Instagram Feed element is used.
If you want to display feeds from multiple Instagram accounts, simply disable the Global Access Token option.
Once disabled, a new field called Custom Access Token will appear. Here you can add a different token to display a feed from another Instagram account.
Learn more: How to Create Instagram Access Token for Instagram Feed Element
- Cache Timeout: The cache timeout controls how often the Instagram feed refreshes on your website. Available options include: None, 1 Minute, 1 Hour, 1 Day or 1 Week
- Image Count: This option allows you to define how many Instagram posts should appear in the feed.
- Layout: You can choose how the posts appear on your page. Available layouts include:
- Grid: Displays posts in a clean, evenly spaced grid.
- Masonry: Displays posts in a dynamic layout with varying heights.
- Carousel: Displays posts in a sliding carousel.
- Columns: Define how many columns should appear in the feed layout.
- Spacing: Adjust the spacing between the images to create a tighter or more spacious layout.
Images#
Images section controls how the Instagram images appear on your website.
- Link To: You can choose what happens when a visitor clicks on an image:
- None: Image is not clickable.
- Lightbox: Opens the image in a popup lightbox.
- Instagram Post: Redirects users to the original Instagram post.
- Border: Add borders around the images to match your website design.
- Box Shadow: Apply shadow effects to give images a layered appearance.
- Image Filter: Apply filters such as brightness, contrast, or grayscale to modify the image appearance.
- Image Hover Filter: Add filter effects that appear when users hover over the image.
- Equal Size Images: Enable this option to make all Instagram images appear in equal dimensions, creating a more uniform layout. If you enable this option, then you can set:
- Object Fit: Controls how images fit within their containers.
- Aspect Ratio: Define a consistent aspect ratio for the images.
- Height: Set a custom height for the image containers.
Carousel #
If a post contains multiple images, the element allows you to customize the carousel navigation icon. Available customization options include:
- Icon: Choose the navigation icon style
- Icon Color: Change the icon color
- Icon Size: Adjust the icon size
- Icon Position: Place the icon at the top, right, bottom, or left of the image
Video#
If your Instagram post contains a video, you will also see options to customize the video indicator icon. These settings include, Icon, Icon Color, Icon Size and Icon Position (Top, Right, Bottom, Left).
Caption#
Caption section allows you to display captions from Instagram posts.
- Enable Caption: Enable this option to display captions with your images. Once enabled, additional customization options become available.
- Caption Position: You can choose where captions appear: Over Image or Below Image.
- Caption Length: Limit how much caption text is displayed.
- Typography: Customize the caption text using font settings.
- Vertical Align: Adjust the vertical position of the caption.
- Horizontal Align: Control the horizontal alignment of caption text.
- Margin and Padding: Add spacing around the caption for better readability.
- Background: Add a background color or overlay behind the caption.
- Border: Apply borders to the caption area.
Follow Text#
Follow Text section helps encourage visitors to follow your Instagram account.
- Text: Add a custom message such as: Follow us on Instagram
- Position: Choose where the follow text appears: Top or Bottom
- Icon: Add an Instagram icon next to the text.
- Typography: Customize the font style, size, and color of the follow text.
Overlay#
Overlay section allows you to apply a background overlay effect to your images.
- Background: Apply overlays to the image background, text, or overlay layer.
- CSS Selector: Specify a selector for applying the overlay.
- Type: Choose the gradient style:
- Radial
- Linear
- Conic
- Shape: Select the overlay shape:
- Circle
- Ellipse
- Size: Control the gradient size with options such as:
- Closest Side
- Farthest Side
- Closest Corner
- Farthest Corner
- Position: Define where the overlay begins, such as:
- Top Left
- Top Center
- Top Right
- Center Center
- Custom position
- Repeat: Enable this option to repeat the gradient pattern.
- Color: Add custom colors to the overlay.
Wrapping Up!#
Max Addons Instagram Feed element for Bricks Builder makes it easy to integrate Instagram content directly into your website. With flexible layout options, image styling controls, caption settings, and follow text support, you can create a visually engaging Instagram section without writing any code.
Use the settings and customization options described above to design an Instagram feed that fits seamlessly into your website layout and encourages visitors to connect with your brand on social media.