• You MUST be using a child theme to make use of this layout.
  • Before installing this layout please BACKUP your site.


Download and unzip the package, it contains the following files:


Css.css
Day 14 - Custom Header with Font Awesome Icons.json

header.php

menu-back.jpg



Step 1.


Navigate to Divi > Divi Library and click the Import & Export button at the top of the page.




In the portability window, click Import and choose the Day 14 - Custom Header with Font Awesome Icons.json file from your computer, then click Import Divi Builder Layouts.




The layout will now show in your Divi Library. Hover over the layout, and in the bottom left of your screen, you will see the URL for the layout. The ID number will show in the URL, make a note of this number as we will need it shortly.





Step 2.


Open the header.php file from the package in a plain text or code editor. Around line 38 you will see the following code:


<?php echo do_shortcode('[et_pb_section global_module="123"][/et_pb_section]'); ?> 


Change the number "123" to the ID number of the layout you imported into your library in the previous step and then save the file. Font Awesome integration is included in this header.php file to enable the icons.


Upload the header.php to your child theme folder, either via FTP or cPanel.




Step 3.


Open the CSS.css file from the download package and copy the contents to your child theme stylesheet or Divi > Theme Options Custom CSS.



Optional.


If you would like to use the menu-back.jpg image that is behind the logo, import it into your Media Library and update the URL of the image in the CSS code.