Grid: Posts

See Preview

In this article you will find the unique information about Grid: Posts 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 Single Post shortcode. You can easily use Single Posts presets to style its items.
Examples Of Use:

You can see a beautiful use of Grid: Posts on one of our pre-made templates: Avocado, Fig, Illama, Papaya.

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.

GeneralSourcePostItemHover StateRead MorePagination
Option Description
Main Preset 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. Learn More »
Columns Number Select number of displayed columns.
Gap Choose gap between grid items.
Enter Animation Enter Animation allow to specify an appear effect for shortcode. Learn More »
Custom Class Add your custom class to the element. Mostly used for custom CSS/JS.
Option Description
Data source Select post types for grid. Custom List lets you select the exact list of posts you want.
Posts Define list of posts displayed by this grid.
Taxonomies or Tags Define posts tags, categories or custom taxonomies. It will filter the posts to display only the ones with specified tag/category.
Sort by Select posts sorting parameter.
Order Select posts sorting order.
Items Per Page Define maximum number of displayed posts per page. If the number of posts meeting the above parameters is smaller it will only show those posts.
Option Description
Item Preset 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. Learn More »
Layout Select Layout styles let you choose the target layout after you define the shortcode options.
Thumbnail & Overlay Check to disable thumbnail and its overlay in selected layout.
Content In Overlay Check to display post content inside overlay.
Content Position Select position of post content on thumbnail.
Custom Class Add your custom class to the element. Mostly used for custom CSS/JS.
Option Description
Item/Date Out Effect Select exit animation effect for post content or date box (style 5) after hover.
Thumbnail Height Specify height of post thumbnail.
Disable Title Check to disable title display.
Title Overflow Check to enable multiple lines display for long title. Uncheck to trim title to available space.
Title – Typography Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More »
Hover Color Specify hover color for 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 »
Meta layout
Meta – Typography Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More »
Link Color Specify color of links inside meta (for example links to taxonomies, archives).
Hover Link Color Specify color of hovered links inside meta.
Separator Specify a character to separate each of meta elements.
Meta – 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 »
Date – Typography Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More »
Date Background Color Select a background color for date box.
Date – 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 »
Date – 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 »
Date – 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 »
Disable Excerpt Check to disable excerpt display.
Excerpt – Typography Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More »
Excerpt – 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 »
Excerpt – 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 »
Content – 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 »
Content – 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 »
Content – 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 »
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 »
Odd – 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 »
Option Description
Overlay in Effect Select enter animation for hover state of post.
Background Color Select background color for hover state.
Alignment Select text align for title at post overlay.
Color Select color for title at post overlay.
Hover Color Select hover color for title at post overlay.
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 »
Alignment Select text align for meta at post overlay.
Color Select text color for meta at post overlay.
Link Color Select link color for meta at post overlay.
Hover Color Select hover link color for meta at post overlay.
Meta – 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 »
Color Select color for date box at post overlay.
Border Color Select border color for date box at post overlay.
Background Color Select background color for meta at post overlay.
Date – 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 »
Date – 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 »
Alignment Select text align for excerpt at post overlay.
Color Select color for excerpt at post overlay.
Excerpt – 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 »
Excerpt – 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 »
Disable Lightbox Check to disable lightbox icon at thumbnail overlay.
Icon Horizontal Mirror Check to enable horizontal flip for icon.
Lightbox – Icon Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More »
Hover Color Select hover color for lightbox icon.
Disable Read More Check to disable read more icon at thumbnail overlay.
Icon Horizontal Mirror Check to enable horizontal flip for icon.
Read More – Icon Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More »
Hover Color Select hover color for readmore icon.
Icons – 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 »
Icons – 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 »
Option Description
Disable Read More button Check to disable Read More button displayed after expert section.
Main Preset 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. Learn More »
Full Width Check to stretch button to 100% width of its container.
Typography Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More »
Text Define button text.
Icon Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More »
Display Effect Select icon display style:
None: hide the icon;
Stay: display icon on selected side;
Slide In: slide icon in from selected side;
Push Out: push out button text with icon from selected side.
Custom Gap Define gap between icon and text.
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 »
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 »
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 »
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 »
Title Color If you want to change the title color after hover choose a different one from the color picker below.
Icon Color If you want to change the icon color after hover choose a different one from the color picker below.
Hover – 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 »
Hover Effect Select background hover animation style:
Fade: simple fade in effect;
Slide In: slide background in from selected side;
Expand: expand background from selected position.
Custom Offset Define custom offset for expanded background size. Offset might be different dependent on the button size.
Hover – 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 »
Custom Class Add your custom class to the element. Mostly used for custom CSS/JS.
Option Description
Main Preset 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. Learn More »
Type Select pagination type:
Load More: displays load more button to load next items under current ones;
Infinity: automatic load more when user reach last item;
Classic: normal pagination with next/previous buttons and pages.
Position Select pagination position.
Gap Choose gap between buttons.
Force Square Buttons Check to force square shape of buttons.
Typography Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More »
Text Define button text.
Icon Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More »
Display Effect Select icon display style:
None: hide the icon;
Stay: display icon on selected side;
Slide In: slide icon in from selected side;
Push Out: push out button text with icon from selected side.
Custom Gap Define gap between icon and text.
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 »
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 »
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 »
Title Color If you want to change the title color after hover choose a different one from the color picker below.
Icon Color If you want to change the icon color after hover choose a different one from the color picker below.
Hover – 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 »
Hover Effect Select background hover animation style:
Fade: simple fade in effect;
Slide In: slide background in from selected side;
Expand: expand background from selected position.
Custom Offset Define custom offset for expanded background size. Offset might be different dependent on the button size.
Hover – 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 »
Previous Button – Icon Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More »
Text Define previous button text.
Display Effect Select icon display style:
None: hide the icon;
Stay: display icon on selected side;
Slide In: slide icon in from selected side;
Push Out: push out button text with icon from selected side.
Custom Gap Define gap between icon and text.
Next Button – Icon Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More »
Text Define next button text.
Display Effect Select icon display style:
None: hide the icon;
Stay: display icon on selected side;
Slide In: slide icon in from selected side;
Push Out: push out button text with icon from selected side.
Custom Gap Define gap between icon and text.
Previous/Next Button – 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 »
Pagination – 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 »
Custom Class Add your custom class to the element. Mostly used for custom CSS/JS.

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
03_navigation
05_modular
06_gradient
07_icon
08_animation
11_retina
12_responsive
13_wpml
14_psd