Hello Elementor Theme Tutorial: Create a FREE One Page Elementor Website in 2024

in this video I'll show you how to create a free website using the free Hello element theme I'll take you from a blank canvas just like this to a fully working WordPress website using elementa which we will be creating using only free resources so it will have a sticky transparent header we will be able to add our menu items to page sections just like this and then you will also be able to add a contact page just like this and also a lead magnet just like this over here that opens up in a new tab where you can offer your website visitors any kind of resources and our website will be fully responsive on all devices and after watching this video you'll be able to use the website that you have created using the free Hello element theme so let's get started in this video I'm going to take you through on how you can create a onepage website or even a multi-page website using the free Hello theme from elementa this theme was developed by elementa to help Elementary users not to struggle with finding which themes to use but it's also a minimalistic theme with less Styles and like a Bare Bones canvas that you can use to start creating WordPress website using elementa however for the most part you have to get element Pro so that you can fully take advant vage of the hello theme now for people who want to use the hello theme but they don't have the pro version of elementa this video is for you apparently I have a fresh install of Wordpress so when you come over here on the homepage it's showing the current 20204 theme from WordPress and if we go right back here in the dashboard and we go to appearance themes that is the theme that you are seeing right here but we want to change that just in a minute I'll just say add a new theme come over here search for Hello theme but most times it's recommended uh right over here under the popular themes from WordPress simply say install and then activate the theme now when we come back here to our homepage you realize that now that has changed now there are some other thing we have to check before we start building our website uh first we have to come over here to the settings there's what they call the general settings make sure that you change the site title and give it the name of your website for example the site name or the site tagline over here you have to say you know just put some slogans over there that is if you have a slogan uh the web address or the WordPress address I don't recommend that you touch anything over here just leave it as it is the administrator email you can leave it as it is or you can as well change it change over here make changes to the site language which language your website should be the time zones and all that stuff so once you are done save changes under writing there is nothing much we can change over there at the moment and under reading there is something called a homepage display under this part we have to select if we should display posts on our homepage or basically to show the homepage um and then later on there is something very important over here search engine visibility you want your website to be in index as you're developing it or you want to disable that feature at the moment I'll disable that feature but please if you're going to launch your website make sure that you deactivate this feature and then save changes I am going to save changes for now but I have to go here under Pages all pages and I want to create my pages so that we can set our homepage as a static page under this feature so I'm going to say add a new page I'll create a homepage page and I want to create one extra page called the contact page basically the pages I'm creating will be this homepage which is a static page and the contact page which is the contact page that our website visitors will be able to come and you know find a way to write to us through an email or through a form that you'll be able to add under this page page once you are done adding your two pages then we can close this up we can come back here to the reading settings but maybe you want to see the pages so under all pages you see we have the contact page and the homepage just ignore the last two pages because they are installed by default if you install WordPress now back here to our reading settings and we now simply have to reload the page we're going to select static and for homepage we we going to select that we display our homepage so as you can see here on our final website we have the header and it has a logo it has the menu items so it has the about portfolio stories and contact and a special button which is a download button over right here so we are going to be creating a menu for our website and please pay attention to this section because it is a bit vital for our tutorial our website is going to have the options that can enable you to create just a simple onepage website but also it can be a multipage website just like I'm going to show you so when someone clicks on the about menu item they will be taken to the about section not on the about page and if someone clicks on the portfolio they'll be taken to the portfolio section not the portfolio page same for stories which is this over here but if they click on the contact page they will be Tak can to the contact page which is right over here and if they want to go back to the about page they just click over here on the about page and they'll be taken back to the homepage but under the about page section now that is something that needs a little bit of tweaking but I'm going to be showing you in this tutorial well so now let's create our menu and the menu items back over here to the reading or our website settings we're going to go straight to appearance menu now we are going to first create a menu I'll call it main menu I'll position it in the header and now I'm going to add my menu items to our menu I'll start with the pages that I have so home and about page I'll add them to the menu now we are going to add some custom menu items or custom links so under custom links we're going to add a link to our about page section and the same for all the other sections so I come over here I'll add a hash symbol and then add about link text is going to be about so I add to the menu same I'll do for other menu items so we have portfolio and stories back here to menus and portfolio and Link text is going to be portfolio so I'll add the last one which is stories and Link text is going to be stories add to menu now we reorder these and lastly we are going to add our button so the destination link or the link of our button is going to be this special link over here which is leading people to my gumroad page it can be a different thing for you for example if you are you know leading them to a newsletter or to a PDF for download or to any other offer that you have you can just add that link over here and then you're going to add the text which is for me download then I add and that's it for now but we are going to come back to this section later in this tutorial now let's go and have a preview of our website we have a menu over here we have the name and we have the tagline and that's it so when someone clicks over here on the download button so they will be redirected to this page which has the offers that you are giving up for download but as you can see that our download button is basically letting the visitor leave our website to the other third party website wherever you redirecting them to is not not a good practice so we could better make them open it in a new tab so how can we do that to make that this button over here is making the website visitor open it in a new tab that's a very simple one we're going to come back here to our menu and up here there is something called screen options click over there there is an option over here called link Target we will enable that option and then we close our screen options and now when we click over here on the download button or the download menu item we have a new Option called open link in a new tab so I will enable that and then save changes now when I come back over here on our page I reload now when someone clicks on the download button or the download menu item they'll be taken into a new tab and they offer will open up over there good now let's go ahead and customize our header to have something that will look like this what you see over here is that we have a logo the menu items and our download button but now what we need to do is to style up this header to have the background like this to be sticky to also have our download button in a certain style and as well as our menu items having this font style now that is what is going to take us inside the hello theme and then we use the hello theme feature for creating headers and Footers so how do we do that we are going to come back here to our website dashboard and we're going to come to appearance we have themes but this time we are going to go to theme settings as you see over here we have several theme settings or several hello theme settings so for example disable the description meta tag disable the skip link disable the cross site header and footer if you don't want to use the hello theme header and footer Builder you can disable that feature over here but at the moment that is what we are going to be using to build this and this down below here so we don't have to disable that feature disable the title tag yes we want to disable that we don't want titles to appear or the page titles in this case when you name a page homage when you open that page it will show home so for example when I come here to pages and then I say view page this one here we don't want this to appear on our pages when they are opened up so we want to disable that unregister hello theme style CSS we don't want to disable that unregister hello them CSS so we still want all the other settings I'll save changes now once the changes are saved we are going to come now here to customize now this will take us straight into the hello theme customizer just like you use other themes and you're able to access the customizer we also have the hello theme customizer we have the option to set up the site identity the menus and the homepage settings header and footer and the additional CSS for now we are interested in the header and footer Builder and once you click over there it will ask you to install element because to create the header and footer with the hello theme it requires you that you have the elementa page builder installed so we going to say install elementa now the installation is done we activate the Plugin or the elemental plugin I'll just close this screen over here because we have now install elementa and if you go under plugins we have elementa installed now when we come back here to our appearance customize header and footer I'll say start designning this will take me now in a new tab which will give me access to the elemental site settings I'll close this window and now I'm going to come straight here to the hello theme header so click over there and now this is where we can get started styling our header to the way to the look and feel of how we want it to be so back here to our hello Elemental theme header inside the site settings we want to disable the tagline this over here from appearing in the header and the layout is going to be default the width will be boxed and the content WID we leave it on default Gap default and the background type this is where we able to add the background color to our header open that up here classic I'll add a global color so or I'll create a global color so I'll come over here say add my color code which is this and I'll say create new global color so that's the color and I'll just give it blue as a name that's it so now you see we have a background color for our header next we are going to select the site logo so instead of using the site logo as a title we are going to use a site logo as a logo so select that and now we want to add a logo we have to add a logo for our website so I say update and I'll go back to the site identity and over here under the site identity they allow me to upload a logo so I'll come over here upload my logo which I already have add the alt text of that logo you know alt text is text that help screen readers and also search engines understand what the image is about if it's an image then try to describe that image in three to four words that makes sense I can as well create a site favicon and add it that a site favicon is icon that appears right here at the top in the browser tab so I'll say update now when I come here to my header you should be able to see that we have the logo which is that and also we should be having a side 5on up right there you see it's now appearing but if I have it in the tab open because the tab background is white so you can't see it but it's right over there now I'll go back here to our header we have the site logo I think I should reload this page so that you have a clear preview this is now the preview back here to our hello theme header site logo we want to reduce the size of our logo to something like maybe 75 and now under the menu option we want to select our main menu as the menu of course you can create different menus under the appearance and you can point to those menus or select those menus under this drop- down option menu layout is going to be horizontal the break point when the hamburger icon will appear is on tablet which is still okay and now we have to select our font color so which is going to be a white in this case because hey if it stays in that color no one can read it so I will make it white and then we are going to come over here to the typography and here is where we to select the type face for our font so it will be DM self display our font and we can choose how big that will be 18 looks fine and the weight is going to be about let me say 700 yeah that that that also looks fine I'll update and now let's have a look at how that looks like good so it's a good way to start our header is getting in shape we have our menu items and we have our contact page and our button but now we need to put some styling to our button and also how are we going to turn our header to be sticky and responsive but before we go into that let's first add some sections on our homepage so that we are able to link our sections to our menu items and then also we will make our head a sticky just like you see over right here and then we'll also style up our Buton so to add content to our Pages or to our homepage let me close over these unnecessary tabs that we don't need at the moment so I'll come back here to the dashboard come to Pages all pages remember we already installed elementa so now we can just simply say edit the page I will open it in a new tab and then say edit with elementa and here we are so how do we start creating content in elementa the first thing that you have to understand is how to use containers and I have a specific tutorial on that and I'm going to link it down in the description of this video and if you don't understand how to use the containers or the metor containers that video will help you so in this tutorial I'll show you how you can use some nice looking templates from templat which is a premium Elemental template resource on the internet and you can either start free or you can subscribe and be using some templates from there and to do that first of all you're going to go to goch ug.com for/ templat and that will bring you to this website over here which has a bundle of Premium Elemental templates at the moment they have over 5,000 templates and template packs and over 300,000 active users you can access your templates and save them to the cloud you can use their free plugin and install your Elemental template templates and these are some of the cool templates that they have both free and pro templates right over here you can choose from different you know kind of templates and also dependencies for example there is uh the blog and magazine celebration construction e-commerce you can also download full page templates you know landing pages archive pages and all that stuff but if you here and you don't have an account yet you're going to say get started and you can choose to start for free just like I'm going to show you in this video and then you'll have access to over 2,000 stter items and then you can upgrade later but if you feel like you want to have premium templates at the moment you can just go ahead and subscribe to any of these uh subscriptions and once you are done signing up over here on template Le then you're going to come back here to your WordPress website you're going to come to plugins install plugins install a new plugin and you'll have to look up for templat which is a free templat plugin but to use it you still have to have an account on templat so I'll install and then I'll activate templat I am going to log in I'll enter my email then I'll add my password then I'll say sign in I am now able to start using any templates from templat personally I was interested in photography templates so I just clicked over here under photography and then I say F Tab and right over here I'm able to see some templates about photography and exactly this is the one I used they are the templates right over here and I wanted to use this and when I open it uh you can even go ahead and look at the live demos of the templates so this is it here and the g and all that stuff so I have this homepage start a template over right here and I am going to say insert of course you can as well go through these other options down below here to select which template you want to get started with and I'll say insert in this case it is also going to tell me that it's going to install an elemental add-on called essential add-ons I think this is the most popular element addon apart from premium addons for element there's also essential addons for ment with over a million active users at the moment so I'll say install and proceed the UT here it's asking me to create a page now I'll just say import into the library and then I'll say preview template so this should be able to take me to you know a page like this now when I go back here to my dashboard I'm going to say Pages or in fact I'll just go straight to my homepage that we already opened and I will load now we now have this new icon from templat so when I click over there I'll look at the pages I have all these pages but I also have templates and you see I have already downloaded this temp this template and I'll say insert which is a homepage template and now I'm now inserting it on my homepage boom there there we go first things first I noticed that this template or at least for this template that I selected it was not already container converted most or some of these templates are still using the old column section model and right now elementa is using containers hey and don't get me wrong they still work pretty fine everything is fine but also if you want to get more flexibility and uh improve your uh site performance it's better that you convert this to Containers I don't recommend that you simply click over here so for example when I select this section there is an option called convert yes it works certain times but other times it will break things up so for example here it has worked but it's not the best practice and I talked about that in a video which I'll also link right down in the description of this video I've converted this section into a container so we have this which which is a section and now I've converted it into a container and we are things look fine so I'll just now delete the first one here and I can do that for other sections and when I go further down if I convert this I'm sure it may not work so for example when I convert you see now these are now in a vertical Direction yet before they were in two rows and three columns so uh this would require properly to add a new container and change the direction of these but now you get what I mean it may not really convert to what it should look like that's it so I'll delete the other sections I may as well convert this one so convert this give these containers names so for example this is going to be simply hero one and I'll name the second one to be port folio I'll name the third one to be our H about I'll name this to be our stories so remember we want that about is a second so about about is a second and then we have portfolio and then stories now now uh we can as well go ahead and do some edits on these sections so for example we want to change the type face for the headings this over here and we apply it everywhere on the page so I'm going to select this and I'll come to style typography change this to DM serif display pixels will be 75 and I'll make the line height to be 85 pixels and I am going to add this as um before I go ahead I'm going to make it semi bold and I'll make this as a global font so headings so now I'm going to apply the same Global font to all the other uh headings I'll convert this to a heading style under typography select headings uh same for this Gallery uh typography and style headings then select this portfolio style typography headings now the other thing is now we want to link our sections or containers to our menu right over here so for example the about so uh the about section I'll select the about section or container and I'm going to come here to advance under CSS ID I am going to add the ID for this so This ID should match this ID should match the ID that you chose in the menus area do you remember this part so under appearance menus remember under about we chose a custom link called about this one here is what we going to use without the hatch symbol so select that uh this which is the about and advanced CSS ID add the about same we do for portfolio which is down below here we're going to come to Advanced I remember now this is uh a container so CSS ID we have to add portfolio make sure that you don't mess up the spellings so it should be the exact spelling that you used here come to our page add the CSS ID same for stories come here so this should change to stories okay and then under Advanced CSS ID it should be stories that is the same word that you used here so should be stories copy that come back here to our Advanced options section for story paste that and then now update now when we come now to our homepage we are going to reload that you realize that we have our page looking just like this nice and neat and our stories I don't like how this is overlapping um I'll come back here to the stories part select that container inside and Link I'll give this a top ping of maybe a 30 back here to our page reload where is the stor part good fixed now what else do we have to fix or should we have to fix now we want to change the background colors for all these sections so we are going to come here to our page home page select this and uh under style background color a classic background color it's going to be our blue you remember when we selected and made that blue a global color this is where it is helping us from we want our blue also for this select this section as well a container blue and also the inside part or containers static blue I think this is the one okay and classic do and as well a blue update let's go and have a preview on our final site great uh good and yeah I like how everything now flows now remember that we changed the Cs IDs for the sections now let's test them here so when I click on about that should take me to the about section if I click on portfolio that should be able to take me to the portfolio section which is called the gallery and if I click on stories that should take me to the stories and contact obviously that will take me through the contact page but now when I click on about it doesn't take me back to the about page what should I do so to fix that we're going to first of all come back to our homepage and copy the URL for your homepage copy that come to menus and go to the about menu item before it you're going to add and paste that URL just like that so it is the URL of the page forward slash about with this hash symbol make sure it's there the same we do for portfolio paste the URL of the homepage and it should also have the hatch symbol repeat the same for stories and that's it so I'll update I'll come now to our page which is our homepage reload this now when I click about it takt me to the about page when I click portfolio takes me to the portfolio section stories and now when I click on contact page it will reload the contact page which we haven't added anything at the moment but now if we click back to the about page or the about section it should take me back to the home page and directly to the about section in this part of our tutorial we are going to make our header sticky and a bit transparent so something like this so to do that we are going to add some custom CSS to our header because the hello theme doesn't come with a functionality to add or enable a sticky header or even a sticky transparent header however the hello theme gives us a free option to add additional CSS and under our dashboard and you come over here to the customize option for the hello theme you realize that we have the option to add additional CSS and you don't have to worry about writing the CSS because I'm going to provide it under the description of this video so here is our CSS and just to try to explain it to you or what it does so we have the section which makes the header sticky so here we have uh the class which is targeting the header to make it sticky and then also down below here we make it that it is on top of every other section of the page and then here we make sure that the header is responsive on mobile and tablets right over here and then uh we customize also the hamburger icon so if you are viewing this website on the mobile device like this the hamburger icon is styled up in this format without this CSS for example if I remove this you see that our hamburger icon looks very ugly it's in dark color which is the default color that comes with the hamburger icon on install of the hello theme so we add that CSS to style it up so this is the style that will help us style our download button to look just like this and I gave it a class class but by default the hello theme doesn't give it a class so it's a menu item and you can for example if I just come over here inspect and select this item over here it is menu item 15 so this is a CSS ID so in case you don't want to create a CSS class you can just tet this ID so you replace the class which I created so it can be here it is 15 so you can say this menu item and then over here you just add the CSS ID which is hash and this ID me I just created a class which is called download so I'll copy that class so I'll exit this come right over here to our appearance menus we have the download button but we want to add a class over here how do we do that we'll come back here to the screen option and we have something called CSS classes if you enable this feature then you will have the option to add a CSS class to the menu item called download there is our CSS class added I'll save the menu and update and now when I say publish and I reload you'll see that this menu item will have now The Styling that we added using the additional CSS okay so this whole section over here is for the download button and you can change the background color on Hover and then here you can style the menu item itself and right over here you can set the background color for the button these are styles for the normal and active states of the button and here is the style for the hover state of the button just like you see over right there so once you are done you can just say publish and now we will have a fully responsive sticky transparent header using the free Hello theme for elementa next is we are going to be adding content to our contact page I'll exit the additional CSS section and then come here to the pages contact page I'll edit with elementa so right over there I'll select a template to use so I'll go straight to my templates I'll insert this kit I'll delete all that I don't need for our contact page p delete this and right over here I'll switch these columns I'll rename this to be contact as um and I'll give it a typography style of our heading and here it's going to be uh an H3 so I want it to be up over here I will delete this as well the bottom and right over here I'll add a form so right over here we can say form so this contact form seven widget is provided by the essential adance for elementa but you need to have the contact form 7even plugin installed so I'll just uh add that down below here and I'm going to update and then I'll come back here to our plugins install plugins then I'll say add a new plugin and then say contact form s it's here install have it activated make sure that you come here to settings and then create a form or you can simply just select this short code but once you install it automatically contact form s widget will give you the option to select that form so when I come back here I I reload this page our contact page and now when I select this widget I have a new form alternatively you can say create a new form and you can uh decide what form fields are going to be in that new form that you are creating so when you use a default one this is how it would look like so you can come back here and style up how everything is going to look like typography for the labels is going to be DM serif bigger and you want the text color to be visible something like that and you can choose to to style up your submit Button as well and you can choose that you don't want this image but instead you want to add your contact form right up here uh so something like this so you have set up your contact form make sure that you test the form and it works fine so if you don't know how to set up the contact form 7 just check out my Elemental contact form 7 tutorial so I'll add some pading on the left hand side a 30 so now when I go back to my website I reload over here I come to the contact page you realize that now we have the contact form of course we want now to change our background to match the background of other sections of the website so make sure that you update and I'll come over here to check out how it looks like good now we have also to style up our footer we come here to our site settings we come to hello theme footer so you want uh to not show the site logo we don't want that but we want to show the site tagline we don't want to show the menu and we only want to show the copy and if you want to change uh how these look like you can come over here to tagline or under copyright and make changes to how the copyright is going to look like so before we close up our tutorial let's do a recap of what we have done we have created a header a sticky transparent header we have created a footer we have created and added our homepage sections and we've also styled up our but and also made it that it can open in a new tab and yes so now let's look into what other things you have to know about before you take your website live so we go back here to our editor and we're going to come here to settings there is what they call Pama links and make sure that you have the post name set as your PMA links and if you move your website to a new host and your pages aren't linking make sure that you just come over here and say save changes with a post name selected and then you try again checking your website links if they are working so the other thing is that we have to look into the plugins the plugins that we have used in this tutorial the contact form 7 plugin for adding the contact form on our website elementa for helping us building the sections and the essential add-ons for elementa which is which is a premium element add-on that you can use to build sections of your pages so for example when I come over here on our contact page and I want to add a new section so when I come here to widgets not the pro widgets because we're using the free version of elementa you will see that you have widgets from the essential addons for elementa so why do we have the essential addons for element because they are the makers of the templat uh templates for elementa and if you install those templates on your WordPress website by default it will also install essential add-ons because some of the widgets that I used in creating those templates they are widgets from the essential add-ons for El so that is why you will find that you'll have the essential addons for element plugin inside your WordPress install last but not the least you have to make sure that your website is responsive on all devices and that your website visitors won't find issues while navigating your website on mobile devices and if you want a tutorial on how to create responsive websites in elementa then I'm going to link also a video in the description of this video to take you through exactly how to create responsive designs with elementa and finally if you have found value in this hello theme tutorial of elementa and maybe at some point in time you want to you know take your Elemental skill set to the next level by probably getting Elemental Pro then I recommend you checking out my Elemental Pro boot camp where you can take advantage of the elementa pro plugin to build fully Dynamic websites for elementa I'll be leaving a link to the course in the description of this video thank you so much for watching this video I hope that now you have an idea on how you can create a free website using the hello theme for Elemental and if you have any questions please don't hesitate to let me know down in the comment box of this video but also like the video if you liked it share it with a friend whom you think it will be of value too thank you so much and see you in the next [Music] video

Channel: Hamza - GoTechUG

Views: 949

Keywords: hello elementor theme tutorial, hello elementor, hello theme elementor, hello theme, hello elementor theme, elementor hello theme, elementor hello theme tutorial, elementor tutorial, one page website, one page website wordpress, elementor theme, hello elementor theme customization, elementor wordpress tutorial, one page elementor website

Id: Tl8f9YBlcV0

Length: 43min 43sec (2623 seconds)

Published: Sat Mar 02 2024