Homepage Header with Font Awesome and CTA’s
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.
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.
- 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.