{"id":384,"date":"2020-05-21T05:38:43","date_gmt":"2020-05-21T05:38:43","guid":{"rendered":"http:\/\/essential-blocks.com\/?post_type=docs&#038;p=384"},"modified":"2022-07-04T08:25:11","modified_gmt":"2022-07-04T08:25:11","password":"","slug":"infobox","status":"publish","type":"docs","link":"https:\/\/essential-blocks.com\/docs\/infobox\/","title":{"rendered":"EB Infobox"},"content":{"rendered":"\n<p><strong>EB Infobox<\/strong> allows you to showcase key information about your website to instantly get your visitors&#8217; attention. Thanks to this element, you will be able to add credibility to your website. As a result, your visitors will be able to easily get access to what you are offering and find the information in a quick manner.<\/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=\"Highlight Any Content With Attractive Info Boxes\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/NImOTl7lL9U?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<h2 class=\"has-text-align-center wp-block-heading\"><strong>How to Activate EB Infobox<\/strong><\/h2>\n\n\n\n<p>To activate this <a href=\"https:\/\/essential-blocks.com\/#\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Essential Blocks<\/strong><\/a> element, click on the \u2018+\u2019 icon to add a new Block. Afterward, find&nbsp; <strong>&#8216;Infobox&#8217;<\/strong> from the search option. Simply just click on the Block and it will be activated.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1366\" height=\"656\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/1-12.png\" alt=\"EB Infobox\" class=\"wp-image-385\" title=\"\" srcset=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/1-12.png 1366w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/1-12-600x288.png 600w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/1-12-300x144.png 300w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/1-12-1024x492.png 1024w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/1-12-768x369.png 768w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<p>After you are done with this step, this is the default layout you are going to see.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1366\" height=\"656\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/2-16.png\" alt=\"EB Infobox\" class=\"wp-image-386\" title=\"\" srcset=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/2-16.png 1366w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/2-16-600x288.png 600w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/2-16-300x144.png 300w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/2-16-1024x492.png 1024w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/2-16-768x369.png 768w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><strong>How to Configure the Layout Settings<\/strong><\/h2>\n\n\n\n<p>From \u2018Infobox Image\u2019 section, you can choose an image, icon or a number which will be displayed in the <strong>Infobox<\/strong>. You are able to change its position as well. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1366\" height=\"625\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/3-8.gif\" alt=\"EB Infobox\" class=\"wp-image-387\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>Besides, you can use the toggle to add Button for the <strong>Infobox<\/strong>. If it\u2019s enabled, you can change the Button text, url and size. You can even make the Infobox Clickable and add a link to it.&nbsp;<\/p>\n\n\n\n<p class=\"has-text-align-center\"><\/p>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><strong>How to Style EB Infobox<\/strong><\/h2>\n\n\n\n<p>From the Typography section, you are capable of changing the font size of the Heading and Content. You can change the Heading Text Transform option as well.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1366\" height=\"625\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/4-12.gif\" alt=\"EB Infobox\" class=\"wp-image-389\" title=\"\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p>Afterward, you have the freedom to modify the color of the <strong>Infobox <\/strong>Background, Header, Content and Icon as per your preference. Besides, you are able to add padding to Both Heading and the Icon as well.<\/p>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><strong>&nbsp;Final Outcome<\/strong><\/h2>\n\n\n\n<p>By following the basic steps and a bit more modifying, you can style your <strong>EB Infobox <\/strong>however you want and get your expected outcome.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"853\" height=\"376\" src=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/5-6.png\" alt=\"EB Infobox,\" class=\"wp-image-390\" title=\"\" srcset=\"https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/5-6.png 853w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/5-6-600x264.png 600w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/5-6-300x132.png 300w, https:\/\/essential-blocks.com\/wp-content\/uploads\/2020\/05\/5-6-768x339.png 768w\" sizes=\"(max-width: 853px) 100vw, 853px\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<p>By using <strong>EB Infobox<\/strong>, this is how you can design attractive layouts filled with significant information about your company and get everyone\u2019s interest.<\/p>\n\n\n\n<p>Getting stuck? Feel free to <a href=\"http:\/\/wpdeveloper.net\/support\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Contact Our Support<\/strong><\/a> for further assistance.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Display information with an attractive EB Infobox block from Essential Blocks for Gutenberg.<\/p>\n","protected":false},"author":1,"featured_media":390,"template":"","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","footnotes":""},"doc_category":[136],"doc_tag":[14,19,15,22,12,13,21,20,16],"class_list":["post-384","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-content-blocks","doc_tag-block","doc_tag-block-library","doc_tag-blocks","doc_tag-building-block","doc_tag-gutenberg","doc_tag-gutenberg-block","doc_tag-gutenberg-editor","doc_tag-page-building-blocks","doc_tag-wordpress"],"year_month":"2026-04","word_count":333,"total_views":"8739","reactions":{"happy":"1","normal":"1","sad":"4"},"author_info":{"name":"admin","author_nicename":"wpdev","author_url":"https:\/\/essential-blocks.com\/author\/wpdev\/"},"doc_category_info":[{"term_name":"Content Blocks","term_url":"https:\/\/essential-blocks.com\/docs-category\/content-blocks\/"}],"doc_tag_info":[{"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":"gutenberg","term_url":"https:\/\/essential-blocks.com\/docs-tag\/gutenberg\/"},{"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":"Page Building Blocks","term_url":"https:\/\/essential-blocks.com\/docs-tag\/page-building-blocks\/"},{"term_name":"WordPress","term_url":"https:\/\/essential-blocks.com\/docs-tag\/wordpress\/"}],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/384","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\/1"}],"version-history":[{"count":7,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/384\/revisions"}],"predecessor-version":[{"id":6045,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/384\/revisions\/6045"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/media\/390"}],"wp:attachment":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/media?parent=384"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/doc_category?post=384"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/doc_tag?post=384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}