{"id":650,"date":"2020-07-31T16:29:04","date_gmt":"2020-07-31T16:29:04","guid":{"rendered":"http:\/\/redhost:8888\/documentation\/?page_id=650"},"modified":"2021-03-04T06:42:43","modified_gmt":"2021-03-04T06:42:43","slug":"content-boxes-block","status":"publish","type":"page","link":"https:\/\/docs.redsun.design\/amaya\/content-boxes-block\/","title":{"rendered":"Content Boxes Block"},"content":{"rendered":"\n<p style=\"font-size:22px\">Display content boxes in a masonry layout.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/docs.redsun.design\/coffeebean\/wp-content\/uploads\/sites\/2\/2020\/08\/Screenshot-2020-08-25-at-11.52.40-1024x341.png\" alt=\"\" class=\"wp-image-3130\" width=\"1024\" height=\"341\" srcset=\"https:\/\/docs.redsun.design\/amaya\/wp-content\/uploads\/2020\/08\/Screenshot-2020-08-25-at-11.52.40-1024x341.png 1024w, https:\/\/docs.redsun.design\/amaya\/wp-content\/uploads\/2020\/08\/Screenshot-2020-08-25-at-11.52.40-300x100.png 300w, https:\/\/docs.redsun.design\/amaya\/wp-content\/uploads\/2020\/08\/Screenshot-2020-08-25-at-11.52.40-768x256.png 768w, https:\/\/docs.redsun.design\/amaya\/wp-content\/uploads\/2020\/08\/Screenshot-2020-08-25-at-11.52.40-1536x511.png 1536w, https:\/\/docs.redsun.design\/amaya\/wp-content\/uploads\/2020\/08\/Screenshot-2020-08-25-at-11.52.40-2048x682.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">How to use<\/h4>\n\n\n\n<ol class=\"wp-block-list\"><li>Click <span class=\"blockplus\">+<\/span> \u2295 to&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/support\/article\/adding-a-new-block\/\" target=\"_blank\">add a new block<\/a><\/li><li>Select the&nbsp;<strong>AMAYA Content Boxes<\/strong>&nbsp;block<\/li><\/ol>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/docs.redsun.design\/amaya\/wp-content\/uploads\/2020\/12\/Screenshot-2020-12-28-at-09.50.33.png\" alt=\"\" class=\"wp-image-3967\" width=\"109\" height=\"91\"\/><\/figure><\/div>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li>In the right sidebar, find Block Settings<\/li><\/ol>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/docs.redsun.design\/coffeebean\/wp-content\/uploads\/sites\/2\/2020\/09\/Screenshot-2020-09-12-at-11.02.08.png\" alt=\"\" class=\"wp-image-3289\" width=\"276\" height=\"478\" srcset=\"https:\/\/docs.redsun.design\/amaya\/wp-content\/uploads\/2020\/09\/Screenshot-2020-09-12-at-11.02.08.png 552w, https:\/\/docs.redsun.design\/amaya\/wp-content\/uploads\/2020\/09\/Screenshot-2020-09-12-at-11.02.08-173x300.png 173w\" sizes=\"auto, (max-width: 276px) 100vw, 276px\" \/><\/figure><\/div>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\"><li>Fill in all the settings for the first Content Box<\/li><li>Click <strong>+ Add more<\/strong> to add more Content Boxes<\/li><\/ol>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/docs.redsun.design\/coffeebean\/wp-content\/uploads\/sites\/2\/2020\/09\/Screenshot-2020-09-12-at-11.05.35.png\" alt=\"\" class=\"wp-image-3291\" width=\"99\" height=\"39\"\/><\/figure><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">The Block Settings<\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>This Block comes with the following settings:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Space between boxes<\/strong><br>Set space between content boxes (none \/ 6px \/ 12px \/ 24px)<\/li><li><strong>Add Content Boxes<\/strong><ul><li><strong>Background Type<\/strong><br>Select Background Type (Image \/ Video \/ Color \/ None)<\/li><li><strong>Upload Image \/ Upload Video \/ Select Color<\/strong><br>Depending on the Background Type, you can here upload the Background Image, Background Video or select the Background color.<\/li><li><strong>Add Overlay Color<\/strong><br>Add a dark Overlay Color over the Background Image or Background Video, to make text more visible.<\/li><li><strong>Box Width<\/strong><br>Select Box Width (25% \/ 50 % \/ 33 % \/ 66 %)<\/li><li><strong>Box Height<\/strong><br>Select Box Height ( square \/ landscape \/ portrait \/ portrait high)<\/li><li><strong>Content Color<\/strong><br>Select Content Color (dark \/ white \/ white + theme color)<\/li><li><strong>Content Position<\/strong><br>Select Content Position (left \/ center \/ right)<\/li><li><strong>Content Position Vertical<\/strong><br>Select Content Position Vertical ( top \/ middle \/ bottom )<\/li><li><strong>Box Links To<\/strong><br>If you wish to link the entire box, enter the full URL here.<\/li><li><strong>Vertical Text<\/strong><br>Add Vertical Text on the left hand side<\/li><li><strong>Subtitle<\/strong> <br>The subtitle will display in the theme color. You can change the typography of the Subtitle in&nbsp;<strong>Appearance \u2192 Typography \u2192 Other Elements \u2192 Subtitle<\/strong>.<\/li><li><strong>Title<\/strong><br>Enter Box Title<\/li><li><strong>Title Size<\/strong><br>Select Title Size (H1 \/ H2 \/ H3 \/ H4 \/ H5 \/ H6)<\/li><li><strong>Divider<\/strong><br>Add a Divider below the Title<\/li><li><strong>Content<\/strong><br>Enter Content. You can also use HTML here.<\/li><li><strong>Button Text<\/strong><br>If you wish to add a button, enter the Button Text here<\/li><li><strong>Button URL<\/strong><br>Enter Button URL<\/li><li><strong>Button Style<\/strong><br>Select Button style ( Regular \/ Outline)<\/li><\/ul><\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<div class=\"wp-block-image\"><figure class=\"alignright size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/docs.redsun.design\/coffeebean\/wp-content\/uploads\/sites\/2\/2020\/09\/Screenshot-2020-09-12-at-10.38.57.png\" alt=\"\" class=\"wp-image-3270\" width=\"277\" height=\"1468\" srcset=\"https:\/\/docs.redsun.design\/amaya\/wp-content\/uploads\/2020\/09\/Screenshot-2020-09-12-at-10.38.57.png 554w, https:\/\/docs.redsun.design\/amaya\/wp-content\/uploads\/2020\/09\/Screenshot-2020-09-12-at-10.38.57-193x1024.png 193w, https:\/\/docs.redsun.design\/amaya\/wp-content\/uploads\/2020\/09\/Screenshot-2020-09-12-at-10.38.57-290x1536.png 290w\" sizes=\"auto, (max-width: 277px) 100vw, 277px\" \/><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">How to reorder \/ remove a content box<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Remove a content box by hovering over a content box and clicking&nbsp;<strong>Remove<\/strong>.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/docs.redsun.design\/coffeebean\/wp-content\/uploads\/sites\/2\/2020\/09\/Screenshot-2020-09-12-at-10.47.06.png\" alt=\"\" class=\"wp-image-3279\" width=\"269\" height=\"159\" srcset=\"https:\/\/docs.redsun.design\/amaya\/wp-content\/uploads\/2020\/09\/Screenshot-2020-09-12-at-10.47.06.png 538w, https:\/\/docs.redsun.design\/amaya\/wp-content\/uploads\/2020\/09\/Screenshot-2020-09-12-at-10.47.06-300x177.png 300w\" sizes=\"auto, (max-width: 269px) 100vw, 269px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Reorder content box by clicking the dots on the left side and dragging the content box up or down.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/docs.redsun.design\/coffeebean\/wp-content\/uploads\/sites\/2\/2020\/09\/Screenshot-2020-09-12-at-10.50.08-1.png\" alt=\"\" class=\"wp-image-3283\" width=\"271\" height=\"158\" srcset=\"https:\/\/docs.redsun.design\/amaya\/wp-content\/uploads\/2020\/09\/Screenshot-2020-09-12-at-10.50.08-1.png 542w, https:\/\/docs.redsun.design\/amaya\/wp-content\/uploads\/2020\/09\/Screenshot-2020-09-12-at-10.50.08-1-300x174.png 300w\" sizes=\"auto, (max-width: 271px) 100vw, 271px\" \/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">How to add a icon above the title<\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Simply add the <a href=\"https:\/\/docs.redsun.design\/amaya\/icons\/\">icon code<\/a> right above the title text into the title field<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/docs.redsun.design\/coffeebean\/wp-content\/uploads\/sites\/2\/2020\/09\/Screenshot-2020-09-12-at-11.46.46.png\" alt=\"\" class=\"wp-image-3314\" width=\"244\" height=\"272\" srcset=\"https:\/\/docs.redsun.design\/amaya\/wp-content\/uploads\/2020\/09\/Screenshot-2020-09-12-at-11.46.46.png 488w, https:\/\/docs.redsun.design\/amaya\/wp-content\/uploads\/2020\/09\/Screenshot-2020-09-12-at-11.46.46-269x300.png 269w\" sizes=\"auto, (max-width: 244px) 100vw, 244px\" \/><\/figure><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"786\" height=\"786\" src=\"https:\/\/docs.redsun.design\/coffeebean\/wp-content\/uploads\/sites\/2\/2020\/09\/Screenshot-2020-09-12-at-11.47.37.png\" alt=\"\" class=\"wp-image-3313\" srcset=\"https:\/\/docs.redsun.design\/amaya\/wp-content\/uploads\/2020\/09\/Screenshot-2020-09-12-at-11.47.37.png 786w, https:\/\/docs.redsun.design\/amaya\/wp-content\/uploads\/2020\/09\/Screenshot-2020-09-12-at-11.47.37-300x300.png 300w, https:\/\/docs.redsun.design\/amaya\/wp-content\/uploads\/2020\/09\/Screenshot-2020-09-12-at-11.47.37-150x150.png 150w, https:\/\/docs.redsun.design\/amaya\/wp-content\/uploads\/2020\/09\/Screenshot-2020-09-12-at-11.47.37-768x768.png 768w\" sizes=\"auto, (max-width: 786px) 100vw, 786px\" \/><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"Display content boxes in a masonry layout. How to use Click + \u2295 to&nbsp;add a new blockSelect the&nbsp;AMAYA Content Boxes&nbsp;block In the right sidebar, find Block Settings Fill in all ...","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":8,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-650","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/docs.redsun.design\/amaya\/wp-json\/wp\/v2\/pages\/650","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.redsun.design\/amaya\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.redsun.design\/amaya\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.redsun.design\/amaya\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.redsun.design\/amaya\/wp-json\/wp\/v2\/comments?post=650"}],"version-history":[{"count":3,"href":"https:\/\/docs.redsun.design\/amaya\/wp-json\/wp\/v2\/pages\/650\/revisions"}],"predecessor-version":[{"id":4032,"href":"https:\/\/docs.redsun.design\/amaya\/wp-json\/wp\/v2\/pages\/650\/revisions\/4032"}],"wp:attachment":[{"href":"https:\/\/docs.redsun.design\/amaya\/wp-json\/wp\/v2\/media?parent=650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}