FREE HELLO ELEMENTOR THEME TUTORIAL: Make A FREE One Page Website using Elementor and Hello Theme

hello happy people Hamza here and welcome back to the channel now in this video I'm going to show you how you can create a complete website using the free hello theme that was made by elementa and of course you won't need to buy anything in this tutorial so I'm basically going to take you every step on how you can either create a single page website a one page website or a complete website using the free hello theme from elementa and vital elements and also a couple of other tools that I'll be showing you in this video so let's dive straight in and get started in this video I'm going to show you exactly how to create a website like this whereby someone simply can click over here and they move to the next section click over here and move to the next section and click over here and go to another section and in this tutorial we'll be using the free hello theme that was made by Elementor and we'll create everything for free from headers and footers on every other section in this tutorial so let's move straight into our dashboard at the moment I have a fresh install of WordPress see when you go over here to plugins you see I have no plug-in and when you come over to themes I have the default themes when I open up this website in a new tab you see that I have everything at default this is the default 2020 theme already installed so what I'm going to do is simply come back to my dashboard and I'm going to add a new theme that is an appearance and I'll search up here a theme called hello Elementor and over here installed my theme which is from elementa once my theme in this tall I simply activate now once hello theme is activated when we come back here to our home page I'll reload you see that now our website layout or home page has changed next what we are going to do come back over here now we are going to come straight to the appearance section and we're going to create a menu and we're going to name this to be main menu so this is basically going to be the menu that is going to have our website items so we are going to create a custom menu and we will be using the custom links so our website is going to have the home about services and contact so we come back over here and I'm going to come to my home page copy this URL come here to the custom links add my URL add the pound sign and add home then I'll use the link text to be home let me delete the default ones or the default custom links that we are already here so now we have our created custom link this one over here next we are going to put the services link services but remember to add a pound sign down here add the link text next what we are going to do is to add the own sign about we are going to add down here is about and lastly we are going to add the contact link plus pound sign and then contact in small cups link text is contact Add to menu then I simply reorder this because we want them to be less than order as this home about services contact I create my menu once that is done we are going to come here straight to the plugins and we are going to add a new plugin and we are going to add a plug-in called elementa because elementa is a page view that we are going to be using so by searching over here Elementor shows up over here or you can simply click on this call to action simply install elementa elementa is a page view that enables us to build up everything here in the page section including these sections elements images and all that once is installed simply activate boom now it's activated next what we are going to do is we are going to come back still to plugins and we are going to add another plugin so the plugin we're going to add is called header/footer blocks it was made by Astra and this plug-in will help us to create our headers like this over here and the footer like this over here because if you have the hello theme then you are unable to create headers and footers without Elementor Pro so here we're going to install our free plug-in called elemental head and footer blocks and at the moment it has over 300,000 active installs once it is installed we activate and boom we have now our header and footer block plug-in activated next we're going to add another plugin and this is the last plug-in that we are going to need plugins call Umberto elements a motto elements brings us pre-made amazing templates for elementa for headers footers and page sections that we can use in our elemental website for free at the moment it's plug-in has over 100,000 active installs and it was made by umberto once it is installed we simply activate boom now it's activated next we are going to do is simply come over here to appearance come to header footer builder now we are going to make the other plug-in header footer blocks to use so we simply create a new header we're going to name this header and we are going to select the header as a type of template and we want it to display on the entire website and that's all simply now publish we have our first header next we are going to come back here add a new and then we are going to create a footer template I mean we are going to select this to be our footer and we want it to appear on the entire website okay so we simply publish now we are going to first come back here to the Umberto elements plug-in and we are going to activate that plugin because it requires you to have a free account on Umberto so I'll simply sign in if you don't have an account you can simply sign up with Umberto and you're good to go now activated our plugin or the Umberto elements plug-in now I going to come back here to our appearance header footer builder and we are going to select our food I'll open it up in a new tab and I'm going to edit this with alimentar once we open it with alimentar then it will be in position actually to have this option here for the inverter elements so we're going to select the inverter widget come two blocks over here come to the footer we are going to look up for our footer we are using which is this over here and it's the same footer down over here so I simply add a block so by adding this block that means that this is going to be used as our for the template in our footer of our website boom our fruit a template shows up now I can simply do some editing for example we are going to change the name of a company over here for the logo so I'm going to string this to creative studio something like this then down here we can also you know change the text over here you can edit everything in this section you can change the Twitter handles for example at my business name which is got a qg or at creative studio the same you can do for all the other handles if you have them that is for your studio and all the other social media platforms you can edit your address over here by changing the address name and your telephone contact for example over here I can change this to 2 5 6 0 0 and that's how I can have my contact edited I can change down here my email creative studio dot-com or creative Inc see that's how you can edit all that over there you can delete what you don't want for example if you don't the other email to appear good there you go so we are now finished editing our footer of course you can also make other changes like changing the background color this is probably the background overly and you can give it the color that you want I'll leave it probably on a darker color something of that sort and now we are done so when we come back to our home page we are going to reload this bomb now we have our photo with our website with our company name the links that where I did over down here now I'm going to exit this come back over here we are going to exit to the dashboard and we are going to come back to appearance header footer builder and we are going to open up our header template then we will open up this with alimentar then you have to come over here to the inverter widget come to blocks and we are going to go to the header blocks and we'll get our header template which is over here now this one's you that you should actually have Elementor Pro but since now we have a header footer plug-in that we are using we can simply ignore running and then we can import the block now that means that we can use the blocks that we are made for the pro version of a Dementor in our free Elementor tutorial or website now we have our header right here we can change our logo for website name to creative studio ok and you can also change the image over here and switch to the image that you want to use as your website logo i want to go into that i'll just simply leave it to the default one then i look up here for the navigation widget which is made by header footer widgets then i'll simply drag it over here to our header section i'm going to come over here and of course we have to select the menu and automatically do select our main main that we created that's why you see we have home about services on contact what I'm going to do is to come over here to the layout and I'm going to align it to the left which is right there actually that is aligning to the right after aligning it I'm going to come here to the styles I'm going to come to the typography and I'm going to reduce the font weight actually first changing the font face to Montez er add something of that sort and I'm going to use a font weight to maybe 400 and I'm going to come here to our Creator studio come to style and I'm going to copy the style but they used here of course they can be a different color or a different color theme that are using for your website so I come back here to our navigation then come over here to the text color for the main navigation and boom now we are using the same color theme and if you have a drop down or sub menu items you can also style them from this section and of course I have many other tutorials on how to customize your header or how to use the navigation widget for Elementor okay so even down here you can style up your menu trigger or even close icon all that you can do from there then the other thing we have here is the button where does this button head to you can make this to go on a specific landing page or another website or whatever you want for example I'm going to link this to my newsletter so go take ug com4 slash use later and I'll make sure that this link actually opens up in a new tab okay that's all so now what I'm going to do is simply update our header doesn't have a background but if you want to give you the background you simply select the whole section come to style and you can give this a background color something like that so but I want to leave it to be white so I simply update then we are going to come back to our homepage and now we are going to reload Oh see now we have our header creative studio logo and the navigation next in our face what we are going to do is now we go to exit the header template we are going to come to pages and we see all pages now we don't have any page that we created these were all imported once we install WordPress so by default WordPress installs for us the privacy page and the sample page but in this case you want to create a new page and this is going to be the home page so publish next what I'm going to do is to come over here to settings reading settings and I'm going to set our home page as a static page so select a page and I simply save once I save and then I come over here and I reload realize that now our archives page is going to change and it will show the home page now we're going to go back to our reading settings come to pages all pages and then we are going to open our home page or edit our home page and we will edit this home page with Elementor because we want to add our sections and elements or our design or content into our home page so we come back here to our website or home page now we are going to come here to the invite Oh widget and we come over here to the templates section and the first templates actually premium templates but I'm interested in their free templates which are way down here so once your templates show up over here now in Vitamix you really amazing templates and for example here with the home page you have over three templates the first template for the home page second templates template and all the other pages now for the about page in case you are going to create custom pages for the about portfolio seeing or services pages you can simply import them into your WordPress website now what I'm going to use is only the home page template which is this over here is the same template that you see right over here now when I come over here to my template section I'm going to select this home page too and when you look at it over here it has everything that we want for example the home and then has they you know they about then the services the company offers and the contact section so I'm going to simply import by importing this template that means that this template will be added to my home page because that is where the template is going to be saved now once that is done I simply close this I'm going to simply come over here to the folder icon then come here to my templates and I'm going to select the creative agency home page - and in our insert that I'll accept it to override the settings boom now we have our template imported now what we need to do is of course a neighbor that our header and our footer will appear on this template so I'm simply going to come over here to the Settings icon or the gear icon and I'm going to come down here to the page layout and I'll select element a full-width and boom now our header shows up and our photo shows up now when I update this then I come over here to our home page see now before we never had anything on our home page now when I reload this section for when I reload our home page boom now we have a complete website or a complete home page that we have created for our WordPress website now everything over here was imported you see all these see all this over here and all the sections over here I love really the templates from umberto they come with amazing animations layouts and of course the creativity is way up there next what we are going to do is come back to our home page and we can do a little bit of customizations of our sections but as you see now what we have done is exactly like the same that we had done earlier on on this home page that I showed you at the start now when we come back to our home page we can make a couple of settings you see when you come over here to our first template when I click on services we exactly go to the services section when I click on the About section I exactly got tagged About section and when I click on the contact' boom I'm taken right down there to the contacts section how do we do that when we come over here to our Elementor website or our home page we are going to first of all come and select every section that we to link up to our menu how do we do that of course when we come over here to the home section or the first section I want to name the first section the home so when I select the first section come to advanced come down here to CSS ID and simply named at home let it be in small cups because remember when we were creating our own menu when I come over here to the dashboard come to appearance menus you realize that under our home page we added a pound and a small home you see so this is what we have exactly to use right here for the home section and the CSS ID now for the About section I'm going to come over here to the section I want whenever us our about come to advanced and I'm going to make it to be about now when we come back here to our menu and we check our About section you see that it is and about in a lower case okay now what we're going to do is now come back here to our home page and we are going to move right to the section where I want to enable our services come to advanced and want to make this section our services section so that when someone clicks from our header right here they are automatically taken to our service sections that's from so next what we are going to do is now enable or set up our contact section which is down here from here to below someone can easily contact us they see our addresses our phone number and the email they can used to write to us so when I come to this section select advanced and I can say contact now what I have to do is simply update when I update I come over here to our website and I'm going to reload our homepage now what we are going to do is only to see magic when I say about boom I'm taking to the About section when a sec services boom I'm taking to the services section when I say contact I'm taking right down to the contact section so when someone clicks on this button automatically should be able to take them to a new tab of my newsletter in a nutshell that's how you can create a website for free using the hello freedom from Elementor and using all other resources and blocks for free in your website the other things that you can do are unlimited for example like changing all the sections over here the collapse you know adding new sections adding backgrounds adding elements and widgets all those you can be able to add them like I've shown you in my previous tutorials or I'm actually going to link some of them in the description box below so that you can easily enable edit a couple of sections in this new website that you have created thank you so much for watching this tutorial I hope that now you have an idea on how you can create a complete website using free resources like the free elemental head of theme and also other free tools like I've shown you in this video in case you have any questions or comments please let me know down in the comment box below but also I'm going to be leaving some resources right down in the description box below that you can use actually to enhance or even to better your website that you just build and hey if you know the channel please don't forget to hit the subscribe button and the bell icon so that you don't miss out on new other tutorials when I first came out thank you so much for watching and see you in the next one good bye

Channel: GO TECH UG

Views: 30,224

Keywords: hello theme tutorial, hello elementor theme, elementor hello theme, how to make a website using hello theme, how to make a full website using elementor, how to make a one page website using hello theme, make a free website using elementor, wordpress hello theme tutorial, elementor tutorial

Id: xe4y1qbUfv8

Length: 20min 49sec (1249 seconds)

Published: Tue Apr 07 2020