{"id":189,"date":"2020-05-10T11:40:09","date_gmt":"2020-05-10T11:40:09","guid":{"rendered":"http:\/\/redhost:8888\/documentation\/?page_id=189"},"modified":"2023-01-28T07:29:59","modified_gmt":"2023-01-28T07:29:59","slug":"hero-block","status":"publish","type":"page","link":"https:\/\/docs.redsun.design\/soulkitchen\/hero-block\/","title":{"rendered":"Hero Image\/Video Block"},"content":{"rendered":"\n

Display a background image or background video with overlay text.<\/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 Hero Image or Video <\/strong>block.<\/li>\n<\/ol>\n\n\n
      \n
      \"\"<\/figure><\/div>\n\n\n
        \n
      1. In the block toolbar<\/a>, you can change the block alignment to Full Width<\/li>\n<\/ol>\n\n\n
        \n
        \"\"<\/figure><\/div>\n\n\n
        <\/div>\n\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. If you wish to display this block all the way on the top of the page, you can remove the page title and page padding top value. In the right sidebar, click Page \u2192  Page Settings<\/strong> and check the Hide Page Title<\/strong> and Remove Page Padding Top<\/strong> checkbox.<\/li>\n<\/ol>\n\n\n
            \n
            \"\"<\/figure><\/div>\n\n\n
            <\/div>\n\n\n\n

            The Settings<\/h4>\n\n\n\n
              \n
            • Background Type<\/strong>
              Select if you want to display an Background Image or Background Video<\/li>\n\n\n\n
            • Background Image \/ Background Video<\/strong>
              Depending on your Background Type choice, you can here upload\/select your Background Image or Background Video<\/li>\n\n\n\n
            • Add Overlay Color<\/strong>
              Add a transparent Overlay color to make text more readable. <\/li>\n\n\n\n
            • Overlay Color<\/strong>
              Move the slider on the right to set the transparency.<\/li>\n<\/ul>\n\n\n
              \n
              \"\"<\/figure><\/div>\n\n\n
                \n
              • Overlay Color Width<\/strong>
                Select overlay color widh (50% \/ 100% )<\/li>\n\n\n\n
              • Content Color<\/strong>
                Select content color (default \/ all white \/ white + color \/ all black)<\/li>\n\n\n\n
              • Content Position<\/strong>
                Select content position (left \/ center \/ right )<\/li>\n\n\n\n
              • Vertical Text<\/strong>
                Add some text to display vertically on the side<\/li>\n\n\n\n
              • Subtitle<\/strong>
                Add a subtitle<\/li>\n\n\n\n
              • Title<\/strong>
                Add a title<\/li>\n\n\n\n
              • Use Title as Page Title (H1)<\/strong>
                If you are displaying a Hero block instead of the page title, you can set the title to H1 here.<\/li>\n\n\n\n
              • Divider<\/strong>
                Check if you wish to display a divider<\/li>\n\n\n\n
              • Content<\/strong>
                Add content<\/li>\n\n\n\n
              • Button Text<\/strong>
                Add some text if you wish to display a button<\/li>\n\n\n\n
              • Button URL<\/strong>
                Enter button URL<\/li>\n\n\n\n
              • Button Style<\/strong>
                Select button style (Regular Button \/ Outline Button)<\/li>\n<\/ul>\n\n\n\n

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

                  \n
                • Image on Mobile Devices<\/strong>
                  In order to replace your image or video on small screens with an image, upload it here. <\/li>\n\n\n\n
                • Content Position on Small Screens<\/strong>
                  (leave as is \/ left \/ center)<\/li>\n\n\n\n
                • Content Position Vertical on Small Screens<\/strong>
                  (top \/ middle \/ bottom)<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"Display a background image or background video with overlay text. How to use In the top left corner, click + to add a new block. Select the SoulKitchen Hero Image or Video ...","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":26,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-189","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/docs.redsun.design\/soulkitchen\/wp-json\/wp\/v2\/pages\/189","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=189"}],"version-history":[{"count":10,"href":"https:\/\/docs.redsun.design\/soulkitchen\/wp-json\/wp\/v2\/pages\/189\/revisions"}],"predecessor-version":[{"id":4805,"href":"https:\/\/docs.redsun.design\/soulkitchen\/wp-json\/wp\/v2\/pages\/189\/revisions\/4805"}],"wp:attachment":[{"href":"https:\/\/docs.redsun.design\/soulkitchen\/wp-json\/wp\/v2\/media?parent=189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}