Customizing Instagram Feed with the help of CSS

You can easily adjust the appearance of Instagram Feed on the Layout, Post and Style tabs of your widget settings. However, if the available options are not enough for your use-case, we are happy to introduce the CSS selectors base. Using Cascading Style Sheets (CSS), you can adjust all the elements in detail so that they fully meet your website design requirements.

In this article

Please keep in mind that CSS writing requires strict adherence to the rules, otherwise, it can lead to unpredictable consequences or widget break.

You are very welcome to request any feature you need on our Wishlist. Your input is crucial in shaping our future updates and ensuring we meet your needs and expectations. Request a Feature.

Instagram Feed CSS classes

Here is the list of classes that can be used for customization of the widget elements:

  • es-widget 
  • es-widget-title 
  • es-layout
  • es-layout-grid
  • es-layout-carousel
  • es-layout-grid-content
  • es-layout-carousel-content
  • es-layout-carousel-arrow 
  • es-layout-carousel-arrow-prev 
  • es-layout-carousel-arrow-next 
  • es-load-more-button 
  • es-post 
  • es-post-type
  • es-post-media
  • es-post-media-image
  • es-post-media-video
  • es-post-text 
  • es-post-likes-count 
  • es-post-comments-count 
  • es-post-source 
  • es-post-follow
  • es-post-share
  • es-post-date 
  • es-post-location
  • es-post-user-name 
  • es-post-user-picture
  • es-post-media-carousel
  • es-post-media-carousel-pagination-item
  • es-post-media-carousel-pagination-item-active
  • es-post-media-carousel-arrow 
  • es-post-media-carousel-arrow-prev 
  • es-post-media-carousel-arrow-next 
  • es-popup 
  • es-popup-close
  • es-post-like-notification
We highly recommend using only the above-mentioned selectors for customization. Since we are constantly improving our widget, its structure can change. Thus, in case you are using temporary classes, your CSS codes may simply stop working in the future. If you haven't found the selector you need, please contact us. We will definitely consider its implementation.
The Custom CSS field can be used only for the Instagram Feed widget customization. The widget ID will be added to all the CSS codes you add there, so the CSS codes intended for other elements of your website won't work there.

How to add a CSS code

Once you have prepared the CSS code, navigate to the widget's settings and add it to the special field for CSS codes. To illustrate, let's say you wish to modify the widget's font using the following code:

.es-widget {
    font-family: Calibri;
}
1
Open the Style tab of the widget settings and click Custom CSS:
2
Paste the code to the Custom CSS field and save the changes:

Done! You've successfully added your CSS code to the widget.

Feel free to customize your Instagram Feed widget with our public list of CSS codes! You can check it out here: CSS codes for Instagram Feed.

Did this article answer your question? Share your feedback: Thanks for sharing your feedback. It helps us grow! There was a problem submitting your feedback. Please try again later.

Still looking for assistance? Contact Us Contact Us

Related Articles