Grid: Products Categories

See Preview

In this article you will find the unique information about Grid: Products Categories shortcode. If you want to learn about some more general issues like using a shortcode etc. See the list bellow or browse the general section.

This shortcode uses Product Category shortcode. You can easily use Product Category presets to style its items.
Examples Of Use:

You can find beautiful examples of this shortcode at our preview.

Detailed shortcode description

Bellow you will find a table with all of the shortcodes features and fields. On the right you will find a description for each field/section. All of this settings are available in shortcodes popup, it will be displayed once you create a new shortcode or hit the edit (pencil icon) button.

GeneralSourceCategoryRegularHover StatePaginationAnimations
Option Description
Main Preset Learn More »
Columns Number Select number of displayed columns.
Gap  Specify gap between items.
Enter Animation Enter Animation allow to specify an appear effect for shortcode. Learn More »
Option Description
Categories  Enter List of Categories. There can be multiple entries.
Order by  Select order type.
Sorting  Select sorting order: ascending or descending.
Hide Empty  Switch to hide categories with 0 products.
Option Description
Item Preset Learn More »
Height  Specify settings for thumbnail height.
Animation Type  Select the animation type.
Inline Content  Switch to disable fullwidth content (will create a floating box).
Content – Margin It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Effect Select one of the available effects
Color Choose effect color.
Zoom Choose the zoom level in percents.
Rotate Choose the rotation degree. This slider accepts negative values
Direction Select the animation direction after hover.
Movement Size Choose the movement in percents of the whole item size.
Border In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right) Learn More »
Option Description
Disable Regular State Check to disable regular state (only thumbnail image will be displayed until hover).
Count layout  Specify settings for regular state layout.
Position  Select the content position.
Content Out Effect  Select effect for interactive content element
Title – Typography Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More »
Title Overflow  Switch to option to show the full title
Title – Margin It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Products Count – Typography Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More »
Products Count – Margin It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Regular – Background Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Fill Whole Area  Switch to fill whole area.
Regular – Padding It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Option Description
Disable Hover State Check to disable hover state (nothing will change after hover).
Layout  Specify overlay settings for items.
Position  Select the content position.
Overlay In Effect  Select in effect for overlay.
Title – Typography Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More »
Title Overflow  Switch to option to show the full title
Title – Margin It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Products Count – Typography Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More »
Products Count – Margin It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Hover State – Background Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Fill Whole Area  Switch to fill whole area.
Hover State – Padding It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Option Description
Animations
Presets are used to easily configure your shortcode. You can choose one of the premade presets or create your own. You can preview the available presets with Preview & Load Preset button. You can find detailed informations about pagination preset here.


Option Description
Animations Choose one of the animation types. You can apply the animation to the preview box on the right with the Refresh button.

This shortcode comes with a lots of features. Check the list below for more details (click on each feature to learn more):

01_presets
02_typography_preset
05_modular
06_gradient
07_icon
08_animation
11_retina
12_responsive
13_wpml
14_psd