Divi Social Media Follow icons are useful but we often find ourselves wanting to mix (and align) them with text in a table. It turns out that achieving something like the following is not that easy –

Twitter URL

Facebook URL

foo@baz.co.uk

If we had enough columns we could put the icons (right aligned) in one column and the text (left aligned) in another. Keeping each icon/text  pair lined up with each other might be tricky though. Also, we are often trying to do this in situations where all columns are already occupied, in a footer for example. 

We will use Flex to create a table of icon/text pairs. We will use a single column to do this. Flex is an incredibly useful tool for laying out a flexible and responsive grid of objects. It is part of CSS and is widely supported by all modern browsers.

Because we are going to use CSS to make changes to our layout, we recommend using a child theme for this. There are many good articles on the internet about creating child themes. You can, of course, either use a CSS plugin or put your CSS into Divi->Theme Options->Custom CSS instead.

Just note also that the eagle-eyed reader might have noticed we are using an email icon in our example. This is not one of the built in icons in the Social Media Follow module. There are some fantastic articles on the internet about customising the Social Media Follow module including how to use Font Awesome instead of the built in icons. Links to these very useful articles are provided at the end of this blog.

Backend Setup

If we assume that we have only one column to use then we are actually quite limited in what we can do. So, an obvious structure to use in the backend would simply be to insert Social Media Follow modules and text modules in the column, alternating – 

Each Social Media Follow module displays a link for only one network. With no additional styling or changes this would produce a column of center aligned icons and left aligned text modules –

Twitter URL

Facebook URL

foo@baz.co.uk

Setting Up Flex

Another reason for choosing this pasrticular backend structure is it makes it easy to set up Flex. You need to specify a flex container. This is the parent element and all of its children will be able to be managed using Flex. So, deciding to place all of the Social Follow and Text modules within one column, with nothing else in the column, means that the obvious choice for the flex container, the parent of the objects to be managed, is the container.

So here is a little CSS to set up the flex container –

.sfc {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}

Just copy this into your child theme (or into Theme Options->Custom CSS) then carefully add the sfc class (without the initial dot) to the appropriate column of your Row Module. So, if you are using the second column of a three column row add the sfc class in Row Settings->Advanced->CSS ID & Classes->Column 2 CSS Class. Doing this applies the CSS above to the specific column into which we have placed our social follow icons and text.

We will explain in a moment what this CSS is doing (and why it does not appear to have had an effect). For now, let’s just check that we have managed to set up our column as a flex container. The easiest way to do this is to use Google Chrome Inspect (or equivalent) to examine the HTML. On our machine, if we right-click and select Inspect in Google Chrome we see this –

 

Firstly, the et_pb_column into which the icons etc. have been placed has had a class added to it. We have called it sfc-1, simply to allow for easier display of different versions of the code in this blog. Don’t worry about this, you should see a class of sfc added to your page. We can also see, after making sure to select the Computed tab in the lower container, that the values of display, flex-direction and flex-wrap are also set as we intended. So that looks good.

Now, very briefly, what is this CSS code doing? Well, it is simply telling the browser that the et_pb_column is to be a flex container (and that all of its children will be managed by flex – more on this in a moment). It also sets the flex-direction to be by row rather than by column and it tells the flex container to wrap the children at the end of each row. These last two, the flex-direction and flex-wrap are what allows us to make a table of icon/text pairs. We will later force the width of each ‘pair’ to fill all of the column width, so flex will wrap after each icon/text pair. We will see how to do this right now.

Creating Rows of Icon/Text Pairs

 We have set up Flex to wrap at the end of each ‘row’. What we need to do now is set the width of each icon/text pair so that it fills these ‘rows’. That is actually easy, provided you are willing to mkae an assumption about the width of each icon. Let’s assume that the icons are not going to be wider that 80px. If we do this, we can use the following code to make sure that each icon/text pair fills the column width, and forces a wrap onto the next ‘row’. Add this CSS to the existing code.


.sfc .et_pb_social_media_follow {
    width:80px;
}

.sfc .et_pb_text {
    width:calc(100% - 80px);
}

What this does is to first set the width of the Social Media Follow icon, then set the width of the text module to be the width of the column (100% of the parent – in our case, the column) minus the width we set the icon to. In other words, the icon/text pair always takes up the full width of the column and the next icon/text pair is forced to wrap onto the next ‘row’. We have created rows by setting appropriate widths for the Social Follow icon and the Text module and forcing Flex to wrap. We just need to remember that we have assumed a maximum width of 80px for these icons….

Here is what this should look like when you insert the additional CSS –

Twitter URL

Facebook URL

foo@baz.co.uk

Tidying Up Whitespace

Now, we just need to give some attention to the whitespace and alignment of the items. To do this, we are going to rather brutally remove all padding and margins from all of the modules, apart from a little whitespace on the margin-bottom to just separate the rows vertically. As it happens, there is also a little margin beneath the icon images and their links so we remove that too (we will explain why in a moment). Add this CSS to the existing code –


.sfc .et_pb_module {
    margin:0px 0px 8px 0px !important;
    padding:0px !important;
}

.sfc .et_pb_social_icon, .sfc .et_pb_social_icon a {
    margin:0px !important;
}

And here is the result –

Twitter URL

Facebook URL

foo@baz.co.uk

Just note that the spacing between the icon and its ‘partner’ text to the right is controlled by the icon width setting. We used 80px. Setting this to a number that was nearer to the width of the icons would reduce the gap.

Center Aligning Vertically Using Flex

So, if you weren’t convinced already that Flex was useful, let’s look at something Flex does very easily that is usually very difficult to do. Did you notice that, even though the icon/text pairs were aligned with each other, they are not center aligned vertically within the rows? Flex can do that by simply setting  align-items:center; on the flex container. Remember, in the previous step, we carefully removed all margin and padding from all modules apart from a little margin-bottom. We did this partly so that the vertical align would work without other whitespace getting in the way. So, to do the align, change the original CSS for the flex container to be –

.sfc {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
}

…and you should see the difference –

Twitter URL

Facebook URL

foo@baz.co.uk

Final Code

.sfc {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
}

/* remove the whitespace to allow flex to line these up */
/* set margin below all modules to allow vertical spacing and align properly */
.sfc .et_pb_module {
    margin:0px 0px 8px 0px !important;
    padding:0px !important;
}

.sfc .et_pb_social_icon, .sfc .et_pb_social_icon a {
    margin:0px !important;
}

/* force the width to be a specific size - must be big enough for the icons though */
/* this also creates whitespace between the icon and the text */
.sfc .et_pb_social_media_follow {
    width:80px;
}

/* CAREFUL - this is the width we allocated for the icons..... */
.sfc .et_pb_text {
    width:calc(100% - 80px);
}

Other Resources

As we mentioned at the start of this blog, we have added an email icon to the Social Media Follow module. We did this by using a technique described in one of the articles below. The article explains how to extend the icons available to the Social Media Follow module using the Socicon icon font. In fact, this approach can be used for any icon font set, including Font Awesome, which is what we tend to use. When we do this, we also replace even the built in icons with their equivalent icon from Font Awesome. This is so that we avoid having a mixture of icons from two different fonts. That way, we get consistant styling and sizing.

Understanding Flexbox: Everything you need to know

The Definitive Guide to the Social Media Module  

ADDING MORE ICONS TO THE SOCIAL MEDIA FOLLOW MODULE

If you found our blog article useful, why not subscribe? Get all of our articles and tutorials delivered direct to your inbox!

You have Successfully Subscribed!