Info Box SA Element
The infobox is a great way to display the key information within a webpage. You can use infoboxes for many purposes. It fits almost everywhere on a webpage where you need to show your viewers some important information like product features. Here in this tutorial, you’re going to explore all about the InfoBox and see how to work with this incredibly important element into Elementor Page Builder. So let’s get straight into it:
If you don’t know how to activate elements and start using it, then check the tutorials below:
Ξ Activate/De-activate Elements
Ξ Using Elementor Addons in Elementor
How to Customize the Info Box Element
»Content
InfoBox Image
⇒InfoBox Type: Set the infobox type here.
⇒Content Alignment: Set the content alignment either left, right or center.
⇒Image or Icon: Select whether you want to use image, number or icon in the infobox. You can select None if you want nothing at all.
→Add Icon/Image: Based upon your selection, add icon or image to the infobox.
InfoBox Content
⇒InfoBox Title: Enter the title of the infobox. Click on Dynamic settings to apply the AnalogWP Classes to the title. (Ex. Add a light background)
⇒Show Content: Select if you want to show the content in the infobox or not.
⇒Content-Type: Set the content type either as content or saved template.
⇒InfoBox Content: Enter the infobox content here. Click on Dynamic settings to apply the AnalogWP Classes to the content. (Ex. Add a dark background)
Link
⇒Show InfoBox Button: Enable if you want to show the button within the infobox. If select Show, customize the following settings:
→Button Text: Input the button text.
→Link URL: Input the link URL here.
→Icon: Choose an icon from the list if you want to add an icon into the button.
⇒InfoBox Clickable: Enable if you want to activate the infobox clickable. If select Yes, then put the URL in the InfoBox Link box.
»Style
Image Style (Normal View)
⇒Background Color: Customize the infobox’s image background color for the Normal view.
⇒Padding: Set the padding value for the top, right, bottom and left around the image for different dimensions. You can link the values together or customize individually.
⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the image for different dimensions. You can link the values together or customize individually.
⇒Border Color: Add a custom color to the image border.
⇒Image Shape: Set the shape of image either square, circle or radius.
⇒Image Resizer: You can resize the image in the infobox very flexibly. Here, using this option, you’ll be allowed to resize the image manually which will automatically adjust with your content.
⇒Image Size: Customize the fixed size of the image from our pre-defined size type.
⇒Margin: Set the margin value for the top, right, bottom and left around the image for different dimensions. You can link the values together or customize individually.
Image Style (Hover View)
⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.
⇒Animation: Add an animation effect on the hover mode of the image by selecting an effect from the list.
⇒Border Type: Select a border type from the list according to your preference for the hover view. And then set the border width for the top, right, bottom and left of the image for different dimensions. You can link the values together or customize individually.
⇒Border Color: Add a custom color to the image border in hover mode.
⇒Image Shape: Set the shape of image either square, circle or radius.
⇒Image Resizer: You can resize the image in the infobox very flexibly. Here, using this option, you’ll be allowed to resize the image manually which will automatically adjust with your content.
⇒Image Size: Customize the fixed size of the image from our pre-defined size type.
⇒Margin: Set the margin value for the top, right, bottom and left around the image for different dimensions. You can link the values together or customize individually.
Color & Typography
⇒Title Style
→Color: Add a custom color to the title text of the infobox for both normal and hover view.
→Typography: Set the typography options for the title text.
→Margin: Set the margin value for the top, right, bottom and left around the title for different dimensions. You can link the values together or customize individually.
⇒Content Style
→Content Only Margin: Set the margin value for the top, right, bottom and left around the content for different dimensions. You can link the values together or customize individually.
→Content Only Background: Add a background color to the content.
→Content Only Padding: Set the padding value for the top, right, bottom and left around the content for different dimensions. You can link the values together or customize individually.
→Color: Add a custom color to the content text of the infobox for both normal and hover view.
→Typography: Set the typography options for the content text.
»Advanced
Set the Advanced options that are applicable to this widget
Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Info Box Element.