6.4 Create a Global Footer in the Divi Theme Builder

[Music] it's time to move all the way down from our global header down to our global footer and we're creating this one in the divi theme builder as well and as you can see we have our site logo up here linked to our home page we have a boilerplate a short description of the company here we have our social media links we have shortcuts with the most important links on our website we have the contact information and down here we have copyright information and we're going to do a little tweak so this year will be injected dynamically via the divi dynamic content feature so it will be updated automatically each year and last but not least we link to our privacy policy so we head back to our development website and go to our wordpress dashboard and we head down to divi and db theme builder and before we create our global footer i will head into our global header because we will recycle the social media icons that we use in the header and now it's hidden behind this little tab so i'll go to the wi-frame mode and here we have the social media follow module and i will save this one to the dv library by clicking the save icon the arrow that points it down and i will name it social media and i will save it to the library and we can exit and if i go to the dv library we can see that we now have something here we have a layout a module called social media and this means that we can use this one throughout our website and just easily import into any page or content well since the icons are actually white you can see it here in the white background but in a minute you'll see how it looks like in the footer so let's head back to divi and the theme builder and using the div library is a major time saver so i click add global footer and build global footer and we are building this one from scratch okay so let's have a look at the design we have one column here and we have two smaller columns here so this is the row structure we are looking for and the first thing we have to the left is an image so i'll insert an image module and we click the image and we will end up in our media library where we can find our logo and there it is so i will upload that image or insert it and before we exit this one i will click the link tab and i will simply enter a slash a shift 7 and this will be a link to our home page okay so let's add our background color so the logo will be visible so i click the cog wheel in the section settings and i click background and i choose the dark gray 1c1c1c and now it looks a little bit better already so we head back and here we have our boilerplate so i'll copy that text and let's insert a text module below this image module and i search for text and click the text module and in here i will paste the text but one tip here is that you can click this icon it's a t before you paste text because now you will paste the text in plain text mode so you will not get any formats if you paste text on word or an email or a pdf so now it's safe to paste the text content without any unwanted code or formats getting in the way good uh i think this text is a little bit dark and hard to read and it's also a little bit small so we're heading to the design tab of the text module and hit the text tab and let's start with the font first i want to use carla as we did before and i would also like this one to be white and i would like it to be 18 pixels so now it's a bit more easy to read good and then we have the social media icons so click the plus sign there we have it and instead of recreating the social media icons as we did in the header i will click add from library and there we have our social media layout from the div library so i'll click it and it's inserted so this is an awesome time saver i really recommend you to to save things in the dvd library to recycle them okay so we're finished with the left or the first column so let's go to column number two and here we have the shortcuts and the contact us columns so i'll insert another text module and we add the title shortcuts and i want it to be a heading three and let's go to the design tab to style the heading so i click the click the heading tab and i choose the heading three so we're going to introduce a new font and it's called cormorant garamond i wish i choose a font that i could pronounce but i guess it's too late now so this is a nice serif font and i will make it a white and probably a bit bigger maybe not that big yep something like that perfect we close that one and i could actually copy this one by hovering it and press command c on mac or ctrl c on pc and i can hover this column and press command v on mac or control v at pc to paste it so this is also a really quick way to recycle content now i just change the text to contact us and we have our two headings okay so the next step is to create this divider line the golden one so i'll insert a new module below the text module and i search for divider and there we have it and this is really nice and simple module it's just a line like this but you can style it pretty much however you want to have it so i go to the design tab and the line settings and the line color should be gold and it should be solid i can use like dashed or dotted and do lots of nice design settings here but i go for a solid line and the line position should be centered and the sizing i will add a little bit of weight so i think two pixels could be nice good and i will move it in a jiffy i will just add the links below first so we'll add these shortcuts home about us news and contact us i could actually copy this text to save some time and i'll insert a text module i will click the paste as text icon and let's paste it there we go and i'll make sure that we have real spaces because we are going to do a bullet list so i will mark these lines and i will click the unnumbered bullet list icon and there we have a bullet list okay so i will start by creating the links so we are linking to the home page so front slash just a shift 7 there and about us page click the link icon and we type about us so i don't need to type the whole domain url before this is like local links so it works fine just like that we have the news page just slash news oops could also choose to open in a new window here but i want to have it in the same tab or same window and we have the contact us page so the url is contact hyphen us good so let's change the colors we want the bullets to be golden and the links to be white and we'll hover we want the golden hover effect so i can actually take a shortcut here by hovering and clicking the icon here and i will jump directly to the styling settings for that element so here i can style the links so i want the link text color to be white and i want them to be golden when i hover so let's activate the hover settings activate hover mode and click the gold color there we go so here we have the idle mode and here we have the hover mode okay so let's style the bullet list that's this icon here and i want to use the font carla of course and i would like to have square bullets so here we have disks as default i could have add circles but i want to use the square ones and i want them to be in gold so there we go and close this one so now we have our white links with our golden bullets and i will also change the text size here to 16. there we go okay so now i can also style this spacing here which is a little bit too big so i will just grab it here and drag and i will do the same on the bottom so i think that looks pretty nice so now i can just copy this divider with the command c and i will paste it below okay yeah so i changed the spacing in regards to the text text module so then i can right click this one and i can choose copy module styles and i can right click this one and choose paste module styles so now i have recycled the styling settings from this module to this one so that's also a great time saver and now i can copy this one i can also right click here and choose copy module and i can go here and i can right click and choose paste module there we go so now we are creating these contact informations so i will copy that text and we'll go back and i will paste it so let's delete this activate paste as text mode and paste it and i will click enter in here just to make sure that we have real paragraphs otherwise the bullet list will not work so there we have a new bullet list and as you can see we have the correct um formats with the square bullets etc since we just copy this one so the design settings applies so the email address gets linked automatically we can see that it's mail to colon and then the email address so that's nice then we have a phone number and i'm going to show you how to make a click to call link this is especially nice for people using smartphones so they can just click the phone number and then they will call you so we mark this one and click the link icon and the url instead of mail to i will type till and call on and then i will paste the phone number i will remove the plus and i will remove the spaces just to make sure that it will work in all mobile oss and this is how you make a click to call link really simple there we go and we also have a address so we could link to maybe google maps or something there so i will just enter a bracket in there just like a temporary link and you could also link to zoom or whatsapp or or your facebook or whatever you use so let's just add a bracket there as well nice so there there we have our the first part of our footer we should also add this little line here this divider between the footer and the bottom bar so let's go back and i will mark let's see there okay yeah it's not full width so um let's mark this section and we go to the design tab and we click border and we're going to add a bottom border to this section sorry to this row so we click this one marking the bottom border and we'll make it one pixel or not two pixels looks good and choose the 666 no that's too light i go for the 333 color so that's look that looks really nice okay so mobile optimizing of course so we could click the different devices here to style it but i could also click command plus to go to go to the right so there we go to the tablet and then to the mobile and if i choose command minus or control minus on pc i will go to the left so we go to the tablet or to the desktop or the zoomed out mode so that's shortcuts for for the keyboard to switch which device you preview in so i click command plus and we are in the tablet view and i think this looks pretty good in tablets but i will increase the spacing between the social media icons and this part so i will go to the social media icon module the design tab and spacing and i will add some margin in the bottom but first i will click the device for the responsive editing and make sure the tablet is marked and then in bottom i will add maybe 50 pixels a little bit much 40. yeah i think that looks pretty neat so i'm happy with that so let's go to the smartphone view and that looks pretty good too i think i would like to actually center align a little bit of this content maybe even do that for the tablet view so let's go back there okay i want to centerline this image and this text and this social media icons but only on tablet and mobile so i'll go to the image module first and click the cogwheel i go to design alignment and then i choose to center align the image in tablet there we go and this value will be inherited to the smartphone as you can see and i go back to the tablet mode and i will center align this text module in the same way i go to the design tab text and let's scroll down and choose text alignment and first of all i have to make sure the tab is tablet is marked it's active there we go and then i will do the same for the social media icons design alignment responsive mode tablet and center line yeah this is a fine footer so let's save it so now we are going to add a bottom bar with copyright information and displaying the current year dynamically using the dv builders dynamic content feature so you don't have to sit up and wait at new year's eve every time and just open your laptop and go in and update your website i think it looks a bit crappy on sites where it says like copyright 2018 then the the website doesn't feel really updated so let's go back to the theme builder and i will add another row by clicking the green plus sign and this time we want to have two columns and to the left we are adding a text module so this is the text that i want to use copyright and the copyright sign 2021 and the company name so sometimes it's a bit hard to find this copyright symbol sometimes i google for it and copy and paste it because i never learned the short command for doing it but i found actually a better way in divi so i can mark this text and just delete it and there's a little icon here for special uh characters so if i click that one you can see a list of special characters and there we have the copyright sign so i take this one and i can just take command c or command x to cut it out so now it's it's i can paste it later so um i will begin by clicking this icon which is use dynamic content so this is perfect for adding for example dynamic dates or the current year and i want to choose current date so let's click that one so before the current date i want the text to be copy right and then i want to have the copyright character so i just press command v to paste it there we have it and then i have a space again the date format now it's june 14 2021 which happens to be the current date but i just want to display the current year so let's click this one and you have a few different date formats to choose from but nothing to choose the current year which i think is a little bit strange elegant themes you should have included that but luckily there is a solution so i will click custom and the code for current year is a big y so now we can see that it's copyright copyright sign 2021 and we can say baby for example after so there we go our dynamic text and of course we want it to look a little bit uh better more better readability so i go to the design tab and text and i choose white i choose my font which is carla and i choose the font size size 16. actually i can see that there's a space missing there so we go back to the content tab to the text and then we can edit this dynamic content by clicking the cogwheel and so here before the last text which is this one i'll add just a space so i hit the space button and now it looks better perfect so the last part in our bottom bar is to add a link to the privacy policy to the right i will actually copy this text module and i will drag it and paste it there so i have the right font i will open it now we can delete the dynamic content and i can just type privacy policy and let's link it so i click the link icon and the url is privacy python policy and i want it to open in a new tab so i'll click this one that says new window okay we can see that the link is blue i want to change that so i just click the pencil to go directly to the design settings for links and let's make it white and when you hover it i want it to be golden so i click the hover icon and enter the hover mode and click the gold color there we go idle and hover okay i want it to be right aligned so let's go to the text settings and in the text tab i can choose right aligned and now we have it in the right place so let's make a final look in the tablet mode and here we can see that it's breaking down to two columns placed on top of each other in a responsive mode and then it doesn't look too good when this one is right aligned and this one is left aligned and i think it's the same for the smartphone view yeah it is so let's fix that i go to the tablet mode again there we go and i edit the first text module by clicking the cogwheel i go to the design tab text and let's centerline this one in mobile so i click the responsive design icon make sure the tablet tablet is selected and then i center line it and this will be inherited to the smartphone as well and let's do the same thing for the last one we go to the cogwheel design text and the alignment which is right aligned and we go to the responsive editing for the tablet mode and i click center line and i click save so that's how we create a global footer that will be applied everywhere i guess i should actually reduce some of the spacing here so i will do it like that just to have it a little bit tighter in the bottom okay so we save and we exit we click save changes since this was the first time we did edit the global footer and we can actually preview it live on our website so we have our global header we scroll down and there we have our global footer and we have the copyright 2021 with the dynamic current year

Channel: DiviMundo

Views: 154

Keywords:

Id: 9UeTOXtSjNw

Length: 25min 27sec (1527 seconds)

Published: Fri Jun 25 2021