The NEW WAY to Make a Wordpress Website 2020 - For Beginners :—
How to build this beautiful and professional WordPress website step by step and as you can see it has everything it has a bunch of different sections different call actions different buttons a bunch of stuff that you can customize and the best part about it you don't need to know any type of coding or programming whatsoever it's just gonna be a bunch of drag-and-drop and copy and paste and we're gonna be creating a few different pages in this video tutorial including an about page just like this with testimonials and logos and again a custom footer we can also create a services section or you can substitute this out for any other page that you want so if you want to talk about your business or your services or your products you can do that here and if you have some projects that you want to highlight we can create a projects page just like this and again the awesome thing about this is you're gonna be able to customize these pages however you want so you can change the layout any which way that you want to we're also gonna be creating a Contact Us page just like this with a contact form for your visitors to message you and the messages will go right to your email and we'll also have a contact section and some social media buttons right here you're gonna be able to customize the colors the text the fonts the images anything that you want to do we're gonna be using a website called WP jelly an instant WordPress designer to find the template that we want and the great thing about WP jelly is that they already created all these different website templates for us so all we have to do is find the one that we want and then we can just go in and substitute the text replace the images and change whatever we want to create whatever type of website that we want so you can see right here that I already chose a template on the WP jelly website and it's really really easy we're gonna be using the element or page builder to find whatever type of elements that we want and you can see right here that this website has already pre-made for us and it's a photography website but again you can make any type of websites that you want all you have to do to customize this website is click into each of these elements and you can delete the text and you can type in whatever you want and you're gonna be able to customize your entire website so there's a bunch of different elements on the element or page builder if you don't know what the element or page builder is it's probably the top page for WordPress and it lets you customize your website however you want so if we wanted to drag in a Google Maps right here we can just drag in an element and you can see that it just adds it just like that if you want to replace anything or move anything you can just click and drag it and you can just move it just like this and again we're gonna be able to customize our website and the best part about it is again we don't have to really create our website on our own we're gonna have a custom template that's already created for us just like this and all we have to do is come in here and just change the text change the images and then redesign whatever we want move anything if we don't like it and then we're good to go this is gonna save hundreds if not thousands of dollars and also save you a bunch of time because we're gonna have these pages already created so instead of having to create everything on your own step-by-step everything is already gonna be creative for you and all we have to do is just go in here and change whatever we want so before we get started I do want to note that we are going to be using WP jelly to find the WordPress template that we want to use to build out our WordPress website and then we're gonna be using the element tour page builder to customize and build it and what we're gonna be doing is a little bit later in this video tutorial we're gonna come to Hostgator to get our domain and our hosting so that we can run our website so there is a small little fee that you have to pay for a domain and hosting but what you're gonna be able to do is import your website on to your own website domain and then you're gonna be able to run your own website so again you're gonna be able to build something exactly like this or you're going to be able to customize your website however you want so again if you're ready I'm ready let's get started so if you want to build a beautiful and professional WordPress website that looks just like this with everything that you need for any type of website that you want then keep watching this video because we're gonna show you how step-by-step so if you're ready I'm ready let's get started the first thing that we have to do is go to a website called WP jelly com so it's WP jelly com and this is the instant wordpress designer and this is just gonna save us hours and hours of work because over here all we have to do is find a website template that we like and then we can just change out the text and the images and then if you want to add any custom layouts or designs we can do that using the page builder and then we're good to go so you can see up here there are a bunch of different filters and you can choose whichever one that you want but what we're gonna do is we're gonna be using one called the water theme or the water template so it's part of the business tab right here so if you select this and then you come over here you should see the water template and you can click on the preview button or you can just select this theme it's up to you so I'm gonna click the preview button and it's going to open up a new tab right here and this is the theme that we're gonna use and the reason why I like this is because there's a slider right at the top that we can change out the image and then we can change the text we have a call-to-action button right here and then we have an About section that we can insert a video or image or even more text and then down here we have a services or product section that really gives people an idea of what your website or your business is all about and then over here we have another call to action and then we have some buttons or images that we can link to different pages right here and then we have a custom footer at the bottom so this is the design that we're gonna use for this website tutorial and again the WP jelly template is free all we have to do towards the end of this video is have a domain and hosting so that we can import and export all of this data on to our website and then we can run it okay so we will be purchasing a domain and hosting later but right now let's go and show you how to use the WP jelly website so the first thing I'm going to do is we're gonna choose this design so click on the button on the upper right and it's gonna ask you to pretty much create your site so what I want to do is just type in my name right here and then my email address and all we have to do is click on the button that says create your site and once the website is created you should be logged into the WP jelly WordPress dashboard and this isn't our exact - because this belongs to WP jelly but remember we're going to be exporting all of the data and then importing it into our own website so what we can do here is we can go and customize our site as best as possible before we export it so what I want you to do first is right at the top you should see your website name or your name and we can just click on visit site and once you come to your website you're gonna see that the title of your website is whatever name that you put in for your site name or your name and we can go and change this and then we can go and customize our website and swap out the text and the images and change
the icons and all that stuff so if you want to do that we want to first just change the title of our website and you can see right here on this tab it also has a site tagline we probably want to change that too so we're gonna go to our website name again hover over it and go back to the dashboard and once you're back on the dashboard I want you to come down to these settings and that's what we're gonna change our title and everything like that so just hover over settings and click on general and once you're on the general settings page right here where it says site title we can change this so we can delete that and type in our actual website name so I'm gonna type in studio designs right here and then for my tagline maybe I'll just say professionally created so you can actually delete the tagline if you don't want one but you can see for mine I want it to show up on the tab over here and also I want my site title to say studio designs okay so once you're ready and you modify whatever you want to whatever name you want click on the Save Changes button so that everything is saved and once everything is saved now if we go back to our website and once you come back to the homepage right here you can see we have our site title now and also our tagline and if you want to upload your own logo for your website so if you have your own logo I'll show you how to do that after we export the data from WP jelly and import it into our own website because WP jelly even though it's free there are some paid features that open up certain options for you to do certain things just so that you know that's how they make money and everything so the logo is one of the things that you have to actually pay for here but we can do for free once we export everything so I'll show you how to do that a little bit later but right now what we can do is we can show you how to customize the home page in all these different sections remove the images and the text and change everything so if you want to do that we're gonna be using the element or page builder and we do have tutorials on the NYC tech club website on how to use the element or page builder but it's already installed on the WP jelly website and for this template so we can just open it up and I can show you how to use it so what you want to do is up here on the upper right the edit with element or link click on that and once the element tour page builder loads this is what you're gonna see you're gonna see your website on the right-hand side and everything is already filled out for you and then on the left hand side these are elements or modules and what the developers have done is they dragged in all of these different elements into the template over here to create what you see right here so whenever we hover over these sections you can see that there's a blue box and these are all different types of elements so what we want to do in this tutorial is show you how to edit all of these elements so that you can create whatever you want for whatever type of website that you need so we're also gonna show you how to change the images for the background and how to edit buttons and edit the text change out modules and we'll also talk about how to change icons like these icon boxes and we'll also go over how you can add some additional rows or sections if you want also so we're gonna cover everything that you need in order to customize the website and change out everything so that it's really for you so the first thing that we're going to do is we're gonna learn how to edit the text modules so you can see right here that these two right here are text modules and then down here these are some additional text modules so we'll go over a few of them and then what you can do is just pause the video and you can go and edit everything on your own because it doesn't really make sense for me to go through all of these and edit everything because this is just a demo website but you probably have a specific type of website that you want to create with some specific content so let's come up to the top and let's go and edit the headline right here first so what you want to do whenever you want to edit any of these modules is you want to hover over it so you see the blue box over the mint and then just click into it and what you're gonna see is a pop up on the left hand side that says edit heading so this is a heading element and all you have to do to change what it says right here is going to this box right here delete this and type in whatever you want so I'll just type in professionally designed and then what we can do is if you want to change the size right here you can do that or you can go into the styling tab right here and you can change the text color if you want and you can also change the typography or font family over here and you can also change the size right here also so you can see that you can just change the size to whatever you want and we're gonna bring it back to seventy right here so let me just type that in so we can come in here also and just change this back to white it's really up to you if you want to customize anything if you want to change the alignment in the content tab over here this is we're gonna change the alignment and there are some additional options in the Advanced tab but we don't need to do anything here for the headline so we'll talk about this stuff maybe a little bit later if you want to see what your website looks like on a full screen just hide this panel right here and that's how you can see it so you can see that we just made this change and then if you want to see what it looks like on different devices come down here to this icon where it says responsive mode and you can see that we're on the desktop view if you want to see what it looks like on the tablet and the mobile device you can just select them just like that okay so we will talk about responsiveness a little bit later and how you can customize things to make everything responsive and make sure it looks good on all the other devices but right now we'll just talk about how to edit all of these different modules so we already edited this heading and to edit this one again all you want to do is click into it and now you can see we're on this one right here and we can just change this to whatever you want so we can just type in your website right here and then again you have the alignment you can go into the styling tab and change the colors and you can change the font style font family whatever you want right here and then if you ever want to undo anything you can come into the history right here and you'll see a list of all of your actions and if you want to go back a step you can just click on the action and then it will undo it okay so it's really easy to redo and undo stuff they'll have all the actions right here this is your entire history and then if you want to go back to the main page with all your modules just click on this icon right here and it'll show up right here and again all you have to do to edit these modules is click into them and then you can see which one is highlighted and then you can go into the different tabs and customize whatever you want so that's how you edit this first section on the slider and we will talk about the background image and also the button a little bit later but first let's come down here into this section and you can see that we have three different modules here with some text we have a heading module and then we have a text editor right here so you already know how to edit the heading so let's go into the text editor right here and what you're gonna see is the text editor and this is a little different than the headline module but it's just another text module so over here this is where you can type in your text so you can see that there's a bunch of text right here and if you wanted to delete this you can type in some other stuff so what you probably want to do if you want to keep the formatting right here is go into these modules and then type in whatever you want so if this is an About section about your business or about you this is where you can go and type in whatever content that you want and if you want to format this text there are buttons right here and if you don't see these buttons over here you want to click on this button that says toolbar toggle and it's gonna open up these other options right here to style your text and again remember you do have the styling tab right here and you can use this to align your text so you can align it to the right or to the left or Center or just leave it as is and then you can also change the color right here and then you can also change the font style and the font size and everything like that so I'll let you do that on your own and what you want to do is just go into all of these modules and wherever you see a heading module or a text module go ahead and edit and change whatever you want so I can point them out if you want so we have our two heading modules right here and then we have a heading module right here and then two text editing modules right here and then if I come down there should be another module right here these ones are image boxes so we're gonna cover this in just a little bit these are a little different than a text box even though they do have text here you can see when you go into it we can add an image and then we can put in our text so we'll talk about this section in just a little bit but down here there's another heading module and then a text module and then if you come down here the same thing so if you want you can pause the video and then go through the first section of editing the text modules for your website and then what we're gonna do is move on to the next section which is going to be editing these buttons right here so I live in New York City and just in case you do hear some beeping outside I think it's about it's kind of late right now it's about 3:00 a.m. as I'm recording this so I think people are picking up the garbage and everything outside since I do live in Manhattan and garbage trucks come at night so if you hear some beeping I apologize for that but we're trying to get this video done so that you can build a beautiful WordPress website so we're gonna keep on going so if you need to pause the video go ahead and pause it to edit your text modules otherwise let's move on to our first button right here and talk about how to edit these so hover over this and click on the button module and once you click on the module you're gonna get the edit button right here and if you want to change the text you can just type in whatever you want right here so we can just change it from learn more to show me how and then if you want to link this button to another page you can type in the URL right here or if you have some pages created which WP jelly has created for us we can just type in the title of the pages so you can see I just typed in SCR for services and I can just click on this one this is a page that's already created for us and now you can see the link right here so the button is going to link to this page and then if you click on this little icon right here you're gonna get this little pop-up that lets you select whether or not you want the link to open up a new window or not so it's really up to you but we're gonna leave those unchecked and then what you can do is align this button wherever you want also so we're gonna leave it at the center and then you can change the size of this button to large or medium or small it's really up to you again we're gonna leave it as a default this is a really good size just like that and if you wanted to add an icon you can just click on the icon library right here and you'll get this pop up and what you can do here is search for any type of icon that you want so you can just type in keywords and then find whatever you want and click insert or click the icon right here and then click insert and now you can see the icons show up right there and if you don't like it just hover over this click on the trash button and then it'll remove it just like that and on the styling tab you do have some additional options here you can change the font size and color over here and then you can also change the font color in the text color section right here and then if you want to change the bun color if this doesn't match whatever colors that you want for your website then come into the background color on the normal tab and you can select whatever color that you want over here so maybe we want something like this purple and what's really cool is over here there is a hover option so right now this is what your button looks like when you don't hover over it but we want to change the color or we have the option to change the color when you hover over it so if you want to do that you can come over to hover click on that and then you can change the text color to black maybe and then for the background color we can change this to a blue color so now look what happens when my mouse hovers over the button you can see that it's purple and then it changes to whatever the hover colors are that I selected in this option right here so that's just an option for you but I'm gonna remove these so I'm gonna go back and just clear these out so now we just have our button just like this and then what we can do is come down here to where it says border type and if you want a border for this button you can go in here and just select the border type that you want and then you can put in the width of the border right here so you can see that when I put in five and the border color is white it's gonna make a big border just like that so that's an option for you and you can also customize how this button looks so if you don't like how its rounded on these edges right here you can come in here and you can change everything so maybe you want to make it larger or more of a square you can do that and you can also delete these values so that you can change the sizes of all of these different options so maybe fifty four at the top and then something like forty for the bottom or thirty for the bottom and then fifty six over here and you can see how odd shaped it looks so that doesn't really make sense but I did want to show you that you do have the option of delinking so that you don't have to put in all the same numbers right here so we're gonna go back with 25 because that's what the website shows us right here or that's what the default is and I'm pretty happy with this and again there are the advanced tabs right here but we don't need to go through any of that stuff so that's all you have to do to edit a button and what you can do is you can go down on this entire website and then find some additional buttons like this one right here and also these are buttons too without the background and the edges and everything so if you want you can click on these and then you can edit them however you want and then once you're ready push play and then we'll move on to the next step so really quickly I'm just gonna go back in here and I'm gonna change this back to the default color just like this okay so go ahead and pause the video edit your buttons if you want and then once you're ready push play and we'll move on to the next step so now what I want to do is I want to show you how you can undo any actions that you make so say you typed in something and you don't like it or you edited your button and you want to undo something you can click ctrl Z or what you can do is over here you can go to the history tab and click on that and what you're gonna see in your actions list are a list of everything that you did to edit your website all the way to the most recent step and if you scroll all the way down to the bottom you're gonna see the start of whatever you started at for the day or when you turn on the element or page builder so let's just go through this one quickly if I want to go back a few steps so maybe I want to go back to this one right here all I have to do is just click on this and then it's gonna go back to a point in time so I can go all the way down to when we edited the heading and maybe even just go back to the start and what you'll see notice that we have all of our text right here if I click back on editing start right here it goes all the way back to the default options and then we can always go and redo stuff like this and then we can go up here and just click on this and then it just shows you exactly what we did in the last step so this is the easiest way to undo and redo stuff but if you save anything and that's this button right here called the update button if you click on that then what you have to do is you want to go to the revisions tab and this is gonna save or show you what you last saved and if you want to revert back to an older update that you clicked on then you want to go through that list over here okay so this is the tab for whenever you click on the update button and it just saves everything from when you clicked on the Update button and then the actions tab is whenever you turn on the element or page builder and you go through editing your modules or the layout you're gonna see a list of everything that you've done up to the most recent action and you can just go into this list and you can undo anything and then redo stuff also okay so really really easy redoing and undoing just go to this button at the bottom called history and then you see your actions list and then also make sure that you do click on the Update button because I do want you to save everything in order to save everything and also just because you're gonna be making a lot of updates to all of these different modules I want to make sure that you save that stuff so that when we export our data to our website we have everything already customized okay so that's just a real quick tip on how to undo and redo stuff over here so now let's move on to the next step so now what I want to do is I want to show you how to edit images and we have two different types of images on this website template we have a background image like this one for this entire row and then down here we have some additional images which are just image boxes so I want to show you how to edit these so that you can customize your website however you want so let's come back up to the top and show you how to edit a background image so the first thing that we want to do is we want to hover over the section that has the background image so you can see that I'm in this section right here and then all we have to do is click on the little icon in the middle right here that says edit section and then you're gonna see this pop-up right here and to edit this background image or change it to a color or a video or anything like that what you want to do is go to the style tab and then right here where it says normal you have the classic option and then you have your image right here so we can remove this really quickly and you can see that it deletes it so if you want you can add a background color instead of an image if you wanted to and then you also have these other options right here to add a gradient or a video if you have a link to a video or you can do a slideshow but if you just want to change the image to another image you can delete that image and then you can come in here and click on choose image and if you have your own images you can go to the upload files tab right here and then click on select files and then find the image that you want to upload and then just insert it if you have images in your media library like we do right now because we have a bunch of demo content what we can do is just choose the image that we want to select and add that one so if we wanted to add this one or maybe this one because it looks a little bit better we can just select it and you can see that we have a check mark right there and then once we click insert media you can see that it gets added just like this and then what you can do is you can come to the background overlay section if you want to change the gradient or the background color so you can see that it's a little dark right here but if you go in here you can change this to maybe a transparent color or maybe a lighter blue color or whatever you want so it just changes the fade of this image it's a color that is layered on top of your image so what I'm gonna do is go back to my history and just go back to the start of this section so you can see that we revert back to our original image just like this with the background overlay so this is how you edit a background image and I can point out the other background images this is a video module so don't worry about that one but down here this is another background image so you can come in here and click on the edit section and then edit this right here but down here these are images and these are image modules so if you want to edit these ones and change them what you want to do is just hover over it and then click on the module itself and you're gonna see the Edit image right here and all you have to do is just come over here and you can delete this image and then go choose file or choose image and then if you want to upload your own images go to this tab right here and then just find the image that you want and you can insert it or you can go to the media library if you have images already uploaded like we do and then we can just use one of these images so we're just going to select the one right here and then we can just click on insert and now you can see the image gets inserted right here and you can customize the size of the image or the alignment if you want you can also link the image to a URL if you select this and then you can type in the URL for the image so that when people click on it it'll go to another page and with the images you do have the style tab right here so you can change the width of the image if you wanted to it's really up to you so you can make it small you can make it large I think what we're gonna do is just leave it as the default and then you can change the opacity for this image if you wanted to also and you can also add some border radius which is going to be I believe the border over here so if we wanted to we can just come in here and just choose a solid color and then we can choose the color maybe we'll do red and I'm just showing you this just for fun so we can do a three with radius or border so you can see that we have this red right here and then the radius is gonna change the size so if we typed in 50 right here you can see that has rounded edges like that so these are just customization options for you and if you don't like any of them just click on the history button and then just go back and then just select whatever you want so I think what we're gonna do is just go right here and we're gonna click on this just to go back to whatever we inserted right here so again adding images is really easy and all you have to do is click on the image or into the Edit section at the top over here and then you can change out the images to whatever you want remember there's two types the background images for the section and then the image modules so if you want go ahead and pause the video and customize and add whatever images that you want and then push the Update button to save everything and then once you're ready we're gonna move on to the next step so if you want go ahead and pause the video and change all of the background images so this background image right here and then down here is another background image and then these two images right here and don't worry about the footer right now I know this is an image but we're gonna go and edit this another way in just a little bit so if you want go ahead and pause the video and customize your images otherwise keep watching and we're going to move on to the next step and now what we're gonna do is we're going to show you how to move around modules and different sections and rearrange stuff and also how you can add additional rows so that you can really customize the website if you want to add some additional sections so we can come in anywhere on this website it doesn't have to be at the top and if you want to move anything what you want to do if you want to move a section is up here you want to click on this instead of clicking on it once if you click on it you can see that you can drag it around and what we can do is we can just place it wherever we want and this is gonna place it wherever this blue bar is so if we want to place it between these two sections all we have to do is just click and drag it and then drop it in and now this is where it shows up and the same thing can be said about moving columns so you can see right here that we have two columns if you want to move these two columns all you to do is click on the left hand side for one of these columns and then drag it and now you can see that they get swapped like that and for modules it's very very simple too so you can see whenever you hover over a module you have this little blue box over here you can just click and drag it and then you see the blue bar wherever you're going to place it so if you want to place it at the top you just drag it and put it there if you want to put at the bottom you can see that the blue bar shows up down here and now we can place it right here and just remember if you don't like any of the changes go to your history and then you can just go and select wherever you want to go back and undo stuff so I just undid everything but that's all you have to do to rearrange and move stuff on the WordPress template and the last thing I want to do for this section is if you want to delete any of these modules that you see say for example you don't want this video module right here we can hover over it click on or right click on this little icon and then you can see right here that you can delete this all you have to do is click on that and then it's gonna remove it just like that and if you want to add another module you can just do let's just actually do that right now if you want to add another module all you have to do is click on the plus button right here and you can also just click on this and then you have your screen right here you can just find the module or element that you want to add so if you want to add a star rating we can just drag that in and now you can see the Stars get out of here and we can change the alignment we can change the number of stars and whatever icons and selections that we want to use and then over here we can change the size and we can change the spacing or the margin so let's talk about spacing and margin real quick margin is what is on the outside so the padding on the outside of this element so above and below and on the outsides of this blue box and then padding is what's on the inside over here and down here so for this one if I wanted to move these stars down what we want to do is we want to add top padding so if we put in 250 you can see that it pushes this down and if we added some margin at the bottom say we also did 100 here you can see that this box gets a little bit bigger so margin again is on the outside and then padding is on the inside of your element so we can also talk about that a little bit more in more detail when we add another section or row and show you how you can customize it but really this is really really easy to delete stuff you can click on the X to delete the section or you can just right-click on the modules and then you can click on the delete button right here and then it just makes stuff disappear okay so what I'm gonna do is go back now and just undo everything and pretty much that's all we have to do for this section so what we just covered is how to rearrange the modules and how to rearrange sections and columns and also how you can remove or delete a row or any of these other modules and once you're ready what I want to do is I actually want to discuss how we can edit this video module right here and then we can edit the icon boxes right here because we haven't covered those two yet and those are the last two on this page that we really need to cover so if you guys are ready let's just talk about the video module that you see right here right now so let's click on this and what you're gonna notice is that the video pops up and this is called the lightbox effect and once you go into this section right here in the content section you're gonna be able to link whatever type of video that you want so you just want to select the source so we're using a YouTube video and then we have the link right here and then what you can do is customize the start time or end time if you want and then you have some video options right here if you want to just leave everything as is then you don't need to change anything all you really need to do is update the video link right here or what you can do is you can always delete the section and then insert a different type of module if you want also and there is this tab right here called image overlay so if you want to have a custom thumbnail or image for this video right here you can go and upload your own image or it's just gonna show the YouTube thumbnail and then you have these other options to turn on the light box so that you see it like this or if you turn it off then the video would just play in this box over here and then in the style tab what you can see is you can change the size of the play icon which shows up on the image and you have the lightbox option right here which we don't need to do anything with and then you have your spacing options in the Advanced tab okay so if you want to change the video from this placeholder one just come into the edit video go to the content section and then link the video that you want to play right here and then it'll update and then what you can do is come into the image overlay and if you want to custom thumbnail then just change it right here otherwise you can turn that off okay so if you want you can go in edit this section right now what I want to do is I want to come down here because we haven't talked about these boxes right here and these are image boxes where we can insert an image and then we can update the text and it's really really easy so we can just jump right into it right now if you want so are you going to do for this section is you can see there are four different image boxes once you click on one of them you can come in here and you can change the image if you don't like this or the icon and then you can come here and type in your title so you can see it's in bold right there and then your little description so this could be a services or products section or just a FAQ section and then if you want to link this image box to another page you can come down here and you can type in the URL and you can also position the image to wherever you want so you can see we can do right center and left and you can change the title tag over here and you do have these styling options right here where you can change the spacing you can see that we can change it just like this and we can change the width and you have these other options such as opacity and duration and then for the content if you want to change the text you can come into the content section and then you have the title section and then the description section and you can change the font size the color and then also the font family okay so you can do that for each of these you want to click into each of them and customize them however you want and if you don't have images you can always use a different module called the icon box so let me just show you really quickly which one that one is so back on this page right here I clicked on this and what we can do is look for the icon box so this is this one right here and let me just drag it in really quickly just to show you you can see that you have an icon and then the title and description right here and if you don't have an image you can just use an icon just come over here click on icon library and you'll get this pop up and you can see you have all these different icons and then you can search for specific ones also and then what you can do is go into the style tab and then for the icon section you can customize the colors and all that stuff so you have two options here you have the image box and then you have the icon box also this is just a module that you can find in this page right here okay so what I'm gonna do is go back and just remove and undo everything but now you can come in and you can customize this section if you want otherwise let's move on and what we want to do now is we want to show you how to add a section to your WordPress website so if you ever want to customize it some more and add some additional details or columns or anything so what we can do is click on the plus button right here and then we can click on this one right here to add a new row and once you see the row right here the first thing that we can do is we can go and click was button so that we can make sure that we can edit this section and it should pop up by default and over here you can change the width of this section so if you wanted a box so that means that it kind of has some space on the left and the right hand side over here you can just choose the box option if you want the full width it goes from one end all the way to the other and over here what you can do is you can change the height so you can make it fit the screen so that makes this whole entire section just fit the entire screen or you can choose the minimal height option and you get this little thing right here that you can drag to make the section as big or as small as you want but we're gonna use the default option for now and we can always adjust that later so what I want to do is I want to add a background color here so if you remember how we did this for the background images we come into the style tab and then we come right here and click on this icon that's called classic and you can add your own image if you want all I want to do is add a background color so I'm gonna click on the color pad and I'm gonna type in f7 f7 f7 and it's this light gray color that you see right there and if you want you can always add a background overlay or anything else but we're gonna leave everything else as is and we can come into the Advanced tab right now if you want but let me actually just show you when we add a module why we should add some padding so before I do anything here I'm gonna click on the plus button right here to go back to this page and again what you can always do is click on this icon right here and I'm gonna bring you to the screen too and we're just going to drag in a heading so you can see that it's gonna drop right here and what I can do is type in our services so let's pretend this is a services row that we're creating right here that's gonna list out some of our business services we can Center this and if you want to change the HTML size you can right here or you can go to the style tab right here you can go and change the color of the font if you want and you can also change the type of typography if you want so you can change the font style or you can come and just change the size so that's what I'm gonna do right here you can see that the size is getting a little larger and then you have other options here but we'll leave that as is and you can see once we add our heading we don't really have any space at the top or the bottom so if I click on this icon so you go back to the Edit section and we're in the Advanced tab right here I can delete this and you can see if I type in 100 right here that it pushes things down so maybe we'll just type in 50 because that's a lot of space and then same with the bottom just so that we have a gap at the top and the bottom right here and if you ever wanted to have some space over here if this stuff is too close you can see these buttons what we can also do is go into the margin right here and you can also add some additional space right there but again remember if you don't deal Inc this stuff then what's gonna happen is it just goes all the way across so you can see right here if I type in 100 it just all changes to 100 just like that okay so what we're gonna do is just go back to this version right here and now what we can do is add a sub-headline so again I'm going to drag in another heading and you can see that I'm gonna place it right here and you can see that the heading gets inserted right here and we can just go in here and change our text and then if you wanted to you can change the size and we can just align this right here and then we can go in and customize this to another color if we wanted to and change the typography you can change the padding and the margin if you wanted but we're not gonna do that I'm gonna go back to the main module page and actually add an intersection so check out what this does this is one big row right here and we're just stacking things on everything but if we add an intersection look at what happens we can add columns so now we just split the section into another row with two columns and if we right-click over one of these edit columns right here we can actually add additional columns so now you can see that there are three columns right here and what I want to do is I want to add some icon boxes just to show you really quickly and then we're gonna be done with this section so I'm gonna add an icon box right here and we can go in here and then we can just find an icon that we want I can just search for one and find it insert it and then I can change my title right here to design layouts or whatever I want we can change this text you can type in a link if you want to link this to another page and then you can change the icon positioning if you wanted to and you can come up here and what you can do is change the icon color so you have the icon section right here we can actually change this let's do a really random color like a blue color and then for the size you can make it larger or smaller it's really up to you and then in the content section right here you can do the same thing you can change the font colors the font styles and if you like this layout and you just want to change the text what you can do is hover over this pencil right here and right click this and you can see that there's a duplicate button if you click on that you can duplicate this and drop it off wherever you want so I can just put it right here and then I can do it again duplicate and then just drop it off right here and now if I go in here I already have the color that I want but I can go and change the logo to something else so let's just choose one of these random ones I'm gonna choose this one right here and click insert and now you can see we can just come in and change our title and then what we can do is come here and do the same thing if you wanted to we can just click and go to the content section change this to whatever we want select this one and it's so so easy and if you wanted to you can add a button or any other modules it doesn't even matter you can add Google Maps you can customize stuff however you want so again the key thing here is if you want to add a new row you want to click on that plus button right here again I'll show it to you it's right here click on this and then you can choose the number of columns that you want for your row and then what you can do is just start customizing it because you have this edit section right here you can change the layout the style you can add a background color you can add some padding and margin and then what you're going to do is drag in whatever modules or elements that you want to customize your section you can see that we did this and pretty much just about three or so minutes and it could have been even faster if I didn't have to talk about it but that's all we've done for all of these other sections also and they just look a little different because there's images and different colors and everything but it's really really easy the Elementor page builder makes building a website super super easy so if there's any section or any layout that you want that you don't know how to do let me know in the comment section and then I can walk you through it as best as possible or I can make a video and show you because again this stuff is really easy and if you want you can always just right-click on this you can actually save this as a template and you can use it over and over again so if you click on this you're gonna get this pop up and you can see right here we can do demo section and then click Save right here and once it's saved now you can see it's in your templates right here and we'll talk about this stuff in just a few seconds also but say you want to add this section down here all you have to do instead of cleaning on the plus button is click on this now and then when you go to my templates you have this section right here and you can just click insert and then you want to say no to override the previous settings and then you can see that it just gets inserted just like this pretty cool right so what I'm going to do is actually delete this now because I just wanted to show you how to create that section and now you can customize your website however you want you can delete sections and add some additional sections but what I want to do is I want to talk about one more thing right here when we open up this folder there's something called blocks and pages and Elementor has its own design team too and they've already created a bunch of different custom templates for you just like WP jelly now some of these are premium options so you have to pay for them or get access from the Elementor Pro but there's a lot of free ones here and what you can do is you can click on them and then you can check out what they look like so this is a preview of this web page that is on the element tour folder and it's free and you can just select it by clicking on insert again and then it just inserts the entire template onto your website and seeing what blocks instead of an entire page this one has blocks for different sections of different stuff so again you can insert it and then you can customize it change the text and change the formatting however you want okay so that's just something extra for you but you don't really need to know that because everything that you need to create is already here from WP jelly so pretty much we covered a lot of stuff right now so we've learned how to do a lot of stuff including editing our images like this background image right here how to edit our text and our buttons we learned how to move stuff around and that undo stuff we learned how to edit this video module right here and we learned how to go through and edit these icon boxes and also down here we learned how to edit these two sections and we also learned how to create new sections using the plus button right here and adding a new row and also using the folder right here where you can create or upload blocks that are pre-made or pages or if you have any templates saved you can just upload them just like this so if you need any help or you don't really understand padding a margin or anything like that let me know otherwise what we're gonna do right now is now we're going to talk about how to edit this custom footer because it has a background image and it also has some text here and there's no real way to click on it here to edit it so I'm gonna show you how right now and to customize the footer what we have to do is we have to go and turn off the element or page builder because this is a global module that we can edit once and then it's going to show up on every one of our pages so the first thing I want you to do is make sure that you click on the Update button to save everything and then once you do that once you're ready let's hover over the hamburger icon right here and then click on View page and once you view the page your WordPress website should load right here and this looks great and everything but what we really want to do is we want to come up here to where it says edit with Elementor and when you hover over it you're gonna see the global footer right here and what we can do is just click on this to edit it and once you come to this page the footer looks just like a module or a section on your page so it's really easy this is just a global section that's gonna show up on all your pages because that's how it's set up in the rules but all you have to do is click on here and then you can go into the Edit section you can change the background color the layout the padding and then you can see here that there are three different columns you can just click on these and you can customize them however you want you can add some additional modules it's really really easy you can see right here that if you want to add social icons you can click on the widget and then you can come in here and you can add some more or if you want to edit the Facebook one just click it and then you can link the Facebook icon to your actual page and same with Twitter and you can add Instagram and all that stuff over here there are a bunch of different icons that you can just click on and find and if you want to remove any of these just click on the X just like that if you do make any changes which I think you probably won't because you probably don't want this background for your website make sure that you click on the Update button right here because this is going to be saved and shows up on all of your different pages ok so this is really easy to edit and everything like that so we're gonna go back now and I just want to just show you the other pages that you should be editing but you already know how to use the element or page builder so it's really easy and I could probably just send you off on your own but what we're gonna do is show you the other pages and then we're gonna go and get our domain and hosting and export this website from WP jelly so that we can actually make it our own so what we're gonna do now is exit back to our dashboard right here and once you come back to the footer page now what we're gonna do is we're gonna talk about the logo and how to customize the header area so what I want you to do is hover over appearance and then click on customize and it's gonna open up a new tab or a new page and you can see it right here this is our website and if you remember we might have come here earlier I can't really remember because I've been recording this for a few hours now but this is our website on this side and if you want to upload your logo what you want to do is on the customize page right here just come down to the header area and click on this and once you come here just click on logo and then right here where it says logo this is where you can click and select your logo so if you have one you can go to your library or upload it and then what that's gonna do is replace your site title right here with your logo so I will have some resources in the video description to show you where you can go make a logo for free but if you have your own feel free to come over here and upload it and then click on the publish button and then you're good to go and after that what I want to do now is I want to talk about our header menu you can see it up here right here and you can see that our Contact Us is a button so if you want to customize that and you want to change the color for this contact us button to something else when you hover over what you want to do is go back over here to the main page and then come down to the custom CSS area and click and open this up and what you're gonna see is some custom CSS code and at the bottom over here where it says navigation button this is all the code to customize the contact button right here and what you want to do to change the background color for when it hovers like this instead of this turquoise color is you want to come over here and then change the background color codes that you see right here and also right here so that's all you have to do if you know the color codes that you want to add to customize it maybe you have a different color scheme for your entire website you want to add the background colors here and then you can hover over it just to preview it just to make sure that everything is correct but you can also just make sure that you copy and paste this code in case you want it or just don't click on the Save button if you want to revert back to how it was okay so now what I want to do is I actually want to show you how you can customize your header menu also with these links and also if you want to get rid of this button which I prefer I'm going to show you how to do that really quickly so we're gonna close out of this because we didn't really do anything and we're back on our WordPress website right here and now what I want to do really quickly is talk about the header section so what we're gonna do now is come down to appearance hover over that and this time around click on menus and once you're on the menus page this is where you can see that we have a menu already created for our WordPress website and you can see right here that we have the header menu right here with all of our pages and what I want to do is I want to show you how you can add links over here and also how you can remove this button so that the header menu items look consistent just like this because I actually think this looks a little bit better than having a contact button like this so what you can do here in the menus list is you can see a list of all the recent pages or the pages that you have on your website and all you have to do is just check these boxes right here and then you can click Add to menu and they'll get added right here and you can also add blog post or create custom links if you have them so you can just type in the URL and then the label that you want to have for the header menu right here but if you want to just go into these items that you have already and you want to rename these what you can do is just go into something like the about Us page and you can change the navigation label right here so instead of about us it could be story or whatever you want you can see that the label changes just like that okay and if you want to remove these just expand them and then click on the remove button and that removes it and you can also drag these around and rearrange the order if you wanted to and if you indent it like this this becomes a submenu item of this item right here so what I want to do really quickly is remove
the contact us button and just change it to an item on the header menu so if you want to do that and again you can see right here that this is a button right here if you want to remove the buttons so it just says contact us just like these ones what you want to do is you want to remove this button and then re-add it so only do this if you want to remove the button if you want to keep the button don't do this okay so I'm gonna go in here and I'm gonna remove this and then what I'm gonna do is go back in here in the contact us section for the pages and click Add to menu and it's gonna get real in there and I'm just gonna click on the Save menu button and once the menu is saved now what I'm gonna do is go back to my WordPress website and I'm gonna refresh this page and let's see what happens with the header menu right here you can see that once we refresh it the button goes away and now it's just this contact us button and again I think this looks a lot better but that's just me personally if you don't like it then you want to keep that item in the header menu and then you can just change the background color and the codes and everything in the customize tab and again you can go over here to the header and then go to the custom CSS that section that we just talked about in the last section okay so now we have our custom header right here and I like how this looks and if you ever wanted to change these colors again what you can also do in the customize tab up here I'm gonna open it up and you can come over here and all you have to do is come to the header and you'll just come into the menu section and then over here you can choose in the styling section the colors that you want for the links so this is the link color it's white right now and then when you hover over it it turns to this green color if you want to change them you can do it here and then click on the publish button and again you can find this section if you hover over appearance on the wordpress dashboard and click customize or if you just go to your website and you're logged in and you click on the customize button right here okay so now we have just learned how to customize the header with our own logo and also how we can add labels or items to our header menu up here and how we can customize the button if you have that now what I want to do is I want to move on and I want to show you how to make your website fully responsive because the element or page builder does have an option to make sure that your website is responsive so what we're gonna do right now is we're gonna turn back on the edit with Elementor so go ahead and click on this on the homepage and once we're back on the element or page builder remember what we've done right now is we pretty much built our website looking at it from the desktop view and remember down here there is a button called the responsive mode and what you can do is check out what the website looks like on the tablet device and also the mobile device and what you'll notice is that when we go to the mobile device that this section right here this text it doesn't actually look good because the first word professionally is on two lines and that just looks a little weird everything else looks pretty good but what's really cool about the element or page builder is that what we can do is we can hide this section on just the mobile device because it doesn't look good here and then we can duplicate this copy or this section and then we can edit this section to show up on the mobile device so that it looks correct so that's the great thing about using the element tour page builder it has the ability to hide different sections on different devices so what I want to do is first what we're gonna do is we're gonna right click and duplicate this section so I'm just gonna right click it and then right here I'm gonna click on duplicate and you can see that we have two copies of this now and then if I go into this first section what you're gonna notice is that when we click on the edit section we can go to the Advanced tab right here and down here there's any responsive tab if you open this up what you're gonna see is a visibility section and you have the option to hide this section that you selected on the desktop tablet and mobile device and what we're gonna do is we're just going to hide this section on the mobile device so it shows up on the tablet and the desktop because it looks correct and then what we're gonna do is come down here and then we're gonna hide this section on the desktop and the tablet device so first I'm gonna go to the mobile mode so that we can check it out you can see that this first section that we just hid is grayed out and then over here I'm gonna click on the edit section and then again go to the Advanced tab and you can do this for any section or any element that doesn't look good on these different devices all you have to do is just click hide on desktop and tablet and now this section only shows up on the mobile device so it replaces this top section and that's what we want and then we're gonna come in here and all we have to do is just edit this section we're gonna go into the style tab and just change the font size so maybe we'll just go in here and we'll just make it a little smaller until it kind of stays on two lines so you can see once I change to 32 now it looks perfect and that's all you have to do so now if we go back to the desktop what you're gonna notice is this mobile section is grayed out because it doesn't show up on the desktop device so what you can do is you can go and check out your website on these different devices so you can go and just go to every page and make sure it looks good on everything and then if it doesn't you can go into the Advanced tab for anything an element or a section just click on edit section and then go to the Advanced tab you're always going to be able to see this responsive section and then you can hide whatever that section or whatever doesn't look good on certain devices and then recreate the section on the desktop or tablet or mobile device so that it does look right okay so that's how you can make your website fully responsive and again Elementor does a really really good job with making this really easy for you if you do make any changes again you want to click on the Update button right here so I'm just gonna click on that just to save everything and then we are good to go so we've just learned how to make our website fully responsive and hide sections again super super easy if you have any questions let me know otherwise let's click on the hamburger icon here and now let's go and exit to our dashboard and once we're back on the WordPress bored now what we're gonna do is move on and we're probably gonna go to the step thalike.u've been waiting for which is registering a domain and getting hosting so a domain name is your web address so this one is WP jelly comm I have my own called NYC tech club comm so we want to go and get one for you and then we have to get hosting which stores our website and also loads it and runs it and everything like that so we can't do that right now because we're using WP jelly to build out our website so what we're gonna do is we're gonna export all the data here and then we're gonna have our own domain and our own hosting and then we're gonna import everything so that we can run our own website with our own address so what I want you to do is open up a new tab and what I want you to do is come to this website right here called Hostgator comm WWE Hostgator comm this is where we can go to get a free domain and also where we can register our hosting it's where I go to recommend all my clients all of my viewers and where I've gone for most of my career to get my domains and hosting because Hostgator they're really fast really reliable they're cheap they have great customer service and there's about a 30 or 45 day money-back guarantee so that's why I'm gonna recommend them to you so once you come to Hostgator right here what I want you to do is go to this link called web hosting and go ahead and click on that and once you come to this page right here you're gonna see three different plans the hatchling baby and business plan and the business plan is a little too much and more than what we need so we're gonna focus on the hatching and the baby plan and the difference here is for the hatchling plan this is only for building one website and one website only and if you're only building one website this is all you need but if you want to build a more than one website and you want to host them on the same account so if you have more than one website and you want to host them here then you want to get the baby plan but since we're only building one website in this video tutorial I'm gonna choose the hatchling plan and with each of these plans you can install WordPress for free you get the free SSL certificate to secure your website and you also get a free domain so it doesn't really matter which plan you want it's really up to you but we're gonna select the hatchling plan in this video for my example so I'm gonna click on the Buy Now button right here and once we come to this page right here this is the signup page and what I want to do is I want to go through this page with you just so that you fill everything out correctly so we're gonna register a new domain so that means that you don't have one already but if you do have a domain then you want to click on this tab right here so the first thing that we want to do is we want to search for of the web address that we want to register so you can register any web domain that you want you just have to make sure that it's available so I'm gonna type in one right here and you can do the same so I'm gonna type in demo WP website calm and push enter and once you get your search results if you see this checkmark and everything looks good then we're good to go if you don't have the check mark then someone might have registered the domain that you want so you need to go search for another one okay so once you're ready you can see that it's free right here so that's awesome what we're gonna do is come down to the bottom and we can choose to have our privacy protected so if you don't want anyone to know that you registered this domain then you probably want to select this option but it doesn't really matter to me and we can always select us later so I'm gonna leave it unchecked because there is an extra cost right here and so once you're ready come down to step number two and step number two is where you're gonna choose the hosting plans so in this first drop-down again you want to select the Hat sync or the baby plan so I'm gonna select the hatchling plan right here and then what you can do is choose your billing cycle and you can see that there's one month all the way to 36 months and it's cheaper for the longer terms but it's really up to you and what I usually recommend is either 6 or 12 months just to know whether or not you want to run a website or not because sometimes it starts off kind of slow so for this example I'm just gonna select one month but again you can choose whatever you want and then what you want to do is put in a username and a security pin so go ahead and do that yourself if you need to and then come down to step number 3 where you can enter your billing information and I'm not going to do this with you because I already have an account but if you need to pause the video fill out all this information and then once you're ready come down to step number four and step number four is adding additional services and by default Hostgator selects some of these for you and what we want to do is we want to unselect these because these are extra costs that we don't really need right now and we can always use some plugins from WordPress to really do what this stuff does so we don't need any of this stuff and so just make sure that you uncheck it unless you really want this stuff you can always add it back later but again it's just an extra cost so you don't really need it and once you're ready come down to step number five and step number five might be the most important step right here because this is where you can enter a coupon code to save a bunch of money and by default Hostgator puts in a coupon code for you and you can see that you save a little bit of money right here but what we want to do is we want to type in another coupon code which is an affiliate coupon code that they have provided to me so it's NYC tech 3-0 and NYC tech 3-0 is the highest coupon code available with hostgator you're gonna save over 65% or so so you want to type this in and then click validate and what you'll notice is that the discount increases substantially so remember this was about five dollars before now it's all the way up to over sixty sixty five percent off so you're gonna save a lot of money typing at NYC tech 3-0 so make sure you do that and click validate and then once you're ready just come down to the bottom check this box that says you have read and agree to the terms and once you're ready click on the checkout Now button and once you sign up now you should come to this page right here and I want you to click on view your dashboard and now what we're gonna do is we're gonna go to our cPanel so that we can install WordPress so if you see your website name right here go ahead and click on the button that says launch cPanel and once you're on the Hostgator cPanel all we're gonna do is come right here to where it says popular links and then click on this button that says WordPress installer and once you come to the WordPress installation page just come in here select your domain name and then click on next and now you're going to come to this page right here and all you have to do is fill the stuff out so for the site title I put in studio designs and you can always change this later so it doesn't really matter what you put in and then you can put in a username and I typed in admin and then I put in my first and last name and then putting the email address that you want to have associated with this WordPress website and then once you're ready come down to the bottom check these boxes and then just click on install and once everything is installed you're gonna see this notification right here and you're gonna see your login details to your WordPress website you can copy and paste these and save them somewhere and you're also gonna get an email that has this information and it might go to your spam inbox so just go and check there if you don't see it but what we're gonna do right now is we're gonna go and log into our WordPress website so save this log in detail and then click on the log in button and now you're gonna come to the login page and all we're gonna do is type in our username and our password and then click login and once you're logged in this is the WordPress dashboard and this is where you go to create all your different pages and posts and upload your images and everything like that and also we're we're gonna go to import the website from WP jelly onto our own website so you can see that it's a little messy right here and what I want to do is I want to go and deactivate and delete the default plugins that are installed by the Hostgator website when we install WordPress so plugins are tools that help you customize your website and sometimes there are some plugins that you don't really need that slow down your website and Hostgator installs these by default so what we're gonna do is we're gonna hover over plugins right here and then click on install plugins and once you're on the plugins page right here I want you to come down to the plugins list and you can see that this is where we see a bunch of different plugins and what we want to do is check this box right here and then click on this little drop-down right here and click on deactivate so that we can deactivate all these plugins that we don't really need because we're gonna import our website from WP jelly and when we do that it's going to install the plugins that we need for our website also so once the plugins are deactivated I want you to check the box again and what we're gonna do this time is we're gonna click on the delete button in this drop down so you selected everything and now just click apply and then click OK right here and once all the plugins are deactivated just really quickly on the topic of plugins if you ever want to install a plug-in just hover over plugins and click on add new and it's gonna bring you to this plugins page right here and the is a wordpress database with all types of plugins that you can install on your website so whatever you need you can install a plugin for and we're actually going to install one plug-in together so we're gonna do that in just a little bit but this is where you can go if you ever want to find a plug-in for an Instagram feed or Twitter feed all you have to do is just come here into the search box and then type in whatever you want so we can just type in a keyword like Instagram and you can see in these search results that we get a bunch of different types of plugins and we can find the one that we want and then just click on install and activate and then customize it and use it for our own website so we're gonna come back to the plugins page in just a little bit to install a plug-in for our SSL certificate but what I want to do right now is I want to go back to the wordpress dashboard on our new website and once we come back here what I want to do is I want to go back to the WP jelly website because now what we're gonna do is we're going to download all the data or the plugin that we need so that we can export the WP jelly website that we just used to create our website onto the new website that we just created using our own domain so what we're gonna do on the WP jelly website right here is on the dashboard hover over WP jelly and then click on export full website and you're gonna come to this page right here and it's gonna give you instructions so what you have to do is download this plug-in so go ahead and just click on that and download the plug-in and then we're going to upload it to our new website so we just use this key right here to upload it so let me just show you let's go back to the new website that we created with Hostgator and what we're gonna do right now is we're gonna go back to the plugins page and install that plugin that we just downloaded it from WP jelly so hover over plugins and click on add new and on the upload plugins page I want you to click on upload plug-in and then right here click on choose file and what I want you to do is find wherever you downloaded the WP jelly zip so you can see it's right there I'm gonna click on choose and now we have the zip file right here and all we have to do is click on the Install Now button and once it's installed we can just click on the activate button and once it's activated now we should see the wp jelly on the left-hand side over here and we want to click on import full website so click on that link and now it's going to ask us to put in our website keys so back on the WP jelly website right here this is the key that we want so just click on this little icon to copy the code and then go back to your new wordpress website and paste in that key right here and then just click on import website and then right here it's gonna ask you a question if you would like to proceed and we do so click on yes and now all we have to do is wait for this to go from zero to 100% and now you should see that it says 100% so our website should be on our new web domain right here now so let's go and check it out let's hover over our website name and click on visit site and once the WordPress website loads you can see that the website is imported right here and if you have any customizations they should show up here also and what we can do in just a little bit is I can show you the page list so you can go into it and you can use the element tour page builder to customize these other pages what I want to do right now is first we can go to the WP jelly website and we can delete our site here we don't need this anymore because we just imported our website onto our own domain so we can click on delete my site right here and just type in delete right here if you want and click on delete and you can always come back to WP jelly to select another template or come back here and change whatever you want and then just go through the steps again of importing your website onto your domain but for now we are done with this and we also don't need the WP e jelly home page right there so all we have right now is our new website and this is awesome so what I wanted to do really quickly is I want to show you how to add the SSL certificate to your website so whenever anyone sends over information like a credit card or any type of information it's encrypted so we're gonna do that first and then what we're gonna do is talk about how to edit the contact form and make sure that's all setup and then pretty much we're good to go so what I want you guys to do is hover over the website name and go back to your dashboard once you're back on the WordPress dashboard you're gonna see some notifications and don't worry too much about them you can always just dismiss them if you want there are other plugins this is the WooCommerce plug-in so if you guys want an online store with your website let me know in the comments section and we can always create one and we can add it on to this website but for now what I want you to do is we're gonna go and install a plugin so remember we talked about plugins how they're tools to help customize your website we also can install a plug-in to activate our SSL certificate so what I want you to do is hover over plugins and click on add new and once you're on the add plugins page just come to the keyword search box and type in really simple SSL and it might be real simple as to sell but I'm gonna happen really and just see what these search results come up with and this is the one we want right here it has three million active installations so make sure that you choose that one and click on the Install Now button and once that's ready just click on the activate button right here and once you come to this page let me just preference this by saying that hostgator provides a free SSL certificate so if you're using another hosting plan I don't know if they're gonna provide this to you but this is kind of one of the reasons why I recommend Hostgator is because they do provide the SSL certificate to secure your website so if you do see this all you want to do is click on this button that says go ahead and activate SSL and now you're gonna see this notification right here that says SSL is enabled so we are good to go and now what I want to do is I want to come down to the settings and I want to go and just modify our site and WordPress web address really quickly so hover over settings and click on general and once you're on this page right here let's clean this up really quickly let's skip the setup right here and back on this page I'm gonna dismiss all this stuff just because it's kind of getting in my way so I'm gonna click on skip right there and then just dismiss this right here and just close out of this so if it brings you back to the main page I'm sorry about that let's go back down to settings and then go back to the general tab right here and on the general settings first off you can change your website title right here if you don't like studio designs or whatever you typed in when you install WordPress and then same with the tagline right here this one says make it fast with WP jelly that's a little weird so what I'm gonna do is just type in a their tagline or you can just delete this I'll type in professionally designed right here and what I really want to do is come down to the WordPress and site address now that we have the SSL certificate installed you should see HTTPS so the S stands for secured and then over here what I want you to make sure you have is WWE so if you have this then you're good to go but if you don't go ahead and add the WWE don't change anything else so your domain name has to stay the same you can't change it here if you do it's going to mess up your website you you're not going to be able to access your website you're not gonna be able to modify anything you're gonna have to start all over so all I really want you to do if you want is just type in WWE and then if you do that just click on the Save Changes button right here and that's all we have to do and right here also if you want to change your admin email address you can do that but this is the one that I wrote in when I installed WordPress and this is the one that I want associated with my website okay so what I want to do now is I'm gonna go and just open up a new tab just to show you on our WordPress website over here that we have a Contact Us page and on the contact us page we have our contact form right here and what I want to do is just show you how you can customize this and make sure that you get sent emails or messages whenever someone sends you a message so we're gonna go back to our WordPress dashboard and then on the left hand side over here you should see WP forms go ahead and click on all forms and once you're on the forms page you're gonna see a default form and this is the one that we're using to show on our website so all we have to do is click on the edit button right here and once you come to this page you're gonna see the preview screen of your contact form right here and if you want to add anything you can just drag in any of these fields and put it wherever you want and if you want to delete anything that you see right here you can just hover over it and click on the trash button right here okay so I'm gonna leave the contact form as is because I think it's pretty simple and it just lets you put in your name email address subject and message and that's good enough for me but if you want to add anything else go ahead and do that what I really want to do is I want to go into the settings to make sure that every thing is correct so that you can get an email if someone sends you a message so we're gonna come over here and I want you to click on the Settings button right here and then just come in to notifications and click on that and then right here where it says default notifications the admin email right here this is the email address that's associated with a website so that's where the messages are going to be sent if you want to change this you can just type in your own email address right here and then the from name right here you probably want to change this to your website name your business name or your name so I can just type in NYC tech club right here but that's pretty much all you have to do everything else is pretty much set up for your website but again if you want to change the email address for this and over here you can actually just put in your own and if you don't know what this stuff is you can always hover over these question marks and see what the section is for okay so if you do make any changes I want you to click on the Save Changes button and the code is already set up so whenever you modify anything on this page it's going to change for your contact form and everything is set up all right so now the last thing that we're gonna do is we're gonna remind you that you have some additional pages that you might need to customize so you might need to go to those pages and then turn on the element or page builder and then just customize the elements however you want to make the website your own including this Contact Us page so I'm gonna go back to the WordPress dashboard I'm gonna close out of this really quickly and I'm gonna come back to just the WordPress dashboard just to get back to square one on the wordpress dashboard if you want to create a new page and I'm talking a blank page so that you can just customize yourself you can hover over new and click on page and you can also go to pages and click on add new title the page let me just do it for you real quickly we can go and hover over add new and click on that and on this page I'm gonna close this and all you have to do is type in your title right here so we can just type in test page and then you can click on the publish button right here and once you publish the page you're all set up there are some WP settings here you can kind of see on your other pages if you want to select anything I don't think you need to but all you have to do if you want to edit this page is just turn on the element or page builder by clicking on this but right here and now you should see your blank canvas with your footer right here and again all you have to do you know or do you know how to do this is click on this plus button add your different rows and sections and then you have all your modules right here that you can customize and add and do whatever you want and remember you have the ability to make the website responsive okay so that's just a quick very simple tip on how to create a page but you already have pages created for you so I'm gonna go back to our dashboard and what I want to do is just show you the pages list so on the left hand side I want you to hover over pages and click on all pages and what you're gonna see here is a list of all the pages on your website so we already edited the homepage or you might have customized it on the WP jelly website but you also have an about page right here so I'm gonna click on the View button we have the contact page already opened right here we have a projects page and then a services page and I'm gonna delete the test page so you have these other pages like this about page and you can see that it has all of these elements already put in if you want to customize it remember all you have to do is click on the edit with Elementor and then same with these project pages right here you don't even need to make sure that these are project pages or services pages you can actually change the titles and the page title and you can really make these pages whatever you want so if you want a gallery or just an about page or another description page all you have to do is just turn on these elements or page builders and then go into these sections customize them however you want you already know how to do that because we talked about this when we did the home page but again these are all just elements and you can just click and drag in some new stuff you can delete stuff do whatever you want but make sure you do actually come in and edit the about page and then these other pages if you want them make sure you edit them also including the contact page right here if you want to remove any of these pages just go to this list right here you can hover over the stuff and you can click on the trash button or what you can do is you can click on edit right here and on the edit page for whatever page you're on over here where you have the document tab you can choose to change whether this is published or not you can click on switch to draft and that means it's not gonna be a published page and yeah pretty much you can click on the delete button here also okay so pretty much we are done learning how to make our WordPress website so again just come in and make sure you edit all these other pages I'm gonna close all these tabs right now because we don't need them the last thing that we have to do together is we need to log out and then we just have to have some final words so all you want to do once you're ready is log out of your website so hover over your website name and click on log out but before we do that if you do want to change your password or anything what I want you to do is come over here to user and then click on all users and this is kind of for security purposes if you see your user name right here you can always click on edit and then down in the profile section down here you can see that you can change your password so you can generate a new password and then over here you can change your display name if you wanted to put it in a different name so I can type in my own name if I can spell it correctly in this section right here I can actually choose this instead of admin if I wanted also okay if you make any changes come down here and click on the Update button and again this is how you can change your passwords a secure your website just hover over users and click on your profile and then you have that password section right here alright so now we are going to log out and I'm gonna send you on your way so I'm gonna hover over my username and click on log out and pretty much this is it you have learned how to create your own WordPress website using the WP jelly website and the element or page builder we learned how to customize all these different elements and really make our website our own using a template so it saves so much time and you're gonna save hundreds thousands of dollars building out this yourself so if you have any questions or comments let me know in the comments section if you need some additional pages to be made or any new videos that supplement this video tutorial let me know also please make sure to subscribe to the NYC tech club youtube channel and if you found this video useful please give it a big thumbs up and hopefully I'll see you in another video and pretty much I just want to say congrats again thanks for watching and I'll see you in the next [Music] do what you want to pay some people like.
The NEW WAY to Make a Wordpress Website 2020 - For Beginners
Reviewed by
ARMAN ANSARI
on
अप्रैल 10, 2020
Rating:
5
कोई टिप्पणी नहीं: