HIDE

Create a Card

Easily design your cards just by dragging & dropping the plentiful widgets, choosing your favorite styles, set dynamic content with third-party integrations.

You can choose to import our pre-made demos or create new cards yourself in the following steps.

Launch the Editor

  • Go to your WordPress Dashboard > Piotnet Grid > Cards > Add New > Add Card Title > Edit With Piotnet Grid
  • Piotnet Grid Editor will be launched. Drag and Drop widgets from Editor Panel to design your Card.
  • You should create a section first as the container, duplicate the column inside the section if you need to have more than one, and then put widgets inside the columns.

Widgets for Card

  • Section with Columns
  • Text
  • Button
  • Term List
  • Image
  • Gallery
  • Icon
  • Icon List
  • Product Badge
  • Add to Wishlist
  • Quick View (WooCommerce)
  • Product Rating (WooCommerce)
  • Add To Card (WooCommerce)
  • Shortcode

Dynamic Content

We integrated Piotnet Grid with ACF, Metabox.io, Pods, Toolset, JetEngine ( and there will many more).
You can choose to set a fixed content or let it be dynamic.

1. Dynamic Text

Dynamic Content or Dynamic Link URL

 

2. Image

Dynamic Image

3. Style

Even Background, Color, etc. could be dynamic.

Advanced Style

Many customize style options for Widgets in various statuses: Normal, Hover Widget, Hover Card

Set Aspect Ratio for Card

Drag and drop an Image widget > Settings tab > Image Aspect Ratio > Aspect Ratio = Height / Width * 100.

E.g.  Width = 100, Height = 100 → Ratio = 100;

         Width = 100, Height = 50 → Ratio = 50.

Overlay Content on the top of the Featured image

  • Create a Section, temporarily call this section as father Section.
    By default, there will be an inner column in the father Section. I call this column as father Column. The column fully covers the section.
  • Put the Image widget inside the father Column, and set the Image Dynamic Data to Feature Image.
  • Drag and drop a section widget on the Feature Image, I call this section as a child Section.
    Also, there will be an inner column inside the child Section – I call this column as child Column.

    The relation now could be described as father Section [ father Column [ child Section [ child Column] ] ]

    Put contents (e.g text widget) inside the child Column
    Edit child Section > Advanced Tab > Position > Absolute;
    Set Top, Right, Bottom, and Left position for this Section:
    Top = 0, Right = 0, Bottom = 0, Left = 0 for full overlay.
    Left = 0, Bottom = 0 for bottom overlay.
    You can set background color or background gradient color with opacity for this Section.

Zoom in the Featured Image when hovering

  • Set the Image Aspect Ratio for the Feature Image
  • Edit Featured Image > Advanced Tab > Advanced Style > Hover Widget or Hover Card Tab > Custom CSS > Enter this CSS: transform: scale(1.1)
  • You can change Animation on Animation Section

Equal Height Cards

  • Set the Image Aspect Ratio for the Feature Image
  • Set the fixed Height + Overflow: Hidden for the Text widgets and other widgets on the Advanced Style Tab

WooCommerce Product Card with Variation Swatches Widget

  • Put Variation Swatches Widget to your Card Template
  • Edit the Feature Image > Enable Get image from WooCommerce variation swatches selected
  • After that, the Price and Image will be changed by the variation selected
  • Edit WooCommerce Product Attribute > Select PiotnetGrid Attribute Type: Select/Color/Button/Image
  • Configure terms and set the PiotnetGrid Term Color and Image

Show a widget when hovering

  • Edit the widget > Advanced Tab > Advanced Style > Normal Tab > Height = 0px ; Overflow = Hidden
  • Switch to Hover Card Tab > Set the Height for Widget when hovering

Put this card into a grid and hover to see this effect.

Custom Card

In Piotnet Grid version 2.0, you can customize your Card by HTML or PHP

Click on a Grid > Settings Tab > Custom Card