How to use Essential Grid?

Hi I’d like to use Essential Grid to create a grid of images, but no idea how.

The instructions on https://essential.themepunch.com under Get Started don’t seem to apply.

Related: I posted this thread: How to activate Essential Grid? Maybe this has something to do with this being different from the EG website.

Thanks!

Hi there,

You will need to go to X > Validation menu and install the Essential Grid using the Extensions section. You will not need to register that plugin as it is bundled with the theme.

Please follow the steps mentioned in the article below for more information on the usage of that plugin:

If you have a specific question about the usage we will be happy to answer. kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thank you.

Thanks that helped me get started!

I have the following issues/questions currently:

  1. How can I change the “default fit” to “contain” globally, instead of “cover”?

  2. How can I change the background color of the grid elements individually and globally?

  3. How can I remove the ‘zoom’ and ‘link’ icons from a skin? I just want the title and dark background on hover.

My site details are in the secure note, and I only have one grid created.

Thank you very much.

Hey @ddctc,

####1. You will need to edit the skin of your grid for this. For more Skin Editor usage instructions, please see https://www.themepunch.com/essgrid-doc/item-skin-editor/

Once inside the skin editor, you can edit Cover to Contain

####2. Globally, you will need to go to the skin editor also. The Background Color is under Cover.

Individually, I see no option but to use custom CSS. Here’s the syntax. The first grid item’s ID is 0 and the next one to the right is 1 and so on.

#eg-1-post-id-0 {
	background:skyblue;
}

####3. In the Skin Editor, click on the element and remove it.

Hope that helps.

Thank you that does greatly help.

Just one thing:

When I said I wanted to change the background color, I meant the color behind the image itself. Most of my images are transparent background PNGs, and I would like to control the background color behind them. So the “base” background color if you will.

Thanks

Hey @ddctc,

Sorry for the confusion. It is under Spaces > Full Item. I changed it to blue to double check it’s working.

Thanks.

Thanks very much.

Is there also a way to change background colors individually?

Thanks

Hey There,

The background color is dependent to the skin and the skin is applied to all of the grid items. To change the background color individually, it may require a minor custom css. Could you please point us to the url where we can find your grid so we can give you a tailored solution to your last issue?

Thank you in advance.

Sure thanks. The URL is in the secure note attached to this message.

Hey @ddctc,

I already gave the answer to the individual background previously. Please take a look at the code in my previous reply and screenshot.

Thanks.

Thanks sorry. And where should I put this CSS?

Hi @ddctc,

You can add the custom CSS in your Theme Options > CSS.

Let us know how it goes.

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.