How to Display a Slider in Essential Grid

This article will show you how to display a slider on a grid item.

Note: The Slider Revolution Blank Template option will only be available when the Slider Revolution plugin is activated.

Step 1:

Create and insert a slider into a page using the “Slider Revolution Blank Template” page template.

Step 2:

Create a Post Based Grid and in grid Media Source, select “iFrame Markup”

In the Item Media Source Order, drag the “iFrame Markup” above the “Featured Image”.

Step 3:

Create a Post and insert an iFrame Markup into the post’s Essential Grid Custom Settings

In the “Alternative Sources” tab, insert the URL of the page you created in Step 1 into the iFrame Markup.

<iframe src="” ></iframe> 

Step 4:

Download the “Washington” Grid Skin from the Grid Template Library

Duplicate and rename the grid skin in the Item Skin Editor

Edit and remove all layers from the duplicated grid skin.

In the “Layout Composition” > “Layouts” Tab, set the “Content” to “Hidden”.

Step 5:

Edit the Post Based Grid that you’ve created on Step 2

Edit the “Post Meta” of the Post that you’ve created in Step 3 and choose the duplicated skin.

Step 6:

Apply the custom CSS code below into the grid skin.

/* Replace "themepunch" with the name of your grid skin*/
.eg-themepunch-wrapper .esg-entry-media {
	height: 100%;
.eg-themepunch-wrapper .esg-media-poster {


How to Display a Slider in Essential Grid

Further Resources for Web Design and Development Enthusiasts

Alright! We've embarked on quite an adventure exploring the realms of this topic. But why stop there? The world of web design and development is vast, and there's always more to learn and discover. Let's dive into some resources that'll keep your knowledge fresh, your skills sharp, and your passion ignited:

The Author


Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength.

Liked this Post?
Please Share it!