{"id":96,"date":"2024-06-03T15:41:16","date_gmt":"2024-06-03T13:41:16","guid":{"rendered":"https:\/\/qala.shop\/documentation\/?page_id=96"},"modified":"2024-06-11T15:29:40","modified_gmt":"2024-06-11T13:29:40","slug":"hero","status":"publish","type":"page","link":"https:\/\/qala.shop\/documentation\/qala-blocks\/hero\/","title":{"rendered":"Hero"},"content":{"rendered":"\n<h1 class=\"wp-block-heading alignwide\" id=\"h-hero\">Hero<\/h1>\n\n\n\n<figure class=\"wp-block-video alignwide\"><video controls src=\"https:\/\/www.loom.com\/share\/185e7486f719488ab43634f6e157d54b?sid=7536ce99-e1f0-46f6-8841-b33901c0d714\" playsinline><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-how-to-use-the-qala-block-hero\" style=\"margin-top:var(--wp--preset--spacing--80)\">How to use the Qala block &#8220;Hero&#8221;<\/h3>\n\n\n\n<p>To add the Qala block, press the plus icon. Then Browse all.<\/p>\n\n\n\n<p>You can either scroll down to the section with Qala blocks, or you can just write the name of the block in the search area. Choose \u201cHero\u201d.<\/p>\n\n\n\n<p>First, you choose your hero layout. There are six different options for you to choose from, full layout, 50\/50 (with three different options) or 33\/66 (right or left). &nbsp;<\/p>\n\n\n\n<p>First I will show you the \u2018full layout\u2019 option.<\/p>\n\n\n\n<p>Above the block, you will see seven icons. The icon called Align will let you change the width of the block. You can choose between none (narrow), wide or full screen. Whatever works best for your design.<\/p>\n\n\n\n<p>There are also options for text alignment and content alignment, to make sure that the content doesn\u2019t block an important part of the image.&nbsp;<\/p>\n\n\n\n<p>To the right, you will see your settings. If they are hidden, you can press the icon next to Publish. Make sure you have the Block tab open, not Page.<\/p>\n\n\n\n<p>On the hero, you will see a default structure, with a tagline, a title, a description area and a button. You can easily fill out your information here. Each block has its own settings to the right, where you can choose colors, sizes and margins. To add margin to the block, go to Dimensions, choose margin, and drag to desired amount.<\/p>\n\n\n\n<p>If you want to add or delete a block, press the three dots on the upper right corner. You can add before, add after or delete.<\/p>\n\n\n\n<p>To add an image for the hero background, press Replace. You can either select an image from the media library or upload a new image.&nbsp;<\/p>\n\n\n\n<p>In the general settings, you can decide if you want the hero to be a \u201cgeneral hero\u201d or a \u201chero block post\u201d. Choose your post below.<\/p>\n\n\n\n<p>If you feel that the image is too big, you can decrease the minimum height to desired height. You can choose between viewport height, percentage or pixels.&nbsp;<\/p>\n\n\n\n<p>Here is also an option to upload a different image for mobile.<\/p>\n\n\n\n<p>In the color settings, you can adjust the background color and opacity, and the text color. Work with these options to make sure that the text is legible.<\/p>\n\n\n\n<p>If you chose the 50\/50 layout, you can make some changes in the layout settings. For example you can make the columns equal height, or change the width of the content area. Up here, you can decide if you want the image to be on the left or on the right.<\/p>\n\n\n\n<div style=\"height:62px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group alignfull has-primary-100-background-color has-background is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group alignwide is-layout-constrained wp-block-group-is-layout-constrained\">\n<div style=\"height:46px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading alignwide\" id=\"h-summary\">Summary<\/h2>\n\n\n\n<div class=\"wp-block-columns alignwide 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<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1715\" height=\"831\" src=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-01-screenshots.png\" alt=\"hero-01-screenshots\" class=\"wp-image-152\" srcset=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-01-screenshots.png 1715w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-01-screenshots-300x145.png 300w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-01-screenshots-1024x496.png 1024w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-01-screenshots-768x372.png 768w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-01-screenshots-1536x744.png 1536w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-01-screenshots-266x129.png 266w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-01-screenshots-600x291.png 600w\" sizes=\"auto, (max-width: 1715px) 100vw, 1715px\" \/><\/figure>\n\n\n\n<p>Choose layout<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1715\" height=\"831\" src=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-02-screenshots.png\" alt=\"hero-02-screenshots\" class=\"wp-image-151\" srcset=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-02-screenshots.png 1715w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-02-screenshots-300x145.png 300w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-02-screenshots-1024x496.png 1024w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-02-screenshots-768x372.png 768w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-02-screenshots-1536x744.png 1536w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-02-screenshots-266x129.png 266w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-02-screenshots-600x291.png 600w\" sizes=\"auto, (max-width: 1715px) 100vw, 1715px\" \/><\/figure>\n\n\n\n<p>Fill out content<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1715\" height=\"831\" src=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-03-screenshots.png\" alt=\"hero-03-screenshots\" class=\"wp-image-150\" srcset=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-03-screenshots.png 1715w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-03-screenshots-300x145.png 300w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-03-screenshots-1024x496.png 1024w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-03-screenshots-768x372.png 768w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-03-screenshots-1536x744.png 1536w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-03-screenshots-266x129.png 266w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/hero-03-screenshots-600x291.png 600w\" sizes=\"auto, (max-width: 1715px) 100vw, 1715px\" \/><\/figure>\n\n\n\n<p>Add background image<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:46px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-2a07215d wp-block-columns-is-layout-flex\" style=\"margin-bottom:0;padding-top:0\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"height:46px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-related-qala-blocks\">Related Qala blocks<\/h2>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide 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<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1528\" height=\"944\" src=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/latest-posts.png\" alt=\"latest-posts\" class=\"wp-image-118\" srcset=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/latest-posts.png 1528w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/latest-posts-300x185.png 300w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/latest-posts-1024x633.png 1024w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/latest-posts-768x474.png 768w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/latest-posts-266x164.png 266w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/latest-posts-600x371.png 600w\" sizes=\"auto, (max-width: 1528px) 100vw, 1528px\" \/><\/figure>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Latest posts<\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-primary-underline wp-block-button is-style-primary-underline\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/qala.shop\/documentation\/qala-blocks\/latest-posts\/\">Read more<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1528\" height=\"889\" src=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/multi-image-accordion.png\" alt=\"multi-image-accordion\" class=\"wp-image-120\" srcset=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/multi-image-accordion.png 1528w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/multi-image-accordion-300x175.png 300w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/multi-image-accordion-1024x596.png 1024w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/multi-image-accordion-768x447.png 768w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/multi-image-accordion-266x155.png 266w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/multi-image-accordion-600x349.png 600w\" sizes=\"auto, (max-width: 1528px) 100vw, 1528px\" \/><\/figure>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Multi image Accordion<\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-primary-underline wp-block-button is-style-primary-underline\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/qala.shop\/documentation\/qala-blocks\/multi-image-accordion\/\">Read more<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1528\" height=\"778\" src=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/shop-categories.png\" alt=\"shop-categories\" class=\"wp-image-122\" srcset=\"https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/shop-categories.png 1528w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/shop-categories-300x153.png 300w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/shop-categories-1024x521.png 1024w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/shop-categories-768x391.png 768w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/shop-categories-266x135.png 266w, https:\/\/qala.shop\/documentation\/wp-content\/uploads\/sites\/6\/2024\/06\/shop-categories-600x305.png 600w\" sizes=\"auto, (max-width: 1528px) 100vw, 1528px\" \/><\/figure>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Shop categories<\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-primary-underline wp-block-button is-style-primary-underline\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/qala.shop\/documentation\/qala-blocks\/shop-categories\/\">Read more<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:75px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Hero. How to use the Qala block &#8220;Hero&#8221;. To add the Qala block press the plus icon<\/p>\n","protected":false},"author":197,"featured_media":0,"parent":50,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_trash_the_other_posts":false,"editor_notices":[],"footnotes":""},"class_list":["post-96","page","type-page","status-publish","hentry"],"acf":[],"parents":[{"permalink":"https:\/\/qala.shop\/documentation","title":"Home"},{"permalink":"https:\/\/qala.shop\/documentation\/qala-blocks\/","title":"Qala blocks"},{"permalink":false,"title":"Hero"}],"_links":{"self":[{"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/pages\/96","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/users\/197"}],"replies":[{"embeddable":true,"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/comments?post=96"}],"version-history":[{"count":3,"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/pages\/96\/revisions"}],"predecessor-version":[{"id":153,"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/pages\/96\/revisions\/153"}],"up":[{"embeddable":true,"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/pages\/50"}],"wp:attachment":[{"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/media?parent=96"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}