a3 Info Box

Getting Started

a3 Info Box block for WordPress is a highly customizable card style box with witch you can highlight your features, key points or any content on your website.

Display text and media content to show important information to your visitors. Style the Info Box with static and hover colors, change fonts, borders, show a box-shadow and much more.

So to get started chose the a3 Info Box block from a3 BlockPress list or type the name of the block. Click on the Block Inserter icon and search for “Info Box”. Click it to add the block to the post or page.

Info Box Settings

Our Gutenberg block comes with many settings and option for stylizing the box and it’s contain.

Will start with choosing the layout and setup the block.

  • InfoBox Quick Layout Presets – You can choose from 6 preset layouts.
  • Link – You have the option to add a link to your info box.
  • Link Content – Choose to link the entire box or just the read more link/button.
  • Content Align – Align the box content as you wish: left, right or center with the option to set the content alignment on Desktop, Tablet and Mobile.

Container Settings

Now that we setup the box it’s time to style the container, to make it stand by and match with your website design.

From this panel we setup the max width of the box, can choose a background colour, setup a border and a shadow for the box and add a space or padding to the container.

  • Max Width – Drag the slider to setup a width for the container box. The values can be in pixels, percent’s or vw.
  • Background – If you wish can have a background colour with option to style the bck of the box container, adding a hover color will make the box dynamic.
  • Border – Set border for normal as for hover position, then chose the style, color, opacity, size and radius.
  • Shadow – To make it more appeal activate the shadow and add a unique style to the info box. Many option to create a shadow like: color, opacity, blur, spread vertically or horizontal both for normal as for hover.
  • Spacing – Now setup the margin and padding for Desktop, Tablet and Mobile with values in pixels or percent.

Media Settings

In this tab will find the settings for the media that will showcase in our box block. The media will show depending on the layout we choose at the beginning. Changing the layout or the position of the content will not have any impact on it. So let’s have a quick look thru the settings.

You will see three icons at the top of each setting that have options for Desktop, Tablet ond Mobile. That way your content will look good on all devices.

  • Media Align – Aligned the media top, left or right.
  • Media Type – Choose what kind of media you want to use: Icon, Image, Numbers or None. Each media have it’s own settings, for example the icons will have options for size, line width, animation hoover and so one. If you choose to use a Image as media the options will be: Max Image Width, Image Radius, Image ratio and so one.

Media Style

Now let’s style the container of the media. The options from these panel are influence by the Media Type you choose. So if it’s selected Image you will see option just for the background, if it’s icon can select the color for the background as for icon itself. When the Number type it’s selected a new option will show: typography. In our demo bellow will style the icon type of media.

  • Background and Colour – Add a color to the icon/number and the background container.
  • Typography – This will appear only if Number media is selected. Can choose the family font, size and style.
  • Border – Set a border for the media container when it’s on normal or hover position. The border comes with many options like, style, color, opacity etc..
  • Spacing – Define the margin and space for the media container as for the content inside.

Title Settings

Choose if your Info Box will have a title and style it as you need.

  • Turn On/ Off the title section – You can turn off this section if no title it’s need.
  • Choose a HTML tag – Easily choose a tag for the title H1 – H6.
  • Title color – Setup a color for the title text when normal or it’s hover.
  • Font Settings The settings for font can be customize for Desktop, Tablet or Mobile. Customize the title with a custom family font, size and style.
  • Space and Margin From here you can setup the distance between the text tile and the container border as for the container and the other elements inside the Info Box.
  • Min Height Drag from the slider to set a custom minim height.

Text Settings

Now if you have text to add into your Info Box then this text can be very easily style. The Text Settings tab open many settings as custom font, spacing and minim height.

  • Show Text – Activate the description section by dragging the button, by default it will be ON.
  • Text Color – Choose a color for the text as normal and for hover position.
  • Font Family – Add more style to your box by adding a custom family font.
  • Space and Padding – From here you can setup the distance between the text description and the container border same for the container and the other elements inside the Info Box.
  • Min Height – Drag from the slider to set a custom minim height.

Learn More Settings

Add a text link or a button to the Info Box. By default this option is OFF.

  • Show Learn More – Turn On or Off the Learn More section
  • Color – Choose a color for the text
  • Background Color – Transform the link text into a button by adding a background color
  • Border – To make it more appeal setup a border for the button container
  • Font Family – Setup a custom font for the Learn More text
  • Space and Padding – Adjust the spacing between text and border container and for the container and the rest of the elements around the button/text.

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit.

Tips & Tricks

Above we show how to customize a single info box. If you will want to use multiple with same design just duplicate and use them with a container block as a3 Row Block.