From Elementor to Oxygen | Recreate a website of a client

hey guys i hope i am live this is the first time that i'm doing live in this channel and of course we will create a website as you read in the title and we're going to convert the website that we have at this moment to oxygen so we have a website that is live at this moment and i'm going to recreate that using oxygen website builder first of all i want to ask for you guys to tell me that you can hear me correctly i have tested already from from my phone from my mobile phone that i can hear myself but please let me know if you can hear me correctly and we're going to begin of course since i'm not a native english speaker you will hear a lot of mistakes sorry about that please forgive me i will make mistakes and you will see how i work in a real-time scenario you will see that i make also mistakes in oxygen of course you will see that some things that i should easily uh solve you will see that i'm struggling with it's normal and we're going to see all of those things okay no worries thanks so high sibu hi felik felix hi guys okay so uh let's see first the website that we're going to recreate of course it's in a greek version so you're not going to understand what it says but in the settings i have everything in english so you can follow along not follow with this website but you can see what i'm going to do and how the workflow goes and what's my point of view and how i'm going to recreate the website hi billy hi agt which is greek of course and it's a sad day for us because mickey thought he's passed away and i'm sure adt knows what i'm saying but let's go on okay so uh this is a live website so what i have done is recreate not recreate create a subdomain in from uh for this website which is the test.child institute and i'm going to start building it in there uh this gives me the benefit that the website that has already been activated in the in the client is not uh will not go down and i have going to start building it my client will see it and we'll test it out and see everything that it's okay and when he gives me the confirmation i will go and make it a live website i'm going to replace it to the original one okay so this website is created with elementor and i'm not going to change anything pretty much i'm going to recreate it as it is of course i'm not going to take exactly everything and measure the pixels here i'm going to do it uh close to this website and you're going to see how it's done so uh first thing that i usually do is go and copy the same website and paste it inside here so make a clone into the subdomain that gives me the benefit of that i don't create recreate the pages from the beginning and i don't recreate the posts and i'm just going and delete the content of the page and i'm just going to recreate them in oxygen now this also has a problem if the website is really old or the database is way too big then you will carry all the problems of the database all the weight of the database maybe the website is slow because it has some features and some things that it shouldn't so you copy all of those things in the new website if you got if you can do it from the from a blank website it's better but it will take you some time more because you have recreate all the pages you have to recreate all the posts and also you have to copy the url of the pages and the post because if your client or if another visitor has shared a page in the social network then this page if you change the url it will not be accessible so you have to keep the url of the page also for the seo purposes it's better to keep the structure as it is so we're going to create this website from the beginning and i have to copy the urls also and this website i have also a problem with the database and since i'm going to move it to oxygen i'm not going to fix it but if i go here into the plugins into the appearance theme sorry and here you will see that i have the oceanwp let's go and add the new theme i'm going to search let's go for the astra and as you can see it's uh here i'm going to hit install and i think that once installed i can go back to the themes and you will not see it as you can see the 2021 2020 and 2019 are also installed as you can see here but i don't have an activate and if i go to the themes i cannot activate uh any other theme it's not something that can be changed through the plugins it's not a fault of the plugins i have disabled the plugins i have searched for this problem about 10 or 15 minutes and i didn't care about fixing it because i'm going to recreate everything in oxygen okay enough said the first thing i'm going to do here is going into the media and i'm going to export all the images if i go to the themes to the plugin sorry install plugins you will see that i have already added the export media library plugin which will give me the feature to export all the images so let's go to export and here you can select if you want to compress it or not here i don't have too many images so i don't want to compress those and i'm going to save those and i'm going to open once it's downloaded okay so i'm going to open that and let's move that off the screen okay and here i have the images okay so let's go to the new website and was going to start uploading the images because it will take some time let's go to media library and see what we have inside here okay everything is gone nothing is here add new and let's select all of those i'm going to check if my images are okay with sizes i think that they're all compressed also i don't have any problems yeah everything is okay so i'm going just to paste it here 114 images at this moment and this will start uploading let's wait for that to start hopefully it will start it will start if you have any questions you can just type it in the comment and hopefully i will answer them okay nothing is starting at this moment let's give it a little bit of time and let's see i have only one plugin and this is the oxygen that i have already installed let's go to install plugins and as you can see it's already installed and i have already activated i think let's see for the images nothing has happened okay let me do it again let me refresh here in library add new okay drop it again okay we started okay with the problem nice let's see if one of those is uploaded upload okay the one file is working let's go for another one and for some reason i cannot upload the files okay i'm going to appearances and let's uh delete the database let's go for a reset and let's see if that works so let's go to add new reset i don't know why it's doing this but let's go and reset the installation put them in the file manager maybe no i think that the first time that i tried it it was okay and i tried to upload one and it didn't work so let's go and activate that okay and reset the website here is the reset reset and of course you should check always that it's the correct site that you are setting okay and let's grab that here let's put the test password that i have here okay and let's try again let's go to up to the media let's go to add new grab everything and let's try again okay maybe it's the pro the browser that's making the problem maybe let's try a different browser and i'm going to try also less images i'm going to try with 10 or 20 images okay it's not working either in a different browser that's strange because i have already test some things here and it was working okay let's go for three images and let's put that here no it doesn't work doesn't want to work okay we started very nice here and of course we're going to fix that but we're going to it's going to take a little bit of time let's see the comments if anyone has an idea too many just go to get some happy file action going firebird is heavily promoted now okay so let's try different approach i'm going to plugins i'm going to add new let's go to files i'm going to add the file imager file manager okay install that i'm going to add inside there the images check mcafee monitor i let's see i think that the mcafee monitor was not installed here what should i close it all together try to put them exactly over the button okay it's not the problem of that i think that the problem is something else but let's do that let's go to add new again and this is the drop section it's not that it needs to be on top of the button but let's put that one in the button and nothing happens i don't know why it has some bit of problem okay let's go to file manager let's go and upload that zip file in here so i'm going to zip the images and let's go right click it okay now i know why it's not working and the problem is way simpler and i don't want to say that i'm stupid but maybe that's the case so even though i have selected that to be not a zip folder it was actually a zip folder and i have double click it with windows file manager open the zip folder and try to upload the images from there and of course since it's not images and it's a zip file it couldn't upload the images how about that so how stupid am i now select everything i think that i need to go first into the library delete the image that i have already because i don't remember what was the file no images because i reset that okay so let's grab everything and move those into here now even if i go into here i will see that i'm going to upload it also there are 64 elements and not 114 as there were before maybe i didn't extract those correctly let's see yeah it should be more than those images let's unzip them one more time okay so 7-zip extract to extract files now let's go with the native zip installation okay one one [Music] extract all and it's 115 images okay and for some reason the 7-zip didn't work okay replace the images and now i have 113 which is correct okay cancel those i'm going to libra again i'm going to delete all of those images and i'm going to do from the beginning okay let's type here 100 just to have all the images in one page okay select all of those and delete permanently ok add new 113 okay so as long as it's working here we're good to go and let's go now to pages all pages and we're going to start creating our pages and here let's go to the website that we have already created and let's go to the pages here and see what are the pages okay so we have the home homepage which is archikey in greek and of course i have to also go to quick edit and see this lag for every page that i create and let's go and grab the slug and let's go here and paste it in here okay next thing we have this one sorry quick edit not edit this is the blog and obviously i have a page for the blog as you can see here okay i selected the new media instead of the new page pages add new and open that four or five times okay so we have this one which is the blog okay then we have this one and maybe i can copy this log and edit that before the save button to save some time okay then we have this one yeah i can copy the slug before this first save okay here it is is there plugin to easily create multiple pages and maybe there is i haven't checked i think that there is a where you can create multiple pages and it's a good question contact now of course i'm not going to create everything because i'm not going to make it in the time that i have maybe i have two or three hours and i'm going to do as much as i can contact how many pages there are okay 12 pages not too many uh uh maybe that is something that i should done before the live sorry for that it's pretty boring right now and let's go to the page again and add five or six pages more okay i'm going to skip this one because the privacy policy and i think that i have already here this privacy policy if i don't i will fix it later on okay two more pages to go and this is the last one okay now for the post uh there is a plugin that you can create you can copy the posts and move it in another website there is also an integrated feature in wordpress but in wordpress it will not copy the feature image if you create first the images and then move the posts then there is a possibility that it will grab the feature image but there is a plugin that it can done that easier so i'm going to use that not here in the live section but i have already a video in my channel about that let's go now to the plugins install plugins and let's activate oxygen i'm going to deactivate the wp file manager after that black install here and let's go also into the settings general and let's see what we have here so here i want to copy the tagline copy everything from the settings of the source website okay so we have here this site title tagline okay here we have the email okay here we have the time zone which is athens not the language sorry time zone for the lms website that someone asked i will create a website for the l for an lms feature and i'm going to use free tools for that so let's go to europe i missed europe okay i'm cladding australia where is europe india pacific again i miss europe okay europe athens okay then we have the date format which is this right here no this here the time format is this one and save changes okay let's go next to reading from here i'm going to remove and not remove to select the static page and select the home page and here i'm going to go for 20 posts and for the feed where we don't use the rss feed but i used to do that then the expert is here also i'm going to select this because i don't want google or other search engines to crawl the website since it's not ready at this moment let's go to discussion and remove the three first boxes and let's save that and then let's go to permalinks and i'm going to the post name and then save changes now i'm going to remove this file manager but just for you to know what i was going to do is zip the files upload them into the uh upload where the files should be uploaded where where is the wp content upload and then let's go in the file manager and then wp content then the uploads folder and then the year which is 2010 sorry 2021 and then in 2021 we will find the month which is the zero nine and then if you upload the images inside here uh you will have them to go and register them in the database and there is a plugin that is going to do that i have already created a video about that and i was going to upload the pla install the plugin and then just search for the images and register them in the database that what that was what i was going to do okay i'm going to deactivate the file manager now and i'm really a bit afraid because it was uploading images but i think that i i ruined that because i didn't let that finish okay doesn't matter i'm going to do that if some images are missing i'm going to upload them again deactivate that and delete that okay so let's go to the oxygen and then templates this is the upload new images and this is where it should go and upload the events but for some reason it stopped okay doesn't matter here is the template i'm going to leave it a little bit this no close it again close it at this moment so add new template the template is going to be named main this is how i used to work and no matter what you choose just be consistent and type something that you always type in every website that you create okay so the other end check cuts all is the one that we're going to do and publish that and edit with oxygen okay let's see the website at this moment so we have the logo here we have the menu here we have here some uh where is the location and we have the phone number and also the email and then we have some social icons right here okay i have also to grab the colors and i have to grab also the fonts i'm going to use the customizer and usually i if i have access in the website i use it from the customizer and i check inside the themes the settings and there you can set check the fonts and check the colors if i don't have i use a an add-on as the hover file hoverify and i check everything that i want so let's go here in the typography once it's up it's loaded okay and let's go for general and here we don't have anything body here we have the roboto and all headings and roboto for also the headings okay so let's go to the oxygen let's go to structure let's go to manage settings and here not page settings sorry let's go for global styles and here we have the fonts so phones we have roboto and roboto okay after that we're going for the colors and here let's see the colors here's the customizer and this is okay where's the color general option not here was the general option i didn't see it no it wasn't here generously general stein primary color yeah this is the color so primary color and hover color for the uh styling so we have the primary color which is this one sorry not other color set i want to add the color okay this is the primary and that's the primary color add that and then we have also the accent color the secondary color which is here hover color okay hover okay at that i need something for the off-white canvas color of white color i have here a main border color but i think it's way too gray do i have a color here inside the page i have something like that and i'm going to grab it from the page itself from the elementor inside here so i think i don't need anything else from the customizer at this moment let's go and close that close that and let's go for uh body text and i'm going for 17 i'm going for dark color okay and line height is 1.7 this is how i usually put those and i'm going for also width and let's put that 100 000 this is the width that i want okay save that and let's begin let's go to the structure let's go and add a heading header builder okay and i need two lines so i can go into the header builder and i can add another row the first row is for the text that it's up here and the second of course is for the logo and the menu now i don't have a menu at this moment so i need to go and recreate that so let's go to here appearances menus menu name main okay create the menu view all select all and add those and let's go also to the menu and see what we have here appearances menus and here we have the home page we have the services page which is a custom link and this is the text okay so let's go back to the menus we have the home page then we have a custom link okay underneath the custom link the services we have sample page let's remove that we have these pages this one this one and this one okay and after that we have this one and this one after that we have this and then we have the blog and the contact page the uh this page i'm going to remove that okay and save menu okay now that i have here i can save and refresh the page and it will also load the menu that i have and hopefully oxygen will give us something better for the loading page maybe they will write it in view js and this page will get better okay open the structure and let's begin with the second row header let's open that we have the row left row center and row right i'm going to add first a link wrapper and the link wrapper the url that is going to be the home okay this is the home and then we're going to add an image which is the logo let's go for logo and i think the logo will be here okay okay this is the logo logo and select that now i can go pixel by pixel but i'm not going to because i want to go and build as much as i can in the remaining time that i have in the live website so i'm not going to check how many pixels is the width let's go for 150 here and see how it looks no let's go for 200 and i'm going to leave it as 200 i think yeah i think it's okay for 200 and then i going to add also the menu the pro menu and i'm going to grab the pro menu from here and i'm going to put it inside here okay now that i have it here i'm going to select the main toggle below 992 desktop typography i'm going for 17 the color should be black okay spacing i'm going for 20 20 15 and 15. now remember that if you are going to put also the right padding 15 that means that it will leave 15 pixels from the uh beginning of the content of the of the width so if you add some here uh social icons then you should also put 15 pixels right here to be in the same line or remove the padding here and go straight for zero here and just put 15 here whatever you want to do let's add 15 here for me i think it's better okay and however this is the color so hover text color should be something like that maybe yeah i think something like that and why do i have these services and homepage i have made a mistake in the menu i'm going to fix that later on and active is a little bit lighter text right here okay this is the active text that i'm going to use then we have let's see the desktop dropped icons the drop down icon is somewhere around here okay so we have the drop down icon to be this one i like it better okay i think this size is okay i think this space is okay i'm going to save that and i'm going into the menu and i'm going to fix the mistake that i did here hopefully it will grab everything from here and it will move it correctly okay and this is how i wanted save menu and refresh the page here let's open that also in a new tab and see the front end how it looks okay and also i need here to change the space around not around inside the links and of course i need to put something like a drop box shadow or something inside here okay so let's go again here and let's go to the drop down and let's go to the box shadow and put here something like this and let's go for 0.3 something like this and here put 0 0 and 3 maybe something like that yeah now maybe i can do also a background color a little bit different but i'm not going to do that at this moment and let's see drop that icon okay colors i'm going to leave it as it is and drop down sign links i'm going for maybe 10 and 10 inside here 10 not 0 10 yeah and i think it's better right here okay then i usually go for the mobile menu and i change the style of the menu and i put it off canvas i put usually i put that from the right and the animation is slide left and usually i put it in the right because most people are right handed and they hold the phone with the right hand so it's easier for them to access the canvas when it's in the right of course i'm going to test it later on from a mobile phone and to be sure because oxygen doesn't really show us the full picture here and as you can see it's not correctly at this moment and i have to go also and change the uh off camera's width maybe to 200 pixels something like that okay i'm going also mobile menu and open icon layout this should be the bars i think it's a better icon bars this one okay the margin next should be five pixels maybe the icon is too big i'm going to check it how it looks in the mobile phone later on and maybe i will give it a bit less size let's go for 25 at this moment something like that okay and then we're going for the close icon layout i'm going to remove the closed text here the x is okay we don't have to put also the closed text and i think this is okay and maybe i need a little bit of background to separate it from the page but of course here i don't have any content and it's not looking too good but once the content is there i think it will be pretty easy to separate it the menu from the main content so i'm going to leave it as this from for now let's save that and let's go back to all devices now i have to go and let's see what we have here we have the search here this search which will give us a search icon right here and search box here and then we have uh the content right here on the top so let's go for this one and let's go and add here let's open the structure we are here okay let's add here a div okay this tv is for the whole content the whole content that we have inside here and then we're going to have three divs uh for the three different things that we have inside here okay the one is the div for the address the second is for the phone and the third is for the email so three divs hopefully they went correctly let's see here so we have one div with three divs inside here no it didn't okay so we have here two divs three divs something like that okay now this should be horizontal the three divs and all of those will contain a text so let's add a text okay the text will have a class which will be top header content contact info contact info something like that info okay then i'm going to duplicate that and duplicate that again okay and this will be in the second div and this will be in the third div okay the first one is the address so this is the address can i copy that everything can i copy everything maybe i can okay so let's remove the first line and let's move the second line okay so everything is here x then i have this which will be here the text and here is the email okay so now i can go and change the text color to be okay of course black and the font size to be 12 something like that i think i also have a line underneath yeah i have a line underneath i'm going to put that also and now i need to go and put that in the link also let's leave a little bit of space next to that now this line maybe it should be better in a different div because once the mobile kicks off and you will have those one on top of the other and maybe you should remove this at all from the mobile view okay so i need here to do a little bit of linking so i need to put the link settings and here i need the tell and then the phone number okay i'm going to add that link and now that i have the link i need also to go for a hover color maybe let's see yeah have a color which will be the hover of course the flower color this one right here i think and then also i have this one let's leave a bit of space on the end and here is the email so i need also to link that and this should be mail to and then the mail address okay let's add the link and i think we're okay with that then we have the social icons on the left on the right which is the twitter and the facebook okay so we need to add two icons inside the div and i'm not going to use the social icons because i don't like those so i need a div and that div will go from here into the row right and the div i'm not going to give a class because it's a single div and then i need two socials two icons inside there so i need an icon and this should have a class which will be top header social icons okay at the class the colors should be black or is it a little bit of gray yeah it's i think it's not totally black but i'm going to start as a black and the first one is the twitter this one and the second is the facebook so double that and here i'm going to set facebook okay and let's see what's the icon okay it's rounded so let's go for this one no let's go for this one and let's see if i can go and put that in around let's go for the borders and let's see like 20 50 and let's go for the size and of also since i'm using the class so it's going to happen also to the twitter but i'm going to do that in id if it's going to work let's go for 20 pixels and let's save that and see if it's working in the front end okay it's not working the border so i'm going to remove it at all and later on i'm going to search for a different icon maybe i don't think that i can change the border here so i'm going to see later on if i have something different for the facebook let's see the facebook again but for the lin icons so we don't have a facebook here okay interesting let's leave it like that okay inside the div here i have to put those to be horizontal okay and now i have to go to the header row and i'm going to the advanced i'm going to the borders and i'm going for just to the bottom solid one pixel and the color should be black with a little bit of transparency let's go for 20 24 okay let's save and see how it looks in the front end also i would need a little bit of spacing for the line at the bottom how i saved it okay i think it's not looking the same yeah i think it should be lighter so let's go for 14 something like that save refresh and we're closer okay i'm not going to do it pixel perfect as i've said but i'm going to give it a little bit of breathing space inside here so let's go for sizing spacing and put a little bit of padding to maybe five pixels something like that save and see how it looks uh didn't refresh okay now it's okay i think and also i need to just put the search icon inside here now i'm not going to style the search icon because this should be done with the custom code and i'm not going to lose time here but let's just select the pro and add here also the search icon search form okay no i'm going to to put the search icon and then i'm going to call a pop-up here for the search so i'm going to use an icon here which will be the search this one and this should go where is it inside here where is it here is it here no it's in here okay the icon should go here and let's go for 25 something like that save 20 let's see something like that yeah maybe it's way too dark and i have to go and change the color to something lighter something like that save okay and i will just put a pop-up here once it's clicked it will open up a search icon inside here this search feature that we have okay uh this is the header i don't have anything else in the header i don't have a line underneath i have a little bit of space under here and next we have the content which is the inner content and then we have a section which is the div the footer section for the footer okay the footer will have the tag footer and the inner content it's better if you go into the sizing spacing and put a little bit of minimum height to be like 70 or something for the viewport height so it will push always the footer on the bottom even if you don't have too much content inside the page and this will look better so let's go for the footer let's go here and let's go down here so we have a little bit of gray it's not lit it's not dark exactly but also we have the image and then we have some icons inside here with a list okay so let's do that and i see that the footer is not complete it needs something here but we don't have anything so let's go and add three columns okay remove the space and remove the space let's go for the section and let's go for the background color to be black and let's put a little bit of lighter something right here and the text color that is inside will be white okay then we have inside here we have an image which is the logo or and that's the footer logo so it's not the same image let's go and search for that logo footer okay logo footer hopefully this is the correct one yeah and i think that that this should be with white letters and not with gray doesn't look good maybe i will change that to a white or a gray background but let's go for 2150 160 okay leave it as this at the moment and let's go here and first create a div this div should be for the whole icons i like to create first div and then one d for every uh row so let's add another class for that div but inside the div i'm going to add another div and this will be the footer footer contact div okay and inside that let's open and see if we have done that correctly yeah it is okay and then inside here we have an icon and next to the icon we have a text a text i'm going to put the link wrapper later on but for now i'm going to put those and for the div of course i need horizontal and in the middle okay and then let's go and add classes for the icon footer contact icon okay the icon size will be 25 something like that and this is the text so contact footer contact contact and icon ok not icon text okay so now that we have also the text i can go and select the white and then i can go and start copying so first we have the map i don't like this icon maybe i can change that so we have that and of course i think that that's way too big let's go for 15 pixels and let's leave a little bit of space next to the icon so let's go to advanced sizing and spacing and put a little bit of marking of five pixels something like that okay next here we have the map icon primary and here i need another icon the map i think it's better this is looking better i don't like the other icon i'm going to leave it like this next we have the phone number which will also have a link so i'm going to clone the div three times let's go here and let's select the div and let's clone that one two three times okay and then we have the phone number okay and the phone number of course will have a link and the link will be in the whole div not uh only the text so here i'm going to select the phone okay i think that's the image of course it's uh it's the other way so i can just use it and put it in the i think it's in the effects and then transition 100 100 percent it's in the other way but i'm not going to do that no transition it's somewhere else transform yeah transform and i can put that but it doesn't matter it's just an icon okay i don't need to uh to transform it into put it in the other way around so just put the link in the div and i'm going to add the link here and it's interesting that once you convert a div into the link it doesn't lose the class which is great and here i'm going to put the tail and then this is the telephone number i think yeah add link and we're good to go next we have the email copy that okay and here we have an envelope was it white yeah it was white straight white something like that but it wasn't open it was closed so do we have an envelope that it's not open and it's white yeah we have that okay and i think the envelope is bigger than the other icons for some reason okay and let's select the div again and select the link and let's go for mail 2 okay add link and lastly we have the hours the working hours so we have a clock icon clock okay so let's save those and i need to put the image in the center so i need to put that in the middle and i think that it's not looking good because it doesn't have a good quality let's go for and see if we have something different logo folder okay this is a little bit different i think it's better than this one this is a png this png okay i don't see any difference in that but let's try that also yeah it doesn't have good quality but i'm going to leave it as it is save changings and let's see how it looks in the other devices so here we're okay and i think i just need to put a little bit of spacing between the icons that i haven't done and of course give it a link so here i need to go to advanced i go into sizing spacing and let's go for 15 was the number that i used in here but i need a little bit less and let's go for different approach let's go for the margin in the right so it will not move from let's go for the market in the left so the icons will not move from the right so let's go for 10 maybe eight let's go for something like that okay and of course inside the in the icons you can wrap that in the div and then make it linkable and give it the url that you want so let's wrap it in a div and then in the div make it linkable i think it's easier than just adding a link wrapper and then move it again so copy this one no was it the facebook that i added no the twitter okay twitter so right click and copy the url yeah this url is not working okay it's not correct uh for some reason the urls are not correct here yeah maybe they don't have a twitter account i don't know maybe they don't have anything inside here but they don't have something here so i'm not going to put anything inside the links let's save that and see again okay let's go here and let's start with the 100 to 1200 okay it's looking good i don't want to change anything inside here let's go for the next one which is less 99.92 the menu is now a mobile menu everything else is looking okay now this could also be in the same line so i can change that at this moment which is in the footer and for the columns i can choose to break less than 768 okay and i think that now that it's not working correctly i can just go and lower the font size and go for 12 or something okay save that let's go for less than 768 and now i need to put those in the middle so let's go vertical and center and here also vertical and center okay and now since i have already added the div inside here which gives me more control i actually center the div that contains everything if i hadn't put that div this wouldn't be in the same line here so it will not be alignment vertically and you would see that this phone would go into the middle of here it's like going into this div and selecting that to be vertical and center so if you do that you mess around with everything but since i have already added a div it gives me more control and this is why i add those at the beginning so let's save that and let's see how it looks in the 480 and the content here is not looking good let's see it was messed all around from this view okay so i need to fix first here so we have this one okay and let's go here to the row and stuck vertically below here okay save that and here and let's change also the font size to be maybe 12 something like that okay save changings and i need to change it a little bit i'm going to put those the div inside here the div i'm going to put that in vertical and i think we are okay now save changes yeah it's looking okay i don't have any problems right now so that's was the uh first template okay let's save changes and let's go to the homepage and start building the website okay so we have the home page here and let's edit the page open with oxygen and i'm going to move it to next to the uh original website just to have less movement to do with my mouse and it's easier for me to click from the one to the other okay and let's wait for that to load any questions if you have just type those in the comments i'm sure i'm going to be for at least one hour uh here moving creating the website so we start with the section this section has a hero image so let's go to advanced background and let's browse for the image since i don't have too many images i can just look around for the image i don't have to search the exact image by name i see that i have 225 images so i do know that i have duplicate images and i need to delete those after okay of course there are not too many images but i think that i'm going to delete those after so we have that kids which i think that it should be named something different because i want the seo to be better so let's go for the settings here let's go for general and let's grab the hello part so i'm going to grab that and i'm going to put that in the image here title and alternate text okay select image i'm going to have it 50 from the left 50 from the top and that's percentage of course the left will not change anything but the top will and i need no repeat and cover okay then i need to put a little bit of space inside here so for sizing spacing maybe let's go for 250 250 not 150 250 and 250 okay how much do you charge for a website like this no recreated from elementor to recreate from elementor okay uh in greece we don't have we're not too pricey for that so uh of course it depends on where you live and what the prices the local price are uh in the company we take up around 1200 euros i think something like that because we are basically creating the website from the beginning now since i don't need to uh create something entirely from myself because we don't use a web designer with xd or something else usually we go for the lowest price and we don't need someone to create the site i do it myself so and it helps me to have something to work with because i'm not too good with designing everything from the beginning it's a different uh person that usually does that job so i think that it's like creating something from the beginning okay something like that 1200 euros for all we charge for for this okay so let's grab now the text this is the text okay i move it to be closer but i'm making the mistakes already so let's go for heading and let's go for this text and let's put that in the middle okay and let's go for the text color to be white okay we need to have something like an overlay color here 50. next we need the button okay the button will be uh close to white and one i hover over it was going to be close to black not exactly white and black of course okay let's put that one on top on the other and this should say book an appointment again sorry for the greek okay the target is something that i changed later on and let's go for the button color to be white with the text to be this okay and once i hover over i'm not going to put that in here i'm going to go into the state and hover because i need to change also the text color so hover and then we have the bottom color to be black maybe not exactly black but something like that and then the text color should be white okay and that is the effect that we have okay next we need to put here a transition class transition hopefully i have spelled that correctly but not in greek transition and i'm creating as a class because i need that to use it later on in every element that i need something to be transitioned to another color so let's go to advanced let's go to effects let's go transition and here put a 0.4 something like that and here timing function is in is out is is in out so it will slow down the effect and maybe i need to put here 0.2 not 4 2. yeah i think it's better save changings and let's go to advanced and i can lock now this selector of this transition because i don't want to change that this will be only for that transition okay here's a full price thanks for your honest answer yeah it's no problem it's not that i take those moneys myself i'm with the salary and i think that's the company price i don't have any problem to say what's my company price no problem there okay advanced okay we're good to go for that and we're going to structure and we're going to add another section okay next section is this one and again i mistake the tab okay vertical center i'm going to add heading which will be a heading 2. which is somewhere here the target's h2 and here i'm going to triple click it and paste that and put here this one now for the h2 tags i usually create a class because i going to put those in multiple pages where i want to add h2 and once i start shrinking the size when i'm in the mobile view i want to change one setting and it will be grabbed in the whole website so usually do put an h2 class here so h2 h2 heading okay this is the class for the h2 and this is usually for the size okay after that we need to put a text and since we have all of those texts i can also copy that and if i don't want to change the list and i can leave it as it is i can just copy that and put here a rich text instead of a text and here double click it and put that in here so it will give me the same structure and it will give me a little bit of time now for the uh margin i will also create a class a different class and let's create a class for the margin bottom margin bottom and this maybe you should create something like that with sizes small medium and large for the margin and let's go for large l for large and this is advanced sizing and spacing and we're going for 40. usually we add 8 for the small 16 for the medium and 32 for the large usually we take powers of 8 but here i'm going for 40 20 for the medium and 10 40 small okay we're okay here and we're going for this part and this has links inside here with the different uh pages so we can go and grab those also okay also i need the color here and i can go for checking here or i can open the elementor and check the elementor code what's the color i think this will be easier i think i'm not sure okay that's the background color and this is what i'm going to use as an off-white color okay let's go back to the page which i missed once again and is this white color hopefully it's white let's see yeah just the screen is making me look a different color than it is so let's add another section and this section will have the background color of this and i will make it as a global and i will name it off-white of white okay add that let's go and grab the heading add heading and paste the text okay this is an h2 and let's put that in the middle okay and vertical of course and after that we have three columns with images okay so we need to do that i'm going to add three columns underneath the heading three columns okay this is the three columns and i'm going to give it a class because i will duplicate later on so we need to put here uh the page first i usually do that home then the name of the section which is help your children and then the name of the element which is the columns columns in plural because we don't have a div inside if we create a dvd site it will be column not columns so this is the one that i'm going to use okay and of course i need to put here a margin bottom okay now here i'm going to add another div this will be the home div and i think that this div will take the whole link as you can see the link is here but it's also in the letters and it's between you don't have any link inside here when i hover over to elementor but in oxygen i'm going to put that in the home in the whole box in the whole div so even if you go accidentally here you will click and you will go into the page i think it's better okay so let's add an image we have a class of home okay and then let's add a heading which will be also something with the home this section and then the element title title okay and for the text color i'm not going to uh change it i'm going for the tag to be an h4 okay and let's go and grab the image what's the image it's a girl talking to uh i don't know what's the device what what you call this device and i think i have to use the uh you have this image two times yeah i do have this image two times maybe i need now and go and delete that image not from here from here for some reason i have upload those two times okay library i have 225 images yeah great okay i'm not going to do that at this moment so i'm going to use this one the first the second one not the first one not in the bottom okay this one and this has already the name but i'm going to use the name of the title here it's the same name but in greek lists greek this is a word that we use when we want to uh describe the uh words that it's in greek language but we're using text from the english alphabet greek list okay and this should say this one okay then inside the div i'm going to put that in vertical and in the middle in the center not in the middle okay something like that okay so i can now go and put a link here so it will be a link wrapper i'm going to close that and now i can duplicate that as many times as i want let's go first in here and i'm going to change that to black okay and maybe i need to give it a little bit of space maybe not yeah i need a bit git to give it a little bit of space so let's go for margin bottom and instead of l i'm going for s for small which will be 10 pixels something like that okay i need also to lock that and let's go back to the image okay and let's go to the link wrapper and start duplicating duplicate duplicate duplicate duplicate duplicate and no i'm not going to duplicate that again because i need to duplicate also the columns so let's delete that and delete that and we have one two three four okay and we need three three of them is okay so let's go to the div and let's grab that and put that in the middle and this div also put that on the right not like that what have i done okay no problem let's grab that again and put that in here okay i'm getting there okay now i'm good to go so next we need to go and change the images and of course the text so let's go for this text okay and the image is a boy playing boy i just see hands maybe it's a girl i don't know playing with the toy okay i cannot see much here let's see somewhere around here yeah i cannot see the image here so let's go and select that and save that and we'll see the name of the image which is this one so i'm going to copy that and i'm going back to the text editor the visual editor and i'm going to paste the name of the image so i do have the image but for some reason i couldn't find it okay copy the text and paste it here for the seo purposes okay and now i can see that the image is not the same size let's check the image again this is one one thousand two hundred and let's see the other image what was the size so as you can see the size is not the same so i can go and change the width of this image to be 1200 if i have the other images in the other size but let's see the size of the 30 mods first and then we're going to do that so we have also that what was the image okay a girl sitting close to curtains and i'm sure i'm not going to find it and i need to search it with a name is the image okay 1200 and 1200 okay select the image so and now that i have the image and i have different size in the first one i'm going to select this image i'm going to select the id and not the class because i want that to be changed only for that and i'm going for sizing and spacing and i'm going for width 1200 pixels something like that and i see that it done didn't change even if i have set the width to 1200 so let's delete the width and let's go for the height what was the height of those images let's check this is 80 pixels and let's see the other 81 okay 80 pixels 800 800 not 80 pixels 800 800 pixels and the width is 1200 something like that okay it's not looking too good i don't like it and of course it's for because it's an aspect radio so i cannot do that like that okay this is a problem that i can solve using a div inside here and put that in the background but i was going to search if i can do something different here let's see if i i can fix it with a different approach uh let's see with the aspect radio if i can do anything else if not i can do that with div again i it's not a big deal but let's see if we can do anything else inside here so here we have the aspect radio let's see it's 1200 let's open a calculator so we have 1200 to 800 pixels width it's 1.5 okay so i can go for 100 percent and then i need to put the height a little bit different so the height will be 1.5 let's go and see 150 no it's not correct i'm doing something wrong with my mouth here 66 percent is it correct let's see 100 percent in the uh here 100 and here 66.6 let's see 0.6.6 66.6 no it's not correct ok okay so uh next solution i can also resize demands using the uh wordpress scene major but i'm going to do it with the div here only for this one uh element so let's go and put that as a background here so instead of the image i'm going to use a div so let's go into the link wrapper let's add here a div and this div should be on the bottom on the top i'm going to remove the image and i'm going for advanced sizing spacing and let's go for height of i don't know 300 pixels width is 100 percent and the link wrapper here should be 100 also okay let's go for this div and let's see what we have in the sizing and spacing and we have 300 pixels okay we're going for less 250 maybe less something like that okay and then we need to go and add the margin bottom and of course we're not going to go into the this div and let's go for background let's go for browse and let's go and grab that girl this one select and put that on cover and 50 from the top and i think we're okay let's save that and now i can go into the columns and i can duplicate that so duplicate that of course i have to change that with the div hopefully the other images are correct and i think this spacing is okay i think the spacing is okay now i don't really like this that has the same background i could go for a white here for the cards and maybe put a little bit of box shadowing here i maybe i should change that just to be a little bit better and separate that from the next card it's easier to see but we're going to see how it looks and maybe we're going to change it i don't know for sure right now okay so next is here this one so let's go and browse and let's grab the key with the letter this one okay this size is good select that and i said the size is good but immediately it changed the size to something else maybe i don't know let's see the next one will be this one and this is the girl with the bird this one i thought that they had the same size this one is 120 with 866 but i think the yeah the the height is not okay the width is okay but the height is not the case so maybe i will do something like that let's see first the image inside here and we'll see what we're going to make and let's see this one and this let's go advanced background i'm not going to change that before seeing the size the actual size that i'm going to grab and let's go for the kid with the books what was the image okay a kid studying somewhere i'm not finding okay this is the image which is 1800 pixels and since we have the same image with that i'm going to put that in here okay let me find it first again i find it be founded before but now i'm struggling again okay this is the one okay and now that has the same size let's go and triple click that okay now i can go and grab the link wrapper and put that in the position of the other one so i can grab that this is the correct one yeah i can grab that input here and this link wrapper i can grab this and put that in here in here here okay okay and this is the kid with the letters not sizing spacing background kid with a letter get with the letter okay this is the one select and paste here save changes so far i'm getting 90 to 100 speed inside thank you fabrizio greetings from venezuela wow venezuela okay are you speaking portuguese there i think portuguese is the main language is it how much he was charging the client for that conversion uh oxygen yeah my company charged around 1 200 euros for this uh work and it's something like uh begin something like building the website from the beginning uh because i we charge something around that when we create something from the beginning and this is with the taxes okay 1200 euros is with the taxes i think of course i'm not the one that is taking the money but i think that's the main price that we usually charge for a website like that and then what we have next we have this space with some images inside here they and here is an image that is not looking too good i don't know why we have love leave it as it is i i'm not sure that we created this website and i think that we create as a company this website back then when oxygen was not the solution to create some things and save that and let's add a section and uh thanks for getting the measure of the page speed inside because i was going to do that and once i would i was going to finish with the home page which is after this section so let's go for center middle and also i want to measure uh the requests i do want to measure the quests so center okay our space and let's put this and h2 h2 also let's uh also lock this h2 class okay and add also the margin in large k and lock that also and add and gallery okay now the gallery needs six images okay six images first we have this one i think then we have the one with the couches then we have the one with the uh i don't know what is this uh this one okay the classroom then we have a desk uh not this one this one and then we have another class with uh toys not this one i think it's not this one yeah it's another different photo not this one load more load more a lot more something like that i'm checking for the names and i can see that i need to change everywhere the title and okay let's remove that let's remove see the sizes okay 100 1200 pixels is better instead of using 1 09 920 it's way too big for a gallery image okay i don't need that big image okay and last image was the desk with the seats that was i think here okay now i need to put the name our space inside the seo of all the images so let's put here also this is something that you can do pretty easy with the rank math and you can just go and set that you want the alternate text to be after the page title but that is working with the post better than the page itself so this will grab the home page not the section that i need okay i think that i changed everything spanish is my mother language thanks for the greetings okay thanks fabricio okay now create the gallery we have these six images that we want and i'm going to insert the gallery and i'm going to click everywhere to go for the layout to be a grid grid with three columns three columns okay three columns now uh if you're using grid you will see that when you switch to a different view you will see that the grid is no longer there you have to go and select grid every time so do that immediately when you add the grid so you will not forget it so i can go ahead and select that and now let's go for grid but two columns okay and then let's go for the second the next one which is grid and one column and let's go to the last one which will be grid and one column okay let's save that and now let's go to all devices and i think we're okay now we need of course to check those in the mobile settings and of course i need also to add here the links after that so let's do that the links first let's put the link so once i click here right click and copy the link this is the link i can go and paste the link here and i can remove the domain name so by removing the domain name and grabbing what is under the slash i have what is called a relative link so the relative means that no matter what is your domain it will work even if you go and grab the copy copy the database itself and move it elsewhere without making immigration migration it will work the link will work because it will grab the url that have that you have in the settings okay let's go and grab the second one and i can see also that the image is not equal here so it was a mistake here from the designer but i didn't see it in the beginning okay let's go here and put the link also then next one link wrapper okay then we have this one hopefully the guys that will see the replay will going to put that in double the speed or triple the speed if they have any uh plug-in add-ons for the chrome extension that triples the speed and they will not get bored immediately okay and the last one is this one now i know that the links are going to work because i have copied the url of the pages so i know that these are going to work immediately okay let's save that and for some reason i close the youtube page that i had next to me to see the comments and everything else so i'm going to open that again and okay it's opened okay so let's save that again and see how it looks in other views let's see in 1200 i think it's okay now i can reduce a little bit of the image around here and also i can go and put that text to be a little bit less of course i need this to be changed and since i haven't used the class here i need to do that for the div for this div so i need to put those in the same settings i think and yeah since there are only two divs i'm not going to create a class so let's go for the width and let's go for the id and not the class and let's go for the height to be 250 pixels and see how it looks 190 is the number okay and this should be 100 now the div here should go and go vertical and for some reason it not vertical it goes uh yeah i made a mistake here with because i'm using the link rubber but i should go and change that to something different okay so height remove that with remove that so this is the mistakes that i said before and this is what i'm going to do also later on i'm sure about that so let's go for the height here in the div and let's go for 190 i think it was 190 no it was uh 90 90 in the link wrapper but here i need 180 okay 180. so i need to put also that here the div should go 180 180 180 not the width the height okay let's save that and see how everything else are looking okay are looking good next we have the less than 992 maybe i can go and in here no in here i can go for a little bit of less font size let's go for 22 20 something like that 20. okay next less 992 and see this is looking good this is looking good and this should have now a different height so let's go for advanced sizing and spacing and let's go for height 250 300 300 pixels 350. all of those problems because i didn't resize the image that i should have now i probably i should have resized the images and this is also another div that it should go for 350 350. okay everything else is looking okay and then let's go to the next which is this one the divs can go to 300 i should put a class i should have put in class here but i didn't 300 and 300 here that's the mistakes that you pay if you're bored to do the job correctly okay i should even if it's just two elements you should put the class and here is less than 994 and okay this should be 200 pixels maybe let's see 200 pixels yeah 200 pixels advanced sizing spacing and 200 pixels height okay save that and lastly we need to go for the gallery and put there something like i do have here yeah we have the uh light box so we need to link the images and add the light box inside here so whenever you click an image it will go full size let's refresh that and see how it looks in the front end this is the customizer i don't need that put that in here let's see how it looks in the front end okay maybe the uh space here is a little too low i need to get a little bit bigger space and the images are okay okay now i can go and test here the uh geometrics for those just to grab the uh requests tt metrics metrics metrics gd metrics and also we're going for the google speed insight because i haven't measured the elementor website so let's go and put that also in here and let's go and grab the first the website that it's currently active and let's go also for the google inside speed inside speed this one and paste that here and grab the url address let's go for e n for english okay paste it here and let's grab the url and open that again okay and let's analyze that and now i can go and grab the new address which is here now remember that those two are hosted in the web same website same web server sorry so let's go and test that and let's go here and paste that and i'm going to wait for that to analyze to stop before i test this that's what i did in the previous one of course it doesn't matter too much but let's wait for that fetching the side and once it's fetched and start analyzing i can go and search that okay so in the uh page here we have this is the elementor by the way and as you can see we have 1.1 and remember that we have also uh the lighting casts the lighting speakers and we don't have any cast in the oxygen here we have total request of 90 and 133 megabytes and here we have pretty similar for the i think this speed but we have 32 requests and 195 megabytes and as you can see the images are not the same i have used different images with 182 megabytes of images i don't know why but i used different images let's go to the structure to the waterfall and see the images let's go by size and see what i have used here okay i have used images that are way too big here and i should change that to something else this is from the gallery and i didn't use the same images in the other website okay and for the page speed i have this is the elementor 39 and 78 and remember this is with casting enabled and this is without casting 86 and 98 okay so without casting and without even the same images because i haven't used the same images i have used bigger images i'm way better with oxygen of course that's something that we knew and that's why we're moving the website to a different builder okay next we have the i'm going for the contact page because uh i think that it's something different i already created homepage and you know how to create another page inside here we're going first for the content and then we're going for the archive and single post templates and then if we have time we're going to create a page inside here too so let's go for the contact and let's go for the contact here also let's close that and i don't have any contact plugin now so i need to go and add a plugin for the contact let's regenerate the cast okay and let's go for plugins add new and i like the plugin the pnet forms via net forms it's a lightweight plugin it's a very quick plugin and i do like that you can create different layouts in the desktop and mobile view easily so even the free version i i use this instead of something different i have also the fluent forms pro i have i don't have any other pro forms i have just the pure net forms pro and these fluent forms and i tend to use the platforms more okay so let's go and check the contact and it's three fields with the contact information and the checkbox here so i can go and add new form let's go for contact okay let's save that publish that okay pnet forms again and not settings inside the forms let's edit that with peer net forms okay even if you haven't used dpo.net forms you can test it out it's a pretty good plugin so i need to put a section here and inside that section i'm going to add three fields i'm going for a field here and the form id is contact okay i'm going to copy that just have it in my clipboard and the form the field id is a name first okay let's grab that and put that here so we have name phone and email so we have a name uh which will be required and let's so they required okay let's go to advanced and let's go for the width where is the width in the pro version i think it's different from for the uh free version okay i need to put the width in the row and not the field for the free version so i'm going to go here and i'm going to go for column width and put here 33 percent okay now i can clone that and that will go here and then clone that again and it will go like this okay next i'm going here and for the here for the field i'm going for a what was it phone number phone number phone uh this is a phone number so let's go for uh where is the four number number and the number has something like that so i'm not going to use that sorry let's go for text and let's go for this one okay it's required i think that i will not put that as a required yeah not going to put that as required so let's close those and then we have the email which will be required i think that you have to put something required this having any requirements so i'm not going to do that either but i think you should put something as a required field okay email email email name email email and now i can put here the type as an email where's the email url text area telephone email okay the second one was the email and i'm going to not have it as a required and hopefully this is working okay i'm not i wasn't sure okay let's save that and after that i want to [Music] add another row and i'm going to duplicate the whole thing okay and instead of an email here let's go to advanced and let's go to style sorry and not here the here and remove that okay and here for the email i'm going to use a content was it the content box yeah contact minima okay this is the content content and here is the title it's required so label so where is the cry required and make it required and this is the text area text area okay and after that we have the button and sorry we have first check field with this text which doesn't have a link and it's not correct you should have a link or it has a link but it's not visible okay it's not underlined and let's duplicate that also okay and here is 100 and here instead of this text area is accept accept except okay the label uh let's see if we're going to use a label or if we're going to use just the selector the checkbox sorry and let's see required yeah it's required and it's check box and the invalid message the option is this one okay so i can remove the hide the label hide the label and just show the options okay and here i need to put the link of the page just the link of the page now i haven't created the page yet because i think i create the wrong page so i'm going to do it later on with no video but just type the link here that you want to put it's an html element so i think it works fine and let's see what else we want we want a button after that so we need to put a submit button so the submit button should say send here you should put contact contact remember that in the free version the form id isn't populated by itself so you need every time to put the same contact id everywhere if not the form will not work correctly okay submit and it should say send okay now for the colors i need to put a little bit of the colors that i have in the customizer which i have it here so this is the color that it's without hovering style background color this is the one and when i hover i want this however i want this okay something like that i think we're okay with that so now i can go into the settings of the uh button and select that it should email actions after submit is email so in the email i can go and put the uh here the mail to be to the owner of the website and then i can select to change the submit message to something different okay okay now what i'm going to do is change how it looks for the different versions so here i can leave it as it is it's okay it doesn't look awful but when i'm in here i have to go and put those uh in 100 so the column here is 100 percent here also 100 and here also 100 now here since i have the same name name and phone number i don't know why i thought that i changed that to an email but maybe i didn't i changed that twice so i'm going to do that now so here is email and email and this is the email and then this is the phone okay let's save that and now i can close the form and i can grab the shortcode of the form let's go back to the page that i'm building and let's go to the front end let's go to the contact and as you can see i have to go and put a little bit of background in the menu because it doesn't have any so i'm going to do that later on after the contact page and i can see now that i have contact 2 which is wrong i need to put that as contact one i don't know why but uh it took here something different so let's go and edit the page if you have any questions um hopefully we will end the live about 20 or 30 minutes hopefully so let's add the pages and let's see what we have we have these images and we have the map here with the contact information here okay let's add let's add a section this section has two columns and here we have the shortcode element and here we are going to put the full sort code okay and it's okay and here i'm going to uh go into the section advanced sizing and space background and let's browse that and let's search for the girl with a nice smile load more and of course i cannot find it easily now the load more i think it's something that it was changed in the version 5.8 but i don't like it very much contact okay contact okay select image and let's see what we have as here it's about 50 percent from the top something like that and i need i think no i don't need enough white here i'm going to put that in the column yeah and so i'm not going to do that in the column itself i usually put that in a div inside here so inside here the short code i'm going to wrap that in the div wrapping a div okay now since we have a div you should go and put that 100 and let's go for 100 of the div so it will go full width of the column even the shortcode should even if the shortcode is not 100 percent uh and every time so let's go also here 100 in the width here okay let's go to the div and let's see how it looks okay they have a color and it's white of course the background color is white with a little bit of transparency let's go 450 and see how it looks 50 i think it's around 50. yeah i think it's around 50. okay and we also need a padding so let's go for 20 pixels everywhere yeah something i like that also we need the heading which says contact with us so let's add the heading and put that heading inside this the div but on top and it will say contact with us okay let's remove the first space and put that in the middle of the div center okay and i think we need a little bit of space after that yeah a little bit of space so let's go and add the marking bottom maybe large no medium i don't know let's remove that mark in bottom let's go for small and see maybe small yeah okay save that and i'm going to leave it as it is for now uh also i can see now that the uh button here is not in the center and here i have it in the center so i need to go and change that here edit with pyrnet forms and i'm going to select here and select style and where is it settings advanced let's see where it is maybe in style i thought that it was easier for me to put that in the middle but maybe it's not style typography hover background radius uh in the provision i have these settings to change that but i thought that it was also in the free version as well border background no okay here it is it was easy but i couldn't find it okay so this is the uh first section so let's save that and add also another section which will be the contact information the sorry the map and the address so we have here the uh address with the name add to columns okay the first column has just a heading which will be h3 i think and put that in the middle i think not in the left no in the left okay let's leave it as this and add underneath the text element which will have the address okay something like that and i'm going to put a little bit of margin margin uh small and then i'm going also to change these to uh 25 20 20. something like that okay next we need to add here the address and i'm going to click here to the map i'm going to open that to a new window to google map and since we have it here i'm going to make it to click this share button i'm going to click the uh this button that i think it's embedded map it's in english okay i'm going to copy the html close that and go back to the website that we're building and here i'm going to add an html element not a co code element sorry a code element code block okay now inside the code block i'm going for the html and i'm going to paste the html here and for the width i'm going for 100 100 okay and for the height i'm going for 60 60 pixels let's apply the code and let's collapse the editor and then i need to go and select the block code block advanced sizing and spacing and let's go for 100 with here also okay now i can go into the div and i can go for 30 pixels 30 percent white in here let's go and save and see how it looks in the front end now here i have as i can see a full width of the line and here i don't so i need to change that also let's go here and see how it looks in the front end and as you can see this map is not the same so i need first go into the div and put that in the middle okay and then go into this section and put that section into advanced sizing spacing and put that in the full width okay now save and refresh the page and of course i need to also remove the 20 pixels that i have here and let's see okay i also need to remove the spacing around here remove that i'm going to leave the space that we have inside the columns okay and now since i have the full width here i need to go to the columns and advanced sizing spacing maybe put that no it has 100 but for some reason it didn't grab the full width let's see the div here is 30 so the div here should be 70 okay this is correct why didn't it change here let's refresh the page okay now it's correct and i think i need to put the uh contact here in the middle of the blog and not in the left okay so let's go here and select that to be in center and let's save that and let's refresh in the front end and see how it looks now i can see that it's looking better now okay this page is completed uh of course it's better to add here since it's the content the contact page you should add the content information you should add the uh phone number also the email and also the visiting hours and since we have social media but of course we don't know them you should add also the social media inside here as well then we have to go again into the template and i'm going to create the mistake i'm going to fix the mistake that i did here that you cannot see here so let's close uh this let's close also the oxygen here and let's go back here and let's go to the templates and also i can add the bottom in the footer that says that this is a website that was created that date and what else you want okay open that now a i know that there is a php that you can return the title the entitled the year of the the current year so you don't need to go and change every time what's the year in the footer so when you type copyright and 2019 or 2020 or 2021 you don't need to go and update it every time so let's go to the pro menu and let's go to the desktop dropdowns and we need the dropdowns colors and the background colors should be white okay this is the one that i need to fix and after that i can go for the footer here structure columns and here is the section that i have and i can add another div under the under the columns and let's go and add here another div and this div should go in here and not here okay so uh since i done that sometimes it messes up with the width but as you can see it's still 33 percent 33 okay so this div should go underneath the columns okay so this column should go on top of the div and as you can see it's not the easiest thing to do oxygen still has some problems with that okay i did it eventually and let's go for that div and inside the div i'm going to add a text and the text should say all rights reserved and maybe uh the year so how to add a year and make it diagnomic let's go and add here and search in google dot com php time so let's php function time and as you can see here is the time it you can grab this and let's see if we have another content we don't have of course you can search other web other websites as well but i think this will work and we just need to change a little bit of uh here the text inside so let's go back here let's go inside that div and in after the text or before the text word the uh date should go let's add the code block code block okay and the code block should have php and php is this one okay let's apply code and after that you can see now that it says 2021 and it says also some numbers here which is the echo time okay i don't need the echo time apply code now i only have the date and i just need the year as you can see here but it's not the year that we have at this moment i don't know why but it says 1970. let's see if that was the correct php php date and time okay this syntax is this one okay so it wasn't the correct one so you can grab that and just go and paste it here and you should have something like that so i i can delete that today is and i can delete the uh this one i think let's apply that and see okay i can delete also the today is let's apply that and see if we have all only the apply code so i made a mistake let's delete every everything and remove that apply code okay now i can delete this and i think this apply code something is not working correctly okay the php closing tag is removed okay apply code the today is 2021 let's delete that x let's delete also this apply and then the br we don't need the br apply so this is how you add the date and then you can go into the event select that to be horizontal and then we can go and say all right reserved give it a space and then this remove the dots yeah remove the dots that was my mistake okay and let's go again to the code block and we don't need that also okay so now i can have something like that like that apply code and let's see it all right reserved and let's leave the space i think i have already okay we're good to go now we just need to uh do a little bit of font sizing like 20. like 12 something like that and the same goes here advanced typography and 20 12 sorry something like that okay then we can go and start the templates of the archive and the single post elements so let's go to the blog and see how it looks okay as you can see we have here a search form we have some recent articles we have the categories i don't like really this kind of look but maybe we're going to recreate that i'm watching from brazil start with oxygen last week great theme builder yeah and if you do know php which apparently you do it's something that it will really help you build great results very quickly sorry so let's see what we're going to create here let's go back to the builder let's to the website refresh here and see if this is okay it's looking okay okay let's go to the templates and let's add a new template this is the post archive post archive and of course i don't have any post inside here so i cannot change the style however i want but you can see how i do that so archive let's go for post types and let's close and select posts and publish that and also you should select that to inherit the main template add that with oxygen put that in here so we have the name and then we have a little bit of content and we don't have any images inside here we do have an image here i don't like the template and how it looks okay so let's add this section add a section this section doesn't have any title okay for some reason where i'm going to add the title i don't like it as it is right now no blog okay let's put that in the middle center and probably i have to also add the uh sidebar and even though i don't like the sidebar maybe i should recreate that later on okay then we need to add a margin so margin large okay and then we need to add a repeater element okay structure so the repeater let's select that the query is of course the default you don't change the query in the archive page because you will run into problems and let's go for the div and div has the title and then the content pretty basic div okay add a heading and the heading should be an h four maybe it's four and then triple click it insert data and select the title okay insert okay also the title is linkable but it's not good for the ux so i need to add a button for that and i thought that i gave here a class of the margin but for some reason it didn't take the margin class okay so let's go again for the div and let's select the heading okay and it says okay this is not the post that i'm looking for and let's see if we have any posts inside here any posts because if we don't then it will not grab anything so we need to add the post in here let's go and add uh let's call the dashboard and let's go to pause all pause and see what we have here we have the hello world which i think it's published so it should already be appeared in here let's go here and add this title for the post even though i don't going to create the content or maybe i will just copy the first lines of the content yeah let's add here the first lines and i do now that i need to also create a category for that i haven't created a category for the post let's publish that publish and let's see the post what categories we have in here categories okay we have categories inside here and we don't have categories inside our own website so let's go categories okay something like that add new category and now that i have this category i can go into the settings i can go into the is it the reading the discussion the reading the writing i think it's writing writing and here in the writing i can select the default main category to be this one so even if the owner of the website the one that is going to upload articles even if it doesn't select any category it will not go into the uncategorized so let's go to the categories again and let's delete the and categorize now that it's not default did i say that i think i didn't save that let's go into writing no i saved that so no sorry it's not the here it's here the default post category is this one okay so save changes and then let's go to post let's go to categories and now i can delete that uncategorized category okay we are okay now so i can go now to the post and i can select that and refresh first so it will grab the categories and i can go and the url is off the limits it's something that i should go and change later on okay this is okay and also i have to go and remove the oxygen button inside here the posts okay now that i have those i can go and select here if i save and refresh hopefully it will grab the correct posts let's see okay it's working okay i didn't took the correct title but i can go and check first if i have done any mistake and then go into the template and check again so let's check here first insert data and here i have the post title yeah i think that was correct and here i can go also into the repeater and select here to take the posts posts yeah it's grabbing post but i think that i have to go and check something from for the from the template okay i'm going to leave it for now let's go advanced let's go for sizing and spacing let's go for here putting a margin a margin of large i think that's the correct one and then we need the text and the text should be the content of the post and basically not the content triple click it insert data and then select the export not the content the export is better okay and then we need to also add a button i don't like this space that we have here so let's go to advanced sorry let's go here and remove the marking bottom l and let's add a margin bottom m for medium let's add and this will be 20 pixels okay and then let's go back and lock that and also here i'm going also to add the marking bottom m and then i'm going to add the button the button today should say read more okay and the link is the link of the post okay after that i need to go into the div advanced sizing spacing a little bit of padding inside here 20 everywhere and maybe i'm going for a little bit of drop shadow so let's go for a drop shadow do i have a shadow here in the class no i don't have a shadow in the class but i need to put one shadow shadow drop shadow okay and let's go for effects box shadow and let's go for black 0 0 5 and then let's put the transparency in 30 something like that okay and let's go and also lock that and save that this is how it will look uh let's go back to the templates oxygen templates i'm going to close that and let's go to post archive and see if i haven't checked something post is okay the post type and if for some reason the template is not working you can give it a top priority or i can go and check the categories all categories because i will not have anything else and select the taxonomy here okay so this is the archive and update that refresh the page and see if it's updated okay update again and now i can go into the new template and i can create the single post template single a post single i like to put the name first so i have the two posts next to each other okay singular post and then here the main publish edit that with oxygen i can't remember you have said that i have to fix anything here i also need to put a little bit of line no i think the drop shadow is better but i think i need to put the bottom margin for the div in the archive template i didn't put any margin so it will not look good of course i don't have any post inside here to look how it looks to see how it looks but i know that for for sure that it needs something like that so what a section add here the image and here the image should be data and featured image size is large insert and here it will grab the featured image of course we don't have any image inside here section remove that i think i should put a little bit of sizing and spacing maybe like five five something like that okay and the whole section can be hidden if you don't have any image selected let's go first in the section let's put that in the middle okay in the center okay so the image will be in the center save that and the whole section can be removed here if we don't have any featured image so add the first condition choose condition featured image is somewhere here post id has featured images for post has featured image okay if not it will not be displayed save that and add another section and this section will have the heading let's put that in the middle as well center and triple click it insert data and this is the title insert then i'm going to add a little bit of margin and then a text so let's add first the text text triple click it insert and then the content and then here i'm going to need a margin bottom l like this okay save that and let's go back to the templates let's go back to this is not i closed the test website beautiful okay oxygen templates and for the post archive let's edit that with oxygen also i remembered what i wanted to do let's go into the settings and remove from the posts the dialog box that says oxygen so from post and maybe from p10 forms as well let's remove the metabox of oxygen okay let's close that and since we are getting to the end of the live here the live video i can't wait i can wait for some questions if you have any it would be great so i can answer or just chat a little bit and then close the live video so here i need to maybe uh not maybe open the structure and for the div i need to go to advanced let's move this out of here advanced sizing spacing and put a little bit of margin here like 20 pixels okay save that and let's see if it's working now and let's see here visit site let's go to the blog okay and this is a page and i should also add here uh since it's a page it's not the blog itself so i can go into the page and i'm gonna go all pages and into the blog here i can go and edit that and select for the template to be the post archive save and see if it's going to work in the front end okay and for some reason it's not grabbing the correct so let's fix that by going into the menu and grabbing the correct one so let's go into the menu and instead of the page we're going to put here the blog so category and here we have the blog the blog category okay let's remove that and if it's not going to work i can go into the page and add just a little bit of just copy the creation that i did the uh repeater element and i think then we'll it will work okay so let's go for category and as i can see it's working okay so we have the two uh here we have the two elements uh the two articles here now keep in mind that if you create a page instead of the blog in oxygen so you don't have the category and you just have the page here you need to also create the archive the post archive template because it will also grab the results of the search so you also need to go into the articles into the templates and you need to go into the post archive edit that and here when it says other you have to go and put the search results also with the archive because the search results will be for the posts and they should grab something inside here okay so do that also now let's see a little bit of pages inside here and see if we're going to make any pages just to finish with the page or something now i remember that i saw that all the pages have a section like that we have a little bit of image with the title and here we have the content of the page so i need to create something that it will be repeated in every page so we're going to do that and as i can see everything is quite uh they look the same so they have the same template here it's across the page and it's fixed so i'm going to do that as well after that uh it's a too much of a content to do that now why is the the white page inside here i don't know why okay so let's see what's the easiest page to recreate to copy not this one not this one okay i will not find any easy page as i can see so i'm going just to recreate something like that and then we're going to finish the live uh video because it's almost three hours now so let's go to the pages all pages and let's go to one of those let's go to this one i'm going to edit that with oxygen and let's go and see what was that this one i'm going to put that here and let's wait so let's add first a section and now i can go into the advanced i can go into the background and i can set this to be a featured image now remember that you have to go into the pages and add a featured image if you want that to work correctly but i can go that and do that for the background image and i can now go into the page and add this image as a featured image so let's go again to the pages and let's edit that and that was a girl that is sitting right here with her hands in her knees so i'm going to go into the featured image set featured image and add that girl inside here okay i cannot see the girl let's grab the image let's check here for the name of the image just to be sure of course oxygen sorry elementor will create this is the one this is the background overlay so i think this is the correct one okay and this is the name of the image uh elementor will create too much of a content inside here too many divs so it will be little bit difficult to find it but okay we did so let's put that in here and grab this okay and insert that and save command save command save now save here set featured image and the update is not accessible maybe because i have already opened the oxygen here so uh let's close that and see if we refresh the page and see how it looks or do i have also to create something different here no the update doesn't want to light up okay exit the page and set featured image this one okay for some reason i cannot update the content here and now so uh you could do that with the featured image or you can just go and create without any dynamic image and create more static approach i would like to do that with a featured image but for some reason i cannot let's see in a different page without open that in an oxygen if it if i can save that maybe i will do it in a different image yeah here i can have the update because i haven't opened that with oxygen so maybe i need to close the website at all and open that again or reset the cast or something like that but here in this page i can go and add the featured image so i'm going that in that image that was the page okay and this is the key with the books so let's go and set the featured image hopefully we will find it easier hopefully where was it where was it okay for some reason i'm not looking correctly i i cannot find it again i have to go and grab the name of the image again let's type here no that was not the correct yeah this is the image okay and it's 1200 pixels i think it's okay and set featured image for that update and then i can go and open that with the oxygen okay let's grab that and move it here next to the page i don't like the title that it's in blue i don't like it it's made it's looking like a link i don't think that it's good for the ux and i think that someone is going to click it and also i can see now that it has a link here once i hover but now it went away i don't know maybe it's the problem of my build my builder and my browser okay so let's add here this section and this section will have now advanced background and let's go for background image of the featured image and this should go for large and insert okay and now i'm going to have it fixed 50 pixels 50 from the top and i can go and put here a heading the heading should be the title of the uh page so here's the title insert and this should go into the in the middle center okay now i can go and put a little bit of spacing on the top on the bottom sizing and spacing and let's go for 150 and 150 and i think it will be a little bit bigger let's go for 200 200 200 pixels and 200 pixels something like that okay now i'm going to go also to the section we are in the section so let's go to background and let's go for a fixed image we have a fixed image okay so let's go to add an image overlay color which will be white and let's go for opacity of something like 80 i think something like that yeah i think something like that so save changes and now i can go and set this section as uh something that it will be repeated so i'm going to click here and i'm going to select that to make it reusable once it's reusable i can select that to have it as a page hero section page hero section okay now it will be a page hero section now i can go i can delete that i can add go to the repeaters reusable and i will see it here if i refresh the page first so save refresh the page and once i do that the delete and add it again i can now make it editable or make it global so the global means that you will change something inside the template and it will change everywhere and this is better instead of editable which means that it will be separated from the other templates so here i'm going to add section note section sorry usable and page hero and this i will make it a single not a double because this is the one that i want to use single okay and it's good save that and then you can go and add another section and add everything else from this uh content of course i didn't check how it looks in the mobile version but you can do that in the template now because you do need to do that and this is where the live will end if you have any questions please type it down now or if you want to talk about something else do that because we're going to close the website the live video in a few minutes almost three hours with no stop okay structure of course i cannot see now the background because i don't have something that it's displaying and i need here to go here and section page content okay this is okay here i'm going for something different for the font for the font size let's go for 25 okay and here let's go for 22. okay save and i'm think i'm okay now and if i go to something like that that was the page i think and i can go and change that to different size and see if the it changes okay it changes we're okay so any questions before we wrap it up this website will be live for a little bit and then i will move it to the website the default website and you can see the url so nothing is hidden you can check your own you you can make your speed results if you want and of course as i have already shown you if we go here and we see the light speed cast you will see that it's enabled and it's using the light speed cast and i think it's enabled why everything is zero percent uses okay it's on it has a domain key it's yes mode guessed okay cass isn't enabling yeah it's enabled it's on and let's see i'm going to put the lightspeedcast plugin also no i'm not going to do that i have to wrap it up it's almost 10 o'clock so thanks for watching guys and hopefully you enjoyed the video it will be accessible from my channel as to watch it again when the live ends so thanks for watching guys and i will see you all in the next video bye guys

Channel: Stratos Tutorials

Views: 604

Keywords: Oxygen Tutorial, Elementor vs Oxygen, Create a website with Oxygen, How to use oxygen, oxygen builder, how to create a website with WordPress, how to move form Elementor to Oxygen, Elementor to Oxygen, Elementor and Oxygen Comparison

Id: aIRLwAuCVe8

Length: 169min 8sec (10148 seconds)

Published: Thu Sep 02 2021