Step 3: Mastering colors on the Style tab of your Instagram Feed

The power of color in design is undeniable. While we often focus on functionality and user experience, this aspect should definitely not be overlooked. In this article, we are going to show you how you can use the Style tab of your Instagram Feed widget to make it more attention-grabbing.

Choosing the Color Scheme

The Style tab of your Instagram Feed widget allows you to select one of the predefined color schemes. You can choose the desired scheme from the dropdown list in the Color Scheme field:

When you select a color scheme, it is automatically applied to hover overlay, some popup elements and the navigation elements in your gallery. However, you can change the colors of these elements, as well as the other ones, individually.

Customizing the Elements

Depending on the layout you've chosen, you can find four customizable elements on this tab – Header, Post, Arrows / Load More Button and Popup:

1

Header section allows you to change the color of header elements, including Header Background Color, Text Color, Follow Button Color and Follow Button Text Color:

2

In the Post section you can change the overlay background and overlay text colors of your posts:

3

The name of the third color settings group varies according to the kind of layout you’ve selected, so it’s either called Arrows or Load More Button. This section is about changing the colors of the navigation elements in your gallery:

4

Popup section allows you to set the colors for the different post elements visible in the popup. You can either choose a specific color or make a custom color for each element:

Creating a Custom Color

When creating a custom color, first you need to click on the Custom Color icon:

Use the top slider to select the color and the bottom one to set the transparency:

Using Custom CSS option

The Custom CSS feature may come in handy when the present styling options are not enough. This option can help you create a unique visual identity for your Instagram Feed:

To get more instructions on how to use this option, please take a look at the following article - Customizing Instagram Feed with the help of CSS.