{"id":245,"date":"2020-05-20T10:43:32","date_gmt":"2020-05-20T10:43:32","guid":{"rendered":"http:\/\/essential-blocks.com\/?post_type=docs&#038;p=245"},"modified":"2022-12-28T05:11:35","modified_gmt":"2022-12-28T05:11:35","password":"","slug":"block-wrapper","status":"publish","type":"docs","link":"https:\/\/essential-blocks.com\/docs\/block-wrapper\/","title":{"rendered":"EB Wrapper"},"content":{"rendered":"\n<p>With the <strong><a href=\"https:\/\/essential-blocks.com\/demo\/wrapper\/\" target=\"_blank\" data-type=\"page\" data-id=\"1602\" rel=\"noreferrer noopener\">EB Wrapper<\/a><\/strong> block of <a href=\"https:\/\/essential-blocks.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Essential Blocks<\/strong><\/a>, you can present content in a more interactive way with unlimited styling options. A well-designed wrapper can help web builders insert multiple (and any) blocks within themselves to create stunningly designed web pages in Gutenberg that will grab your customer&#8217;s attention.<\/p>\n\n\n\n<p>Follow this step-by-step guide to designing highly engaging website content using the EB Wrapper block in Gutenberg: <\/p>\n\n\n\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 title=\"How To Design Website In Gutenberg With Essential Blocks Wrapper\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/nNgwSgJABGE?list=PLWHp1xKHCfxAk6IzUeT_jvBDjiPghKJbe\" 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><em>Note: You can install and activate the Essential Blocks for Gutenberg plugin in your WordPress dashboard.<\/em><\/p>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><strong>How To Activate EB Wrapper Block?<\/strong><\/h2>\n\n\n\n<p>Essential Blocks comes with modular control which gives you the freedom to enable only the blocks that you will be using on your web pages. To activate EB Wrapper, navigate to <strong>Essential Blocks \u2192 Blocks<\/strong>. Then, toggle to enable this <strong>\u2018Wrapper\u2019<\/strong> block as shown below. After that, click on the <strong>\u2018Save\u2019<\/strong> button.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1343\" height=\"594\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/10\/image-63.gif\" alt=\"EB Wrapper\" class=\"wp-image-7407\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><strong>How To Configure EB Wrapper In Gutenberg?&nbsp;<\/strong><\/h2>\n\n\n\n<p>Here, open an existing or new page where you want to add the <strong>Wrapper of Essential Blocks<\/strong>. Then click on the <strong>\u2018+\u2019<\/strong> icon to add a new block. Afterward, find\u00a0 \u2018<strong>Wrapper<\/strong>\u2019 from the search option as shown in the image below. Then, simply just click on the block and it will be activated.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2872\" height=\"1426\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/Screen-Capture-on-2022-12-27-at-18-56-16.gif\" alt=\"EB Wrapper Block\" class=\"wp-image-8139\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>To add blocks in your Wrapper of Essential Blocks, simply add any block in the wrapper that you want to showcase in the wrapper section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2560\" height=\"1271\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/Screen-Capture-on-2022-12-27-at-20-39-22-scaled.gif\" alt=\"\" class=\"wp-image-8149\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>You can add as many as blocks you want in your wrapper, without any hassle. Simply just click on the <strong>\u2018+\u2019<\/strong> icon to keep adding other blocks. You will also be able to add as many blocks within a wrapper as needed to design your web page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2872\" height=\"1426\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/Screen-Capture-on-2022-12-27-at-19-37-53.gif\" alt=\"EB Wrapper Block\" class=\"wp-image-8142\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>General&nbsp;<\/strong><\/h3>\n\n\n\n<p>To configure Wrapper, go to the Wrapper block setting panel. From the <strong>\u2018General\u2019<\/strong> tab, you can change the content width and toggle to enable the <strong>\u2018Use Width In Wrapper\u2019<\/strong> option.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"533\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672148971982-1024x533.png\" alt=\"EB Wrapper Block\" class=\"wp-image-8143\" title=\"\" srcset=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672148971982-1024x533.png 1024w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672148971982-300x156.png 300w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672148971982-768x400.png 768w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672148971982-360x188.png 360w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672148971982-1536x800.png 1536w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672148971982-2048x1067.png 2048w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672148971982-600x313.png 600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Style&nbsp;<\/strong><\/h3>\n\n\n\n<p>There are tons of styling options for you to make your Wrapper truly stand out. From the <strong>Style tab<\/strong>,<strong> <\/strong>you can modify the margin, padding, background color, border &amp; shadow color, etc. You can choose the Border Style from the <strong>9 presets<\/strong> of the block.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2872\" height=\"1426\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/Screen-Capture-on-2022-12-28-at-09-52-17.gif\" alt=\"EB Wrapper Block\" class=\"wp-image-8165\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How To Add HTML Anchors To The Wrapper Blocks?<\/strong><\/h3>\n\n\n\n<p>You can also add an HTML anchor to your Wrapper Block from the <strong>&#8216;General&#8217; \u2192 \u2018Advanced\u2019<\/strong> option as shown below. Simply enter a word or two to denote the wrapper content<em>.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2560\" height=\"1333\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672116959369-1.png\" alt=\"EB Wrapper Block\" class=\"wp-image-8108\" title=\"\" srcset=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672116959369-1.png 2560w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672116959369-1-300x156.png 300w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672116959369-1-1024x533.png 1024w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672116959369-1-768x400.png 768w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672116959369-1-360x188.png 360w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672116959369-1-1536x800.png 1536w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672116959369-1-2048x1067.png 2048w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672116959369-1-600x313.png 600w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<p>This will create the \u2018<strong>anchor<\/strong>\u2019 which you can then add to any menu or button or other blocks as needed to directly link to this particular Wrapper or section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2560\" height=\"1332\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672117735065.png\" alt=\"EB Wrapper Block\" class=\"wp-image-8109\" title=\"\" srcset=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672117735065.png 2560w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672117735065-300x156.png 300w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672117735065-1024x533.png 1024w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672117735065-768x399.png 768w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672117735065-360x187.png 360w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672117735065-1536x799.png 1536w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672117735065-2048x1065.png 2048w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672117735065-600x312.png 600w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<p>Adding the<strong> HTML anchors<\/strong> to your wrappers can also help to identify them individually if there are multiple wrappers on one web page or post. You can name each of them separately with the anchor tags, and link to them as needed, as shown below. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2560\" height=\"1230\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672151187329.png\" alt=\"EB Wrapper Block\" class=\"wp-image-8145\" title=\"\" srcset=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672151187329.png 2560w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672151187329-300x144.png 300w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672151187329-1024x492.png 1024w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672151187329-768x369.png 768w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672151187329-360x173.png 360w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672151187329-1536x738.png 1536w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672151187329-2048x984.png 2048w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/screely-1672151187329-600x288.png 600w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<h3 class=\"has-text-align-center wp-block-heading\"><strong>Final Outcome<\/strong><\/h3>\n\n\n\n<p>By following the basic steps and a bit more modifying, you can style the EB Wrapper block however you want. Play around with the settings to design a stunning Wrapper to amaze your audience. Below, you can see an entire web page created with multiple Wrapper blocks and how an HTML anchor works for Wrappers created with Essential Blocks.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2870\" height=\"1316\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2022\/12\/Screen-Capture-on-2022-12-27-at-11-27-53.gif\" alt=\"EB Wrapper Block\" class=\"wp-image-8112\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>Getting Stuck? Feel free to contact our <a href=\"https:\/\/wordpress.org\/support\/plugin\/essential-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>dedicated support team<\/strong><\/a> for further assistance.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Grab your visitor&#8217;s attention by using attractive text wrappers with EB Block Wrapper <\/p>\n","protected":false},"author":9,"featured_media":8112,"template":"","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","footnotes":""},"doc_category":[136],"doc_tag":[12,14,19,15,22,150,13,21,151,20,147,148,16,160],"class_list":["post-245","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-content-blocks","doc_tag-gutenberg","doc_tag-block","doc_tag-block-library","doc_tag-blocks","doc_tag-building-block","doc_tag-column","doc_tag-gutenberg-block","doc_tag-gutenberg-editor","doc_tag-multiple-column","doc_tag-page-building-blocks","doc_tag-row","doc_tag-row-block","doc_tag-wordpress","doc_tag-wrapper"],"year_month":"2026-04","word_count":551,"total_views":"7641","reactions":{"happy":"5","normal":"1","sad":"0"},"author_info":{"name":"Faguni","author_nicename":"faguni","author_url":"https:\/\/essential-blocks.com\/author\/faguni\/"},"doc_category_info":[{"term_name":"Content Blocks","term_url":"https:\/\/essential-blocks.com\/docs-category\/content-blocks\/"}],"doc_tag_info":[{"term_name":"gutenberg","term_url":"https:\/\/essential-blocks.com\/docs-tag\/gutenberg\/"},{"term_name":"block","term_url":"https:\/\/essential-blocks.com\/docs-tag\/block\/"},{"term_name":"block library","term_url":"https:\/\/essential-blocks.com\/docs-tag\/block-library\/"},{"term_name":"blocks","term_url":"https:\/\/essential-blocks.com\/docs-tag\/blocks\/"},{"term_name":"Building Block","term_url":"https:\/\/essential-blocks.com\/docs-tag\/building-block\/"},{"term_name":"column","term_url":"https:\/\/essential-blocks.com\/docs-tag\/column\/"},{"term_name":"gutenberg block","term_url":"https:\/\/essential-blocks.com\/docs-tag\/gutenberg-block\/"},{"term_name":"Gutenberg editor","term_url":"https:\/\/essential-blocks.com\/docs-tag\/gutenberg-editor\/"},{"term_name":"multiple column","term_url":"https:\/\/essential-blocks.com\/docs-tag\/multiple-column\/"},{"term_name":"Page Building Blocks","term_url":"https:\/\/essential-blocks.com\/docs-tag\/page-building-blocks\/"},{"term_name":"row","term_url":"https:\/\/essential-blocks.com\/docs-tag\/row\/"},{"term_name":"row block","term_url":"https:\/\/essential-blocks.com\/docs-tag\/row-block\/"},{"term_name":"WordPress","term_url":"https:\/\/essential-blocks.com\/docs-tag\/wordpress\/"},{"term_name":"wrapper","term_url":"https:\/\/essential-blocks.com\/docs-tag\/wrapper\/"}],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/users\/9"}],"version-history":[{"count":25,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/245\/revisions"}],"predecessor-version":[{"id":8168,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/245\/revisions\/8168"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/media\/8112"}],"wp:attachment":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/media?parent=245"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/doc_category?post=245"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/doc_tag?post=245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}