{"id":1496,"date":"2020-12-07T12:43:46","date_gmt":"2020-12-07T10:43:46","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=1496"},"modified":"2025-06-20T11:10:22","modified_gmt":"2025-06-20T08:10:22","slug":"content-blocks","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/modules\/content-blocks\/","title":{"rendered":"Content Blocks &#8211; Hooks"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"2064\" style=\"aspect-ratio: 3456 \/ 2064;\" width=\"3456\" autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2020\/12\/Screen-Recording-2025-06-20-at-10.54.57.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Creating a Content Block Hook.<\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>Blocksy\u2019s\u00a0<strong>Content Blocks Hooks<\/strong>\u00a0feature allows you to insert dynamic or static content anywhere across your website &#8211; no coding required. Whether you\u2019re using the Gutenberg editor or your favourite page builder, Content Blocks make it easy to extend your site with custom sections, banners, callouts, or any other layout you can think of.<\/p>\n\n\n\n<p>This functionality is part of the broader\u00a0<strong>Content Blocks system<\/strong>, which includes three types:\u00a0<strong>Hooks<\/strong>,\u00a0<strong>Pop-ups<\/strong>, and\u00a0<strong>Templates<\/strong>. In this article, we\u2019re focusing on\u00a0<strong>Hooks<\/strong>\u00a0&#8211; perfect for embedding content throughout your site, exactly where you want it.<\/p>\n\n\n\n<p>Hooks are also fully integrated with\u00a0the <strong><a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/modules\/conditions-module\/\" target=\"_blank\" rel=\"noreferrer noopener\">Conditional Module<\/a><\/strong>, letting you control when and where your custom content appears. You can target specific pages, user roles, post types, and much more.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Getting Started<\/h2>\n\n\n\n<p>Creating a Hook-based Content Block is simple:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Open your\u00a0<strong>WordPress dashboard<\/strong>.<\/li>\n\n\n\n<li>Go to\u00a0<strong>Blocksy \u2192 Content Blocks<\/strong>.<\/li>\n\n\n\n<li>Click\u00a0<strong>Add New<\/strong>.<\/li>\n\n\n\n<li>Select the\u00a0<strong>Hook<\/strong>\u00a0template type.<\/li>\n<\/ol>\n\n\n\n<p>You\u2019ll then be presented with a blank Gutenberg canvas, ready to add your custom content. Whether it\u2019s a banner, a form, or dynamic data &#8211; you\u2019re free to design it however you like.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Granular Controls<\/h2>\n\n\n\n<p>Once your Hook Content Block is created, you\u2019ll get access to several powerful controls to fine-tune where and how it displays.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"560\" height=\"1410\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2020\/12\/Screenshot-2025-06-20-at-10.58.46.png\" alt=\"\" class=\"wp-image-13461\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h3 class=\"wp-block-heading\">Display Conditions<\/h3>\n\n\n\n<p>Just like other Content Blocks, Hooks work with\u00a0<strong>Blocksy\u2019s <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/modules\/conditions-module\/\" target=\"_blank\" rel=\"noreferrer noopener\">Conditional Module<\/a><\/strong>, allowing you to control exactly where your block is shown \u2014 based on page types, taxonomies, user roles, and more.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Location &amp; Priority<\/h3>\n\n\n\n<p>Choose the&nbsp;<strong>hook location<\/strong>&nbsp;where your content should appear. Blocksy provides a full list of predefined hook positions tied to various parts of your theme \u2014 headers, footers, posts, sidebars, etc.<\/p>\n\n\n\n<p>The&nbsp;<strong>priority<\/strong>&nbsp;setting determines the order of execution when multiple hooks are applied in the same location. Lower numbers load earlier.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Container Structure<\/h3>\n\n\n\n<p>This control helps you define how the content is wrapped:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Default<\/strong>\u00a0\u2013 Inherits structure from your theme settings.<\/li>\n\n\n\n<li><strong>None<\/strong>\u00a0\u2013 Removes any spacing or padding around the block for full control.<\/li>\n\n\n\n<li><strong>Custom<\/strong>\u00a0\u2013 Gives you advanced layout options, including:\n<ul class=\"wp-block-list\">\n<li><strong>Layout Width<\/strong>\u00a0\u2013 Choose between\u00a0<em>Boxed<\/em>\u00a0or\u00a0<em>Wide<\/em>.<\/li>\n\n\n\n<li><strong>Content Layout<\/strong>\u00a0\u2013 Select\u00a0<em>Standard<\/em>\u00a0or\u00a0<em>Narrow<\/em>\u00a0width.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Dynamic Content Preview<\/h3>\n\n\n\n<p>If your Hook Content Block includes dynamic elements (like post titles, custom fields, or user info), this setting lets you load a specific post or page into the editor so you can see exactly how things will look.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Visibility<\/h3>\n\n\n\n<p>Decide on which devices the hook should appear &#8211;\u00a0<em>desktop<\/em>,\u00a0<em>tablet<\/em>, or\u00a0<em>mobile<\/em>. This gives you full control over the responsiveness of your custom content.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Inserting a Content Block as a Block<\/h2>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69da1858e56bf&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69da1858e56bf\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2020\/12\/Screenshot-2023-05-08-at-19.27.27.png\" alt=\"\" class=\"wp-image-6987\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Inserting a Content Block as a&#8230; block!<\/figcaption><\/figure>\n\n\n\n<p>With\u00a0<strong>Blocksy 2<\/strong>, Content Blocks can now be inserted directly as Gutenberg blocks. Just look for the\u00a0<strong>\u201cContent Block\u201d<\/strong> block in the block inserter and place it wherever you need inside your pages or posts.<\/p>\n\n\n\n<p>This is especially useful when you want to reuse a block across multiple pages or layouts.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Language Support<\/h2>\n\n\n\n<p>Content Blocks work smoothly with multilingual plugins like&nbsp;<strong>WPML<\/strong>,&nbsp;<strong>Polylang<\/strong>, or&nbsp;<strong>TranslatePress<\/strong>.<\/p>\n\n\n\n<p>Once a translation plugin is active, you\u2019ll be able to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Translate the content inside each Content Block.<\/li>\n\n\n\n<li>Apply different display conditions per language.<\/li>\n\n\n\n<li>Control visibility based on the active language.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Displaying Hook Locations<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2020\/12\/Screen-Recording-2021-10-20-at-09.21.26.mov\"><\/video><figcaption class=\"wp-element-caption\">Hook system in action<\/figcaption><\/figure>\n\n\n\n<p>To view available hook locations on your website:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Visit the\u00a0<strong>front end<\/strong>\u00a0of your site while logged in as an admin.<\/li>\n\n\n\n<li>Find the\u00a0<strong>WordPress toolbar<\/strong>\u00a0at the top.<\/li>\n\n\n\n<li>Click on\u00a0<strong>Hook Locations<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p>This will reveal visual indicators showing where each hook point is located &#8211; making it easy to choose the right spot for your Content Block.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Demonstration<\/h2>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69da1858e5fd4&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69da1858e5fd4\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2064\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2020\/12\/Screenshot-2025-06-20-at-10.55.53.png\" alt=\"\" class=\"wp-image-13459\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Content Block editor.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Video Resources<\/h2>\n\n\n\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=\"Exploring Blocksy&#039;s Content Blocks | Blocksy Premium\" width=\"1290\" height=\"968\" src=\"https:\/\/www.youtube.com\/embed\/IQXiTzmTvQo?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<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Blocksy\u2019s\u00a0Content Blocks Hooks\u00a0feature allows you to insert dynamic or static content anywhere across your website &#8211; no coding required. Whether you\u2019re using the Gutenberg editor or your favourite page builder, Content Blocks make it easy to extend your site with custom sections, banners, callouts, or any other layout you can think of. This functionality is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[120],"class_list":["post-1496","documentation","type-documentation","status-publish","hentry","doc_categories-modules"],"blocksy_meta":{"post_title_panel":"","has_hero_section":"default","0a9c4e2c3ec0a63c3fb29de796f466d9":"","hero_section":"type-1","hero_elements":[{"id":"custom_title","enabled":true,"heading_tag":"h1","title":"Home"},{"id":"custom_description","enabled":true,"description_visibility":{"desktop":true,"tablet":true,"mobile":false}},{"id":"custom_meta","enabled":true,"meta_elements":[{"id":"author","enabled":true,"label":"By","has_author_avatar":"yes","avatar_size":25},{"id":"post_date","enabled":true,"label":"On","date_format_source":"default","date_format":"M j, Y"},{"id":"categories","enabled":true,"label":"In","style":"simple"},{"id":"comments","enabled":true}],"page_meta_elements":{"joined":true,"articles_count":true,"comments":true}},{"id":"breadcrumbs","enabled":false}],"4e8b9111396984e193d5b37b5e015185":"","hero_alignment1":"left","hero_alignment2":"center","hero_vertical_alignment":"center","2eccd6363f0c06f56dd72986c66cba09":"","hero_structure":"narrow","bbd7ebe88f1c7a79dd2e1ad8781dd5f0":"","page_title_bg_type":"featured_image","custom_hero_background":{"attachment_id":null},"parallax":{"desktop":false,"tablet":false,"mobile":false},"1ee81a838006fe5c5ccb4aeccf166c11":"","hero_height":"250px","pageTitleFont":{"family":"Default","variation":"Default","size":{"desktop":"32px","tablet":"30px","mobile":"25px"},"line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"pageTitleFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageMetaFont":{"family":"Default","variation":"n6","size":"12px","line-height":"1.3","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"uppercase","text-decoration":"CT_CSS_SKIP_RULE"},"pageMetaFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageExcerptFont":{"family":"Default","variation":"Default","size":"CT_CSS_SKIP_RULE","line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"pageExcerptColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"breadcrumbsFont":{"family":"Default","variation":"n6","size":"12px","line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"uppercase","text-decoration":"CT_CSS_SKIP_RULE"},"breadcrumbsFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"initial":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageTitleOverlay":{"default":{"color":"CT_CSS_SKIP_RULE"}},"pageTitleBackground":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"no-repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"backgroundColor":{"default":{"color":"#EDEFF2"}}},"193782390fc66c6d51c751180bc27d66":"","page_structure_type":"default","content_style":"inherit","vertical_spacing_source":"inherit","content_area_spacing":"both","background":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"no-repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"backgroundColor":{"default":{"color":"CT_CSS_SKIP_RULE"}}},"content_background":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"no-repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"backgroundColor":{"default":{"color":"#ffffff"}}},"content_boxed_shadow":{"inherit":false,"blur":18,"spread":-6,"v_offset":12,"h_offset":0,"inset":false,"enable":true,"color":{"color":"rgba(34, 56, 101, 0.04)"}},"boxed_content_spacing":{"desktop":{"top":"40px","bottom":"40px","left":"40px","right":"40px","linked":true},"tablet":{"top":"35px","bottom":"35px","left":"35px","right":"35px","linked":true},"mobile":{"top":"20px","bottom":"20px","left":"20px","right":"20px","linked":true}},"content_boxed_radius":{"top":"3px","bottom":"3px","left":"3px","right":"3px","linked":true},"4ccfde6e65f08c4e57f48d004475a05a":"","disable_featured_image":"no","disable_share_box":"no","disable_author_box":"no","disable_posts_navigation":"no","71a41ce8daccee69eb6205755e77ef4b":"","disable_related_posts":"no","disable_header":"no","disable_footer":"no","docs_item_badge":"PRO","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6},"header_after_body_scripts":"<style>\nfigure > img, figure > video {\n    border: 1px solid rgba(225,225,225,0.50);\nbox-shadow: 0px 0px 50px -30px rgba(0,0,0,0.25);\n\n}\n<\/style>"},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/1496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/documentation"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=1496"}],"version-history":[{"count":5,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/1496\/revisions"}],"predecessor-version":[{"id":14383,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/1496\/revisions\/14383"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=1496"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=1496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}