Customizing Instagram Feed: what CSS classes to use

You can tweak the look of your Instagram Feed effortlessly using the customization settings in the configurator or CSS codes from this list.

However, if the given options don’t quite meet your needs and you’re proficient in CSS coding, this post is just the thing for you :wink:

Instagram Feed CSS classes

We are happy to introduce 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
  • es-header

We highly recommend using only the above-mentioned selectors for customization. Our widget is regularly updated, so temporary classes may not work in the future. If you can’t find the right selector, just let us know and we’ll gladly help


The Custom CSS field can be used only for the Instagram Feed widget customization. Codes for the other elements of your website won’t work here


Guys, if you don’t have coding skills, but would love to customize your widget further, just drop us a line here. We’ll be happy to find the best solution for you :raised_hands:

2 Likes

If you found this post helpful, please hit the like button – your support means a lot! Thanks! :raised_hands:t2:

1 Like

.es-header

1 Like

Thank you for the note, @Sina :wave:

I’ve added this element to the list as well :slightly_smiling_face:

1 Like

Is there any way changing position of arrows? I want to put arrows outside of the carousel. Also i want to change arrow icon.

1 Like

Hi @Yasin_Ilhan :wave:

I’ve responded to you in this thread :slightly_smiling_face: