Create a Card

IntroductionIntroduction

In this guide, we will describe the principle of the card builder in order to easily create cards. The card builder offers plenty of blocks to insert in card in order to show off content from your posts, terms or users. All blocks are handled in the same ways and offer the same kind of settings.

Card layoutCard layout

At first you need to set which type of card you want to build. You have 2 types of card : Masonry or Metro/Justified. A type of card correspond to a type of grid. Masonry cards only work with Masonry grids and Metro/Justified cards work with any type of grid.

Card Builder- Set layout type
Card builder – Layout type

Insert BlockInsert Block

On the main left panel of the card builder you will find under blocks tab, all available blocks to insert in the card. You simply need to click on a block to insert it.

Card builder - Insert block
Card builder – Insert block

Once inserted, you will be able to drag & drop blocks and to edit them by clicking on it.

Edit BlockEdit Block

To edit a block, you simply need to click on it. A new popup will be opened when editing a block. You will be able, from this popup, to set up the following:

  • Content: Content displayed in block. Like post fields (title, excerpt, etc.) or custom fields. You can change the content of a block at any time while keeping it’s style and animation.
  • Action: Action that occurs on click. An action allows to redirect to a link, to open the lightbox or play a media (video/song).
  • Appearance: To set styles to the block for idle (without mouse on over) and hover (with mouse on over) states
  • Animation: To trigger an animation (like revealing the block with transformation) on mouse on over. Animation are only rendered on preview mode.
Card builder - Edit block
Card builder – Edit block

You can also edit block by right clicking on the block. In that way, you can easy duplicate or delete blocks without opening the settings block popup.

Edit LayerEdit Layer

To edit a layer of the card, you need to hover a layer and to click on the cog icon:

Card Builder- Edit a layer
Card builder – Edit Layer

Like a block, you can set action, appearance and animation to a layer.

Align blocksAlign blocks

There are 2 ways to align blocks in a card:

  • By editing block styles
  • By setting alignment on the layer which holds blocks
Card Builder- Set floating block
Card builder – Floating block
Card Builder- Align blocks
Card builder – Blocks alignment

Add custom fieldsAdd custom fields

The card builder can display custom fields from your posts, terms or users. You can easily display custom field by selecting custom field block and setting your custom field name:

Card Builder- Add a custom field block
Card builder – Custom field block
Card Builder- Setup a custom field block
Card builder – Custom field settings