Now that our section is ready, we are ready to customize the row to serve as the fixed contact bar. We will also take out the default top and bottom padding as well. This is important for creating the space at the bottom of the page where the fixed row will eventually come to rest. Inside the Global Footer Layout Editor, begin the design process by adding a one-column row to the default section.īefore we start adding modules, open the section settings give it a set height as follows: NOTE: If you already have a global footer, you can open edit the global footer and add the contact bar in addition to the current footer. From the dropdown, select Build Global Footer. Then click the Global Footer Area inside the default website template. Start by navigating to Divi > Theme Builder.
Now, let’s get to the tutorial, shall we? Part 1: Creating a Global Footerįor this tutorial, we are going to add a mobile contact bar to the global footer using the Divi Theme Builder. Lastly, save the Theme Builder changes and view a live page to see the fixed footer bar. Inside the portability popup, choose the JSON file you just unzipped and select the option “Download backup before importing”, just in case you had something in the default website template previously that you didn’t want to override. Then click the portability icon at the top right of the page. Then go the WordPress Dashboard and navigate to Divi > Theme Builder.
Phone number contact bar html download zip#
To import the fixed footer bar template to your own website, unzip the download zip file to access the JSON file. We suggest adding this to a test site so that you don’t mess anything up on a live site. WARNING!: Adding this template will override the default website template (if you have one) on your Divi site.
Phone number contact bar html how to#
Please check your email address to confirm your subscription and get access to free weekly Divi layout packs! How to Add the Fixed Contact Bar Template Download to Your Divi Site You will not be “resubscribed” or receive extra emails. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. To lay your hands on the designs from this tutorial, you will first need to download it using the button below. Here is a quick look at the design we’ll build in this tutorial. Then we will add custom URLs to each contact link to bring home the functionality we need.
To do this we will be using the Divi builder to design the bar and the buttons on a global footer.
In this tutorial, we are going to show you how to create a Divi mobile contact bar with Click-to-Call, Email, SMS, and Directions Links. These are really convenient for users and a must for certain businesses.
Others, like a directions link, can open directions to a business address in Google Maps. These contact links, like a click-to-call link, can jumpstart a call on your mobile phone in a single click. With the world living on mobile devices, it makes sense to provide clickable contact links on your website that take advantage of the mobile experience.
0 kommentar(er)
