Elementor Footer Design Tutorial #1

beautiful web design is often the result of small details so in today's episode I'm going to show you how to create a beautiful minimal footer for your WordPress website with elemental pro and essential Adams Pro for element or lot of the piece hello I'm your host casino I'm a digital Alchemist and today I'm going to show you how to create a beautiful minimal footer for your website now actually as I was carrying the web for beautiful fuller design inspiration I landed on a few beautiful examples and I would probably create a few tutorials for each now I'm not telling you to literally copycat those footers but I believe that by showing you how to replicate them you'll be able to push the limits and create beautiful footers for your designs as always you find fitted links in the description of this episode okay so enough talk let's learn okay so first let's have a look at what we're going to build and this is carbon beauty so it's the initial website and we're going to try and replicate this beautiful minimal footer here so let's have a look at what I've already built and what we're going to build in this tutorial as you can see it's pretty much the same thing so let's go back to the initial website and this is what I came up with now as mentioned in the intro the idea here is not to literally copycat and what we're going to see today but I just want to show you the process and hopefully then you'll be able to push the limits and then you can build whatever you want now for this tutorial we'll start from this page and as you can see we still have the old footer here so first of all it's going to WordPress back-end and let's go to plugins and the first thing you want to make sure is that you have elemental pro and essential add-ons for element or the pro version because we'll need that to complete the tutorial now I also have Astra Pro but you don't really need to have the pro version actually you can use pretty much anything you want with this tutorial I just happened to be using Astra but you can use whatever you want for that we won't really need the team the theme actually so next we you need to move to template team builder okay then let's move to footer and we're going to add a new footer let's call it footer p1 for example okay so we can either choose one of the templates from Elementor Pro or we can create one from scratch so we're going to create one from scratch so let me close that and just to be sure let's go back and let's have a look at what we trying to achieve here so this is this is the the initial website and this is what we've built okay so let's take this as a model so and the first thing we're going to do is to create our structure so first of all let's create a one column structure and for this section we're going to make the content with full width okay next we want to go to advanced and we're going to give it some padding so first I'm going to unlink the padding values and then I can start so it's going to be 70 on the top 120 pixels on the right 90 pixels at the bottom and 120 on the left okay then I'm going to select my column and I'm going to give it zero padding altogether okay so next I want to add a widget I'm going to click on to the widgets icon and I'm going to add an inner section okay so once again for my inner section I'm going to keep it full width then I go to the Advanced tab and I'm going to give it zero padding okay so for this first section I'm just going to remove one of the columns and next I'm going to duplicate the inner section and for this inner section I'm just going to create three columns so to placate and once again duplicate now if you seems a bit complicated complicated for a moment just bear with me you'll understand what I'm doing in a moment okay and the last step for the structure I'm going to duplicate the last intersection okay so that looks good so let's go back so this here would be the first section then here it would be the second section with three columns and same thing here we'd have two empty columns and the third one in the middle here and basically that that's no structure so the first thing we want to do is to create this title with um with the line dividers here so we're going to look for a widget called divider by essential add-ons so it's this one here so I'm just going to drag the widget here and here we have a few options so I'm going to select text and I'm going to call it carbon just like you see here okay and next we want to change the type of lines here for the divider and also the length so for that let me go to style and first of all in the star I'm going to select solid okay and then I'm going to give it a height of one pixel so if I look here yeah the the height is definitely one pixel next I'm going to play with width okay so actually I'm going to select percentage here and I can go 100% okay so let's have a look okay we're almost there next I want to play with the spacing so for that let me go to the text tab and I'm going to play with the spacing so let's have a look okay 200 pixels it seems okay and finally I want to play with the with the typography so click on the edit icon I'm going to change the font to lotto then for the font weight I'm going to transform it to uppercase oh yeah let's not forget the font size is going to be 21 and then I'm going to give it a letter spacing of seven okay so let's have a look yep it looks good to me okay so now that we've taken care of the first section we want to create this section here okay so for that we need a widget called oops so it's the I can list and that's from Elementor pro so I'm just going to drag it here I'm going to remove most of the content keep one item remove the icon and I can start typing the texts that we see here so privacy policy privacy okay then I'm just going to duplicate that first item and duplicate it one more so let's change that to terms and conditions and the last one is about okay so let's start customizing it because you want it to look like this so let's go back let's move to style first of all let's make it Center by clicking here and next let's play with the typography so first of all let's make sure that the text color is black and next let's edit D typography so the size will be 10 okay the weights 600 we want to transform it to uppercase the line I to be 28 pixels and the letter spacing is 2 so let's take a look yeah looks good ok so once we've done that oh yeah one thing I forgot we can add some some hover effects over the text so I'm just going to select a dark grey so when we hover over the items you can see yeah you can see that the change of color okay so once we don't we've done that we're just going to copy that widgets and paste it in the third column and let's change the text so shipping info next is returns exchanges and the last one is contact okay next we want to look for a widget called social icons so we're just going to drag it here in the middle column and we want Twitter first then Pinterest and last but not least Instagram okay so we want to make sure that the shape is circle and next we want to move to the style tab we don't want to use the official color you just want to just want the custom color and we're going to select actually black as a secondary color and the primary color should be completely transparent actually we can make it whites same result okay the size is way too big so 28 seems fine and spacing should be around 16 okay so let's have a look yes looks good but as you can see when we hover over the item there's a there's a kind of animation and then the colors are inverted so let's go to I can hover so primary colour should be black secondary color should be white so it works and we can add an animation and I'm going to select the bouncing animation so yes that works okay so let's have a look next we want to add that vertical divider so once again we're going to add the divider from essential add-ons so I'm just going to drag this just underneath the social icons and for the direction I'm going to choose vertical then let's move on to the style tab and the width should be one pixel the style should be solid and let's have a look it's a bit too too tall for the moment so I'm just going to make it smaller yeah should be we should be good with sixty pixels and even though it's already black by default just make sure you select black just to be on the safe side okay so let's move and let's take a look next we have the weekly newsletter the newsletter form and the copyrights and the year right here so for that we're going to use the third and last section so first of all let's select a title heading actually and I'm going to drag it here so it should say weekly newsletter so now let's make sure it's a line in the center next let's move to the style tab let's make the text color black and let's play with the typography so the font size should be 14 pixels we want to transform this to uppercase and we want it to give it a letter spacing of two yeah looks good to me next we want to create this newsletter subscription form so for that let's look for the form widgets and let's drag it here underneath so it's doing plain ugly but don't worry we're going to fix that in a minute okay so first of all just remove the name and message next we want to hide the labels and then the first thing we want to do is to change the email field column width so let's change that to 75% next we want to change the submit button column width and as you may have guessed we're going to change that to 25% okay so next let's move on to the style tab so the columns gap should be 0 we don't recap about the rows gap for a moment now for the text color we're going to keep it black and let's play now with the field so text colour should be black also the background color white is fine next the border colour should be black also and the border width should be 1 but actually we don't want a border on the right-hand side so I'm just going to unlink the values and the right-hand side will be 0 and you'll understand why in a second next the border radius should be 0 also so that it's plain rectangular or form or shape actually next we want to move to the button and for the button background color should be White's the text colour should be black and the border type should be solid one pixel and the border radius should be zero now as you can see we are almost getting there but not quite because there's a like a pixel difference here so in text padding we're going to use 20 pixels of padding and as you can see now it's way too big compared to this one now if we go back to the field and fortunately there's no option to play with the padding so we're going to have to add some code here so I already have the code prepared for you but I just want to show you what it looks like and how you can find where to how and where to add the code so I'm just going to click on publish I'm going to add a condition I want to include the footer on the entire website so I'm just going to save and close okay so now it's updated so let's move back to the front end so this is a current website and I'm just going to refresh the page and as you can see it's starting to look good but not quite because we still have this issue here so I'm just going to right click click on inspects so I'm using Chrome by the way so this is the fields that are selected in the inspector and basically what I can do is just click on the plus sign here to add a new rule and then it takes knowingly knowing a little bit of CSS but no more if you don't know CSS because we show you the code you can just pause this video and just copy the code but basically I'm gonna add padding and then 20 pixels but now it's too big so I can just play with the value and I can see that with 17 pixels it's fine okay so I'm just going to copy this code here and then let's move back to Elementor and because you have elements are pro you can just add CSS code here so I'm just going to click on the gear icon here for the settings then on to the Advanced tab and I'm just going to create some piece of code actually that I just copied from google chrome and now it's looking fine now a good practice is to comment your code so I'm just going to do that and I'm going to add I just fix the form padding okay so now we can update and now if move out of the chrome inspector and i refresh the page yes it's looking good so let's move back to the previous example so we're almost there just need to play with some spacing and some other things but we're getting there okay so once we've done that let's move back you can see that the typography is different and I've actually Center the placeholder text here so and here we see left the old typography so let's move back to Elementor and let's select our form now let's go back to the field typography and I'm going to give it a font size of 10 pixels I want to make it bold uppercase and I want to give it a letter spacing of two okay now that we've edited the typography you can see that there seems to be a difference between the the form field and the button but that's gonna fix itself in a moment so let's move to button type ography let's give it a font size of 10 let's also make bold transform upper case and it's also given a letter spacing of two okay and actually we can go back to text padding and change it to nineteen and now it looks perfect pixel perfect so let's update okay and now if you go back and look at our initial example you can see that it's looking pretty much the same except that the text here of the placeholder is in the middle so for that we need to add some CSS code you don't have to do it at this point you can leave the texts aligned on on the left hand side but if you want to know how to fix that basically we need to add some CSS code so click on the Settings gear icon at the bottom left corner then go to the Advanced tab so underneath the the code that we've copied and pasted previously I'm just going to paste some other code and once again if you don't know CSS no panic you can actually just pause this video and copy the text here so let me see if I can make this bigger so you can have a better view okay for some reason I can drag the the window but you can just pause so let me close that back okay next let's have a look and we just need to add the copyright and the year so for that I'm just going to actually I'm just going to duplicate that title and I'm going to drag drag it underneath the form but we don't want to use an h2 so make sure you select the proper heading we're just going to use a span then go to the style tab and I'm going to change the typography settings to ten and for the rest it's looking good so let's move back to the content tab and I'm just going to replace the text with the copyright ends 19 now let's update and it's looking good so let's look at our initial model and I'm just going to change some of the margin and padding settings because you can see there's more space here then we have over here what else the rest of the spacing we could add some more spacing on top here and some more spacing between the forum and the copyright in the year okay so first of all let's select our first section here so I'm just going to click on the section then go to the Advanced tab and we want to unlink the margin values and we want to give it a margin about a margin of 30 okay next select our vertical divider go to advanced and same thing we're going to unlink the margin values and we're going to give it a bottom margin of 20 and next this is the last item here so I'm just going to select the copyrights and the year moves to the Advanced tab once again adding the values and now I'm going to give it a top margin of 15 pixels okay so let's update that let's refresh our page yes so it's looking much better okay so actually we can you can see the the only difference here now is that the in the example that we've just created the form is a bit too wide compared to what we done previously so let's go back to Elementor now let's select our middle column and then click on advanced and actually we want to give it some padding so I'm just going to ending the values and I'm going to select percentage then I want to give it a 10% on the rights and 10% on the left okay so nice looking much better and if we look on the front end yeah that's what we wanted so it's the same width we just need to change change the text if you want to match it to name at email comm and subscribe so let's do that select the form change the placeholder text to name at email comm and the submit button to subscribe okay so now let's have a look at the mobile version so this is what the mobile version should look like okay and let's take a look at what we currently have and as you can see it's completely messed up so no worries for that I'm just going to show you how we can fix this so let's go back to Elementor and let's open the navigator by clicking on the icon in the bottom left corner here or you can use command + I on the keyboard on the Mac and I believe it's control I on a desktop PC so first of all let me rename that section to desktop and then I'm just going to duplicate this section and I'm going to rename the second one mobile now in a real life scenario I should take care of the tablet also but I don't want to keep this tutorial too long so I'm just going to focus on the desktop and mobile versions in in an ideal scenario I would just have one section and I'm just going to I would just tweak all the settings so that it works on all three devices but here the layout is a bit different and sometimes it just doesn't work so an alternative way to do things is to create a different version for a different device now once again this is not the best solution of the best practice but sometimes that's a solution that you need to play around with so that being said let's go back to our desktop section here then move on to the Advanced tab click on responsive and we want to add hide that on mobile and also while we working within Elementor I'm just going to click on the I icon here so I can hide that section so we only have one section visible left which is the mobile and for this one also let's move on to advanced responsive and we want to hide that on desktop and on tablet okay so let's save our work now we can move into responsive mode and move to move into mobile mode okay so the first thing we want to do is to select our section then go to the Advanced tab and the Advanced section and I'm just going to give it zero padding everywhere except on top so once you've put zero in here just unlink the values and let's give it a 40 pixels top padding okay and next click on the heading here because we want it to look like this so let's go back let's treat the settings so make sure you've selected the heading by clicking on the Edit icon click on style and next we want to click on texts typography we're going to give it a font size of 17 pixels and the spacing should be around 35 so the looks much better but as you can see it as here there's some spacing on the edges and there should be no spacing so just click on the column Advanced tab and give it zero padding okay let's take a look so that's fine next one to have our social icons and a vertical divider so that's a different column so I can just drag the column here let's take a look yes it's looking good okay next we have our weekly newsletter so same thing I'm just going to drag the column let's take a look yes looks good we just need to fix the form but we do that in a moment and next we were shipping info privacy policy so you want to move that actually I'm just going to copy this copyright and I'm just going to paste it right after the last info here so that it matches what we see here and then we want to change the shipping info and privacy policy order so I'm just going to drag the column up okay and actually sorry about the confusion so I'm just dragging them copyright text underneath and I can remove this one here so it may seem a bit complicated but it's just drag-and-drop it's just logical so you'll have plenty of time to play with it at home obviously we need to play with the vertical spacing if I look here but first of all let's take a look at our form because it doesn't quite look the way we want if you look here it's completely joined and it's looking beautiful and here we have some things to fix so click on the Edit icon click on the style tab and for the field we want to add a right border of 1 and for the bottom you want to give it a 0 border we don't want any border because we're going to join those two so let's click back on the form tab here and for the rows gap let's put it at 0 and now it looks beautiful so let's save our work let's take a look so the upper part is fine up to this point then we need a bit more spacing underneath the weekly newsletter so let me just click on the weekly newsletter advanced let me unlink the margin values let's give it 10 pixels here we want a bit more spacing between the form and the text so let me select that column instead click on advanced and link unlink the values and give it a top margin of 30 pixels so that looks quite right and the last one is the copyright text here so let's select our copyright texts go to advanced and link the values and we're going to give it a top margin of 40 pixels and that's a day but margin of 50 pixels okay so let's update and now let's move it back on the front end so this is what we had let me refresh that okay so now it's looking good and beautiful let's look at the initial websites let me refresh the page okay so now we have the mobile version so that's the initial website this is the version I came up with before we started this tutorial and this is the version that we've just created together so if we take a look it's looking quite good it's not exactly the same thing but it looks quite similar but once again as I've mentioned in the beginning of this video twice already this is not about literally copying exactly what we've seen on the initial website but I just wanted to show you how you can replicate pretty much any website design this is just logic and there are a few ways to do it this is just one way that I've done it I think I want a bit faster actually because you could do it all by code if you know how to hand code CSS then that's pretty easy actually but even if you know how to code if you want to have some blocks that you can reuse in element or then I believe this is a this is a nice way to go so once again let's take a look at the desktop version so let me refresh all the pages so that's the initial website very beautiful website by the way so that's the footer and as the footer we came up with so that's pretty close in my opinion now if you're interested in purchasing elements or Pro and essential add-ons Pro for Elementor you'll find the links in the description of this episode to be crystal clear these are affiliate links which means that I do get a commission if you purchase a license after clicking on one of my links but one only recommend elements or pro and essential add-ons for elements or pro because I love and use those products daily and to commissions actually help me support this channel and create free content so I hope that this video showed you how to create a beautiful footer for your next web project now if there are any other WordPress and elements or tutorials that you like me to cover please let me know in the comments and by the way you find the companion blog post on my website case in your comm and of course the direct link is in the description of this episode now if you enjoyed this video please give it a thumbs up as it really helps growing this channel and if you know someone that could benefit from it please share it now if you're not yet a subscriber don't forget to subscribe to my channel and smash the notification bar so that you don't miss anything now if you want a brand market and grow a business in the digital age then make sure you subscribe to my email newsletter so that you never miss his share of digital alchemy as well as tips tools services and case studies that can help you grow your business online so that's it for this episode I hope to see you around and in the meantime don't forget to invest the success [Music] [Music]

Channel: Kaycinho The Digital Alchemist

Views: 6,648

Keywords: elementor footer tutorial, elementor header, elementor header footer tutorial, elementor header tutorial, elementor page builder, elementor page builder tutorial, elementor tutorial, elementor wordpress tutorial, page builder, essential addons, addons for elementor, elementor footer design, elementor footer web design, elementor pro, elementor pro tutorial, elementor tutorial for beginners, web design

Id: bDKzBf0JNvg

Length: 35min 47sec (2147 seconds)

Published: Mon Jul 08 2019