How to Create a Divi Mobile Contact Bar with Click-to-Call, Email, SMS and Direction Links

all right hello Debbie nation welcome to a brand-new Divi use-case livestream where each week we show you how to add new design and functionality to your Divi websites today in this tutorial we're gonna be showing you how you can create a Divi mobile contact bar with some click-to-call links a email SMS direction links that function inside of a mobile device so don't forget to check the video description for more info like a link to the blog post that goes along with this tutorial and hopefully we learn something new today let's get started first off I just want to make sure that you can all hear me and that I'm coming in loud and clear on your end so make sure and give me a thumbs up in the chat so I can know that you hear me you can while we're doing that we can just look at the screen here I've got a just kind of a sneak peek of where we're going what we're gonna be building this is a a shrunken browser window here and you can see the contact bar is down here at the footer area it is a fixed contact bar it's got the call link the email link the SMS or text link and the directions link and what we're going to be doing today is not only building the contact bar in a global footer template in Divi but we're also going to be showing you how you can create those links that will function in a mobile device for example when you click the call button it's going to initiate a call on your mobile device emails gonna initiate an email open up an email app things like that the text message of course will initiate a text message and then the directions link we're gonna be using a Google Maps link but you can also use things like Waze direct links to get those directions popped up on your mobile phones I know everyone's probably already familiar with these type of links but I thought it'd be good to walk you through how to exactly do it in Divi so Jonathan thanks for letting me know that you can hear me Mohammed hello welcome publicidad creative welcome to our livestream today all right thanks for Patrick for the thumbs up also I also like to know where you're from so feel free to let us know where you're from and you know communicate with each other in the chat maybe we can help each other out as we go along I'm gonna try to answer all your questions as we go along as well we already got a question from Christian is it possible to replace and Add to Cart button or Cart button hopefully that's more of the WooCommerce type thing a question there we're not gonna be addressing that in this tutorial per se but I think the answer is yes to what you're asking but yeah feel free to keep shooting those questions at me thanks Jonathan for letting us know that you are from South Africa we got Tomas I believe from Germany from shaquille from Trinidad welcome John from Indianapolis thanks for the shoutout if you're wondering the past few weeks we've kind of been off a little bit on our days normally we have our live stream on Tuesdays at this time we've been having them on Wednesdays just because we had some you know different things going on but normally we are here every Tuesday at 3 p.m. Eastern time so alright I'm gonna jump in and get started thanks for all the shout outs and the chats going on in there keep them coming first thing we're gonna do is I'm gonna open up WordPress here and right now you can see I've got my Divi theme builder open so to go there you go to Divi theme builder we're gonna be adding this contact bar this mobile contact bar throughout our whole website to do that you're going to want to add it to the Divi template and to do that you go to the Divi theme builder and then add a global footer here right now if I open it up you'll see that I've already built it here but we're gonna build it together and there it is down there in the layout editor alright so we're gonna start from scratch so I'm gonna delete that don't worry I made a backup and also there is a download in the blog post for you to try this out for yourself test it out on your own website just make sure that you do it on a test site or be aware that it will wipe out your or override your Divi default website template if you import it in there so just to let you know and maybe if we have time at the end I'll show you how you can add that template or import it to your own website alright so we're gonna we're going to open up a new or add a global footer here we're gonna build it from scratch so build global footer and we're gonna build from scratch and what we're gonna do is I'm going to create a 1 column row to start so I got my default section already there I'm at a 1 column row and before I start adding any modules I'm going to exit out and I'm going to update my section here now there's some things that we're gonna this is going to be a fixed contact bar it's it's only going to be showing on mobile devices because these contact links don't really work on desktop I mean they kind of do but they're really meant for mobile devices so let's see I'm going to open up the section settings here and like I said we're gonna be adding a fixed contact bar well to do that I'm gonna add a set height to this section and this is really so that I can set the row that's going to go inside of it to a height of inherit inherit because I want to inherit the height of this section so in order to inherit the height of the section I need to first give it a set height in other words I can't keep it at auto alright so I'm going to do that 80 pixels high and I'm gonna get rid of the custom padding bring this over here alright so my custom padding or my default padding excuse me let's set those to zero at the top and bottom and for my row settings I'm gonna it takes care of my section we'll come back and do one more thing to our section later as you can see it's got a set height of 80 pixels I'm gonna go to my row now open up my row and let's do a background so I'm gonna give it a nice maroon color background go to my design settings I'm gonna change the gutter with to one that's just going to take out any of those margins default margins in between the columns and we will have columns we're just going to duplicate our column to make the additional columns so just a heads up let's see with let's do 100% because I wanted to spam 100% on our mobile devices and also max with I'm gonna do 100% as you can see now it's spanning the full width there and for the height here's something a little different I'm actually going to type in the word inherit because I want the height to be to inherit the height of its parent element which is the section so which is 80 pixels all right for spacing I'm going to take out my top and bottom padding and set it to zero and this is kind of so forward-thinking here but for my CSS I might add some custom CSS here basically I want to add the functionality of base display flex so that I can Center the items vertically so each of these buttons will I want them to be centered vertically and even though it's not technically necessary it does make it easier to customize the the button to take out the text for example so once we have this in place if we take out our text and I'll show you that in a bit the icon will come and we'll come down and Center vertically within the button actually I I spoke too soon this is actually for the button to be aligned vertically within the row we're gonna do that again for the actual button itself to Center the icon so same thing just in a different spot alright so fixed positioning let's go down to our position property and we want to make our row fixed and you're gonna see it once we fix it here and put the location down at the bottom you'll see that now our bars at the bottom is what we want and let's bump up the z-index so that it makes its make sure it sits above all the other content on the page alright so now that our row is saved you'll notice that the row is down here but yet our section is still here and that's necessary because we want to keep it's kind of like a holding space so when we scroll all the way down to the bottom of the page that thick Rowe will have a nice spot to fit in so that it doesn't cover up like another footer or whatever it is at the bottom of the page all right so building the let's do the call to action I'm sorry the click to call email SMS and Direction links now we're gonna add them to our our our row to do that I'm going to add a blurb icon so let's add a blurb down there you can see because I have a set height there it's gonna be overflowing right now but it'll all be well once we take out this content that we don't need so we really just want a title so I'm gonna add a title here just call it call and I'm going to take out that image and use a I use an icon and I have some dark text so you really can't see it down there for the icon just gonna add a phone make sense and then let's jump over to the design oh here we need to add our link but we're gonna do that a little later let's get the design down first so the design tab let's open it up and change the icon color to that same maroon and let's do let's go back to our content tab I forgot to give it a background color this goes our background color set it to white all right now let's open back up our image icon option settings there use a custom font size let's make it 2 a.m. all right now this is the first of of I think two or three other areas where I'm going to be adding a length unit the the e/m length unit the m length unit which is relative to the body text that the and in this case I'm doing this because it's going to make it easier to resize our button later on by just updating the actual body text of the blurb so the body text size of the blurb which will kind of update all of the other elements that make up the button as well so I'll show you how that works a little bit later but just kind of keeping you in the loop as to why I'm giving it a to e/m normally you would maybe use pixels or something like that alright so the next thing we're gonna do is the title font so let's go to my title text and change the title text let's do all caps there make it all uppercase and let's make sure and Center it now you can see the down here that the the actual call sorry the call text is now centered underneath the logo or I'm sorry the icon and for my title text size I'm going to change it to one M or one M and so that looks good one thing I want to do though before I leave is set the actual body text even though I don't have any body text on this button I do want to add a body text size because it's going to size everything else on my button right now it's set to 14 pixels actually going to cut it down to 12 you can see that that has shrunk the actual icon itself and also the title text is we're working with mobile buttons here so we got to remember and make them pretty small now let's go to the size of our blurb right now it's too too wide we want to make it a set height and width so let's change the width to 4.5 m/s there it is way over here in the corner and of course m's again because it's based on the body text and we want to make the height the same thing the same value because we want it to be a perfect square and also if you ever wanted to make it circular you can do that as well let's Center it now there it goes right in the center there we've got a little bit to default a little bit too much default spacing down there that's why you really can't see that text yet we're going to take that out in a moment let's go to our padding here and for the top padding I'm going to do a point 5m top padding that just brings down that icon just a little bit to make it a little bit more centered and let's do the next let's add a box shadow this is just to kind of make it look really subtle a little effect to make it look more like a button all right ad let's do I think it's this one here and then we're gonna add zero a horizontal position or box-shadow a horizontal position and then for the vertical let's do two pixels it's just a very slight bottom box shadow there we're not gonna use any blur we're just going to change that color to a white color but we're gonna take it down just a little bit maybe about 50% transparency or opacity there and then let's do our rounded corners so let's go back up let's do a border let's just add a rounded corner I think I did 10 pixels something like that maybe five just so that it's not so sharp on the edges and then let's go down and last thing we're gonna do is add our custom CSS like I told you before we're gonna do the display flex a line-item Center so that those items can the elements within the blurb can be aligned vertically centered and then let's take out that bottom margin underneath the image or the icon I say take out we're just gonna margin bottom let's do 0.3 m's and there you go now it looks like a nice button there and this will be a great start for all the rest of our buttons so alright so now we need to add the call link this is actually a click to call button so let's add our link and real simple if you ever made call links on your website before you know the basic HTML structure or whatever is basically having the te l : prefix before the number right there and then adding your number I'm pretty sure yeah it works even with or without the dashes so you just add your phone number here and you know if you want adding your country code all right set a country there you go something like that so yeah that'll work it'll open it up in your mobile phone getting basically prompting you to say or with a kind of like a notification or a pop-up saying you want a call using this app or something like that all right so that's all you need to do let's save that out and let's do a quick let's save it really quickly and let me open it up I save my changes let's open up the site in a new tab here I shrink it the browser window a bit all right so if I click to call this on it from a desktop it's kind of it's gonna like ask me right now you want to make a call from FaceTime so it will work to some degree on a desktop but it's really meant for mobile devices but this is a cool way to kind of make sure that it's actually working you can also just test it test it on your mobile phone as well all right let's uh minimize that let's go back into our global footer layout let me see if I have any questions I can answer if you're just joining us do want to welcome you to this week's to be used case live stream and in this tutorial we're showing you how you can create a mobile contact bar with click to call email SMS and directions links in there and this of course is using our Divi theme and the Divi Builder if you have any questions feel free to reach out in the chat also check out our a link to the blog post that goes along with this tutorial in the video description below alright let's check out these questions with Christian also asked what about a search button I'm assuming in addition to are you are you asking the question whether or not you can replace the search button and the Cart button within the Dibby menu specifically if you could clarify that that could probably point us in the right direction but if you know feel free to reach out to our support team on our website you just start chatting with them in the bottom right chat application that'll help you out but would love to help you if I can I think we're good I don't see any questions here yet Bonjour Nicholas welcome all right let's jump back in we've made our first button so now what we're gonna do is I'm gonna deploy because things are getting really small and and and maybe hard to click on I'm gonna open up my layers view here for those of you who don't know what that is let me see if I can show you what that is zoom out all right so layers view if you open up the Divi menu here settings menu over here and the rights portion there's the layers view so imma open that up and that will allow me to access some of these elements without having to hover or click on them I can just do it from this nice layers view it's kind of like of course if you were building in Photoshop or illustrator things like that so here's my blurb I don't want to duplicate my blurb I'm actually going to duplicate the entire column because I want those buttons to fall in a nice horizontally adjacent to one another so let's duplicate the column from here as you can see another button was created along with a new column now it's a two column structure I'm gonna open up that second blurb with in the right column there and update the title to say which one are we doing next let's do SMS now let's do email sorry you know doesn't matter but that's the order I have it on mine so that's what we're going to do and let's do email icon which is the typical envelope icon there you go I'm gonna come back and update that link in a moment well we can do it now because there's really nothing left to do design wise on this button so I'm going to update my module link URL by the way I'm adding it to the module link URL not to the title link because I don't want to have to just click on the title to initiate the email I want the whole button to become a link so all right so to do that let's just update this so instead of the Tal or telephone prefix you're actually going to use the mail to prefix with the email address that you want to basically send it to so and that's the basic structure of the link URL so pretty simple there are customizations you can do for example like adding a subject automatically and feel free to look to the blog posts for links to those websites that kind of help you make more custom links like that which is kind of nice you know if you wanted to add a subject automatically to your email for users to kind of get a jump start on sending you a message things like that all right so that's our ma mail let's do the SMS now our text link to initiate a text message but to do that I'm going to duplicate our column again our second column to make a third one with another button let's click on that third one in the right column and update it to say SMS or you can say text that makes more sense and then let's update the the icon with the you know something like a chat icon and let's for the link here our prefix is going to be SMS and then you're going to change it to your number that you want to text to and simple enough save that out excuse me duplicate the column one more time to make a fourth one go to my blurb settings for that button change the text to read or the title to read directions or dir because I can't really fit directions in a small button so but I looked it up that is an acceptable abbreviation for the word directions alright let's go down and add a directions icon always sometimes have trouble finding the right or the icon for some reason all right I'm not gonna spend too much time there it is it's right there in front of my face okay oh uh sorry about that close it too fastest reopen those settings and let's go to our link this one is going to be a little bit more complex because we're going to be basically using a link to be used inside of the Google Maps app or if you don't have the app it'll open it up on the Google Maps website and this specific functionality is going to or its supposed to doesn't work like 100% the same way every time but it's supposed to open I'll just show you supposed to open up a map with the the with your location if you're the user it'll locate where ever you are and then it'll give you directions to the destination address automatically so which is really cool I'm going to show you the the module link URL that I built here I'm gonna I'm going to try and zoom in here for you okay so here is alright so here's the module link URL the first part here can stay the same and there's a link in the blog post that goes along or that kind of shows you the link to the the Google Maps documentation that shows you how to create these links you can do other things like you know well there's a lot of things you can do can't think of all of them right now but this one specifically if you use this first part of the URL on your for your own site and then as is and then on the right side you'll see that this is basically an address that is separated by a plus symbol for each of the words so this is kind of a helpful you know you'll need to test it out of course after you build it but this should work and it should open up and I'll just open up this link for you in a new browser window to show you what it'll do okay so there you go it opens up my location and then with the directions already set okay so let's go ahead and save that out see if we have any questions one thing we need to do of course if you don't want it to show on desktop and only on mobile you'll want to go to our section here section settings and go to our visibility and make sure that you disable it on desktop it'll become faded out on desktop view in the Divi Builder but after that you're good it'll only show up on tablet and phone let's open up our save it and open up our live page or a live page to see it make sure to save the theme builder settings it's going to visit the site as you can see I'm on desktop view so I can't really see the changes there so I'm gonna pull it out here start shrinking the browser window and you can see it'll kick in on tablet view stays fixed and as I scroll down it'll it'll as I mentioned earlier it has a spot within that section down there to hold that spot so it's not overlapping any of this content here let's see if I open it up let's inspect it again get let's do a mobile or sorry like a iPhone view here and let's click on some of these just to make sure they're working the call button looks like it's working the email will you know ask me whether or not I want which application I want to use for the email the text wants me to open up messages but this is all on desktop I'm just checking to make sure they're working this will function differently on a mobile device and then for the directions if I click on it it will work its magic ask me if I want to stay on the web or continue to the mobile app so that looks like it's working all right any final questions before we in our livestream today maybe maybe it's not a question maybe you want to let us know some awesome new thoughts that you have we'd like to hear them let's check out Facebook all right Rolf nice to see you here all right so that is how you create the contact bar in Divi a mobile contact bar again check out the video description for a link to the blog post if you have any questions and I think we're gonna call it quits for today all right that's all I got for you this week everyone thanks for tuning in and please be sure to make sure and excuse me subscribe to our blog newsletter our youtube channel and like us on Facebook make sure you click to receive notifications that way we can notify you every time every time we have something new for you we have another Divi use-case livestream next week should be a Tuesday at 3 p.m. Eastern but before then this Friday we have our WP roundup weekly WP roundup I have 3 p.m. Eastern on Friday so be looking forward to that and also check the video description for a link to for more information on how you can contribute your own unique content to our elegant themes blog thanks again for watching we look forward to seeing you in our next video you

Channel: Elegant Themes

Views: 4,275

Keywords:

Id: jf4xhooiXkQ

Length: 41min 27sec (2487 seconds)

Published: Wed Jun 03 2020