{"id":14869,"date":"2026-05-04T13:59:53","date_gmt":"2026-05-04T10:59:53","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=video_tutorials&#038;p=14869"},"modified":"2026-05-04T13:59:53","modified_gmt":"2026-05-04T10:59:53","slug":"mobile-header-builder","status":"publish","type":"video_tutorials","link":"https:\/\/creativethemes.com\/blocksy\/video-tutorials\/customization\/mobile-header-builder\/","title":{"rendered":"Mobile Header Builder"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Mobile Header Builder | Basic Tutorial | Blocksy\" width=\"1290\" height=\"726\" src=\"https:\/\/www.youtube.com\/embed\/OF3yqbXiG-w?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>In this tutorial, we walk you through Blocksy&#8217;s mobile header system &#8211; a powerful set of tools for crafting the perfect mobile experience for your website. \ud83d\udcf1<\/p>\n\n\n\n<p>Using the drag-and-drop interface, you&#8217;ll configure mobile header elements and the Off Canvas Area &#8211; where your mobile menu elements live. The Trigger element is the key: it&#8217;s what opens the Off Canvas Area for your visitors, and offers design options like icon choice, size, button styling, and label visibility. All other header elements work the same as their desktop counterparts. The Off Canvas Area itself arranges elements vertically and lets you choose between a side panel or full-screen modal appearance. The Design tab gives you complete control over background colour, backdrop, shadow, and the close button styling. For Blocksy Pro users, the Off Canvas Area is also available on desktop &#8211; simply add the Trigger element to a desktop header row and configure it independently.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we walk you through Blocksy&#8217;s mobile header system &#8211; a powerful set of tools for crafting the perfect mobile experience for your website. \ud83d\udcf1 Using the drag-and-drop interface, you&#8217;ll configure mobile header elements and the Off Canvas Area &#8211; where your mobile menu elements live. The Trigger element is the key: it&#8217;s [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":14870,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"video_categories":[77],"class_list":["post-14869","video_tutorials","type-video_tutorials","status-publish","has-post-thumbnail","hentry","video_categories-customization"],"blocksy_meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/video_tutorials\/14869","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/video_tutorials"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/video_tutorials"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=14869"}],"version-history":[{"count":1,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/video_tutorials\/14869\/revisions"}],"predecessor-version":[{"id":14871,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/video_tutorials\/14869\/revisions\/14871"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media\/14870"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=14869"}],"wp:term":[{"taxonomy":"video_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/video_categories?post=14869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}