Info box

The info box name says a lot without a description, doesn’t it? Well, there is a lot that you might not thing it is possible to with with an info box element. For people who are not familliar with this, an info box contains an image, a title, some text and maybe a link. You probably have seen it on a lot of websites listing their features or their services. If you want to achieve something similar, here is how to do that – using the info box element.

As mentioned above, you can have a media (icon or uploaded image), a title, text, and a CTA button. When you add a new info box element you can find all the options in the panels in the right sidebar when the block is selected.

Container settings

The container mean the entire info box, and you can play with the container settings and choose a background color, border settings (color, width), hover colors and padding for spacing inside the box.

Also, inside the container settings tab you can find the hover animation. We will be adding new animations on hover for this element, at the moment there are 2 animations available: scale and push-up.

Media settings

Media represents the image or the icon that you have chosen. In the media tab you can choose either to show an icon from the list provided or upload an image and show one there. If an icon is selected, you can choose the icon size and the spacing for the icon.

Also, for the media you can choose the media alignment which is really imported as you can easily morph the info box into a list with this. You can see it in the different examples of info boxes shown at the end of the article.

Title and Text settings

You can also font sizes, colors, colors on hover for the Titles and the text inside the info box. Open the respective panels and play with the colors and details to until you get the perfect layout for you.

Learn more

This is the actual button, and you can enable or disable it depending on your needs. The link for the button can be set at the top of the info box settings, and you can choose to set the link for the button only or for the entire block. Also, you can change the colors and spacing for this button if enabled.

Container shadows

A new addition to the mix, the container shadow are very nice if you want to add a nice box shadow, and it even comes with a hover setting so you can change or adapt the shadow for you necessity.

Examples