Create a OnePage Website Using Elementor and OceanWP for Free!

in this video we're going to create a one-page website using elemental plug-in and the ocean WP theme hi my name is Travis and I constantly producing wordpress tutorials so if you like that kind of content please subscribe to my channels so as I have said we're going to use free plugins element of free and the ocean WP and we're going to create one-page website one-page website means that you only have one page with different sections and you have a menu there and when you click to an item of the menu the page will scroll down and go to the selected section this kind of websites are practical for the businesses that don't have much content maybe you're creating a website for a coffee shop that only wants a page to show who they are what they are doing two or three products that are making and akan that page they do not want to have online delivery online buying and they don't want anything except some information if you don't have much information about the business or the website that you are going to create and you don't have enough content to full pages then consider making and one page website so we're going to start with a blank installation this is a local installation and I assume that you already know how to install WordPress and you have already bought a domain and if you don't please see other videos how you can do that so I'm starting with the blank and as I can see a Greek installation so let me quickly change the language so I'm going to select English okay and let's say that you didn't see the last part so we are here okay so we're going to start by going into post this is a default installation so it will have some damn content here okay I'm going to the trust and I'm going to delete permanently I want to delete all posts then I'm going to all page this and I'm going to delete both of those pages move to truss apply and then I'm going to the trust and I'm going to select all of those and delete permanently after that I'm going to create a new page and I'm going to name it home home page going to hit publish twice and then continue let's go to comments a comments here I don't have to delete anything then we're going to appearances themes and here we have the default themes 2019 I'm going to select it and then press Delete and okay 2017 selected delete okay and 2016 selected delete and okay after that this is the default so we cannot delete it and I'm going to select add new and I'm going to select here to type here awesome WP and I'm going to install this plug-in the reason that I am styling the ocean WP not Astra or any other theme which are all all of those grade is because in the free version of ocean WP I have many options dip in the header you can build I think about seven combinations how the header will look menu and logo and also you have templates that you can create of your own using Elementor and create your custom header and footer which is great for a free theme and that's the only reason that I'm using the ocean WP and not Astra or another theme if you want you can use another theme they're all great I mean those that are known to be great and not all every theme so here it says that it wants Elementor Austrian extra and WP for let's go to begin installing plugin I'm not going to install WP forms because I using for manator as a form so just install those two elementary no Shion extra and after that we're going to install some other plugins as well so let's see if we take this thing some time maybe I will pause the video okay we have a warning here doesn't matter I'm going to refresh into the plugins and install plugins and see if it has already been installed let's see skip setup and let's go to plugins again install plugins and now we have the IQ SMED which I will deactivate it the Hello Dolly which I will deactivate it and we have the ocean extra el Elementor okay I'm going to select those two and I'm going to hit delete and now I'm going to select the add new and install some other plugins I want to install the SSL they really simply as a cell this is something that you should install this will forward your non-http pages to h2 HTTPS pages not none let's repeat the HTTP to HTTPS so it basically will redirect everything to a page with SSL then you want something for a forum let's go Enid I knew I shouldn't activate it so I not activate the next one and I don't have to do the same steps again and let's go for for manator okay so I'm just going to install it and not activate this so I can install all of those plugins at once okay then we're going to use a gas plug in the best free for in my opinion is the Swift and the best paid is the WP rocket so I'm going to install the Swift because we're dealing with free plugins so I'm going to pause the video here ok let's go for the next one which is the Swift and install it next we're going to install the updraft plus which is a plugin so we can take our own backups now many web hosting companies have their own schedule and non backups but you should really have your own system for backing up your website and it's a better solution if once a month or twice a month if it's a website that constantly uploading you constantly uploading some material take a backup locally to your computer so you will not depend to the world web hosting company at all let's go for the next one which is the rank map and it's an SEO tool rank Mothe is the plugin that will help you connect your website to Google okay and the last plugin is a security plug-in is the word fence security and I'm not going to get into these plugins I'm not going to do anything except creating my website I'm not going to configure the other plugins because I don't want this video to take too long that I have already created videos for these plugins except ranked math which will be coming and updrafts I think and let's go for the last one which this word fence okay install now now I can go to install plugins or I can just activate that at in it will redirect me to the plugins and I'm going to activate this one this one and those three activate apply and after that we're going to the settings okay we're waiting so it redirect me to these sift performance Auto config and start it will just take some time do all of those steps and let's pause the video again okay so it's taking some time and it has already detect some errors here because it's a local installation so it cannot find varnish or cloud for us so I'm going back to the dashboard but in your case just wait for these to finish and let's go now to settings and general so here I'm going to select the title which is choco or chocolate and the tagline the motto will be hot or cold we are what you want okay then we have the address and then we have the email I will not select any one can register and then we have the timezone I'm going to set it as Europe Athens and then the date format for me which is first the day then the month and I want 24 hours type format okay I'm going to save those changes and then I'm going to reading okay reading and I'm going to select static page and the home page this is why I created the page before anything then I'm going to select here the summary and the blog pages if you are going to create select something more than 10 go for a 15 or 20 or something if you have a template in the post that shows three items in the row then go for multiple of three okay 9 12 15 18 so or something if you have 4 blocks for articles in one row then go for a number that's multiplied by 4 or go for 20 or something okay let's say those and then we're going into the discussion and I'm going to to remove the the comments allow people to submit comments I'm going to remove that because I don't want in this kind of page of website to have comments of course it's only on articles and I don't have any posts here but I don't want to let's go to the permalinks this is very very important always go to the permalinks and select post name here it should be something by default in WordPress but they don't want to set it by default we have to do it every time ok I'm going to dismiss that I'm going to I'm not going to reload over HTTPS because again it's a local installation and I don't really care ok permits structure updated and this means they notice so let's see how the website is looking right now so we have something like home here and then we have here the logo which it's not a below uploaded yet so first I'm going to create a menu right here so I'm going into the back end going into the plug-in note plug-in sorry appearances then menus and I know already these sections and what I'm going to have in the menu so I just going to type it okay here is the main menu I'm just going to give it a name so I'm knowing I do know what I'm dealing with here okay then I'm going to select the display location to be the main this is the main menu save it and then I'm going to add some pages now the home page is basically something that we add pretty much everywhere of course when someone clicks in the logo he can go directly to the home page so in some cases we do not add it now in this particularly particularly website because it's a one website page you don't have to add the home okay you don't have to add it it will not go anywhere so I'm going to skip that and I'm going to go to custom links and for the URL I'm going to select pound at this moment I will add those later and for link we have the services we have the about us and then we'll have the contact so I'm are those you can add as many as you like and if you want to create subdomains you're going to move the part of the menu not subdomains why I said subdomain sorry submenu if you want to create sub items in the menu you just have to move drag and drop it a little bit to the right okay so this about us is a child to the services if I update tend go into the front end we will see now that we will have the services and the contact and if I hover over to the services I will get the about Us item so let's see okay the again and let's save again okay this is where the manual is located so we have the service and contact and when I have our services I'm going to get the about us as you can see here so let's go back to the menu this is the menu it's ready just I'm going to drag it drop it here because I don't want to have any sub items and then I'm going to the home page and I'm going to start creating the page now since we're here we can start by customizing the header first and later the footer so let's going let's go into the customize I'm going to open in your tab you can access the customize from here or appearance and customize or I think there's somewhere here also oh no ok in the front page it's here customize ok for some reason it's taking way too long to load but let's continue we're going to see all those settings just to know what we're dealing with let's go for site an ende first this is the site our tagline but we need the site icon which is the favicon and it will be located here in the tabs so I'm going to select the site icon it's recommended 5 512 pixels by 512 so it's recommended to have a square let's go to upload and let's go to these photos that I have already download and it's going for the services and let's use I don't know which ones this one for the contact us so let's slide all of those and okay so I have already resized images so you can see that the dimensions are 100 1600 by 100 1000 1366 and the size is 250 kilobytes so I have already resized images which is something that I always do before I blow those in the website and I have already named the pictures the images as the section will be so this is for the About section this is the service section this image will be for the contact which one I selected this one contact us this is the logo and this will be for the hero section okay so this is something that I always do I want to name the images like that and I don't want to leave the images like DC or something 94 453 so contact us I'm going to copy that and paste to the alternate text this is the logo so I'm going to do the same remember it's very important to have the alternate text this is something that Google wants and again for some reason this is taking way too long I don't know why part it's taking some time so I'm going to pause the video again so I just restarted my PC because it was waiting it was taking way too long so I'm going to select the title and copy that to the alternate text okay and do that here also now I have the arrows because I have gone into the library here and so I went here just to copy the alternate text so let's get back to the customization and let's go to site and entity we were here the side icon and of course it wants to have a square icon for favicon I do not have a square I think okay I have a square but I think it's not 500 by 500 it's not square so I'm going to select that and it will be cut a little bit but let's crop the image here and now you will see that I have here a favicon this is the favicon and let's get back let's go back and select menus here you can select which menu you want to go to where so the main menu will go to the main eye area and then we have the widgets which are those here for the sidebar we will not have sidebar so we don't care about the widgets let's go to the homepage settings we will see that have a static page and home then we're going to general and general styling here if we want we can select the custom header but we wanted at this moment let's go for primary color since my colors are already in for blue I'm going to leave it as it is you can see that here is the primary here's the hover so when I hover it has something else than just blue it's a little bit darker and the side but Crowns it's blank I want it blank and the links color is Grace I think and when I hover they turn into blue I will leave it as it is you can check and change what you want here so the layout Styles should be white and not post let's see if we can see what's what here I think hey as you can see here the white means from here and to this end to this one this is 1200 pixels this is something that I won't because in most occasions when people will visit my site from a laptop the most common laptop resolution is 100 1366 white pixels wide so I want to have 1,200 because I want to have also some space from here and some space here not from here space here and some space here so this will be from here to here the main container okay and everything else will be left blank and this is the content width 72 this is from here that it's the starting of the logo until here where the main container ends and then we have the sidebar I will not to change that but if you want you can change it and it will refresh it doesn't do that but it will refresh apparently in some cases and I will not do anything here because I don't have a sidebar a sidebar after all and then the page is layout I want to have a full width inside the pages and I don't want any sidebar if we you want some content padding top and bottom I will leave it as it is inside my page I will set them as disabled margins so basically this is the same after that for the source for the search results you have the posts and then you can have inside the post right sidebar right like here I want to have a sidebar for the post but not in this website because this website will not have post but if you're creating website with post please do a sidebar so you can have the recent posts a search or something else okay and this you can say change how the sidebar appears so you can have first sidebar and then content okay and then we have the open graph which is something for sharing into the social media we can enable it and I should recommend to enable it and then you can write your Twitter username Twitter Facebook page URL and the Facebook app ID so it can grab directly what you sir so let's go back I think I have room to remove that here because I don't have anything to put by but by all means go and enable that yourself okay let's go back and let's go for the page title this is the page title chocolade I will remove it because I will have the logo there so the not sorry not the this is the page title the home okay the chocolate is the the website title so the home will not be shown in any any version okay so I'm going to style here and going for hidden because I don't want inside my pages any title and inside a limiter which are going to huge to build the pages you can create a heading and add there the name of the page okay background color I'm not going to set any of those because I don't have here the title and then we have the breadcrumbs which are not for here not something that I won't here if you're going to create a blog website and you have many categories then you should have breadcrumbs okay then translation for home page 404 and search results here you can all go and translate your texts okay let's go to the next one which is scroll to top this is an icon that will appear at the right bottom and it will say scroll up to top I will put that there be aware that if you want to put something like that then you should not have any services like boats that you can will click here too so the visitor can speak to you or you don't want a notification there or anything else leave it for the scroll up button if you are going to put something else then do not put a scroll up button so this is the icon that I'm going to use and the background color should be this and the hover color should be this we will say it change it later on if we want to okay the pagination I don't have anything but if you are creating some posts then you want to have the next or the last this is the pagination the next page second page third page and everything else okay then forms we're going and we're not going to change any of that because we're going to change all of those in the form inator I have already created a video about that and theme buttons this is the default themes buttons that you are going to get I'm not going to change any of that either okay and then we have the 404 page which can be full width or something else and then you can also select the template for that okay let's go to the next one which is the typography and general I'm going to use here the Greek because I'm from Greece and then I'm going to check the body and select here another one which will be Roboto know for the body should be a bun too okay one two and then font weight default okay from style default text transformation now and font size let's go for 17 line height 1.7 and the font colour should be black okay after that let's go back and let's go to all headings and here I'm going to select Roboto okay and here I'm going for the font color of black also after that let's go back and then you can go to every inch everyone heading and something and change that to 4d let's go for a forty head on heading to let's go for thirty-two okay it's three it's twenty five eighths for its twenty one and then we have the logo here and I don't want anything in the logo because I'm going to remove a here the text so let's go back top bar this is the top bar where you can place the phone number you can place some icons some social icons and here you can select the size and what you want to have here it's pretty straightforward you can see the main menu this is the main menu and for the phone family I will leave it default it will grab the settings from the phones and then we have the size which will be a sixteen ok letter spacing I think it's good it's okay and as you can see it hasn't refreshed and the services has the sub item but it will do later on let's leave it as it is okay main menu drop-down so I don't have any mobile menu breadcrumbs blog entry title and everything else so let's leave this and let's go for the top bar which is this in general I'm going to disable it I do not want any top bar at this moment but if you want and if you want to style it you could go in the next step which is content and select what you want for the plate or you can go into the social and enable this social here by using something for the Twitter and something for the Facebook so you can see that it will load some social icons here of course you can select the color and what says place your contact it's here where you can have the number your mobile or something but I'm going to disable those okay and let's continue with the header okay general and this is how the Styles the style will look like this is why I one of the reason why I chose the ocean WP it has seven different styles for the main header so we're going for minimal and this is the minimal how it looks like and you can go for something else transparent which will be a transparent if we had content but we don't if we had the content should be underneath the menu then you can go for top menu with something like that you can go for a full screen click and get a full screen menu and some other options as well so let's go for the minimal if you want the header to be full with the height that you want maybe I should remove it a little bit go for a 70 okay and if you want to have the header border here that I don't care I can leave it as it is okay the background the padding and content after the heading if you want okay let's go for header media's here you can add here a video or background image or something like that I don't want anything and let's go for the logo this is what I want here I'm going to select this logo here skip cropping be sure to not have any padding inside the logo ok many many cases when I asked for a logo the client will send me an image let's go and select that again and I Hal I will have too many space too much space here and here as you can see now it doesn't have any space down here with where the letter ends a little bit further the image ends okay so it basically takes the whole space let's skip cropping and of course it's way too big let's go for something up 150 or something 150 no let's go for 140 130 yeah it looks better okay menu which sees if you want to have a template for the menu top level drop-down icon you can remove that arrow here second level if you want drop-down border I'm not going to select any of those but in the links I do like to have the back Lightning back lighting it's something that I really like here as you can see it's a really nice effect you can check all of those but I will leave it as this and then we have the main styling for the menu when the how the letters are links color let's go for a little bit of black okay when I hover I have this blue and the Kara menu item is this one but I'm going for a little bit of a little bit of darker than this blue but case of course it doesn't matter because I only have one page and one page website so just to show you what you can do here and not in this particular set of design it won't it will not work here so then we have the width for the drop-down styling this is the width and you can change all of those settings then you have the search icon which you can disable and let's leave it as it is after that we can go for the social menu and I can enable it and have some icons inside there but I don't want to so I'm going I'm not going to add any of those so I'm going to remove it again and the menu should will go back to its place okay and then we have the mobile menu and here it says where the break point is how wide should be the screen when it falls to another to a mobile menu so I'm going for seven six seven this is something that you should check but I know because I only have three items in the menu it will go until seven six seven pixels and then it will break to a hamburger icon okay and this is the mobile style with a sidebar or sidebar or something else you can check everything this is the hamburger icon the default icon of course this is the icon and this is the colors for the mobile as you can see it has way too much options for a free theme okay I think it's the best for me at least it's the best free theme in this particular time so block entries this is where you select what you want for the blog and here I should select two right sidebar but I don't have any posts hi again and then you can have the featured image title meta content with more and something else and this is for the single post and you can have all of those settings even have read more content and related posts and something like that and let's see if we have anything else we have sidebar and I'm not going to touch that and then we have the footer and let's see we can have three columns here three columns the background colour should be black and the text color should be great now let's go for white okay and then we have the links color should be blue or something border color and I'm going to hit the fixed footer on so the footer will go back to the down to the page so basically even if you have a little bit of contact here the footer will not come up this is something that I really like okay the padding I will leave it as it is for the moment but you know where it is and how you can change that and then we have the footer bottom which is this copyright text and it should be white so let's go for text color white okay this what you can change and of course you can change the ocean WP theme by Nick with something else this shortcode is something that will change as you can see it's 2020 now and next year it will say 2021 it will automatically change okay and I can remove some part in here because I think it needs a little bit to be removed okay something like ten to ten okay I don't have anything else if you have a custom CSS or JavaScript you can add it there so I'm going to hit publish and we're going to start building the page so let's see now how it looks let's go and refresh the page and as you can see here the menu is not saved okay I'm going to save that right now let's go to appearances and menus and this all because I just restart my computer because the website was going way too slow I think it's something with the hard drive but I'm not sure the SSD is failing me okay again it's taking too long to load I'm going to pause the video so the settings the menu is open and now I'm going to select this and drag it again here and save the menu once more and after it will load I will go in the front and then reload the page again let's see if it has been saved no it doesn't want to okay it's safe now let's go and refresh the page and we successfully created the menu okay so let's go to the next one but before we go and I think the menu is way too tap it's not in the middle from here to here so let's go into the customize let's go back to the header general and then from 70 let's go and see in which number it will start growing k 80 okay hundred so I'm going for 100 because I think here it says the same so in 100 it's vertically aligned so I'm going to hit publish here and then here I'm going to edit the page remember it's the home page that we're talking about because we don't have any other page so it took about one year but it loaded and here we have the home page we're going for the content layout and we're going to hit 100% full width now this is unnecessary because I have already said that in the customizer but it's a way of habit I always do that and for margins I'm going to set disable I'm going to update that hopefully it will not take long okay page updated and then I'm going to edit what that with Elementor it says updating here still even though I've seen that the updated and notification let's hit edit with Elementor and hope for the best I'm very disappointed with the local buy fly will buy fly will up I think it doesn't work if your computer is not I don't know to par very powerful it's not an old computer this one but for some reasons it doesn't want to run smoothly hi 7 second generation with 6 gigs of RAM but know it will take one here every time you push a button ok so let's just pause the video and wait ok this has loaded and we're going to start building our website we're going to start by clicking here that he Plus icon and this will add structure to this section so we're going to select the first one which is the full width no columns one with not full width one no columns so we can drag here anything we want basically the Elementor works with section this is a section if we're going to click here we'll see that we have here a section okay got it right click and basically the section means that you have things elements images headings buttons that have the same meaning the same thing they are talking about the same product or something else so if you go to another website you will see that they have a section that is talking about let's go for Apple in the Apple com website and we will see what the section is so this section from here where the menu ends until here we have the section about iPhone 11 Pro so the title the subtitle the text even the buttons and the image is about the iPhone 11 Pro then we have another section for iPhone 11 then we have another section for the watch the iWatch then we have another section and the one is for product here for the health heart health and then they have the ad TV and then they have other section about products so in every section you will have same things and this is what you should know and how you should create your website they start now by going and adding here background so I'm going to style and I'm going for the background and I'm going to select here that says classic and then for the image I'm going to select the choco background one I have already said the alternate XO it there's no need for me to redo it and I'm going to click insert media after that I'm going to select the position to be Center Center this is the focal point and this means that the center of the mats will be always appearing in my screen if I have a mobile device I will see in this particular image from here to here but I will still see the center okay I can have the image cropped from the left and the right corners but I will always see the center so after that we're going for attachment and I'm not going to set any of those in this point let's go for and no-repeat and sighs let's go for cover okay so after that I will go for an hour lake background but first I'm going to add a heading so you can see what the overlay background is overlay color so I'm going to add a heading here and here the heading the title will say choco choco now one thing I forgot is if you go here in the settings and if you go here that says Elementor in settings you can check two boxes that will remove the styling from the Elementor and we'll grab the styling from the theme so it will grab the colors and the fonts here the colors and the phones from the theme you should do that and this way I can add headings and stuff into my page and they will all grab the themes settings if my client or I decided to change the heading size I can go to the customizer and I can just change the size from 32 32 perhaps and it will change in the whole website this is I want to keep those settings enabled so let's save that and refresh the page and of course I'm going to pause the video till the stain pates it's not even saved my god okay let's refresh the page I'm going to pause the video and be back when it loads except if it does it really quickly no okay so it's loaded I'm going to remove this so let's go here right click and set the leg delete and I'm going to add again the heading here and as you can see now it has the black color this is what we set in the default settings okay now if I go and put it h 1 and type chucko this will have the size that we put in the customizer and then we're going for style and I'm going for text color of white okay after that I'm going to set that in the middle so let's go back to content and let's go for the middle and now we want some space on the top and bottom now we can do it by using the space in the Edit section here we can set the minimum height to be Arno 400 600 it looks okay let's go for 600 cause we're going to add some stuff also and remember that when you see the page here it's not the size that it will remain if I hit here the arrow you will see now that the image will change dimensions okay it will change how it looks nah dimensions so keep that in mind because we have this sidebar the everything shrinks okay so after that we're going to have another heading and I will set that to h2 let's leave it as h2 I will put that in the middle and I will type here hot or cold we are what you want hot or cold we are what you want of course this all are something that I have imagined it's not a real website just to see how you can build this up let's go underneath that and we're going to add a button so we're going to the button and we're going to drag and drop it here and here that says click here it will say contact us contact us like that and we're going to put that in the middle the links should be left as it is a rod right now this size is small I will leave it as it is and then let's go for the style and we want some colors the text color is okay but the background colors should be light blue something like that of course you should grab the colors from your logo and put them inside here and when I hover I want the background color to be a little dark blue okay so it will change like this okay now I should also put some radius it's I don't know it's 2 or 3 let's make it 10 it's a little bit better for me okay and we're good to go for the first section the first section is known as the hero section the hero image or something like that and then we're going to add another section now let's go here and I'm going to select the plus icon again and now I'm going to select the first one and here we will have some heading of course so let's go and add heading the heading should say services we'll go in the middle and now we want to have some space on top and some space at the bottom let's go into this style this is the section now let's click the section now it says section here so I'm going to style and sorry advanced and I'm going to put some padding I'm going first to click this to unlink all of those so I can put a different number full of those and I'm going for 100 top and 100 bottom ok I think it's way too big 100 let's go for 70 yeah and 70 bottom ok after that I want to have some inner section because I want to have 3 columns with the products that I'm selling so we're going to start building the first column and then we're going to duplicate the column so we're going to do it a little bit faster and not recreate everything three times here I'm going to add a heading ok and now let's go and change this just to have it already fixed let's go to the section and I'm going to add a background which will be this one and here I'm going for an overlay background color classic and the color should be white ok and here let's close that here that says opacity I'm going for 0.8 something like that so the image should not be too bright it will be like barely be seen I just want to have something except the white space here also here I could use an overlay background color let's go to the styling and let's go for the background overlay and we're going to select classic and then add the color black and it's okay now here we have the title which this service is it's an h2 so here should be an h3 okay so this is not as important as the title and not as important as the button now the services it's an AIDS - and every title in every section will be an h2 here this will be an AIDS for okay and of course in the middle now let's change this you can also you can change it by typing here or triple click here and type inside here directly let's go for hot choco which is a hot chocolate or something and then we have the text underneath that okay that will say hot and creamy or something and I don't really care it will say something let's leave it like this okay I will put that also in the middle and then I'm going to select here that is the column and I'm going to to this style no too advanced and here in the padding I'm going for 40 so it will be like this now I want to change a little bit the here the text so I'm going for two lines let's select the text and let's hit enter here or Shift + Enter Shift + Enter so it will break into two lines with no space between and now I want to put a background inside here so let's go and see how it will look let's go and put in the style a background type of color white okay and as you can see now the color is everywhere in the whole power and the whole column but I want to change that I'm going for a margin let's go for 20 okay let's go for 50 not 2050 okay 50 now of course since I haven't unlink those they all change to the same number and I think it's 50 is not good enough I hope I should go for 70 yeah 70 it's better okay and maybe I should remove here the top let's go for no I will leave it as it is okay it's it's pretty good now this is the first column so I want to duplicate that I'm going to duplicate that and I'm going again to duplicate it so I have three columns and I'm going to delete that now since I have three columns you can see now that it has changed so maybe I shouldn't use too much padding here and too much margin let's go for 50 okay and I think it's better now since I have changed this and also I don't want too much space here so I will unlik those and instead of 40 I'm going for 20 okay this should change but it didn't let's okay it's leaving space here that I don't want and let's go for a little bit of more padding here okay something like that now I will click here and right click here and I will select copy and then right click here and select paste style so it will take this style that I have put in the column and apply there and then again paste style it will not change the style in the heading and the text it will only change the style in the column okay so I think I'm okay with that here I will put called Chacko and here is something else like services or I don't know services so this is the second section with the services and now I'm going to add another section which will be a contact us now since I'm starting a new section I was thinking to put the heading in the middle but I know that the background that I'm going to use is a very dark and has white not white but space in the right let's go and see what I'm talking about go to the section style select here and background type and this is the background I'm going to use so I'm going to align all the text in the right so I'm not going to use this kind of section let's go and delete that and let's start again by selecting in the beginning the two columns okay and then select again the section style the classic type and the image should be this one okay and now I'm going to add here heading that it should say about us okay I want it in the middle I wanted an h2 and I want it to be white okay after that I want some text so let's go and grab the text editor put underneath I'm going to select here the color to be white and I'm going to copy that and paste it sometimes so we have something like this this is the about us text okay and of course I want to put some space on top and on the bottom you should have something like that okay since you have some space here in some space here and as I can see the space here is way less than the space that it looks around here so I have to narrow it down here you will see what I mean if I go and update that and see how it looks in the front end and let's start building this okay it refreshed it saved quickly enough but it was saved okay so if I see here the space that have I have here is way more than the space that I have here so I want to narrow this down a little bit and also I want to give this a little radius border radius and maybe a text side of a box art oh sorry so it will separate a little bit from the background so let's do all of that let's go here and to here I'm going to give here the border border radius of 20 yeah something like that and then I'm Saro select here the colors should be black but not so bright let's go for now pasilla about 30% 0.3 okay and then 0 0 10 it looks ok I could go for a 5 blur so it do not be too bright I should barely see it when I look at it copy and then paste here paste style and then paste I'll again remember that every time you make a website and you go and take a look at it you will want to make some changes this is normal so you look at once you will do some fix here some genic there and then you will come back the next day you will say that I need to change this then you will need to change that that's all normal you will do some changes except if you have a specific styling that your client wants to to apply ok so after that I'm going back to the section and I'm going to hit here section advanced and then from 7 they are going for a 50 and I'm going to leave it as it is there this has not refreshed here of course and let's go to the next one which is here I'm going to select the section and I'm going to add some space inside here now you can also select the column and add some space you can select the heading and add some space on top but I'd like to put it into the section because I want to know where is where I have it as a habit and I know that in every website that I want to remove some space I have it in the section if it's space top and bottom so let's go advanced then let's go for here 50 and 50 a little bit more I think because this space here is a little bit more so let's go for 70 and 70 at the bottom ok now it looks okay and let's go into the background again into the styling and here sorry not here here into the position I'm going for Center center Center center and here is is it a fixed no it's not a fixed it's a scroll and here it's a no repeat and cover okay now I think I want to put a little bit of dark overlay color little bit because it has some white spots here so let's go into the background overlay and let's select black and I will remove a little bit of Hope acity I'm going for 0.3 something like that okay it looks better and underneath that I'm going to drag not drugged select here a section and here I'm going for again two columns I think two columns so I'm going to remove that I'm going to select again two columns and in this section I'm going to add the background which will be this lady here okay insert media and here I'm going to add heading which will say contact us I will put that in the middle again and after that I'm going to add a shortcode with the form in NATO form which I haven't created yet so let's go and update this and let's go back to our website and we're going for for manator I'm going to go into forms and I'm going to add a new form I'm using for manator because its first of all it's a free plugin that has many potentials you can do amazing stuff with that you can even use logical conditions and have some fields so when someone choose an answer or something else you can do many start with that and also can customize how you want to appear which is great let's go and create a new one I'm going to select contact form here these are all basically the same you can start from blank and create what you want but since it has some fields ready let's go and create that this is the contact us and I'm going to create that so it will basically have the name email phone number and message fields ready and you can just go and change if you want some fields if you can't create some others you can then change how it looks in colors or fonts and then just have it applied in your website okay and it taking it's taking some time of course ok I'm going to pause the video again I don't even know how many times I have already paused the video okay so let's go now and I will leave it as it isn't first and then I'm going to change the style and you can see what and where you can go and change and what you can do with that so I'm going to hit publish and then I'm going to wait and it will show me the shortcode here's the shortcode I'm going to copy that and I'm going into these to the elemental page okay here I'm going to add here a shortcode underneath the contact us and then I'm going to paste the shortcode here after that I want to put some margin on top and bottom so let's go and into the section and let's go here not some padding not margin let's go for 70 which we'd had before I'll link that delete this 70 here and delete the 70 from here so it looks like that now I want the for the the whole column to have a little bit of color so it will not sorry about that okay sorry about that my phone rang just to force me to pause the video one more time okay so we're going to add some background color here so even if the image goes underneath the contact form it will still be clearly visible let's go here to column let's go to style and we're going for the background type to be a color going to for a white and I'm going here to add some opacity something Val so it's it's a white but not too wide it hasn't a little bit of opacity about 0.3 and let's continue underneath that we're going to put some social icons let's go for social okay and here we have the Facebook Twitter and YouTube and let's go into this style and I'm going for a little bit less of sizing let's go for 20 yeah something like that and underneath that we're going to use let's see where is it the icon box okay now the icon box has an icon with the heading a title and some text I'm going to delete the text and I'm going to just leave the icon with the text the icons should be a phone like this one okay insert it okay and the heading should be the number 222 202 5 6 3 I don't know a random number now I'm going to style that and see first I'm going into the content I forgot to put this tucked here okay something like this so now the primary color should be blue this kind of blue or no this kind of blue and the white is the secondary color and the sizing should be 20 yeah something like that okay after not the after that the content the spacing should be this is the spacing after the title so I need the spacing between the icon and the title let's go and see where is this that spacing here is a padding okay here is the spacing sorry so let's go for a five and we're going to go with a little bit less in the size of the text let's go to the content and let's go for typography and let's go for 17 something like that but not so dark let's go for 500 and maybe I could go also a little bit closer now I need those to be stucked one next to the other and I need three icons the one is the phone the second is the address and the third is the mail so how I'm going to do that if i duplicate here this it will go one next to the other so I can just go and other needed section here and grab this and put it here so I'm going to delete that and now I can duplicate that not sorry not the element I'm going to duplicate the column so I'm going to brigate that and I'm going to remove this column and I'm going to duplicate that again so we have now three columns and we have here the phone and here instead of the phone icon we can go for home with the address and here's the address and here let's go for an envelope and here let's go for mail at mail.com okay now sorry let's see how it looks in the front end and I have to put some styling also now I don't like that these social icons are aligned here and I don't have anything here so I'm going to remove those from here and I'm going to add those in the footer because I don't like the styling how it looks right now and let's update that and also I think I will add some effects here so I'm going to select here the which is the column I'm going to advanced and then motion effects and I want to fade in left fading left slow and it lays 250 something like that 250 milliseconds now I'm going to copy that and I'm going to paste it here paste aisle and paste style so now all the columns should have a motion effect and his this column should have a 500 and this should have delay of 750 something like that and we will see how it looks in the front end now since I have put a motion effect here I could also use some ocean effect in the button so we will grab some attention because it will come lastly so let's go here and let's go to advanced and motion effects and fade in up okay and animation is slow and of course here I can do something about this or just the text let's go for dust dust the text and I will put some motion effects for the text fade in and slow okay and maybe I will leave those as they are at this moment so let's go and save that and refresh the page here and if when I scroll down you can see now the hover the scroll top icon okay we're waiting let's come and see what else we can change at this moment okay we're going to start and create not creating by it styling the design in the mobile and tablet view since we're waiting for the PC view for the number of you so let's go for the tablet mode and let's go back on top this is quite okay but I could just remove some of the size so let's go into the layout of the section and for minimum height let's go for 500 instead of 700 which it is right now okay maybe I could use some space between those but it's not too important this is not looking good so let's go here and let's go to advanced and let's go for 400 margin not 400 sorry 40 and let's go for padding of 10k and here in the bottom I have to go for less I think that it takes the space here from the column so let's go and copy first everything copy/paste style and taste style okay so it was taking the space of the next column so why that's why it looked like that and of course I have to change it a little bit so let's go for here not 10 let's go for 30 let's go for 20 here 20 and 20 something like that I think and let's copy that paste style and then paste I'll again okay and it looks a little bit better okay and after that I want something in the about us no wait it I think it's looking good but let's go into the section and go into the background and I'm not going to change anything and the contact us is looking good okay it's looking okay and maybe I could just remove not remove but have a little bit of less size in here I think it's 17 right now so I can go for it Bogg rafi or 15 or something let's go for something like that so I can copy this and paste the style in all the other space style and paste style and let's go and see how it looks right now as you can see the bottom goes up here you will see the services that are coming like this this is the about us and this is the contact us and now I want to have some effects here in the background so I'm going to have here in this section the background to be fixed let's go first in the desktop mode and the position should be this nut center Center for the services no Center center case under Center and the attachments should be fixed okay so as you scroll down you can see that the background stays the same this so I will do that also for this section let's go and put that also attachment fixed okay so you can scrolling down and you can see how it looks now you cannot do that in every section but you can do it one by one section so fixed scroll fixed and then scroll again or something okay now I'm going to put a little bit of white overlay color here so let's go for background overlay and let's go select the color white and let's go for 0.3 okay something like that yeah I think it's okay let's go again it's saving but it's not let's wait a little bit or pause the video it is yeah pause the video okay it is saved again so let's go and refresh the page here in the front end and let's go and change here the tablet now as you can see we have the effect here the services coming up from the right the background is fixed the about us is scrolling and this is fixed also I should also get some radius here as I can see it needs some radius so let's go back to the desktop and back to our column here we going for the border and we're going to put here at 20 okay and let's go now for the tablet view okay and now since I have a little bit more of space here I can go for a little bit of size to change the size here let's go to the column layout and I can go for a 70 or something so it would be a little bit bigger or you can go 100 percent and go in the middle there's no need to separate that so I can go for something like that and then once I'm in mobile let's go back to the top I can see here the Chaco I don't think that I need to change anything expect maybe have this to be a little bit of less let's go for 25 20 to something like that the services are looking good about us is looking good and the contact us is looking good also and of course this are now stacked vertically so they are looking great okay so let's go and update that again and now I can go and start building my footer before that I have to create some anchor and this is what it will create the scrolling effect so I'm going here in the services section and I'm going to add here here we have the section okay I'm going to add here and anchor this one and I'm going to put it over these services okay so this should type services survey sis services okay after that I want another one into the about Us page so let's go and add that also on top and it's about if you want to put two words you have to use a hyphen and then let's go to the contact and add that again okay and here we're going for contact okay contact no it's not contact it's contact okay now that I have said that I can go here that I have the button and here in the content I have a link which will add which will begin with the pound and then I will use the word that I put in the anchor the contact okay so pound and then contact the same I will do with the menu so let's go here close that and let's go for appearances and menus hopefully it will load today no case loaded and here we have the URL and I'm going here back and I'm going just to copy that to be sure let's go to the anchor and copy the services and here I'm going to paste it after the pound ok then we have the about Us which is about and then we have the contact and Save menu ok it's saved now I have already refresh the page so I don't have to stop the video every time and now if we go to the contact us it will scroll down to the contact us section if we go to the about us it will go to the About section and if we go to the contact from the menu or the services it will go to this section now as you can see the anchor will lead the section to be on top but I miss some contact here our content I would like to have this section aligned like this so I will get the space here but since we have already some padding here we're getting in on top of the page the anchor so I'm going to change that by going into the page again and I'm going to remove from here these 70 pixels on top so here we have the 70 pixels so I'm going to remove that and I'm going to put underneath that a spacer so I'm going to add a spacer spacer and I'm going to put here 70 pixels now maybe in the future the mentor will remove the spacer they have already said that they will do that if they do that you can just click here which is the anchor and select advanced and then put the padding here top sorry bottom 70 first click here to unlink all the values and then click here 70 it's exactly the same of course you can put the services some padding on top but I do like to put the previous element and bottom padding and not from this element top batting okay top padding and bottom padding so again we're going to go here and then advanced I'm going to remove this 70 that we have on top and then I'm going to adhere the spacer with 70 here and lastly we're going to do that here also select here advanced and remove this and then select the spacer drag and drop it here and select 70 here okay so let's hit update and wait half a day and we're going to then to start building the footer I'm going to create two different footers Dion will be with the theme so we're going to build it using widgets and the other is going to be with the Elementor the difference between those is when you build it with the Elementor it will have way more control you can put exactly what you want in every places that you want I'm so you also the theme footer because I want you to know how you can build it if you want a simple food or you can just peel that so the green line is about 70% let's see if we will get something quicker so let's go here in the menu and here we're going for the appearance and then widgets here is where we're going to add the widgets to the footer we have selected three columns so we will have food one food or two and footer three the footer for is not used let's see it's safe now here so let's go and refresh this page and of course pause the video until everything will load so it is loaded now and as I've said I'm going to use the foot one foot or two and four three and let's go and see the page now that it has been loaded again let's call for the contact us and hasn't it been loaded okay I thought I loaded let's go and refresh that and start building the widget so I think I have saved that but I'm not sure okay so let's go and start creating our footer we're going to start here by adding the logo so we're going to add an image now of course in the image we don't have too much of control so the widget here and here I'm going to add the logo okay I'm going to delete that and put that and do that again now I'm going to edit that and instead of full size I'm going for thumbnail okay update and save I think this is going to take forever cuz I need to save too many orphans and refresh the page so after that we're going to use some icons and we want to put an icon with the the phone number and other stuff like that so we need the plug-in to add those because there is no way to do that in the fancy way so let's go and start in the plugin sorry and plug-in I'm going to add new of course I haven't saved that stay on page let's save that okay and let's go and plugins add new and here I'm going for Astra this is the theme and I want to plug in a very good plugin that they have the Astra widgets so I can use the address and and other icons install now of course you can use it in every theme you don't have to use it only with the Astra theme this is a plug-in ok this refresh the page so let's see contact us and now I have the space that I wanted here if I go to about us it's looks much more fancy and services it's right here so this is how it's going to look and then we're going to recreate here the footer not to recreate create a forum so let's activate this and we're going again to appearance and then widgets once it's loaded okay let's go up and widgets I'm not going to hit continue and set everything else doesn't matter at this moment okay so let's go for the contact info for the one add widget and let's see how it looks right now let's say that also I have a Skype here a website and other stuff but let's see how it looks let's go for the front end and refresh the page and now you can see that they have the contact info some text lorem ipsum and then I have the address the phone the mobile fax email and website and of course I have a button here so I'm going to remove that let's go into the widgets and I'm going to remove the Skype where was the Skype Skype call us this is the button of the Skype I'm going to remove this and this I don't want a website this is the website for the email I don't want the title I just want the icon and then this okay so let's go and remove the title and here you will put the URL of the email and then the text so you can have a different text and different URL here we have the fax will i which i will remove then we have the mobile and I will remove I just want one phone not everything else here okay and then I have the phone and I will remove the title and then I have the address I will remove the address and then the I have the text which I will remove and then instead of contact info I will just have the icons no contact if order so I'm going to say that and as I can see here I don't have the image that I have put here I don't know why so I'm going to put that again so let's go for the image once again where was the image image image I have lost t months okay this is the months and I'm going to select further one at widget and add the image logo I'm going to select the logo here and I'm going to put here thumbnail so it will be a little less of a size and then I'm going to put that on top he'd save once again and let's refresh the page that see how those are looking without the match of course I don't think that it has put the image at this moment so this how it looks I think this should be a little bit in the middle but it's okay it's fine that's going to widget okay it's saving and now let's go and add the Astra address just to see the differences let's go in the footer so we have here the title style is in line or in stock here we have the title the address phone fax email or something let's go for stock not in line display icons yes I want to display icons the address should be something like what we have here in the contact info let's copy that this one okay this is the address the phone number is this one it's looking good okay and then the email is this one icon color is white and space between icons and space address text fields you can change all of those once it's loaded now since we're waiting we're going to start building the footer with the Elementor so we don't have to wait for everything let's go into the templates and we're going for the save template I'm going to open that in a new tab and I'm going to close some tabs here I'm leaving this one because I want to style it a bit and let's see if it's saved no of course not why should it be saved it's ID no guys sorry about that I'm pretty disappointed with the local by flyable program I using some most cases but in this computer I have installed that just to work something out but it's not looking good okay so I'm going to add a new template oh sorry i just opened the templates in Elementor but i want the theme templates so I'm going for the so I click here in the thin panel and here I'm going to click my library because I want the library of the theme and not the templates in Elementor and here we're going to create a new template that is called footer and when it loads we were start building it let's see if it refreshed okay this is how the image is looking right now and this is how we're having the icons with the astra plugin now I can go ahead and change a little bit of the width here and also I can remove this if you like this better but you are now able to see that you cannot do everything with these widgets of course I can add some custom CSS and custom HTML just have the image aligned in the middle and then have something right here with the social icons or something and then have here another thing or another menu or something else but let's go now and create the footer in the template so we can style it with the Elementor and have it look better now we're going to press the add new and then we're going to name that footer okay and I'm going for Elementor canvas because i don't want any header and any further inside there and let's go to publish that and then we're going to edit that with elemental the canvas means that you don't get any header or any footer it's a blank page black canvas and you will start building there so I'm going to first grab sorry three columns not one three columns and in this section I will need color section style and let's go for background color of gray or something let's see what it looks like this little bit of crash good let's go for a black and go like this okay this is looking good now here we're going to add the image this should be the logo and select image okay and now here in this style I can go with 100 because I don't want no this is percent so let's go for 30 maybe less 30 percent yeah 30 percent I can style it where I want it so I can put it in the left or middle or right let's go for left at this moment and it will we will see how it looks then we can add here the icons the icon box so let's go for that and here we want to have the stacked this should be the phone okay phone insert and now let's go and remove this title okay and let's go for style let's go for contact and I composition put it like this so let's go next in this tile and we want the primary color to be white okay and the secondary color to be black something like that after that the spacing is okay I think but the size is not let's go for 1513 okay and then in the content we're going for a white color okay alignment let's go top and typography let's go for 16 something like that okay now tribute click it no I cannot repeat click it I can't go here and put the phone - 10 - 10 - 10 - 10 okay and then I can duplicate it three times and then I can go and change here the icons so let's go for this one and I'm going to change that to a home then this is the address insert address and also here should be an envelope insert and change this to mail at mail that come okay now I don't want so much space in between so let's go into the style and I know that the content has also a description that I have just erased but I want to go to the diaper graph input hit here 0 so it will not take any size and then let's go to the advanced and let's go into the margin-bottom let's go for a zero and let's go for something less I think I don't get anything less here let's go and see if this is going to help okay - something ten or something twelve thirteen - twenty-five something like that so I'm going to copy that and I'm going to paste the style here paste style so this will come up also and also I will need to put some space on top because I have a little bit of space at bottom so let's go to column and let's go and put some and not marking I will put in the whole section so I will have the space inside all the columns so let's go into the section again and let's go into advanced and I'm going to put here at ten pixel padding something like that and we'll see how it looks okay after that here I'm going to put some social icons so I'm going to add the social icons okay I'm going to align them all those in the middle so I'm going to select the column and I'm going for vertical-align:middle and also I'm going to have them as they are but a little bit less in size let's go for 25 or something let's go for 20 okay let's keep some them some padding no sorry spacing was what I wanted let's go for some spacing let's go for thirty okay and then here we can have some useful links or something also I forgot to put a heading here so since we have the heading we cannot style that line down the middle so here are social or getting dots or something else social icons this should be white and let's go for it five no it's four yeah something like that text color should be white it should be in the middle and let's go and put all of those on top so let's go for top and then we I think we need to put the social icons to be in the middle of the image so I'm going to give a little bit of space inside the column so let's go into the advanced and let's go to the padding I haven't mentioned that before and I'm mentioning now close the video the padding is the space that you have inside the element the margin is the page the space that you have outside the element so basically if you select here the icons the padding is the space that you have from this line and until the icon and the margin is the space that you have outside this line and from the previous elements so we're going here into the column and we win we want to put some padding and some let's go for 30 40 50 little bit less I think something like that so I think we're good so I'm going to duplicate that I'm going to remove this and then instead of social icons I will put here useful leeks and here you can have a menu and you can have here the I know the cookie concept the privacy settings and the acceptance and whatever you want to put here you must always have some terms and conditions and some GT PR and privacy text inside your website so you can add here a menu by going here and then selecting menu and we're going for an navigation menu or not menu this is a pro element so navigation menu and here we're going to select the one menu that you have right now the main we don't have anything else now and let's go to advanced and let's see if we can make this to be wide because it doesn't look right now too good okay I think it it's um custom styling for that but I don't want to get into custom CSS at this point let's see if we have another element for the menu custom menu ok main and manually color let's go for the white which is F F F F F F this should be the white okay it uploaded now so a custom menu is better than the WordPress menu okay position should be Center and maybe we can okay we have the hover drop style the target is links not icons menu padding okay the size the font size and line hide it they're all good I don't have to change anything okay so that was it and now let's see how it looks when we are in tablet mode okay this is not too bad but let's go and change this a little bit let's go into content and I'm going to select to have a little bit of less space now it doesn't let so let's go for font size of 12 it's not too bad even if how it looks right now but we can do it a little bit better and then well let's go for the mobile and we have something like that this should be in the middle at this moment okay and this is looking good but I think I have to remove some padding from here I don't need I think so many so much space inside here so let's go into this column and let's go for padding on top of I leave it to zero so it's looking good and let's do the same for this let's go into advanced and unlink this so it will be a zero and then put here at top 20 okay so this is what I want at this moment let's update that and now I'm going to the customizer I'm going to refresh it and when it reads fresh I'm going to the footer and I'm going to select select the template that I have created so I'm going to pause the video once again of course and wait the customizer to load okay didn't take too much time so sorry let's go and see how it looks right now awful okay and let's go to the head let's go to the food oh sorry not here then our option no sir it's in the footer so let's go for the widgets and then here that says select template I'm going to select the footer so it will refresh and it will remove this and it will add something like that now as you can see I have here a padding at top padding a bottom padding and left to right I'm not a full screen so I have to remove here the top let's go and remove that I have to remove here the bottom and let's go and publish that and then we're going into the element or into the elemental footer okay and I'm going to select here and I'm going to hit layout and I'm going to stretch this section and I'm going to update it okay we're waiting and also in the the miser I have already published it let's go and refresh the page here where is it here okay it hasn't picked up the top and bottom padding and also it's all is it's not saved yet this color of course you can match the color of the background with the color of the footer and have no problem there but I want to put it here in a better way also I can do another thing I can remove the container that says here are the container and then I can go into my elementary page and have it with no background so I can go into the style and I can select the background type and for the color I can go full opacity like that okay and then when I'm going for an update save it will soon be saved and we will see how it looks in the front end so let's wait okay so it is saved in this how it looks right now and now I have to remove this part in here so it took the full width but let's go in to put here zero and zero so it will remove the padding and let's publish that and refresh the page and as you now we have the footer as we wanted and everything is looking good so that was the end of the video this is what I wanted to create I hope you liked the video I hope you understand how elemento basically works and how you can build a website like that again this is a very simple website it's for some cases that you don't have enough content to build four or five pages you don't have anything to load those pages and you can use one web one-page website to do that so thanks for the guy's subscribe to my channel for more videos like that and if you want if you have any questions please write down in the comments below thanks and bye guys

Channel: Stratos Tutorials

Views: 3,853

Keywords: Create a OnePage Website Using Elementor and OceanWP for Free!, OnePage Website wordpress, wordpress tutorials, how to create a website with elementor, wordpress website for free, how to use elementor, how to create a one page website, wordpress create a website with elementor, oceanwp tutorial, create a website with oceanwp, free website with elementor, how i can create a website with elementor, elementor and oceanwp

Id: kHCsVRUrnHY

Length: 117min 37sec (7057 seconds)

Published: Fri Feb 21 2020