{"id":4906,"date":"2020-06-03T09:32:19","date_gmt":"2020-06-03T09:32:19","guid":{"rendered":"https:\/\/the7kennisbank.nl\/?p=4906"},"modified":"2020-06-09T12:13:50","modified_gmt":"2020-06-09T12:13:50","slug":"create-a-card","status":"publish","type":"post","link":"https:\/\/the7kennisbank.nl\/en\/wp-grid-builder\/create-a-card\/","title":{"rendered":"Guide create a card"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element \" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<div class=\"container flex items-center justify-between\">\n<h1 class=\"entry-title\">Create a Card<\/h1>\n<\/div>\n<div id=\"article-wrapper\" class=\"container\">\n<p>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.<\/p>\n<p>At first you need to set which type of card you want to build. You have 2 types of card : <strong>Masonry<\/strong> or <strong>Metro\/Justified<\/strong>. <strong>A type of card correspond to a type of grid<\/strong>. Masonry cards only work with Masonry grids and Metro\/Justified cards work with any type of grid.<\/p>\n<p><a href=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/card-builder-layout-1024x576-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1223\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/card-builder-layout-1024x576-1.png\" alt=\"Card Builder- Set layout type\" width=\"1024\" height=\"576\" \/><\/a><\/p>\n<p>Card builder \u2013 Layout type<\/p>\n<p><strong>On the main left panel of the card builder you will find under blocks tab<\/strong>, all available blocks to insert in the card. You simply need to click on a block to insert it.<\/p>\n<p><a href=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/card-builder-blocks-1024x576-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1225\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/card-builder-blocks-1024x576-1.png\" alt=\"Card builder - Insert block\" width=\"1024\" height=\"576\" \/><\/a><\/p>\n<p>Card builder \u2013 Insert block<\/p>\n<p>Once inserted, you will be able to <strong>drag &amp; drop blocks<\/strong> and to edit them by clicking on it.<\/p>\n<p>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:<\/p>\n<ul>\n<li><strong>Content<\/strong>: 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\u2019s style and animation.<\/li>\n<li><strong>Action<\/strong>: Action that occurs on click. An action allows to redirect to a link, to open the lightbox or play a media (video\/song).<\/li>\n<li><strong>Appearance<\/strong>: To set styles to the block for idle (without mouse on over) and hover (with mouse on over) states<\/li>\n<li><strong>Animation<\/strong>: To trigger an animation (like revealing the block with transformation) on mouse on over. Animation are only rendered on preview mode.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/card-builder-edit-block-1024x576-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1227\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/card-builder-edit-block-1024x576-1.png\" alt=\"Card builder - Edit block\" width=\"1024\" height=\"576\" \/><\/a><\/p>\n<p>Card builder \u2013 Edit block<\/p>\n<p>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.<\/p>\n<p>To edit a layer of the card, you need to hover a layer and to click on the cog icon:<\/p>\n<p><a href=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/card-builder-edit-layer-1024x576-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1228\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/card-builder-edit-layer-1024x576-1.png\" alt=\"Card Builder- Edit a layer\" width=\"1024\" height=\"576\" \/><\/a><\/p>\n<p>Card builder \u2013 Edit Layer<\/p>\n<p>Like a block, you can set action, appearance and animation to a layer.<\/p>\n<p>There are 2 ways to align blocks in a card:<\/p>\n<ul>\n<li>By editing block styles<\/li>\n<li>By setting alignment on the layer which holds blocks<\/li>\n<\/ul>\n<div class=\"wp-block-columns has-2-columns\">\n<div class=\"wp-block-column\">\n<p><a href=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/card-builder-block-float-1024x576-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1230\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/card-builder-block-float-1024x576-1.png\" alt=\"Card Builder- Set floating block\" width=\"1024\" height=\"576\" \/><\/a><\/p>\n<p>Card builder \u2013 Floating block<\/p>\n<\/div>\n<div class=\"wp-block-column\">\n<p><a href=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/card-builder-layer-alignment-1024x576-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1231\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/card-builder-layer-alignment-1024x576-1.png\" alt=\"Card Builder- Align blocks\" width=\"1024\" height=\"576\" \/><\/a><\/p>\n<p>Card builder \u2013 Blocks alignment<\/p>\n<\/div>\n<\/div>\n<p>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:<\/p>\n<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-6\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_left\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<a href=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/06\/card-builder-color-schemes-1024x576-1-2.png\" target=\"_self\"  class=\"vc_single_image-wrapper   vc_box_border_grey rollover\" data-large_image_width=\"1024\" data-large_image_height = \"576\"     ><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/06\/card-builder-color-schemes-1024x576-1-2.png\" class=\"vc_single_image-img attachment-full\" alt=\"\" title=\"card-builder-color-schemes-1024x576-1\" srcset=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/06\/card-builder-color-schemes-1024x576-1-2.png 1024w, https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/06\/card-builder-color-schemes-1024x576-1-2-300x169.png 300w, https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/06\/card-builder-color-schemes-1024x576-1-2-768x432.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\"  data-dt-location=\"https:\/\/the7kennisbank.nl\/en\/wp-grid-builder\/create-a-card\/attachment\/card-builder-color-schemes-1024x576-1-3\/\" \/><\/a>\n\t\t<\/figure>\n\t<\/div>\n\n\t<div class=\"wpb_text_column wpb_content_element \" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p style=\"text-align: center;\">Card builder \u2013 Custom field block<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><div class=\"wpb_column vc_column_container vc_col-sm-6\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_left\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<a href=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/06\/card-builder-color-schemes-1024x576-1-3.png\" target=\"_self\"  class=\"vc_single_image-wrapper   vc_box_border_grey rollover\" data-large_image_width=\"1024\" data-large_image_height = \"576\"     ><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/06\/card-builder-color-schemes-1024x576-1-3.png\" class=\"vc_single_image-img attachment-full\" alt=\"\" title=\"card-builder-color-schemes-1024x576-1\" srcset=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/06\/card-builder-color-schemes-1024x576-1-3.png 1024w, https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/06\/card-builder-color-schemes-1024x576-1-3-300x169.png 300w, https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/06\/card-builder-color-schemes-1024x576-1-3-768x432.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\"  data-dt-location=\"https:\/\/the7kennisbank.nl\/en\/wp-grid-builder\/create-a-card\/attachment\/card-builder-color-schemes-1024x576-1-4\/\" \/><\/a>\n\t\t<\/figure>\n\t<\/div>\n\n\t<div class=\"wpb_text_column wpb_content_element \" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p style=\"text-align: center;\">Card builder \u2013 Custom field settings<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Create a Card 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&hellip;<\/p>\n","protected":false},"author":2,"featured_media":5008,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[44,52,43],"tags":[],"class_list":["post-4906","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-documentation","category-guides","category-wp-grid-builder","category-44","category-52","category-43","description-off"],"acf":[],"_links":{"self":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/4906","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/comments?post=4906"}],"version-history":[{"count":8,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/4906\/revisions"}],"predecessor-version":[{"id":5219,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/4906\/revisions\/5219"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media\/5008"}],"wp:attachment":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media?parent=4906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/categories?post=4906"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/tags?post=4906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}