{"id":4780,"date":"2022-04-29T00:18:49","date_gmt":"2022-04-28T21:18:49","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=video_tutorials&#038;p=4780"},"modified":"2025-03-05T18:04:21","modified_gmt":"2025-03-05T16:04:21","slug":"create-beautiful-interactive-menus","status":"publish","type":"video_tutorials","link":"https:\/\/creativethemes.com\/blocksy\/video-tutorials\/advanced-tutorials\/create-beautiful-interactive-menus\/","title":{"rendered":"Create Beautiful Interactive Menus"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Create Beautiful Interactive Menus | Advanced Tutorial\" width=\"1290\" height=\"968\" src=\"https:\/\/www.youtube.com\/embed\/n9YqRPv-ulM?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>You are the administrator of a five-star website so you need to make sure that people are impressed by what\u2019s on the menu. To do that, you need to master the art of creating beautiful interactive menus.<\/p>\n\n\n\n<p>As all good things, it starts with activating the extension in the Blocksy dashboard. Creating the new content blocks to place inside the menu should be your next step. We need to point out that this task falls to you, so put on your creative hat and use your hard-earned skills to come up with something beautiful!<\/p>\n\n\n\n<p>Once you have created your content blocks it\u2019s time to make them visible so you can choose the display conditions you want to apply.<\/p>\n\n\n\n<p>The next step takes place in the Menus section of the WordPress dashboard, where you can use the newly-created content blocks as menu items and&nbsp; sub-items. After enabling the Advanced Menu features for the top level entry you can set the structure for the menu drop-down, customise its design or even add icons or badges.<\/p>\n\n\n\n<p>Your menu sub-items have their own Advanced Menu settings although not all options found in the parent element section are available here. In our case, we need to select the Custom Content Type as Content Block and assign it one of the content blocks you\u2019ve just created. If you want the content to controlled by the (dramatic pause) content block you will need to disable the Item Label and Label Link. Repeat as needed until the menu is ready to be saved.<\/p>\n\n\n\n<p>The final step is to colour us impressed &#8211; you now have an interactive, dynamic and absolutely gorgeous menu. Congrats!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bonus!<\/h2>\n\n\n\n<p>If you want to replicate the exact 1:1 design that you see in the video, download the JSON payloads from here &#8212; <a href=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2022\/12\/json-payloads.zip\">json-payloads.zip<\/a><\/p>\n\n\n\n<p>Plugins needed &#8211;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/plugins\/stackable-ultimate-gutenberg-blocks\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/wordpress.org\/plugins\/stackable-ultimate-gutenberg-blocks\/\" rel=\"noreferrer noopener nofollow\">Stackable &#8211; Gutenberg Blocks<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/editorplus\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/wordpress.org\/plugins\/editorplus\/\" rel=\"noreferrer noopener nofollow\">Editor Plus<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>You are the administrator of a five-star website so you need to make sure that people are impressed by what\u2019s on the menu. To do that, you need to master the art of creating beautiful interactive menus. As all good things, it starts with activating the extension in the Blocksy dashboard. Creating the new content [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":4778,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"video_categories":[79,76,82],"class_list":["post-4780","video_tutorials","type-video_tutorials","status-publish","has-post-thumbnail","hentry","video_categories-advanced-tutorials","video_categories-blocksy-premium","video_categories-extensions"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/video_tutorials\/4780","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=4780"}],"version-history":[{"count":8,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/video_tutorials\/4780\/revisions"}],"predecessor-version":[{"id":12827,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/video_tutorials\/4780\/revisions\/12827"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media\/4778"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=4780"}],"wp:term":[{"taxonomy":"video_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/video_categories?post=4780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}