Grid: Products Categories

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.