Using Icon Boxes On Your Website With Elementor

Using Icons in Web Design
Icons are a great way to convey meaning to your site visitors with simple images. We show you how to use them with Elementor.

Using Icon Boxes On Your Website With Elementor

One of the challenges of good web design is to create content that provides relevant information quickly and effectively. Today’s web users have higher expectations and (it seems) ever shrinking attention spans. You might only have seconds to engage your site visitors before they head away from your web page in search of greener pastures.

Icon boxes are a great tool for creating engaging areas of content that draw visitors in. By using an icon to begin a segment of text you are using a visual symbol that is coded with meaning – it has been proven that users respond better to visual information when browsing a website and icons are a great way to achieve this.

Adding icons with Elementor is super easy as icons are included in a few basic elements and today we’re looking specifically at icon boxes.

Note that we are creating a row of icon boxes and duplicating the first one once we have design right. 

To create your boxes icons: 

  1. Drag a container onto your page.
  2. Drag three more containers into the first container. In the sidebar set the ‘flex-direction’ for the first or outer container to ‘Row – horizontal’. This will put your three inner containers into three columns
  3. Drag an icon box element into the first column.
  4. Click the ‘edit’ pencil on the side of your icon element to access the element options.
  5. Select the ‘content’ tab from Elementor sidebar to select which icon you would like to use.
  6. Set your ‘view’ type, title & description and the position for your icon. 
  7. Note that you can add a link to your icon so you can connect it with other content in your site. 
  8. Select the ‘style’ tab from the Elementor sidebar to adjust the size and colour of your icon.

 Once you have your icon looking great you can right click and duplicate your icon to quickly create a row of icon boxes.

 Icon boxes are like sound bites that convey more information with less space. They engage the reader enabling them to quickly scan and absorb some of you core business messages. 

Icons are a great way to get your message across!

Icon options

Share:

Browse by Category

More Posts