Tutorials for Oxygen Builder

Icon Box Tutorial

Icon Box

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.
In the first column we will add an icon and give that icon a class icon-box-icon. Now we will style this icon. We will make it solid, give it a white color and a green background color. Of course you can choose your own colors here, but this is what was done for this website.

The icon size is set to 20px and the space around the icon is set to 15px.
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.

Want To Talk About Oxygen?

On our new forum you can discuss anything related to Oxygen. From the Oxygen Builder itself to the different Oxygen plugins, WordPress and so on.
To The Forum
In accordance with the GDPR you can contact us here.
Copyright © 2020 - 2022
We are not affiliated with Oxygen or endorsed by Soflyy.
Terms & ConditionsPrivacy PolicyCookies
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram