Editing Icon Element Boxes on Homepage

What do you mean by icon element boxes?

The outlined boxes below:

If you’re interested in changing colors, text, fonts, this is the article for you! If you’re interested in knowing how to add to/ remove these elements, this is also the article for you!

There are two ways to access the editor for this feature. You’re going to want to edit your Homepage. You can get there by going here:

…or by going here:

Once you’re in the editor, you’ll notice that as you begin to hover your mouse over certain areas, menu items will appear. You’ll want to hover over the icon box and click the innermost button on the right. It looks like a square with a pencil:

Here’s where the magic happens. Under the content tab you’ll be able to change the following:
-where/how the icon is displayed
-what icon you want to display (scroll for more icon options)
-title of icon box
-text of icon box

A preview of all the changes you make will appear in the top right-hand corner of the viewer. When you’re finished, either go to the colors tab or click save.

In the colors tab you can change the following:
-change colors for title
-change colors for smaller text
-change colors for icon, icon background, & icon border (these changes will be dependent on your icon box styling)

When you’re finished, navigate to the screen options tab or click save.

Under the screen options tab you’ll be able to change the following:
-element visibility depending on screen size (i.e. desktop vs. mobile)
-font size depending on screen size

When you’re finished making changes, click save.

From here you can save & update the page, and then head back to the homepage to see your changes reflected. 

I only want two icon element boxes. How do I remove the other one?

Use your cursor to hover over the box you want to remove. Click the outermost X.

Cool, that’s done- but now we have to fix the spacing. (Fractions, people!) The boxes were in thirds and now we have to set them to halves.

This can be done by clicking the right arrow (outlined below) until the fraction changes to 1 / 2.

Repeat the above step for the second box:

When you’re finished making these changes, update to save your page changes.

How do I add another icon element box?

I find it easier to use the clone feature instead of adding the element from scratch. That way your visual settings are duplicated and all you have to change is the text. The clone button is outlined below:

From there you can set your columns how you prefer. In the screenshot below, I’ve set mine to fourths. You can then edit your text/icon how you see fit, and then click update to save your changes:

Your homepage will now look something like this: