Table of Contents
1. Introduction
Quick Tip
Always duplicate a Skin before editing to preserve copies of the original templates.
From the plugin’s Item Skin Editor, make a duplicate of your grid’s current skin.
![](http://www.themepunch.com/wp-content/uploads/2018/06/duplicate-skin.jpg)
Next, click over to the last page of skins, and click the “Edit Skin” button for the skin titled “Item Skin 1”.
![](http://www.themepunch.com/wp-content/uploads/2018/06/edit-duplicated-item-skin.jpg)
Next, rename the duplicated skin and save.
![](http://www.themepunch.com/wp-content/uploads/2018/06/rename-item-skin.jpg)
And finally, assign the duplicated skin to your Grid.
From your grid’s “Skins” tab:
![](http://www.themepunch.com/wp-content/uploads/2018/06/assign-new-skin.jpg)
Select the newly duplicated skin:
![](http://www.themepunch.com/wp-content/uploads/2018/06/select-new-skin-1024x637.jpg)
2. Add / Remove Layers
From the plugin’s main admin page, choose “Edit Skin”.
![](http://www.themepunch.com/wp-content/uploads/2018/06/edit-item-skin.jpg)
To delete an element, select its Layer from the Item Layout section located on the right side, and then click “Remove” from the Layer Settings on the left.
![](http://www.themepunch.com/wp-content/uploads/2018/06/delete-skin-element-1024x607.jpg)
To add a new element, find an “Available Layer” from the bottom list, and drag it into the “Item Layout”.
![](http://www.themepunch.com/wp-content/uploads/2018/06/add-skin-layer-1024x996.jpg)
And finally, choose the item’s Source:
![](http://www.themepunch.com/wp-content/uploads/2018/06/item-skin-layer-source-1024x497.jpg)
3. Adjust Text, Icon & Button Styles
From the plugin’s main admin page, choose “Edit Skin”.
![](http://www.themepunch.com/wp-content/uploads/2018/06/edit-item-skin.jpg)
Next, select the Layer you’d like to edit, and adjust its styling.
![](http://www.themepunch.com/wp-content/uploads/2018/06/adjust-layer-styles-1024x612.jpg)
Font-style adjustments:
![](http://www.themepunch.com/wp-content/uploads/2018/06/font-style-adjustments-1024x557.jpg)
Background Color adjustment:
![](http://www.themepunch.com/wp-content/uploads/2018/06/background-color-adjustments-1024x615.jpg)
Background Padding adjustment:
![](http://www.themepunch.com/wp-content/uploads/2018/06/background-padding-adjustments-1024x718.jpg)
Border-Radius Adjustments:
![](http://www.themepunch.com/wp-content/uploads/2018/06/border-border-radius-1024x610.jpg)
Quick Tip #1
Activate and apply styles to the “Hover” tab to add/adjust hover styles for the element.
![](http://www.themepunch.com/wp-content/uploads/2018/06/hover-styles.jpg)
Quick Tip #2
Save your customized element as a new “Template” that can then be used for other skins.
![](http://www.themepunch.com/wp-content/uploads/2018/06/save-as-template.jpg)
![](http://www.themepunch.com/wp-content/uploads/2018/06/save-template-style.jpg)
![](http://www.themepunch.com/wp-content/uploads/2018/06/saved-termplate-style-1024x417.jpg)
4. Adjust Content Positioning
From the plugin’s main admin page, choose “Edit Skin”.
![](http://www.themepunch.com/wp-content/uploads/2018/06/edit-item-skin.jpg)
Next, select the Layer you’d like to edit, and adjust the options from the “Spacing” tab.
![](http://www.themepunch.com/wp-content/uploads/2018/06/layer-position-1024x718.jpg)
Adjust Alignment:
![](http://www.themepunch.com/wp-content/uploads/2018/06/adjust-layer-alignment-1024x612.jpg)
Drag and Drop the Layers throughout the available Drop-Zones:
![](http://www.themepunch.com/wp-content/uploads/2018/06/move-element-drop-zone.jpg)
Change the display property of the Layer from “inline-block” to “block” to spread the element across the entire width of the Grid Item.
![](http://www.themepunch.com/wp-content/uploads/2018/06/adjust-display-property-1024x614.jpg)
And then apply some margins to the Layer:
![](http://www.themepunch.com/wp-content/uploads/2018/06/layer-position-margins-1024x614.jpg)
5. Show Layers by default without a mouse-hover
From the plugin’s main admin page, choose “Edit Skin”.
![](http://www.themepunch.com/wp-content/uploads/2018/06/edit-item-skin.jpg)
Next, select the Layer you would like to always show by default on desktop, select the “Show/Hide” tab, and then enable the “Show without Hover on Desktop” option, as shown in the following screenshot.
![](http://www.themepunch.com/wp-content/uploads/2018/06/always-show-1024x500.jpg)
To display the Layer on mobile without “Tapping” on the grid item, enable the “Show without Tap on Mobile” option, as shown in the following screenshot.
![](http://www.themepunch.com/wp-content/uploads/2018/06/mobile-tap-1024x494.jpg)