Homepage Header with Font Awesome and CTA’s

Aug 18, 2016 | Free Layout | 4 comments

This is a simple layout I did on a client’s site that was featured on an Elegant Themes article and afterwards I received a few messages asking how I set up the middle area. It’s a nice start to a homepage, have fun adding on and tweaking!

Install the layout

  • Start a new page and find the 2 little arrows up top > choose Import and locate the .json layout file from your UNZIPPED folder and upload it.

Screen Shot 2016-08-05 at 7.07.28 PM

Add Font Awesome to your site

  • Go to Divi options > integration > enable header code > copy/paste the following code into the <head> area and save.

</> html code

<link href="//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">

Use the Font Awesome Cheatsheet to pick the social icons you want to use. For this layout I’m using text modules in text mode but you can use a code module if you prefer.

A Girl and Her Mac

Notes

  • The CSS can go in your Divi options panel, child stylesheet, or page CSS panel. The included CSS is a super small amount, what it does is center-align the social media follow module. All other styling is done in the modules themselves.
  • By default the center image will not show up on mobile and possibly some tablets (in portrait mode) because it’s an empty column with a background image, but if you did want it to show up you just need to add a divider set at about 250px height and make sure it’s visible on mobile in the module settings.