{"id":2052,"date":"2026-10-14T04:33:27","date_gmt":"2026-10-14T04:33:27","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/?post_type=docs&#038;p=2052"},"modified":"2026-10-15T08:41:36","modified_gmt":"2026-10-15T08:41:36","password":"","slug":"icon-box","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/icon-box\/","title":{"rendered":"Icon Box"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The Icon Box Block lets you display an icon, number, or image with a title and description. You can customize the layout, styling, background, border, spacing, and hover effects. You can also add an optional button with a link and icon.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add an Icon Box Block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Follow these steps to add and configure the Icon Box Block in the WordPress Gutenberg editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Add the Icon Box Block<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Open the page or post where you want to add the Icon Box Block.<\/li>\n\n\n\n<li>Click the <strong>+ (Add Block)<\/strong> button in the Gutenberg editor.<\/li>\n\n\n\n<li>Search for <strong>Icon Box<\/strong> in the block inserter.<\/li>\n\n\n\n<li>Select the <strong>Icon Box<\/strong> block from the ShapeBlock category.<\/li>\n\n\n\n<li>The Icon Box block will be added to your page.<\/li>\n\n\n\n<li>Select the block to configure its settings using the sidebar.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1276\" height=\"336\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-45.png\" alt=\"\" class=\"wp-image-2281\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-45.png 1276w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-45-300x79.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-45-767x202.png 767w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-45-1024x270.png 1024w\" sizes=\"auto, (max-width: 1276px) 100vw, 1276px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Configure the Icon Box Block<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Select the Icon Box Block to access its configuration options in the sidebar. The available options are organized into four tabs:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Settings:<\/strong> Configure the icon, number or image, title, description, and optional button.<\/li>\n\n\n\n<li><strong>Layout:<\/strong> Control the icon position, content alignment, vertical alignment, and spacing between the icon and content.<\/li>\n\n\n\n<li><strong>Style:<\/strong> Customize the icon box, icon, title, description, and button appearance, including colors, backgrounds, borders, typography, and hover effects.<\/li>\n\n\n\n<li><strong>Advanced:<\/strong> Configure the block&#8217;s padding, margin, and background.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Settings Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Settings tab contains the Content and Button panels for configuring the Icon Box Block&#8217;s content and button behavior.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Content<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Icon:<\/strong> Enable or disable the icon, number, or image displayed in the box.<\/li>\n\n\n\n<li><strong>Type:<\/strong> Choose the content type:\n<ul class=\"wp-block-list\">\n<li>Icon<\/li>\n\n\n\n<li>Number<\/li>\n\n\n\n<li>Image<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Icon:<\/strong> Select an icon from the icon picker. This option appears when the Type is set to Icon.<\/li>\n\n\n\n<li><strong>Number:<\/strong> Enter the number to display. This option appears when the Type is set to Number.<\/li>\n\n\n\n<li><strong>Select Image:<\/strong> Choose an image from the WordPress Media Library. This option appears when the Type is set to Image. You can replace the selected image.<\/li>\n\n\n\n<li><strong>Title:<\/strong> Enter the title displayed in the icon box.<\/li>\n\n\n\n<li><strong>Description:<\/strong> Enter the description displayed below the title.<\/li>\n\n\n\n<li><strong>Title HTML Tag:<\/strong> Choose the HTML tag used for the title:\n<ul class=\"wp-block-list\">\n<li>H1<\/li>\n\n\n\n<li>H2<\/li>\n\n\n\n<li>H3<\/li>\n\n\n\n<li>H4<\/li>\n\n\n\n<li>H5<\/li>\n\n\n\n<li>H6<\/li>\n\n\n\n<li>P<\/li>\n\n\n\n<li>DIV<\/li>\n\n\n\n<li>SPAN<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Button<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Show a button:<\/strong> Enable or disable the button in the icon box.<\/li>\n\n\n\n<li><strong>Button Text:<\/strong> Enter the text displayed on the button. You can also edit the button text directly in the block preview. Leave the text empty and select a button icon to create an icon-only button.<\/li>\n\n\n\n<li><strong>Link:<\/strong> Enter the destination URL for the button.<\/li>\n\n\n\n<li><strong>Open in New Tab:<\/strong> Open the linked page in a new browser tab. This option appears when a link is entered.<\/li>\n\n\n\n<li><strong>Add Nofollow:<\/strong> Add the <code>nofollow<\/code> attribute to the button link. This option appears when a link is entered.<\/li>\n\n\n\n<li><strong>Button Icon (optional):<\/strong> Select an icon to display inside the button.<\/li>\n\n\n\n<li><strong>Icon Position:<\/strong> Choose where the button icon appears when an icon is selected:\n<ul class=\"wp-block-list\">\n<li>After the Text<\/li>\n\n\n\n<li>Before the Text<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1475\" height=\"675\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-46.png\" alt=\"\" class=\"wp-image-2282\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-46.png 1475w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-46-300x137.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-46-767x351.png 767w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-46-1024x469.png 1024w\" sizes=\"auto, (max-width: 1475px) 100vw, 1475px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Layout Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Layout tab contains the Layout panel for controlling the position and alignment of the icon box content.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Layout<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Icon Position:<\/strong> Choose the position of the icon relative to the content. This option is available when the icon is enabled:\n<ul class=\"wp-block-list\">\n<li>Icon Left<\/li>\n\n\n\n<li>Icon Top<\/li>\n\n\n\n<li>Icon Right<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Content Alignment:<\/strong> Set the alignment of the content:\n<ul class=\"wp-block-list\">\n<li>Left<\/li>\n\n\n\n<li>Center<\/li>\n\n\n\n<li>Right<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Vertical Alignment:<\/strong> When the icon is positioned on the left or right, choose how the icon aligns vertically with the content:\n<ul class=\"wp-block-list\">\n<li>Top<\/li>\n\n\n\n<li>Middle<\/li>\n\n\n\n<li>Bottom<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Gap (px):<\/strong> Adjust the spacing between the icon and the content.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The Icon Position, Content Alignment, and Gap controls support responsive settings for desktop, tablet, and mobile devices.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1204\" height=\"726\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-47.png\" alt=\"\" class=\"wp-image-2283\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-47.png 1204w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-47-300x181.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-47-1024x617.png 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-47-768x463.png 768w\" sizes=\"auto, (max-width: 1204px) 100vw, 1204px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Style Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Style tab contains separate panels for customizing the icon box, icon, title, description, and button. Some controls are available only when the corresponding element is enabled.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Icon Box<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Normal:<\/strong> Configure the default appearance of the icon box:\n<ul class=\"wp-block-list\">\n<li><strong>Background:<\/strong> Set a background color or gradient.<\/li>\n\n\n\n<li><strong>Border:<\/strong> Customize the border.<\/li>\n\n\n\n<li><strong>Box Shadow:<\/strong> Add a shadow around the icon box.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Hover:<\/strong> Configure the appearance when the user hovers over the icon box:\n<ul class=\"wp-block-list\">\n<li><strong>Background:<\/strong> Set the hover background color or gradient.<\/li>\n\n\n\n<li><strong>Border Color:<\/strong> Set the border color on hover.<\/li>\n\n\n\n<li><strong>Box Shadow:<\/strong> Customize the shadow on hover.<\/li>\n\n\n\n<li><strong>Lift the box on hover:<\/strong> Enable or disable the lift effect when hovering over the box.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong> Customize the rounding of the icon box corners.<\/li>\n\n\n\n<li><strong>Padding:<\/strong> Set the inner spacing of the icon box. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Set the outer spacing of the icon box. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Icon<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This panel appears when the icon, number, or image is enabled.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Icon View:<\/strong> Choose how the icon is displayed:\n<ul class=\"wp-block-list\">\n<li>Default<\/li>\n\n\n\n<li>Frame<\/li>\n\n\n\n<li>Stacked<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Shape:<\/strong> Choose the icon shape when Frame or Stacked is selected:\n<ul class=\"wp-block-list\">\n<li>Rounded<\/li>\n\n\n\n<li>Square<\/li>\n\n\n\n<li>Circle<\/li>\n\n\n\n<li>Square Rotate<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Size (px):<\/strong> Adjust the icon size.<\/li>\n\n\n\n<li><strong>Box Size (px):<\/strong> Adjust the size of the icon&#8217;s surrounding box.<\/li>\n\n\n\n<li><strong>Padding:<\/strong> Set the inner spacing around the icon. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n\n\n\n<li><strong>Color:<\/strong> Set the icon or number color.<\/li>\n\n\n\n<li><strong>Background:<\/strong> Set a background color or gradient for the icon box.<\/li>\n\n\n\n<li><strong>Box Shadow:<\/strong> Add a shadow to the icon box.<\/li>\n\n\n\n<li><strong>Border:<\/strong> Customize the icon box border.<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong> Adjust the rounding of the icon box corners.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Title<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Color:<\/strong> Set the title text color.<\/li>\n\n\n\n<li><strong>Typography:<\/strong> Customize the title typography. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n\n\n\n<li><strong>Padding:<\/strong> Adjust the inner spacing around the title. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4. Description<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Color:<\/strong> Set the description text color.<\/li>\n\n\n\n<li><strong>Typography:<\/strong> Customize the description typography. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">5. Button<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This panel appears when <strong>Show a button<\/strong> is enabled in the Settings tab.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Button Style:<\/strong> Choose the button appearance:\n<ul class=\"wp-block-list\">\n<li>Button<\/li>\n\n\n\n<li>Text Link<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Normal:<\/strong> Configure the default button appearance:\n<ul class=\"wp-block-list\">\n<li><strong>Text Color:<\/strong> Set the button text color.<\/li>\n\n\n\n<li><strong>Background:<\/strong> Set the button background color or gradient. Available for the Button style.<\/li>\n\n\n\n<li><strong>Border:<\/strong> Customize the button border. Available for the Button style.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Hover:<\/strong> Configure the button appearance on hover:\n<ul class=\"wp-block-list\">\n<li><strong>Text Color:<\/strong> Set the hover text color.<\/li>\n\n\n\n<li><strong>Background:<\/strong> Set the hover background color or gradient. Available for the Button style.<\/li>\n\n\n\n<li><strong>Border Color:<\/strong> Set the hover border color. Available for the Button style.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong> Adjust the rounding of the button corners. Available for the Button style.<\/li>\n\n\n\n<li><strong>Typography:<\/strong> Customize the button text typography. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n\n\n\n<li><strong>Button Size:<\/strong> Set the width and height of an icon-only button. This option appears when the button has an icon but no text.<\/li>\n\n\n\n<li><strong>Padding:<\/strong> Adjust the inner spacing of the button. Responsive settings are available for desktop, tablet, and mobile. This option is available for the Button style when the icon-only button size control is not being used.<\/li>\n\n\n\n<li><strong>Space Above:<\/strong> Set the spacing above the button.<\/li>\n\n\n\n<li><strong>Icon Size:<\/strong> Adjust the size of the button icon when an icon is selected.<\/li>\n\n\n\n<li><strong>Space Between Icon and Text:<\/strong> Adjust the spacing between the button icon and text when both are present.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1322\" height=\"736\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-48.png\" alt=\"\" class=\"wp-image-2284\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-48.png 1322w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-48-300x167.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-48-767x427.png 767w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-48-1024x570.png 1024w\" sizes=\"auto, (max-width: 1322px) 100vw, 1322px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Advanced Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Advanced tab contains the Spacing and Background panels for controlling the outer spacing and background of the entire block.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Spacing<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Padding:<\/strong> Set the inner spacing around the entire Icon Box Block. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Set the outer spacing around the entire Icon Box Block. Responsive settings are available for desktop, tablet, and mobile.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Background<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Background:<\/strong> Set a background color or gradient for the entire Icon Box Block.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Icon Box Block lets you display an icon, number, or image with a title and description. You can customize the layout, styling, background, border, spacing, and hover effects. You can also add an optional button with a link and icon. How to Add an Icon Box Block Follow these steps to add and configure [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[16],"doc_tag":[],"class_list":["post-2052","docs","type-docs","status-publish","hentry","doc_category-content-block"],"year_month":"2026-10","word_count":1222,"total_views":"6","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Sojib","author_nicename":"shapekode-admin","author_url":"https:\/\/shapekode.com\/product\/shapeblock\/author\/shapekode-admin\/"},"doc_category_info":[{"term_name":"Content Block","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/content-block\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2052","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=2052"}],"version-history":[{"count":1,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2052\/revisions"}],"predecessor-version":[{"id":2285,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2052\/revisions\/2285"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=2052"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=2052"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=2052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}