How to Design Icon Buttons with Divi’s Icon Module

Nov 23, 2021 | 0 comments

Icon buttons have become essential to the world of web design. Icons provide concise visual calls to action that work great for mobile devices because they don’t take up a lot of space. They also work well as toggle or popup buttons that users intuitively recognize without the need for text.

In today’s tutorial, we will be showing you how to design icon buttons with Divi. Creating an icon button in Divi is quite simple and fun to do. Using the Icon Module, we can choose from hundreds of icons and use countless built-in Divi Builder design options to create just about any kind of icon button you can think of. Hopefully, this article will help empower you to start building some amazing icon buttons for your next project.

Let’s get started!

Sneak Peek

Here is a quick look at the icon buttons we’ll build in this tutorial.

Download the Layout for FREE

To lay your hands on the layout from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}

Download For Free

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

To import the section layout to your Divi Library, navigate to the Divi Library.

Click the Import button.

In the portability popup, select the import tab and choose the download file from your computer.

Then click the import button.

divi notification box

Once done, the section layout will be available in the Divi Builder.

Let’s get to the tutorial, shall we?

What You Need to Get Started

expanding corner tabs

To get started, you will need to do the following:

  1. If you haven’t yet, install and activate the Divi Theme.
  2. Create a new page in WordPress and use the Divi Builder to edit the page on the front end (visual builder).
  3. Choose the option “Build From Scratch”.

After that, you will have a blank canvas to start designing in Divi.

Part 1

Building an Icon Button

To begin, let’s add a one-column row to the default regular section.

Then add a new icon module to the column.

Icon, Link URL, and Background Color

Under the content tab of the icon settings modal, update the following:

  • Icon: Right Arrow (see screenshot)
  • Icon Link URL: # (just a filler for now)
  • Background Color: #3e22ff

Border and Border Radius

Under the design tab, update the following:

  • Rounded Corners: 10px
  • Border Width: 2px
  • Border Color: #7272ff

Box Shadow

  • Box Shadow: See screenshot
  • Shadow Color: rgba(62,34,255,0.48)

Matching Clickable Space with Icon Button Size

Currently, the icon module will span the full width of the parent container (or column). This means the clickable space is larger than the actual icon button. To match the clickable space with the size of the icon button, we can give the module a max width that is the same as the icon button width. The icon button width can be determined by adding the icon width, the left and right padding, and the left and right border width. In this example, the total button width is 94px.

Under the advanced tab, add the following custom CSS the Main Element:

max-width: 94px

Building a Square Icon Button

To create our square icon button, duplicate the row containing the first icon button we just created. This will give us a duplicate button in the duplicate row to work with.

Give the Icon the Same Height and Width while keeping it Centered

The large collection of icons available to use in the Icon module include both Divi icons and Fontawesome Icons. However, not all of the icons will have an equal height and width. This makes it a little more difficult to determine the exact width and height of the icon button. We could make adjustments to the padding to get the dimensions just right, but this is a bit cumbersome and could limit some of the hover options for the icon. For example, adding padding to the icon module will create space around the icon. So, if you create a hover option to change the icon color on hover, the icon color wouldn’t change when hovering over the space (or padding) around the icon. It would change only when hovering over the icon itself.

In order to create a perfectly square button that engages the icon on hover, we can add some custom CSS to set a height and width for the icon as well as center the icon using the CSS Flex property.

Here’s how to do it.

First, open the settings for the duplicate icon. Then update the icon with a new one from the icon picker.

Take out the padding for the icon module. This won’t be needed since we will be setting a height and width for the icon.

Under the advanced tab, add the following custom CSS to the Icon Element:

height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;

Now the icon button will have an equal height and width of 90px which will make it a perfect square. Plus the flex property aligns the icon in the center of the module. This allows you to update the icon size within the icon module with ease.

This post was originally published on this site

%d bloggers like this: