Recreate the top header phone / email in a module


The Divi default header can be configured with a secondary header which displays, among other things, a phone number and email address. If you use a custom header built in the theme builder, you won't be able to make use of this secondary header. Here's how you can recreate the phone / email portion in a module that can be placed in your theme builder header.

To do so, add a code module to the page and then paste the following into it:

  .my-phone { 
  	margin-right: 13px;
  .my-phone:before {
    font-family: ETmodules;
    content: "\e090";
    position: relative;
    top: 2px;
    margin-right: 2px;
  .my-email:before {
    font-family: ETmodules;
  	content: "\e076";
    margin-right: 4px;
<a class="my-phone" href="tel:0412341234">04-1234-1234</a>
<a class="my-email" href=""></a>
Now you'll have something that looks like this:


Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.