Style Presets

There are an infinite number of ways to configure Dyggrid. We include collections of “Style Presets” to help you quickly achieve some of the more popular designs and have included some below. Each grid is also a demo and you are welcome to explore and reconfigure the settings.

Accordion

Blog

Blog (fade)

Blog (hover)

Cards

Gallery (Captions)

Gallery (columns)

Gallery (columns) with hover

Gallery (rows with hover)

Gallery (square)

Gallery (tiled)

Logo Grid

Menu List

Overlay Text

Panels

Row Layout

Woo Products

Accordion

Dyggrid's accordion feature turns your posts and pages into highly configure accordions. Easily create expandable lists such as questions and answers by authoring the individual items as a post with an assigned category, or as a custom post type.

Postgrid ID

Content source

Query source

Post Type

Taxonomy

Media Library

Loop

Post type

Taxonomy filter

Filter operator

Filter term slug

Taxonomy

Only terms attached to the current post

Number of posts

Max posts

Page size

Use AJAX load more

Load more button contents

Sort order

Order by

Meta key

Order

Show elements

Show Elements

Content wrapper

Woo Price Icon

Woo Sold Badge

Show Meta Icons

Elements Pattern

image
<
>
title
content
excerpt
button
author
date
Download
Twitter
LinkedIn
Facebook
Woo price
Post Grid Excerpt
Post Grid Sort Order
Categories
Tags
Formats
Project Categories
Project Tags
Product categories
Product tags
Product shipping classes
Settings Panels
Help Category
Media Categories
Type

Inline Separator

Inline Padding

Term Separator

Term Padding

Title tag

Button text

Cell hover tooltip content

Empty

Title

Custom

Tooltip content

Equalise heights

Titles

Content wrapper

Content aspect ratio

CSS Attributes

cell

content

image

title

background-color

border-radius

border

padding

margin

text-align

color

font-size

line-height

text-transform

Style presets

Copy from id

ID of Dyggrid to copy

Reset

Basic styles

Override theme fonts

Cell Shadow

Image Shadow

Hover Enlarge

Center All Text

Center Content (Vertical)

Center Content (Horizontal)

Image Hover Zoom

Theme preset

Preset

Transition animation

Animation

Dynamic sorting & filtering

Filter widget

Dynamic filter tax.

Taxonomy Labels

Link to taxonomy archive pages

All Page Link

Sort widget

Show the dynamic sort widget

Sort fields

Title

Date

Price

Image settings

Image location

Background

Content

Hidden

Image aspect ratio

Image file resolution

Use srcset

Use thumbnail

Thumnbnail size

Srcset requested resolutions

Override Image Filler

Attachment ID of filler image

Grid sizing

Cell layout

Horizontal

Vertical

Fixed width

Columns

Gaps

Breakpoints

Cell width

Cell margins

Cell heights

Equalise

Cell aspect ratio

Click behaviour

What should links do?

Open lightbox/slideshow

Open post

Open fixed url

Fixed url

Linked elements

Entire cell

Transition

Images

Titles

Note the above click behaviour settings will have no effect in this demo.

CSS / classes

Grid styling classes and CSS

Wrapper class

Cell class

Image class

CSS

License / Support

License key

To use this plugin and receive updates, enter your license key and press update. Click here to purchase a license.

Select and press the update button to de-register this license key

Support request message

For Dyggrid Pro plugin support, type a message above and press update. Replies are emailed to your registered email address. You agree to configuration data about this Dyggrid shortcode being sent along with your message.

If your email address has changed since registration, please contact account support.

Post 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Post 2

Post 3

Post 4

Blog

The blog preset was designed specifically for your blog/news posts and includes all the usual fields you would expect to find, including hyperlinked meta fields.

Postgrid ID

Content source

Query source

Post Type

Taxonomy

Media Library

Loop

Post type

Taxonomy filter

Filter operator

Filter term slug

Taxonomy

Only terms attached to the current post

Number of posts

Max posts

Page size

Use AJAX load more

Load more button contents

Sort order

Order by

Meta key

Order

Show elements

Show Elements

Content wrapper

Woo Price Icon

Woo Sold Badge

Show Meta Icons

Elements Pattern

image
<
>
title
content
excerpt
button
author
date
Download
Twitter
LinkedIn
Facebook
Woo price
Post Grid Excerpt
Post Grid Sort Order
Categories
Tags
Formats
Project Categories
Project Tags
Product categories
Product tags
Product shipping classes
Settings Panels
Help Category
Media Categories
Type

Inline Separator

Inline Padding

Term Separator

Term Padding

Title tag

Button text

Cell hover tooltip content

Empty

Title

Custom

Tooltip content

Equalise heights

Titles

Content wrapper

Content aspect ratio

CSS Attributes

cell

content

image

title

background-color

border-radius

border

padding

margin

text-align

color

font-size

line-height

text-transform

Style presets

Copy from id

ID of Dyggrid to copy

Reset

Basic styles

Override theme fonts

Cell Shadow

Image Shadow

Hover Enlarge

Center All Text

Center Content (Vertical)

Center Content (Horizontal)

Image Hover Zoom

Theme preset

Preset

Transition animation

Animation

Dynamic sorting & filtering

Filter widget

Dynamic filter tax.

Taxonomy Labels

Link to taxonomy archive pages

All Page Link

Sort widget

Show the dynamic sort widget

Sort fields

Title

Date

Price

Image settings

Image location

Background

Content

Hidden

Image aspect ratio

Image file resolution

Use srcset

Use thumbnail

Thumnbnail size

Srcset requested resolutions

Override Image Filler

Attachment ID of filler image

Grid sizing

Cell layout

Horizontal

Vertical

Fixed width

Columns

Gaps

Breakpoints

Cell width

Cell margins

Cell heights

Equalise

Cell aspect ratio

Click behaviour

What should links do?

Open lightbox/slideshow

Open post

Open fixed url

Fixed url

Linked elements

Entire cell

Transition

Images

Titles

Note the above click behaviour settings will have no effect in this demo.

CSS / classes

Grid styling classes and CSS

Wrapper class

Cell class

Image class

CSS

License / Support

License key

To use this plugin and receive updates, enter your license key and press update. Click here to purchase a license.

Select and press the update button to de-register this license key

Support request message

If your email address has changed since registration, please contact account support.

Post 8

News

Post 7

News

Post 6

News

Blog (fade)

This simplified blog hides the excerpt behind the image. Hovering reveals the text with a fade animation.

Postgrid ID

Content source

Query source

Post Type

Taxonomy

Media Library

Loop

Post type

Taxonomy filter

Filter operator

Filter term slug

Taxonomy

Only terms attached to the current post

Number of posts

Max posts

Page size

Use AJAX load more

Load more button contents

Sort order

Order by

Meta key

Order

Show elements

Show Elements

Content wrapper

Woo Price Icon

Woo Sold Badge

Show Meta Icons

Elements Pattern

image
<
>
title
content
excerpt
button
author
date
Download
Twitter
LinkedIn
Facebook
Woo price
Post Grid Excerpt
Post Grid Sort Order
Categories
Tags
Formats
Project Categories
Project Tags
Product categories
Product tags
Product shipping classes
Settings Panels
Help Category
Media Categories
Type

Inline Separator

Inline Padding

Term Separator

Term Padding

Title tag

Button text

Cell hover tooltip content

Empty

Title

Custom

Tooltip content

Equalise heights

Titles

Content wrapper

Content aspect ratio

CSS Attributes

cell

content

image

title

background-color

border-radius

border

padding

margin

text-align

color

font-size

line-height

text-transform

Style presets

Copy from id

ID of Dyggrid to copy

Reset

Basic styles

Override theme fonts

Cell Shadow

Image Shadow

Hover Enlarge

Center All Text

Center Content (Vertical)

Center Content (Horizontal)

Image Hover Zoom

Theme preset

Preset

Transition animation

Animation

Dynamic sorting & filtering

Filter widget

Dynamic filter tax.

Taxonomy Labels

Link to taxonomy archive pages

All Page Link

Sort widget

Show the dynamic sort widget

Sort fields

Title

Date

Price

Image settings

Image location

Background

Content

Hidden

Image aspect ratio

Image file resolution

Use srcset

Use thumbnail

Thumnbnail size

Srcset requested resolutions

Override Image Filler

Attachment ID of filler image

Grid sizing

Cell layout

Horizontal

Vertical

Fixed width

Columns

Gaps

Breakpoints

Cell width

Cell margins

Cell heights

Equalise

Cell aspect ratio

Click behaviour

What should links do?

Open lightbox/slideshow

Open post

Open fixed url

Fixed url

Linked elements

Entire cell

Transition

Images

Titles

Note the above click behaviour settings will have no effect in this demo.

CSS / classes

Grid styling classes and CSS

Wrapper class

Cell class

Image class

CSS

License / Support

License key

To use this plugin and receive updates, enter your license key and press update. Click here to purchase a license.

Select and press the update button to de-register this license key

Support request message

If your email address has changed since registration, please contact account support.

Apr 16, 2020

News

Dyggrid

Post 8

Apr 16, 2020

News

Dyggrid

Post 7

Sep 02, 2021

News

Dyggrid

Post 6

Sep 02, 2021

News

Dyggrid

Post 5

Sep 02, 2021

News

Dyggrid

Post 4

Sep 02, 2021

News

Dyggrid

Post 3

Blog (hover)

Hover over the image to reveal additional post content and social media icons. The flip animations help engage the user and allow more post information to be included in the grid without it becoming too cluttered.

Postgrid ID

Content source

Query source

Post Type

Taxonomy

Media Library

Loop

Post type

Taxonomy filter

Filter operator

Filter term slug

Taxonomy

Only terms attached to the current post

Number of posts

Max posts

Page size

Use AJAX load more

Load more button contents

Sort order

Order by

Meta key

Order

Show elements

Show Elements

Content wrapper

Woo Price Icon

Woo Sold Badge

Show Meta Icons

Elements Pattern

image
<
>
title
content
excerpt
button
author
date
Download
Twitter
LinkedIn
Facebook
Woo price
Post Grid Excerpt
Post Grid Sort Order
Categories
Tags
Formats
Project Categories
Project Tags
Product categories
Product tags
Product shipping classes
Settings Panels
Help Category
Media Categories
Type

Inline Separator

Inline Padding

Term Separator

Term Padding

Title tag

Button text

Cell hover tooltip content

Empty

Title

Custom

Tooltip content

Equalise heights

Titles

Content wrapper

Content aspect ratio

CSS Attributes

cell

content

image

title

background-color

border-radius

border

padding

margin

text-align

color

font-size

line-height

text-transform

Style presets

Copy from id

ID of Dyggrid to copy

Reset

Basic styles

Override theme fonts

Cell Shadow

Image Shadow

Hover Enlarge

Center All Text

Center Content (Vertical)

Center Content (Horizontal)

Image Hover Zoom

Theme preset

Preset

Transition animation

Animation

Dynamic sorting & filtering

Filter widget

Dynamic filter tax.

Taxonomy Labels

Link to taxonomy archive pages

All Page Link

Sort widget

Show the dynamic sort widget

Sort fields

Title

Date

Price

Image settings

Image location

Background

Content

Hidden

Image aspect ratio

Image file resolution

Use srcset

Use thumbnail

Thumnbnail size

Srcset requested resolutions

Override Image Filler

Attachment ID of filler image

Grid sizing

Cell layout

Horizontal

Vertical

Fixed width

Columns

Gaps

Breakpoints

Cell width

Cell margins

Cell heights

Equalise

Cell aspect ratio

Click behaviour

What should links do?

Open lightbox/slideshow

Open post

Open fixed url

Fixed url

Linked elements

Entire cell

Transition

Images

Titles

Note the above click behaviour settings will have no effect in this demo.

CSS / classes

Grid styling classes and CSS

Wrapper class

Cell class

Image class

CSS

License / Support

License key

To use this plugin and receive updates, enter your license key and press update. Click here to purchase a license.

Select and press the update button to de-register this license key

Support request message

If your email address has changed since registration, please contact account support.

Heading

Shorter excerpt

Apr 16, 2020

News

Dyggrid

Post 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sub Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
lorem

Apr 16, 2020

News

Dyggrid

Post 7

Heading

shorter excerpt

Sep 02, 2021

News

Dyggrid

Post 6

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sub Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
lorem

Sep 02, 2021

News

Dyggrid

Post 5

Cards

Postgrid ID

Content source

Query source

Post Type

Taxonomy

Media Library

Loop

Post type

Taxonomy filter

Filter operator

Filter term slug

Taxonomy

Only terms attached to the current post

Number of posts

Max posts

Page size

Use AJAX load more

Load more button contents

Sort order

Order by

Meta key

Order

Show elements

Show Elements

Content wrapper

Woo Price Icon

Woo Sold Badge

Show Meta Icons

Elements Pattern

image
<
>
title
content
excerpt
button
author
date
Download
Twitter
LinkedIn
Facebook
Woo price
Post Grid Excerpt
Post Grid Sort Order
Categories
Tags
Formats
Project Categories
Project Tags
Product categories
Product tags
Product shipping classes
Settings Panels
Help Category
Media Categories
Type

Inline Separator

Inline Padding

Term Separator

Term Padding

Title tag

Button text

Cell hover tooltip content

Empty

Title

Custom

Tooltip content

Equalise heights

Titles

Content wrapper

Content aspect ratio

CSS Attributes

cell

content

image

title

background-color

border-radius

border

padding

margin

text-align

color

font-size

line-height

text-transform

Style presets

Copy from id

ID of Dyggrid to copy

Reset

Basic styles

Override theme fonts

Cell Shadow

Image Shadow

Hover Enlarge

Center All Text

Center Content (Vertical)

Center Content (Horizontal)

Image Hover Zoom

Theme preset

Preset

Transition animation

Animation

Dynamic sorting & filtering

Filter widget

Dynamic filter tax.

Taxonomy Labels

Link to taxonomy archive pages

All Page Link

Sort widget

Show the dynamic sort widget

Sort fields

Title

Date

Price

Image settings

Image location

Background

Content

Hidden

Image aspect ratio

Image file resolution

Use srcset

Use thumbnail

Thumnbnail size

Srcset requested resolutions

Override Image Filler

Attachment ID of filler image

Grid sizing

Cell layout

Horizontal

Vertical

Fixed width

Columns

Gaps

Breakpoints

Cell width

Cell margins

Cell heights

Equalise

Cell aspect ratio

Click behaviour

What should links do?

Open lightbox/slideshow

Open post

Open fixed url

Fixed url

Linked elements

Entire cell

Transition

Images

Titles

Note the above click behaviour settings will have no effect in this demo.

CSS / classes

Grid styling classes and CSS

Wrapper class

Cell class

Image class

CSS

License / Support

License key

To use this plugin and receive updates, enter your license key and press update. Click here to purchase a license.

Select and press the update button to de-register this license key

Support request message

If your email address has changed since registration, please contact account support.

Post 1

Post 2

Post 3

Post 4

Post 5

Post 6

Post 7

Post 8

Post 9

Post A

Post B

Post C

Post D

Post E

Gallery (Captions)

Use a captioned gallery to include illustrations with associated titles and captions. Add categories and tags to your media on which to filter your Dyggrid to include anything from a single captioned illustration, grouped sets or entire galleries.

Postgrid ID

Content source

Query source

Post Type

Taxonomy

Media Library

Loop

Post type

Taxonomy filter

Filter operator

Filter term slug

Taxonomy

Only terms attached to the current post

Number of posts

Max posts

Page size

Use AJAX load more

Load more button contents

Sort order

Order by

Meta key

Order

Show elements

Show Elements

Content wrapper

Woo Price Icon

Woo Sold Badge

Show Meta Icons

Elements Pattern

image
<
>
title
content
excerpt
button
author
date
Download
Twitter
LinkedIn
Facebook
Woo price
Post Grid Excerpt
Post Grid Sort Order
Categories
Tags
Formats
Project Categories
Project Tags
Product categories
Product tags
Product shipping classes
Settings Panels
Help Category
Media Categories
Type

Inline Separator

Inline Padding

Term Separator

Term Padding

Title tag

Button text

Cell hover tooltip content

Empty

Title

Custom

Tooltip content

Equalise heights

Titles

Content wrapper

Content aspect ratio

CSS Attributes

cell

content

image

title

background-color

border-radius

border

padding

margin

text-align

color

font-size

line-height

text-transform

Style presets

Copy from id

ID of Dyggrid to copy

Reset

Basic styles

Override theme fonts

Cell Shadow

Image Shadow

Hover Enlarge

Center All Text

Center Content (Vertical)

Center Content (Horizontal)

Image Hover Zoom

Theme preset

Preset

Transition animation

Animation

Dynamic sorting & filtering

Filter widget

Dynamic filter tax.

Taxonomy Labels

Link to taxonomy archive pages

All Page Link

Sort widget

Show the dynamic sort widget

Sort fields

Title

Date

Price

Image settings

Image location

Background

Content

Hidden

Image aspect ratio

Image file resolution

Use srcset

Use thumbnail

Thumnbnail size

Srcset requested resolutions

Override Image Filler

Attachment ID of filler image

Grid sizing

Cell layout

Horizontal

Vertical

Fixed width

Columns

Gaps

Breakpoints

Cell width

Cell margins

Cell heights

Equalise

Cell aspect ratio

Click behaviour

What should links do?

Open lightbox/slideshow

Open post

Open fixed url

Fixed url

Linked elements

Entire cell

Transition

Images

Titles

Note the above click behaviour settings will have no effect in this demo.

CSS / classes

Grid styling classes and CSS

Wrapper class

Cell class

Image class

CSS

License / Support

License key

To use this plugin and receive updates, enter your license key and press update. Click here to purchase a license.

Select and press the update button to de-register this license key

Support request message

If your email address has changed since registration, please contact account support.

Illustration Caption Example

Dyggrid can caption diagrams and illustrations for your pages and posts, anything from a single image to entire galleries. Use tags and categories to group your media.

Gallery (columns)

A great gallery for images of mixed aspect ratio displayed in a set number of columns

Postgrid ID

Content source

Query source

Post Type

Taxonomy

Media Library

Loop

Post type

Taxonomy filter

Filter operator

Filter term slug

Taxonomy

Only terms attached to the current post

Number of posts

Max posts

Page size

Use AJAX load more

Load more button contents

Sort order

Order by

Meta key

Order

Show elements

Show Elements

Content wrapper

Woo Price Icon

Woo Sold Badge

Show Meta Icons

Elements Pattern

image
<
>
title
content
excerpt
button
author
date
Download
Twitter
LinkedIn
Facebook
Woo price
Post Grid Excerpt
Post Grid Sort Order
Categories
Tags
Formats
Project Categories
Project Tags
Product categories
Product tags
Product shipping classes
Settings Panels
Help Category
Media Categories
Type

Inline Separator

Inline Padding

Term Separator

Term Padding

Title tag

Button text

Cell hover tooltip content

Empty

Title

Custom

Tooltip content

Equalise heights

Titles

Content wrapper

Content aspect ratio

CSS Attributes

cell

content

image

title

background-color

border-radius

border

padding

margin

text-align

color

font-size

line-height

text-transform

Style presets

Copy from id