{"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":"2022-12-28T08:34:34","modified_gmt":"2022-12-28T08:34:34","slug":"content-boxes-block","status":"publish","type":"page","link":"https:\/\/docs.redsun.design\/soulkitchen\/content-boxes-block\/","title":{"rendered":"Content Boxes Block"},"content":{"rendered":"\n

Display content boxes in a masonry layout.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

How to use<\/h4>\n\n\n\n
    \n
  1. In the top left corner, click + to add a new block<\/a>.<\/li>\n<\/ol>\n\n\n
    \n
    \"\"<\/figure><\/div>\n\n\n
    <\/div>\n\n\n\n
      \n
    1. Select the SoulKitchen Content Boxes <\/strong>block.<\/li>\n<\/ol>\n\n\n
      \n
      \"\"<\/figure><\/div>\n\n\n
        \n
      1. In the right sidebar, find all the settings for the block.<\/li>\n<\/ol>\n\n\n
        \n
        \"\"<\/figure><\/div>\n\n\n
          \n
        1. Fill in all the settings for the first Content Box<\/li>\n\n\n\n
        2. Click + Add more<\/strong> to add more Content Boxes<\/li>\n<\/ol>\n\n\n\n

          <\/p>\n\n\n\n

          The Block Settings<\/h4>\n\n\n\n
          \n
          \n

          This block comes with the following settings:<\/p>\n\n\n\n

            \n
          • Space between boxes<\/strong>
            Set the space between content boxes (none \/ 6px \/ 12px \/ 24px)<\/li>\n\n\n\n
          • Background Color<\/strong>
            Applies to the background behind the content boxes<\/li>\n\n\n\n
          • Add Content Boxes<\/strong>\n
              \n
            • Background Type<\/strong>
              Select background type (Image \/ Video \/ Color \/ None)<\/li>\n\n\n\n
            • Upload Image \/ Background Video \/ Select Color<\/strong>
              Depending on the background type, you can here upload the background image, background video or select the background color<\/li>\n\n\n\n
            • Add Overlay Color<\/strong>
              Add a dark overlay color over the background image or background video, to make text more visible<\/li>\n\n\n\n
            • Add gradient dark color below text
              <\/strong>In order to make text more readable above images, you can add a dark gradient background color below the text.<\/li>\n\n\n\n
            • Box Width<\/strong>
              Select box width (25% \/ 50 % \/ 33 % \/ 66 %)<\/li>\n\n\n\n
            • Box Height<\/strong>
              Select box height ( square \/ landscape \/ portrait \/ portrait high)<\/li>\n\n\n\n
            • Content Color<\/strong>
              Select content color (default \/ white)<\/li>\n\n\n\n
            • Content Position<\/strong>
              Select content position (left \/ center \/ right)<\/li>\n\n\n\n
            • Content Position Vertical<\/strong>
              Select content position vertical ( top \/ middle \/ bottom )<\/li>\n\n\n\n
            • Box Links To<\/strong>
              If you wish to link the entire box, enter the full URL here.<\/li>\n\n\n\n
            • Vertical Text<\/strong>
              Add vertical text on the left hand side<\/li>\n\n\n\n
            • Subtitle<\/strong>
              Enter subtitle<\/li>\n\n\n\n
            • Title<\/strong>
              Enter box title<\/li>\n\n\n\n
            • Title Size<\/strong>
              Select title size (H1 \/ H2 \/ H3 \/ H4 \/ H5 \/ H6 \/ Bold Text)<\/li>\n\n\n\n
            • Title Letter Spacing<\/strong><\/li>\n\n\n\n
            • Enter letter spacing for the title in pixels<\/li>\n\n\n\n
            • Divider<\/strong>
              Add a divider below the title<\/li>\n\n\n\n
            • Content<\/strong>
              Enter content. You can also use HTML here.<\/li>\n\n\n\n
            • Button Text<\/strong>
              If you wish to add a button, enter the button text here<\/li>\n\n\n\n
            • Button URL<\/strong>
              Enter button URL<\/li>\n\n\n\n
            • Button Style<\/strong>
              Select button style ( Regular \/ Outline)
              <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n

              RESPONSIVE SETTINGS<\/strong><\/p>\n\n\n\n

                \n
              • Hide on Small Screens<\/strong>
                Check if you want to hide this content box on small screens<\/li>\n\n\n\n
              • Box Height on Small Screens<\/strong>
                Change the box height on small screens (leave as is \/ screen height \/ square \/ landscape \/ landscape high \/ portrait \/ portrait high)<\/li>\n\n\n\n
              • Content Position on Small Screens
                <\/strong>Change the content position on small screens (leave as is \/ left \/ center)<\/li>\n\n\n\n
              • Content Position Vertical on Small Screens<\/strong>
                Change the content position vertical on small screens (leave as is \/ bottom \/ middle \/ top)<\/li>\n\n\n\n
              • Order on Small Screens<\/strong>
                You can reorder the content boxes on small screens by entering an order number here.<\/li>\n<\/ul>\n<\/div>\n\n\n\n
                \n
                \"\"<\/figure><\/div>\n\n
                \n
                \"\"<\/figure><\/div><\/div>\n<\/div>\n\n\n\n

                How to reorder \/ remove a content box<\/h4>\n\n\n\n
                  \n
                • Remove a content box by hovering over a content box and clicking Remove<\/strong>.<\/li>\n<\/ul>\n\n\n
                  \n
                  \"\"<\/figure><\/div>\n\n\n
                  <\/div>\n\n\n\n
                    \n
                  • Reorder content boxes by clicking the dots on the left side and dragging the content box up or down.<\/li>\n<\/ul>\n\n\n
                    \n
                    \"\"<\/figure><\/div>","protected":false},"excerpt":{"rendered":"Display content boxes in a masonry layout. How to use In the top left corner, click + to add a new block. Select the SoulKitchen Content Boxes block. In the right sidebar, ...","protected":false},"author":3,"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\/soulkitchen\/wp-json\/wp\/v2\/pages\/650","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.redsun.design\/soulkitchen\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.redsun.design\/soulkitchen\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.redsun.design\/soulkitchen\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.redsun.design\/soulkitchen\/wp-json\/wp\/v2\/comments?post=650"}],"version-history":[{"count":9,"href":"https:\/\/docs.redsun.design\/soulkitchen\/wp-json\/wp\/v2\/pages\/650\/revisions"}],"predecessor-version":[{"id":4777,"href":"https:\/\/docs.redsun.design\/soulkitchen\/wp-json\/wp\/v2\/pages\/650\/revisions\/4777"}],"wp:attachment":[{"href":"https:\/\/docs.redsun.design\/soulkitchen\/wp-json\/wp\/v2\/media?parent=650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}