Articles on: Nav-Filter-Sort

Skin

Configuring Grid Skins

Set the appearance of your backgrounds, navigation and individual grid items.

Table of Contents

  • Skins
  • Background
  • Navigation
  • Choose Skin
  • Preview BG
  • Item Skins
  • Selecting a Skin
  • Filter Skins
  • Available Skins

Skins

The Skins tab in Essential Grid allows you to control several aspects of the way your grid looks:


In this guide we’re going to see how to use its options to configure the appearance of your grid background, navigation controls, and individual grid items.


Background

The Background panel contains the Main Background Color option, which sets the background color of the entire grid:


When you click the option a color selection dialogue box will appear which you can use to set the background color to transparent, a flat color, or a gradient:



You can see how your background color selection looks by scrolling down to the preview area at the bottom of the page:



Note: For more information on how to select colors check out our article “The Tools of the Color Selection Dialogue”.


Navigation

The Navigation panel contains options for configuring the appearance of any navigation controls such as filtering, sorting and pagination so on:



Choose Skin

You can use the** Choose Skin** option to select from any of the navigation skins installed on your site:



Note: You may notice buttons next to the Choose Skin option enabling you to edit, create, and delete navigation skins. These buttons relate to working with custom skins, which we will cover in a later article.

Preview BG

You can then use the** Preview BG** option to see how the skin will look on different backgrounds, choosing between dark, light, transparent and your selected main background color:



Note: You can only preview the main background color if it’s a flat color, not a gradient.

Item Skins

Item skins control the content, layout and appearance of individual grid items, as well as what happens when you hover over them.



Selecting a Skin

The main area of the Item Skins panel displays a preview of each available item skin. You can hover over any of these previews to to see the hover effect for that skin:



To select a skin and apply it to your grid, click its preview with your mouse. Essential Grid will take a second or two to activate the skin, then you’ll be able to see it applied in the grid preview section below:



Available Skins

The package comes with a collection of skins, allowing users to select and apply the skin that best suits their needs.


Updated on: 25/06/2026