Although Oxygen Builder comes with a ready made icon box. It has its limitations. So in this tutorial we will create our own. To be more precise, we will create the same one as you can find on the homepage
of this site.
The most notable part of those icon boxes are the overlapping icons. They overlap the box below it.
Let's start creating it.
First add a section. In that section we will add three columns. Set each column to Center under Horizontal Item Aligment in the Primary tab.
Next we will give it a z-index of 10 (look at the Advanced tab under Layout) and a bottom margin of MINUS -20px (look at the Advanced tab under Size & Spacing).
That's the icon done. Now for the box itself.
Let's add a div, give this div a class of icon-box and set it to Stack Child Elements Vertically and Center. Give the div a background color. We used a very light blueish/greyish color. You can use your own color of course.
Under the Advanced tab go to Size & Spacing and add a padding of 10 pixels on the left and right and 15px at the bottom.
Inside this div we will place a heading and text element. Let's give the heading a class of icon-box-heading and style it. The text color will be black, the font size will be 21px, font weight 600 and the tag will be set to h2.
Under the Advanced tab go to Size & Spacing and add a margin of 40 pixels at the top and 12 pixels at the bottom.
All that is left to do is style the text. We will give the text a class of icon-box-text and set the text color to black and font size to 14px.
Go to the Advanced tab and under Size & Spacing set the bottom margin to 20 pixels.
Copy the icon twice and drag both to the other columns and do the same with the div that contains the heading and text.
Now you are done. You have created your own icon box with an overlay icon.