Customizing Instagram Feed with CSS
You can customize the appearance of your Instagram Feed widget on the Layout, Theme, and Settings tabs. If the built-in options are not enough, use Cascading Style Sheets (CSS) to fine-tune individual widget elements.
In This Article
Instagram Feed CSS Classes
Each customizable widget element has a CSS class you can use as a selector. The available classes depend on your widget version.
If you created your widget after August 26, 2026, use the Current Classes:
Current Classes
| Class name | Element |
|---|---|
| .es-widget-background-container | Entire Instagram Feed widget |
| .es-header-title | Widget title |
| .es-grid-layout | Grid layout |
| .es-masonry-layout | Masonry layout |
| .es-carousel-layout-container | Carousel layout |
| .es-carousel-layout-item | Individual item in Carousel layout |
| .es-carousel-arrow-control-container | Navigation arrows in widget |
| .es-carousel-arrow-control-container-previous | Previous carousel arrow |
| .es-carousel-arrow-control-container-next | Next carousel arrow |
| .es-load-more-button | Load More button |
| .es-card-container | Individual Instagram post |
| .es-card-media-icon-slot | Post type icon |
| .es-card-media-container | Post media container |
| .es-card-media | Post media |
| .es-card-text | Post caption |
| .es-card-actions-count | Like and comment counts |
| .es-card-actions-share-button | Share button |
| .es-popup-feed-post-date | Publication date in post popup |
| .es-author-name | Instagram username in post |
| .es-avatar-image | Profile picture in post and header |
| .es-header-account-avatar | Profile picture in Account header |
| .es-bullets-control-item | Carousel pagination indicator |
| .es-bullets-control-item-active | Active carousel pagination indicator |
| .es-popup-feed-container | Post container in popup |
Classes for Older Widgets
| Class name | Element |
|---|---|
| .es-widget | Entire Instagram Feed widget |
| .es-widget-title | Widget title |
| .es-layout | Feed layout container |
| .es-layout-grid | Grid layout |
| .es-layout-carousel | Carousel layout |
| .es-layout-grid-content | Post container in Grid layout |
| .es-layout-carousel-content | Post container in Carousel layout |
| .es-layout-carousel-arrow | Carousel navigation arrows |
| .es-layout-carousel-arrow-prev | Previous Carousel arrow |
| .es-layout-carousel-arrow-next | Next Carousel arrow |
| .es-load-more-button | Load More button |
| .es-post | Individual Instagram post |
| .es-post-type | Post-type icon, such as video or carousel |
| .es-post-media | Post media container |
| .es-post-media-image | Post image |
| .es-post-media-video | Post video |
| .es-post-text | Post caption |
| .es-post-likes-count | Post like count |
| .es-post-comments-count | Post comment count |
| .es-post-source | Instagram source link |
| .es-post-follow | Follow link in post popup |
| .es-post-share | Share button in post popup |
| .es-post-date | Publication date in post popup |
| .es-post-location | Post location in popup |
| .es-post-user-name | Instagram username in post popup |
| .es-post-user-picture | Profile picture in post popup |
| .es-post-media-carousel | Media carousel within a multi-image post |
| .es-post-media-carousel-pagination-item | Media carousel pagination indicator |
| .es-post-media-carousel-pagination-item-active | Active media carousel pagination indicator |
| .es-post-media-carousel-arrow | Media carousel navigation arrows |
| .es-post-media-carousel-arrow-prev | Previous media carousel arrow |
| .es-post-media-carousel-arrow-next | Next media carousel arrow |
| .es-popup | Post popup |
| .es-popup-close | Popup close button |
| .es-post-like-notification | Post like notification |
The classes above are stable selectors recommended for customization and are intended specifically for the Instagram Feed widget.
How to Add CSS to Your Widget
After creating your CSS code, add it to your widget. As an example, we'll increase the text size on post cards:
.es-card-text {
font-size: 15px;
}
- 1
-
Open the Settings tab, scroll down, and click Custom CSS:
- 2
-
Paste the code into the Custom CSS field. Then, click Publish to apply the changes to your website:
Done! Your custom CSS is now applied to the widget.
Want to take your customization even further? Explore our public collection of CSS codes for Instagram Feed and find more ideas for your widget! 🚀
If you need any help with custom CSS, feel free to contact our Support team — we’ll be happy to assist! 😊