{"id":92669,"date":"2022-08-11T14:43:54","date_gmt":"2022-08-11T09:13:54","guid":{"rendered":"https:\/\/www.ultimatebeaver.com\/?post_type=docs&#038;p=92669"},"modified":"2022-08-22T15:31:11","modified_gmt":"2022-08-22T10:01:11","slug":"info-box-module","status":"publish","type":"docs","link":"https:\/\/www.ultimatebeaver.com\/docs\/info-box-module\/","title":{"rendered":"Info Box Module"},"content":{"rendered":"\n<p>With the Info Box module, you can create fully-functional feature boxes on your Beaver Builder websites. You can add a customized title, sub-title, and description. Further, you can add attractive images or icons, and a call to action button for easy navigation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Adding Info Box module<\/strong><\/h3>\n\n\n\n<p>Let\u2019s see how to use Info Box module in Beaver Builder \u2013<\/p>\n\n\n\n<p>Note: Before starting make sure you have Beaver Builder and Ultimate Addons for Beaver Builder plugins installed and activated.<\/p>\n\n\n\n<p>Step 1 \u2013 Edit page\/post with Beaver Builder and opt to add new module. Search and drag-and-drop the Info Box from the UABB\u2019s Content Modules list.<\/p>\n\n\n\n<figure data-spectra-id=\"spectra-02bdc6c7-b801-4205-874f-cb4ffdbd7b07\" class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box2.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"370\" height=\"240\" src=\"https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box2.png\" alt=\"Info Box Module\" class=\"wp-image-92672\" title=\"Info Box Module\" srcset=\"https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box2.png 370w, https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box2-300x195.png 300w\" sizes=\"(max-width: 370px) 100vw, 370px\" \/><\/a><\/figure>\n\n\n\n<p>Step 2 \u2013 Add a relevant title, description.&nbsp;<\/p>\n\n\n\n<figure data-spectra-id=\"spectra-3a724c03-49b2-491b-a35e-87f73083e755\" class=\"wp-block-image size-large\"><a href=\"https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box3.png\"><img decoding=\"async\" width=\"1024\" height=\"393\" src=\"https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box3-1024x393.png\" alt=\"Info Box Module\" class=\"wp-image-92673\" title=\"Info Box Module\" srcset=\"https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box3-1024x393.png 1024w, https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box3-300x115.png 300w, https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box3-768x294.png 768w, https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box3-400x153.png 400w, https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box3.png 1247w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Step 3 \u2013 Once you are done adding all the content, you can select the preset of your choice by navigating to <strong>General > Presets.<\/strong><\/p>\n\n\n\n<p>While working with UABB modules, you can simply choose any style from a list of professionally designed, sleek, and classic presets. Presets will help you quickly create great designs. You can select the preset of your choice here. But before changing presets, save the content, you added to the module. Otherwise, your content will be overwritten with the default one.<\/p>\n\n\n\n<figure data-spectra-id=\"spectra-db3157ac-6c42-4a41-875a-d13715031cbc\" class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/preset9.png\"><img decoding=\"async\" width=\"1009\" height=\"780\" src=\"https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/preset9.png\" alt=\"info box module preset\" class=\"wp-image-92922\" title=\"Info Box Module\" srcset=\"https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/preset9.png 1009w, https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/preset9-300x232.png 300w, https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/preset9-768x594.png 768w, https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/preset9-400x309.png 400w\" sizes=\"(max-width: 1009px) 100vw, 1009px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>&nbsp;Configure Info Box With Advanced Features<\/strong><\/h3>\n\n\n\n<p>The various Advanced settings and Features allow you to manage the layout, background of the module, Color, and Size of the Image\/Icon, and more styling options for all the elements.<\/p>\n\n\n\n<p>Let us briefly look at each settings section of the Info Box module.<\/p>\n\n\n\n<p>Below are the few key features we have taken care of \u2013<\/p>\n\n\n\n<p><strong>Image \/ Icon:&nbsp;<\/strong><\/p>\n\n\n\n<p>There are separate sections for the Info Box where you can insert the content and manage the Icon\/Image position.<\/p>\n\n\n\n<p>You can add the image\/ icon depending in your requirement. You can also manage the Image style from Simple, Circle, Square, or even \u201cDesign your own\u201d style. Also, you will have the options to manage the position of the Image\/Icon.&nbsp;<\/p>\n\n\n\n<figure data-spectra-id=\"spectra-01b1adc5-251a-486c-8d34-069764b7d25a\" class=\"wp-block-image size-large\"><a href=\"https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"471\" src=\"https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box4-1024x471.png\" alt=\"Info Box Module\" class=\"wp-image-92674\" title=\"Info Box Module\" srcset=\"https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box4-1024x471.png 1024w, https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box4-300x138.png 300w, https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box4-768x354.png 768w, https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box4-400x184.png 400w, https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box4.png 1175w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><strong>Style:<\/strong><\/p>\n\n\n\n<p>By navigating to the \u2018Style\u2019 tab, you can set the background and background hover color to the info box module. Also, you can set the content padding here.&nbsp;<\/p>\n\n\n\n<figure data-spectra-id=\"spectra-ff91289a-2bbb-4a8f-96f5-48326a849583\" class=\"wp-block-image size-large\"><a href=\"https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box5.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"448\" src=\"https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box5-1024x448.png\" alt=\"Info Box Module\" class=\"wp-image-92676\" title=\"Info Box Module\" srcset=\"https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box5-1024x448.png 1024w, https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box5-300x131.png 300w, https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box5-768x336.png 768w, https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box5-400x175.png 400w, https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box5.png 1222w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><strong>Link:<\/strong><\/p>\n\n\n\n<p>Under the link tab, you can see \u2018Call to action\u2019 module. Here you manage the type from text, button, complete box options.&nbsp;<\/p>\n\n\n\n<figure data-spectra-id=\"spectra-098a4125-75bd-4931-85fe-cdd59732f0fa\" class=\"wp-block-image size-large\"><a href=\"https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box6.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"457\" src=\"https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box6-1024x457.png\" alt=\"Info Box Module\" class=\"wp-image-92677\" title=\"Info Box Module\" srcset=\"https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box6-1024x457.png 1024w, https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box6-300x134.png 300w, https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box6-768x343.png 768w, https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box6-400x179.png 400w, https:\/\/www.ultimatebeaver.com\/wp-content\/uploads\/2022\/08\/info-box6.png 1183w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>With the Info Box module, you can create fully-functional feature boxes on your Beaver Builder [&hellip;]<\/p>\n","protected":false},"author":67,"featured_media":0,"template":"","meta":{"inline_featured_image":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_pfd_related_docs_manual":[],"pfd_doc_title":"","spectra_gs_classes":"","footnotes":""},"docs_category":[443],"docs_tag":[],"class_list":["post-92669","docs","type-docs","status-publish","hentry","docs_category-info-box"],"spectra_custom_meta":{"_uabb_version":["1.34.6"],"_edit_lock":["1661162475:67"],"rank_math_seo_score":["20"],"rank_math_primary_docs_category":["443"],"rank_math_internal_links_processed":["1"],"_edit_last":["67"],"views":["5186"],"helpful":["1"],"unhelpful":["8"],"redirects":["8"],"rank_math_og_content_image":["a:2:{s:5:\"check\";s:32:\"2fa071c2e601b516553b3c836b2bb2ec\";s:6:\"images\";a:1:{i:0;i:92672;}}"],"_uag_page_assets":["a:9:{s:3:\"css\";s:5953:\".uag-blocks-common-selector{z-index:var(--z-index-desktop) !important}@media (max-width: 976px){.uag-blocks-common-selector{z-index:var(--z-index-tablet) !important}}@media (max-width: 767px){.uag-blocks-common-selector{z-index:var(--z-index-mobile) !important}}\n.wp-block-uagb-advanced-heading h1,.wp-block-uagb-advanced-heading h2,.wp-block-uagb-advanced-heading h3,.wp-block-uagb-advanced-heading h4,.wp-block-uagb-advanced-heading h5,.wp-block-uagb-advanced-heading h6,.wp-block-uagb-advanced-heading p,.wp-block-uagb-advanced-heading div{word-break:break-word}.wp-block-uagb-advanced-heading .uagb-heading-text{margin:0}.wp-block-uagb-advanced-heading .uagb-desc-text{margin:0}.wp-block-uagb-advanced-heading .uagb-separator{font-size:0;border-top-style:solid;display:inline-block;margin:0 0 10px 0}.wp-block-uagb-advanced-heading .uagb-highlight{color:#f78a0c;border:0;transition:all 0.3s ease}.uag-highlight-toolbar{border-left:0;border-top:0;border-bottom:0;border-radius:0;border-right-color:#1e1e1e}.uag-highlight-toolbar .components-button{border-radius:0;outline:none}.uag-highlight-toolbar .components-button.is-primary{color:#fff}\n.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading .uagb-heading-text{color: var(--ast-global-color-1);}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading {text-align: left;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading .uagb-desc-text{margin-bottom: 15px;}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading .uagb-highlight{font-style: normal;font-weight: Default;background: #007cba;color: #fff;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading .uagb-highlight::-moz-selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading .uagb-highlight::selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd .uagb-heading-text{font-family: \"Poppins\";font-weight: 600;font-size: 14px;line-height: 1.2em;}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading .uagb-heading-text{color: var(--ast-global-color-1);}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading {text-align: left;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading .uagb-desc-text{margin-bottom: 15px;}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading .uagb-highlight{font-style: normal;font-weight: Default;background: #007cba;color: #fff;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading .uagb-highlight::-moz-selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading .uagb-highlight::selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd .uagb-heading-text{font-family: \"Poppins\";font-weight: 600;font-size: 14px;line-height: 1.2em;}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading .uagb-heading-text{color: var(--ast-global-color-1);}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading {text-align: left;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading .uagb-desc-text{margin-bottom: 15px;}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading .uagb-highlight{font-style: normal;font-weight: Default;background: #007cba;color: #fff;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading .uagb-highlight::-moz-selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading .uagb-highlight::selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd .uagb-heading-text{font-family: \"Poppins\";font-weight: 600;font-size: 14px;line-height: 1.2em;}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading .uagb-heading-text{color: var(--ast-global-color-1);}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading {text-align: left;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading .uagb-desc-text{margin-bottom: 15px;}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading .uagb-highlight{font-style: normal;font-weight: Default;background: #007cba;color: #fff;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading .uagb-highlight::-moz-selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd.wp-block-uagb-advanced-heading .uagb-highlight::selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-a170d6bd .uagb-heading-text{font-family: \"Poppins\";font-weight: 600;font-size: 14px;line-height: 1.2em;}\";s:2:\"js\";s:0:\"\";s:18:\"current_block_list\";a:4:{i:0;s:14:\"core\/paragraph\";i:1;s:12:\"core\/heading\";i:2;s:10:\"core\/image\";i:3;s:21:\"uagb\/advanced-heading\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1777875193\";s:6:\"gfonts\";a:1:{s:7:\"Poppins\";a:2:{s:10:\"fontfamily\";s:7:\"Poppins\";s:12:\"fontvariants\";a:1:{i:0;s:3:\"600\";}}}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"],"_uag_css_file_name":["uag-css-92669.css"]},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"rest-api-thumbnails":false},"uagb_author_info":{"display_name":"mounikak","author_link":"https:\/\/www.ultimatebeaver.com\/author\/mounikak\/"},"uagb_comment_info":0,"uagb_excerpt":"With the Info Box module, you can create fully-functional feature boxes on your Beaver Builder [&hellip;]","_links":{"self":[{"href":"https:\/\/www.ultimatebeaver.com\/wp-json\/wp\/v2\/docs\/92669","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ultimatebeaver.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.ultimatebeaver.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.ultimatebeaver.com\/wp-json\/wp\/v2\/users\/67"}],"version-history":[{"count":6,"href":"https:\/\/www.ultimatebeaver.com\/wp-json\/wp\/v2\/docs\/92669\/revisions"}],"predecessor-version":[{"id":92924,"href":"https:\/\/www.ultimatebeaver.com\/wp-json\/wp\/v2\/docs\/92669\/revisions\/92924"}],"wp:attachment":[{"href":"https:\/\/www.ultimatebeaver.com\/wp-json\/wp\/v2\/media?parent=92669"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/www.ultimatebeaver.com\/wp-json\/wp\/v2\/docs_category?post=92669"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/www.ultimatebeaver.com\/wp-json\/wp\/v2\/docs_tag?post=92669"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}