Hey, I’m Tim and in this beginner’sguide I will show you how you can create your own website in 21 simple stepshave fun here a little overviewfirst we start by getting a domain, i.e. the name of your website andhosting, then installing it like wordpress with one click nextwe make a few basic settings for the website and can alreadyadd our homepage this design we then use the image elements page whichmakes creating websites super easy because I do a bit of drag anddrop and copy and paste If, for example, I want to have a tag somewhere on my page, I can select texton the left, drag it to the right place and then adapt it to my needs You can build the desired page according to your ideas and wishes, regardless of whether you have an accountktform would like to have video backgroundsa slideshow animation a portfolio of frequently asked questionsand so on the website is ofcourse also optimized for mobile use that also looks good on the smartphone andtablet if you want you can build your entire website from scratch oryou can do it long ago use that were created by professionaldesigners and customize them for you there are thousands ofoptions and there will be something for youso if you want to learn step by step how to create your desired website art show this tutorial and I’ll show you everything,have fun before we start with starting number one, I have twothings about the video first of all I have linked times in the videodescription, that is, if I am notinterested in any step or want to play before that, you can watch my next partcomes and the time sounds the same the video is relatively slow if ita lso you want to play at a faster speedyou can go to the settings clever expeed and for exampleselect two the next one willprobably not surprise you in this video we work withwordpress to build the site that has several advantages first of allit is free and of course always great and it is alsoused by 35 percent of all websites on the internetaccordingly i have a lot of users and also a lot of developers so we can usethousands of plugins so what we use extensions and themes so something likedesigns for our website and don’t have to program anything yourselfthe presses in my opinion the best platform for building websitesand that’s what we’re working with now that would be all about video andyou can start with starting number one and get us hosting and domainsso that this step makes a little more sense I will explain to you brieflywhat you can do al les needed to build a website thatis available live on the internet to create your own website thatis available live on the internet we need three things first of allwe need a domain that is simply the name of your websitefor example facebook’s luna come in facebook google to more in thatgoogle come to a domain that websites makethe domain names cost about 15 euro more than the second we need web hostingwith webhosting his company pays for the fact that you are allowed to use part of their serverso that your website can be viewed live on the internet andaccessible is webhosting is advertised at a price of around four to 15 euros permonth but is usually also paid annually.Next you need wordpress that is completely free of charge from wordpressorg there are also webmasters come on we wantbut wordpress org knows the open source version of the webos platform withwhich we provide the site according to our wishes en can design presstore com is akind of light version that is very limited with only these three things you can get to your own website in avery short time and now thebest part comes earlier that you have to get these three things and thenconnect them yourself but is today The process has become much friendlier for beginnersand all you really have to do is register for webhosting and thenyou have the domain and wordpress with you and now we can go the realstep-by-step instructions rent the reporting installfrom wordpress and the design of your website I will also show you a lot of tips and tricks that will make yourlife as a beginner a lot easier do my best to help youi read every comment and reply high on every so step number 1host ing and get a domain in order to be able to do this step firstopen the accompanying article for this video which we find at thefirst link in the video description i will also link it in the commentsor you can also just open the website made at the point dethere i go Always up here I have linked my favorite videos or articleson the topic of website creation which were super helpfulfor me to learn the basics, e.g.How to deal with color, how to create abusiness address, for example info at then domain pointcome all over a lot of things that we will usemy video later, accordingly, I wouldstart the website with another point of iss, perhaps add the bookmark if it fits how it fits so here we canstart with starting number one and see whether the desired domain isstill at all is available when I search for aachen.de website, for example, itis not more available now check that is gone, for example,then you’d have to get creative you could, for example, insert a hyphenor a number or the domain extension so the end of for exampledot.de come to point or do not change pointthere you will find something in the next step we can come to you alreadyin roman times and think big and set up a domain as alreadymentioned you pay a company for web hosting to use the gate part of theirserver for your website this then stores all your images iconstexts videos narrators your servers and these run 24 hours a day, seven days aweek with a top internet connection and play yourwebsite at top speed if someone opens it without web hostingyou could open your domain but nothing on thesubject would appear like me now not for too long enter because the areas have aneaster but it is still an important point Choosing a goodrosling company is, in my opinion, one of the first steps towards the success of awebsite, if only because many bad Russianshave very slow servers your site is deeper in the search results,so now I’ll give you a quick crash course on the topic ofhosting a few points that should be watchful if your house is now thefollowing first the speed as already mentioned it is importantthat the easter fast server offers for this I would just google the potentialhost for a review on the internet there are many people who test the 21 ssl certificate make surethat the oster offers an ssl certificate we will go intomore detail in five minutes but if you don’t have an is ssl certificatea message appears solution image i’m finally something if someoneopens your page and google blog the user and the earlier we definitelydo not have on our side, thirdly, the uptime so how seldom theservers fail it should be good, you can do thatas well as the server speed via google and 4 1 6 key word pressit is mostly a direct content management system,so it is important to securethe page this happens on two levels once on the website i will show you that andsecondly on the server just make sure that a hosting providerhas set up a function for the to protect the server and websitenormally all of them can onlydo that with very, verysmall providers my god what has been with them for several years i am verysatisfied here are also on their side asyou can see here t will even get them from wordpress myself becausei can even go up to the orchestra and then host wordpress org /ossing here and here we have a reason there are also dreamers and offices thati haven’t used for several years because of that I don’tknow what to say , that’s actually aboutit, too, I wouldn’t be selling that for too long now you may havealready decided on another ruster I like you especially less fast servers the department is alsovery high so that me never problems with and the customer support is justgreat that may seem quite trivial, but especiallyas a beginner you might have a problemand then it’s great when you have good customer support by your side,so I can do it on Saturdays at half past one three write andstill got a quick answer you can also just describe the pagehere you have a bit of service e if, for example, you are on thehomepage or if we all point to technology and then data centers, that is exactly what is quite interesting , namely those who use google data centers, for example,these are even eco- friendly here you canread through everything and I decide for myself would lead you around maybe to look upa review I also have one that I have notlinked on the page but maybe I will extend thereviews, you can then look worthy of missing securityis also great so far I did not want to exactly ifyou want to take a look at this, I’ve also linked it here on the startpage or in the second think in the video description if youclick on it it’s also up here that’s my missing link thatmeans I’ll get a small commissionyou dont have to worry about putting on the link, you dont have a cent extraand Im not only recommending you because of de m command link every other post alsohas a net program but so be it, I’ve been using itfor more than 70 percent of my own projects for several years soI think it’s only right to recommend it, so if you want to support the creation of such free videosI’ll do that, taking the university, you can click on this linkor on the second link in the video descriptionthat helps me a lot, thanks well then , I can just make up my mindand you have three trainers thinks ogi kubik and start up plan the go plannedis probably a bit too much for the beginning so the maindifference between the stall from and rough plan is that you can east a website in the citymap and in your luggage you can have as many websites as youwant is i actually have a startup and a graphics coreMake website punkt.de runs on the city map and on the audience I have rathersmall websites but also a lot of them 2 5 pieces must beat the moment and that works great too, so Ican be missing both the kobik planning is a little bit faster but getsmore resources from the server but it is not really noticeable so themain difference is really that when you plan a salad you have a website pantsyou can also look at the exact details by going tocompared with plans and then you can do everything in this video namelynow just a city map but you can decide for one ofthe ones that fits then i go to the committee to planBy the way, there is also a 30-day money back guaranteethat is perfect if you just want to try it out and youcan now enter your desired domain here assuming youalready have a domain and funny and that was registered can also be on theconfused man go to enter yes click on rossi and at the top rightI will now extend a video like you then next that can be done prettyeasily, well, I am now assuming that there is no domain so I will go to afresh domain than ever and in this case, for example, I would like tomake websites – that means here on the rightI can change the domain extension you can Of course, take everything youwant to enter here and hope that it is still available and change your exchancellor extension here you can become the most popular antsthat I would probably recommend to you orhere which one depending on the country or whatever you want I test for examplePunkt org the cost 15 euros more I would have to cheer and it isstill available super accepted it is not availablejust looks what is available and if you are a little creative here we cannow provide some information here first the accountinformation so we were at sound one time your e-mailaddress a password and you confirm that again then n some customer information you also need for the domain soonce your country probably germany his first name surname if you buy the whole thingfor your company you can give yourself the company name and thesales tax identification number of your company will be fun and the sales taxthen we have that city address postcode and telephone number and herethe payment information, i.e.Your credit card number the expiry date yourname and then again in the www code you will find on the back this is thethree-digit code assumed you do n’t have a credit card or do not wantto pay with credit card it does n’t matter then you can scroll down andwrite with the chat and say that you don’t hate a credit card and would liketo be on board then give you a link and you canpay with paypal i guess we’ll make thefees a little lower by credit card aregood then we still have precious informa tions so here couldchange the plan again between stahel distracted oncology the data centercan change so where the server shouldbe but i would choose frankfurt what is probably preselected for youat period you can choose from during how many monthsyou want to pay in advance could pay monthly but is a bitmore expensive you could pay for three years in advancebut I think 12 are quite good monthly makes probablynot that much because we also have the 30 day money back guaranteebut I would just see what for you make the most sense makes good thetwo of them we don’t need them so you can leave them alone and then you canset the checkbox here and on pernau I’ll go for everything next toeach other and then we’ll see each other on the other side so I have everything now m executedand then we come to the next step and can click on cheers to custom area great then the step would also bedone fft and we have step number one big singh and theend of worries check in the next step we can already install ssl and workers for that we start first and set upinternally inside brings a page that is not yet directly a websitethat is just for the sake of it management insight bread that means here you canclick upside in the offset you could also do that here under websites and thenon the website or here create website let’s do it quickly so newwebsite here I choose then exist and there I choose websites – do themI just worried here and then we can concentrate on andthen on skip a create empty side and then assumed in finnish the processlooks completely different with the incidentally , it can also be on the startpage that actually applies to everything in the videofiles something completely different is so you can no longer really understandlook at the start page , I probably have then update videogem eight where I explain this process so now the page is created internallycan take a short time great now the page is created andwe can scroll under and click on god tools so here managedtime and then we are already in here and here we can manage pagehere we see, for example, the servers the ip address of the page butdon’t really need it now let’s start andinstall an ssl certificate for our domain if, for example, Igo into this url here and cut it out here and thenthen you see you have here http s it is assumed you have no sslcertificate there would now be http instead of https when i go out nowyou can see here on the left that such a lock is there and would like toclick on it normally then let’s say there is a connection here sure certificate isvalid because it says there because my site has also assumed an ssl certificate,we will not install it now, it is not there Bea lock but rather a red open lock and it will say that the page isnot safe just as sometimes google would block the pageif someone opened it I’ll stay here for somethingthat could appear so and we don’t want that to haveus accordingly we get a quick ssl certificate that is alwaysdone by clicking on security the londoner on ssl manager and down hereat manager sales your domain might even be there then that’sperfect then a first lcd has already been preinstalled otherwise we have toinstall that means here the installer willalways be domain for example websites – make point comes and stay on the rightselect ssl you want to load crypt and then it goes there that issimply a free service saas offers were always short ok now i have thatdown here ssl certificate and it also says active, so that’sgreat in this case, it works right away oned sometimes it worksbut not directly that is most likely becauseyou have just bought the domain and it has to be registered properlyor because the last crypt is a bit overloaded in which caseI would just log off a few hours again come in againgo to ssl manager and see if the location says maybe go for money againand try it every few hours after a maximum of two days it should work but it wouldreally be the longest period in case of doubt but I can always leavea comment leave it there and I would have it, but it shouldn’t be sucha problem.Next , we can then click https and for skinyour left and once for the domain http separate it in force, but it can only do it after you enter active ssl certificateon the domain you okay that would be all for the ssl certificate andyou can get started and wordpre install ss that means the left came to web rest go and then to the team manager herewho we then departments so I go to the lay down here wecan select the domain on which we want to present, inmy case, websites – procom do the you shouldleave installations blank so you have nothing in it at language you can exit if inwhich language you want to have to the press installed there will probably begerman off so we can remove this checkbox we don’t need thestar trek with the info it can be used by its users enter and then have thepassword and again the e-mail address so that you stay on your website accordingly it should be very, verysafe with the username I would recommend you not to use the wordbreathe and not necessarily the first name or full name because thateasy is to be expected and what pastor should also be very long and sureand then we can go to the store i I want to do this quicklyand then I go to the store now installed the process cantake a short time great and webos was installedthat means that was step number two congratulations I canquickly show you again how to get back here if you ever do that have to do it again with thessl manager that means go backthis is how it looks when you are open for the first time after you are alynx then you can also go to websites and then you see website titles hereand then you can click offside rules and then if you come here again asecurity and that’s good then we go here on the left to rappers in storemanager and then we have the installation here so websites – makedot com if you want to log in nowyou can click here on the right on logintern antenne sound on this iconlet’s click there and then we are accepted in the web press day sport thatdoesn’t work right now, it can be because of that gen that you have justregistered the domain then I would simply not log off again and come back in fora few hours then it should actually workif you ever want to come back in here you can just enter your domain / name wpf and I will then with theedmonton user register the data that you just selected during the installationreason can actually close now we don’t need that anymoreand then we look again here in the steps next we can learn a fewwordpress situations and adjust so this is thewordpress dashboard in here we edit our page on the right wejust have a small overview of news and updates but we don’t really need that accordingly we can go to view at the top rightand remove all the checkboxes here so thatit becomes a bit clearer and then again go to adjust view and it’s a bit here In a clearer way up here we have something that we willhardly need, mainly to look at our website,always doing this by clicking here on the name of the website, when in this casemike rodgers and then on to the website I will open it in a new tab so right-click just sounds like a tabopens and this is how my website doesn’t look particularly nice but it isa website on it we will still work wellthe main work we will do here on the left we have here on the left we canedit the posts back add media and we manage can add pages, comments, manage the design , add plugins, add users,add tools and edit settings that will ofcourse be quite difficult and also quite overwhelming but don’t worry, we will go through it little by little and after this tutorial you willunderstand everything so just keep following and then it will be finefirst of all I would with I start with a few basic settings that I make inevery single website that I restart, so you shouldfollow that first on the left to settings and then to generaland here you can see the title of the website and the subtitle isnow the title my world race and subtitle is justin but websitewhen I open my website here I still have it in the tabhope for a wordpress just another side here and up here in the tab I seethat also that means the title is displayed hereI now change in your case, probably have acompany together and maybe a short lie or the name of your website I’ll do that quickly, so with the title ofthe website I give you better and with the subtitle I learn tocreate or design websites that is exactly what is important Nothing changedin wordpress address and website addressotherwise the page may crash and start over then come downscroll down and go to save changes and if I now update the page then that has already changedclass next came emma on the left to user and all users go then we seehere the one user that is you in my case is mine name im 22 theni can always click on it and scroll down so nickname iwill now for example change it or enter something else and withpublic names i switch to nicknames and and updated theprofile once and if i do now i do for example here on thewebsite, for example, the name is currently public because I have not yet set the namebut when I updated the page now these syringes have indicated that it makes it a littlebit safer well then came back to go back and next hoffmannwe click on permalink via settings,by the way, when i say then i just mean that i’m with the mouse overthis area I will use the word more often so permalinkand here you should select income from contributions that was already selected in my case so, for example, acontact page under websites – make it com / contact can be foundyou will not select it would be it for example under websites – made dotcom / 2020 19 27 / contact that is not so good for search engine optimizationso that the page steers higher on google and it just doesn’t look sogood so save changes great that will also be thebasic settings that I made would always do that means step number 36 hey its me again if you like the video so faryou can also put your thumbs up that helps me a lotwith the youtube algorithm many thanks for creating a first pageand making it my homepage if let ‘s take a look at our websitehere we see hello world this is a blog post so what we do butwe want to have a homepage for you, so we firsthave to add a page and then make it the homepagefor this we can hope for pages in the dashboard on the left and then click on create then I can give the page a title here, forexample could not Enter home and then go topublish and publish again and if I now aim at the page, nothing has changed yet that means we have to make thehomepage the homepage, so I go backhere and then I can go to settings on the left and then go to read andat your start page shows if we have a static page and at homepageI then select around and then we go to save changesif I now have the page we have a homepage great so first create andspread it out check now we are slowly going a little faster withsuper in the next step, we can install the right team,too very interesting point as already mentioned, the pagedoesn’t look particularly good yet that is also due to the fact that a team tells you what you candesign at your side, for example what kind of menuyou can have raised and what colors to use can what for content can beused that is all set by steam there arethousands of teams in regress we can also take a look at them by clicking here on the left viadesign hoffer and then on teams and here you can see anoverview of possible teams we can alsoclick on the inn to add, for example, and then you will see even more introducedpopular latest there are a lot of some are completely freeothers are premium that means there is a free version and premium versionand there are also others that only in the premium version are availableif you say one of the attack here, for example,that here then you have such a preview that you can see en because that’s always greatthat’s what they have in common the problem is usually that theydon’t allow that much to be changed and you canusually only do that afterwards, so I’m going tobe like roses here in this video use dhabi op you can even see it here isone of the most popular it doesn’t look thatinteresting in research but has the great advantage that you can change almost everythingand that is perfect for our purposes , that is, if youwant to watch this video you also install in the pc otherwise you can’t go on because it’s free luckily so toinstall that you can go to design hope for teams add something newand then you can search here on the right for ocean david and thenyou will find it here then you can go to install and activate great now it is our active teamand if i update the page then si it looks different, notnecessarily for pretty people but definitely different and now you can edit the pagemore easily well when I’m back in the dashboard we cannow see this message this team recommends the following pluginselements extra interviews we can now very quicklygo into the steps here so install the right team checkthen we’ll see the next step namely install the right pluginsthat would be, for example, all mentor and ocean extra what we can doonce is here to install the plug-in states getand then we will install all the people here separately from agence and take over the two we will use in thistutorial we also needed another plugin for that we canlong ago go to plug ins and then go to install then i cango fix that again is another advertisement from elemento skip setupbusiness here can ever get me tzt again advertising refuse this message andadjust a high-speed train view the two take out again andrefuse this message perfectly well so should go to the plugins there we go to the leftbut also plugins and install this is similar to teams but itis about the function of your site you can imagine it like withyour cell phone from the ground up, a cell phone does not come with instagram orwhatsapp these are all apps you have to install to add this function to yoursmartphone and the same thing we have with wordpress plugins from theground up, it does not come with the function of an online shop for thiswe have to install a certain plugin of which there are thousands of plugins you canalways have a look at the presented or popular ones e.g.you can edit pages with guttenberg with contact from the same you canmake contact forms with jost seo you can make your page appearhigher up in search results t with williams’ you canbuild an online shop so there are a lot of and ifyou want to add another plugin, which we want to do now, you can search for it here, for examplein my case i want the plug-in expectation elements I would recommend that you alsoadd that would also be super helpful here we see that thereyou can then go to install now and thenactivate it once great now we have all the necessary plugins here we see themtoo once they will often plugins and installed plugins g is elementaryso we need the page 1 watt elements that gives us a lot oftemplates for the pages and ocean extra that we need to have a few extra settings exactly and the others the battle timebrown itself are okay, well that was then already step number sixinstall the right plugins again briefly to the point as you have justseen there are a lot of plugs ins if you want you can alsotry other plugins there I would simply recommend you to google themthat is because the great thing about wordpress there are millions of users and alsotutorials that means there will actually be instructions for eachplugin and then you can you read in a little andexperiment with it well in the next step we can prepare the homepage with oceanspecially for this we can go to the homepage here every website isdivided into three parts you have the head area above oralso called hacker that normally once in its title or logo at the bottomand navigation then we have the body thatsimply contains all the information you want to put there and then we havethe lining down here, i.e.These two bars that usually also providecontact information, perhaps a journey or another onenavigation and has such a copyright area we edit our se ite in two ways plug-in element in front ofthat you have already seen in the intro so that you can easily build our pages with drag and dropin copy on pay so we build the body and the lining because you would build really well with elements but notthat can and is just not across pageswe would build the dealer with ocean view so the team is also ableto build the header with elements or, for example, to build the feed motorized gdp, I’ll show you everything then astep 20 and 19 and 18 but now we basically wantto start and clean up the page a bit so that wecan start building the page with a mentorSpend a little more time because it is pretty much the most important pointand as soon as we have learned that we go further and there in thenavigation and edit the header with ocean therapy and then I’ll showyou how the theoretically also the feed with motion the bdp could buildor theoretically the header and elements or even no dealer sothere are still different variants but now let’s start and clean upa bit here to do that we can edit the page firstthat means I’ll go here you are back in the dashboard in a new tabonline, we go to the left side of all be and then go to home becausewe created the homepage and we want it to be the first time,but so I get it super here because of that we have installed and activated the plug in motionextra , we have the motion of the bdp settings down hereso that we can now tidy up the pagefirst go to and choose content layout 100 percent fit and gemato update and when I update the page this is great on the rightnext, we go to the left on title and then we go to disable here thenI update that times go here again fresh and alsothat it’s gone great next i go up i just wanted to go away sothen i go on tour go online for a long time i also go here to disableand disable update and then the way is also great the last thing wewant to make disappear is up here above the title you still have such asmall white line that you can hardly see now that the top couplewe don’t need that means here on the left I can go to dealersthat peter bauer and disable would like to update the assumption againrefresh is gone too the steps you should imitate nowyou can always undo them so don’t worry that would be finestep number 7 prepare the homepage with ocean extranow I’ll do the whole thing again with a few more pages to save timethat means who should now put another contact page about us services anddo the ocean extra setting there again, of course you can do that toodo it later or always add new pages afterwardsI do set once to save time that means here I can go back once and then I go to create givethe new page, for example, the title have contact also publish publishagain and there I can alsomake the setting here directly, so my layout 100% head-up display topperdisable update the title of the oil and feed disable and the appleand when I look at myself I end up on berlin clique and then click here on the linksee i have an apprenticeship contact so perfect the step again ihear now for the other pages yes so create back but do it t that’s abit faster ok class now i have a homepagecontact service is about us and they are all ready to edit itthere would be steps to create 8 more pages and ocean extrasettings in the next step we can use the element page pictures alreadystart and our page really closes the pagesi can first close a few of the deeds so for example contactcalmly not and also no more plugins good so here we are now in thepages and i want to start first becausei can edit the homepage for that So sound mockery and in order to edit the page nowwe can click here with elements and then the elements page images opens that would be a step number 9start elements page later in step number 10 wecan see how a page has elements and at all built is elementary is divided intotwo sections here on the right has a preview of everythingthat happens on your side t and on the left you can edit everything if you want toview the full version of your website you can also hide it on the editorstick then it is the full version oncei open it but again you can also look at the mobile or tablet version ofyour site in the through it at the bottom left on responsive mode textand then, for example, tablet off or mobilethat will be useful again later on i get back todesktop and then responsive mode okay first of all i would like to quicklyexplain how a page builds an element clock is for thisi import a template of a page, i.e.A finishedpage, because it makes it a lot easier to explain the stepcan also be followed by clicking on about thomas klix this is one of theplugins that we girlfriend have studied online games dorf, how are you doing menow, very different templates we will go into moredetail on them later n let’s not take,for example, that here then goes to the gate kit and there I can also go to judithhike I now see the different pages that up herecan ignore for now let’s say I want toimport the homepage here so I can I go to insert template here thenimported the page in and we already have a finishedpage great how is a page structured in elements when I move my mousearound here you can see that the outside is marked in blue, that is asection when I do always red call also here Imove the mouse around the outside and you can see that it is marked in blue on the outside that isalso a section that goes on like this here we havethe next section and here the next section thatmeans one page is divided into several sections In thesesections we find columns, for example here on the right is a columnthat is marked in gray and here on the left we also find a column that is alsobarely marked here on the left we also have a column again you can see thatbarely marked and here on the right for example also one here we even have3 1 2 and 3 some of the columns are empty for example those on the rightothers are filled for example yours the left is filled with text andhere with another text and here with text that is thenoutlined in blue and these are widgets here we have, for example, a photo withhere we have a text bridget and here we have a button widgetrichards you can here on the left if you blob on these new workshere these are all richards you have aninner section heading image text video buttons trainer distancequite a lot that is the content of your pageso to summarize the office your page consists of severalrichards in Columns and these are built up in different sections of theword so that it can be subdivided better on one side ,well that would be auschwitz steps abse hen how is an elementary pagestructured next, let’s start now and edit our own textsso start by myself and build elements of our pagefor that, i go back an element ear to someone and delete thetemplate that we can import for it I just click on ex hereat the respective sections to delete them once and have the pageempty great I would like to start nowand add my own section and then edit text in it toadd my own section, I can click this pink plus here click andthen the structure and in it will be how many columns thereshould be a 234 a third around 232 million entries or one of theother me as now simple and simply missing one okay nowwe have this column on the left has become this also opens the editing menuhere we have the layout style and expanded the wool section n we won’t edit that now, we’ll do that later,we’ll start now and edit the text in it that doesn’t yetexist, that means we have to add first for this I cansound here on these new squares to get back to the basic settingand Here I see all these widgets if you want to insert a widget in a columnyou can easily select it, let’s say wewant to start with a heading, so a text then you get itshoots to the right and waits until this blue bar appears and thenyou can let go and then you have the headingand now the edit menu has already opened on the lefthere we have the content style and expanded alternatively if Iwere in richards again and would like to edit this text here, I could too either drive over it and then sound here on the right on this shipor I also know drive over it and one right click headlinework press ok so i have now content style and expandedlet’s start with the content of this headline the first thing we havehere is the title here i can change the contentfor example i’m doing my page about surfing and writing here awe love surfing and the text has already changed next we could insert a link that means if someonewould sound like we love surfing he would be led to this linkbecause we have different options if i wanted to lead to youtube, for example i can go to youtube copy the urland then paste the link here with https colon / / and ifsomeone clicks on your life surfing he ends up on youtube.com alternativelyyou could enter contact if you have already added pages, for example,and then elemento pure the contact page in front of there you canclick on it and then that leads to our contact page there kan If you alsoclick on the gearwheel and say open in a new window and ifsomeone clicks on any help in life, they will open the contact page ina new tab.These are all a few options in this case Idon’t want to have any links here, so I’ll remove the one sometimes and then I cango back to sound perfect next we have the size but you cansimply specify how big this heading should bethat means here I could choose, for example, large orxxl but not much changes because the sizeand us it actually insert in style so you can basically leave thathtml can also only leave what is still interesting the alignment rightnow that is here on the left we can also center itthen it is now centered where you still grab it I’ll leave it centeredand then you can next go to the style that’s the most exciting herebecause the first time we have the text color on the topic i have Also on the startpage under instead of four a super article is linked that explains a bitabout how you should work with colors , but to summarize it in a nutshell, you shouldn’t use more than three or four different colorson your page because otherwise it just becomes too colorful I woulddefinitely recommend that to you too, but of course you can see how itfits on your site to change the color of this texthere, we can click on the color here on the right and we can wholeheartedlyand the color to change you can also drag them to theleft or right and select a completely different color,let’s say for example a purple here and you can also make the whole thing moretransparent by shooting this bar to the left depending on whatyou want let’s say that if youalready have proof of which colors you want to use, you can also insert the hacks code here below to close it again essen you cansound again on the color and if you want to undo ityou can click on delete here i hit the whole thing again that is ofcourse great and also nice simply a little problem is that ittakes a relatively long time if it is for every single color mast and also forevery single text because they should agree a bit and there isalso the problem that if you use a color for normaltext, for example, you then have to change it afterwards so I might just want tochange it a little bit Go to every single textand adjust the color there, of course, that takes a long time,accordingly, element has built in a function that puts the whole thing in front of us,namely here text color we now see box because we havejust changed the color ourselves what can become of it if youclick here a primary color secondary color or one of the others that’skind of like en specified according to colors that you can use again and again, let’s sayI want to use the primary color here , then these are the derivationsif I now go back to the widgets in which I click on these 94 andthen let’s say normal text, for example insert so here on tags electrooptical that is pulling to the right and dropping underneath and thenalso going into the animal here and here the text color too primarilyother then it is also blue that has started a lot of time for usand when I would now say I would like my primary color tobe a different shade of blue after all color on the contact page would even change the text there too, that is, if I primarily want to change this, for example, I can click here on the left this citizen icon click globalsetting call center profi and then click here on primary color and edit the egif I now choose from green tone also this has to be with both so you should definitely in mindboth when you use these global settings if you whatchanges does it change wherever you have used it let’s say iwant blue to have this color now that should be primarycolor secondary is good the text color i also like the accent colori would like maybe a little different green let’s say a shade ofgreen and I can even add my own color by clickingon ecology, I can name it for example bandsso these buttons and then on the right here a color byclicking on church online, for example I want my buttons to have a redcolor and then I have such a shortcut, I can click up here again and now I have a Also theseadded that means you can theoretically add more colorsthat have different functions or you can of coursejust go in each color as follows and edit themyourself if you like that you can go to save and then it issaved then I go back and back again yes exit and therewe are back in elements in the normal versionand if I want to edit the title again I can simplyclick on the title here and I work on it again that would beall to text colors next we can go to the typography so in thetext itself that works almost the same as with the colors hereyou first have the primary heading or you can also edit your ownso you can click on this material here and then it was already boxed by me if you still have the primaryheading then the edits here on the left will probablynot work at all nction if that is the case you can clickhere once on reset to standard settings and then that shouldalso work the font family so you canchange the front just that is set to robertoyou could for example use something else this time it plays usi want in my case use amarante and if he clicks on it andthen we have it for you then you can also change the size of thetext can make it very large or very smalli would probably choose a middle thing then we have the stepthat is simply vidic this font is, for example, you can set it to900 then it will be a bit thicker 300 then you would I take 600conversion is currently set to default you can select capital lettersthen everything is uppercase lowercase uppercase or normal let’s sayuppercase style you can choose normal or italic orslanted and with the ext you can break the underlining overlineor do nothing at the line height if you had two linesthen you could choose the space between these two lines I leave that here and thedrawing space is simply the space between the letters but that shouldalso be good that would be all about typography That means that are again globalsettings that you can set once and then useto save time, for example I could go to the primaryheading here and then it would look completely differentand now I could also edit the primary heading, so I canhere go up again global setting colossus below hgv andd ann scroll down global topography and then we have a primaryheading secondary heading main text and highlighted textyou can also go primarily heading familie amarante bigger I can setit, by the way, I would also hide the editor hereand there to see how it is in the live- version looks explained primarily heading soI can’t edit the inscription cut againlet’s say so it’s good then I could do the whole thing again for a secondaryheading for the main text I would probably set amarante everywhereso that I can do that time language but if I do thatnow then I don’t have to do it again and again later ok great and if you wanted you caneven add another style by adding the stylist tounlimited and then also making specifications there, so you can also add another stylesave a lot of time good that it isthe glo again balen settings here so I also savegm back and back again and then on exit the global settingsare definitely a very cool tool which can save a lot of time because youjust do this preset once and then only have to go to itthen let’s edit the style again here the text is simply the shadowof your text it can no longer clear it up so you could, forexample, move it to the right or to the left, up ordown, change the color of the states, for example we can do that toomake red or pink blue then make it less transparent and alsoadjust the blurring so now it would be super blurry or super sharp butI wouldn’t do any harm here would probably be ok about the glare modewe don’t need and we don’t need expanded well at first I go back to the widgets and next we canedit this normal text ten because up here we haveedited a heading underneath we have inserted a normal text editorso then i go up and here we have contentstyle and expanded again the content here has actually changed a bitcompared to the title what we can edit hereis normal text then I can change what others write I can make it bold byhighlighting something here and then clicking b here I could make something in italics Icould underline something that works very, very similar to wordor google docs i can even make a list or anumbered list let’s say for example one and twoi can link things by clicking on this insert link symboland then inserting a link or for example for a search for examplecontact that the insert then I could also say in the link optionsthat it is in the new tab should be opened and go to updateand now we have a link here that works quite similarly.Ifi scroll down it we have a few other settings thatwe need but not in the text then i can also red green and here into go targetand here we have basically the same thing only that this time the orientation in thestyle of the state in the content so I can center that for example can leave iton the left I can change the texts from primary to secondary or text Ican render the typography of main text primary headline or nukemwhatever I would like to have, let’s say main text because it would be amain text and we don’t have to go in extended in the first placeokay that would be all to be written, so now I wentthrough it very slowly and also right in detail because it was the first cracks that we work with, but the good thing now is that almost everyother widget we work with is very, very similar Ibasically just have to insert it and then you see left content style andexpanded and then you can go through the setting that saywhat you are doing you can play around with it and if you don’t likeit you can do it again and again undo the do what is supposed to bethe next point would be to undo things or to restore them wehave now edited a lot here and suppose Ido not like what I have done, I have several options and toundo that you can do that using the keyboardon the windows pc had to press ctrl and z on the mac i think ctl or cnband c so when i do this you will seegrid back you can do it is down here on the left click on historyand then you will see here everything you have done since you lastsaved it, that means I could for example sound edited here on text editorand then it goes on this n stood back I could do thata few times more or go into the future again what can bedone is go to the revision there you see all the changes thatyou have saved so if, for example, we liked what I did the daybefore yesterday and I have saved that, I can go to the revision and then I have my revision here,for example what I saved two days ago or three days agoif I wanted to go back to it then I couldn’t just click on itthen it changes the content here again to the status of three days ago and Ican go to save so that’s great ifyou have made any changes that you actually did n’t want to make orafterwards you might regret exactly that would be steps times twelveprobably one of the simplest but also very very important andhelpful in the next step we want toedit buttons but not here in old m entor beforewe do that I would like to quickly delete this text here because thefather was actually unnecessary and only showed a little something so I canovertake there once and then right-click and delete now it is gone thenI go back to the widgets here great, we now have a sectionwith a column in it where we are surfing ,i would like to have two buttons underneath,one on the left and one on the right that is of course a bit difficult if we only haveone column but i would like all of this in one section bothso that we can later insert a background image that contains everything to makethat happen, I can now add a super hit, namely aninner section where I can always click on it andsurf the surfing that fell under it then you know that section butthis one was recorded and here I now have a column on the left and right, I could even have a third columnor add a fourth section by right-clicking and clicking on newcolumns now I even have three, but I can also delete them again,namely right-click on them and delete care so now Ihave two columns here within my large section, which is great whenI do the construction work If I wanted to, I could click on the inner work sectionand then specify, for example, how wide it should be, but we will go back to it later when we edit the othersection so that you can see the setting there ok then I’ll go backhere the visuals and here I would like to insert a button first,so here we have the button that I can now click anddrag it into the left column and drop it, as with text, we nowhave content again and style is expanded in every budget content hasnow of course changed a bit compared to the text, but it’s also quiteeasy with ty p we have justselected default because it can also click on it and, for example,select information success message that is just a few ready-made with us withcertain that you can be here if you can but does not make a bigdifference that we information is in text click here Iwould like to change that to why question mark so I can go in here why write question mark andnow the most important thing about bans is that the link the meaning ofbuttons is that you text on them and something happens,for example that is directed to another page or that you scroll downhere in the link it can now, for example, link the page,for example, I could link to youtube.com which I copy the urlhere and then paste it here that you have seen I canthen go back to the link options set that it should be opened in the new tabor not you also have the option that d u are looking for apage that you have already created, for example contact if Istart giving my name here, the contact page would already be suggested to me thereI can click on it and then it redirects to the contact pageor another option is not mine smile that you make surethat the page scrolls to a certain area of the page whenyou click on it I’ll always show you this in this case if I entered hashtagmore here that would work afterwards , I’ll go backlater but noticed one that in any case you cantake part in the alignment you can specify where it should be aligned in this columne.g.Centered right left let’s do itcentered let’s also quickly see what it looks like in the larger version yesnicholas ok then i can appear here again and work on thatnext, we have the size that is currently set to small, you canalso do it in the middle Make big and extra big let’s get in the middle ofsuper interesting you can go to plus here and then insert an icon herewhat should be with the button, for example because it’s going to surfI can look for waves or brave water water that is also good andthen go to bed and then I have to choose here as an icon in all ofBavaria from the direction of vienna from that before the text should then be after thetext and how much distance there should be from the word that is good that would be all you can find in the content of a button next we can go the stylehere we now have typography first there I can eitherselect a global color again, for example highlighted text main text second headingpremier heading then it would be different but also prettybig you can of course always go in thereas a template so that I can get the basics right, forexample that I am dan n amarante ab but make the whole thing smaller again that isalso possible then you have two custom texts but they saved a bit of timeby quickly selecting primary so that the most importantsettings are already correct that of course always works, let’ssay that could be good then i changedthe font family the font size font cut you all already know that that is importantalso not show the character spacing too often i would probablychange a little so okay then i can click on the material here againas next is we have text harm that you have already seen innormal text that I would notedit in the button because it doesn’t look that good but if you wantyou can of course click on it andexperiment with it next We have very coolsettings namely normal and hope that relates to the text color andthe back Basic color normal is just what you see right now in thebutton and hofer is when someone drives the mouse over the train whatshould happen if I now set the text color to thesecondary color in normal, namely white and the background color to the primary colordon’t put our blue tone and the hofer color there place the tag color on theprimary color and the background color on the secondary colorand now move the mouse over it then the tag color changes to blueand the background color becomes white which is also a really cool one effect hereyou just have to make sure that you can still see the backgroundbecause we now have a white background for that I canadd a frame type here because none is currently selected Icould, for example, select the width then, forexample, select 1 for one Choose a color, for example, our blue shade, namelythe primary color and whenever I have over it We have ablue border around the outside that is great so the frame type is just theframe of a button we also have an animation up herewhen we touch it, there is currently none but we can, forexample, let it grow large if I now over here hope thenthe patronage doesn’t grow over it or you could pulse next doorpulsing a bit here there are really cool animations you can definitelyuse we are glad that should be good here we have next, by the way, from here on it doesn’t work anymore aroundthe hood setting but also the normal that is limited here with such asmall line ok next we have the corner radios that isjust how rounded the corners are if I were here for example 25 1then that would be pretty round the values are linked because link values isselected here, if I take this away and now, for example,fix 45 1 would be then only the upper left corner is special the round and therest stay the same because you should also pay attention to it,let’s say I deserve everything again then everything has become very roundbecause it has become the highest value 15 be such goodwe could now give the whole thing a box shadow that would be So ashadow from the border so from the whole blue area I wouldnot necessarily do it now but can also go into it but, for example, select the blue shadow becausepull down or up here then you will see yourself but it does not lookparticularly good big can use it but so then i want to be transparent againsuper the next setting we have here in style is thatbeijing that is simply the distance from the word to the outer edge of the button here thevalues are now linked again when i am, for example 30enter we have more distance to the outside I can also enter 301 then it isparticularly high or maybe 10 then it is more normal normallyI would probably do 15 up and down, for example, thenno longer link it and to the left and right a little more let’s say25 so I think that’s pretty good then we would also have theadvanced settings but I’ll leave them first in peace then we can goback to the widgets and now I have added the first buttonthat already looks good here comes another cooltrick with element we have now put a lot of time andwork into making these bathrooms look good What we can do nowis to do the whole thing again for the secondbutton in the city, right click up, copy right click paste andwe have the same swim you right again that means I have saved myself alot of work whatever you could do you that I deleted againso I go to right click and deleteyou could right click and duplicate Then you have to click twice andyou can, for example, simply drag the in but I would like to do it again firstand what can still be done is insert a button here, sodrag the button over here and drop it , it now looks like I can doit too is to copy it on the right and then click on this button on the rightand then go to paste style to changethe design that means the content has not changed directly here istill had to enter another link i had to change the textchange the icon But the basic style, i.e.The colors, the hofer animationand all that would already be included here, theseare also a few options that can definitely save time, soI would always recommend you tobuild in that really first if you want to build several similar widgets to do well and thensimply copy and paste the style over and over or is also very easy toduplicate and then change the content ok this one should actually be abit different so I’ll put the content on it and say, forexample, book a course that should lead to the contact page so I give your contact 1I could insert an icon here again, for example an arrow so I give and then, for example, the one wholeads to the side into the world and afterwards right now I do the whole thing abit faster then I go back tostyle that I want to have a different color now , also a little tip fromFor example, on the service page, our goal is to sell courses,then we also want the book course button to stand out a bit maybe make a completely different color, for example in a green towerso I could use text color white background color accent that isnow d efinitiv out and it will ensure that more people click on itprobably not the best variant in terms of design,but it is definitely a bit more effectiveI still find the tone and not that good let’s say okay now I could ofcourse also here the hofer change colors but I’ll letit be okay for now now we’ve already worked wonderfully with buttons andhere two cool buttons in there that’s great that would also bestep number 13 edit bands super important and definitelya good step to get there show how the widgets workin the next step we can edit pictures plus alsobackground images and other backgrounds also an importantimportant step for this I go here again anelement ear and let’s start and work the background of thissection around the section first to edit we can click on thesesix points here or I can also enter an empty onesection went left here, for example, right-click online andedit section sound and here we have layout style and expanded thatis quite similar back but then a little bit differentin the layout we first have the content width now it is set tobox that means not that now times to the left and right how will yousee that they still have to changethat simply means that the content of this section does not go completely fromleft to right but a little bit limited depending on how wideI would set it for you in any case recommend because it is already quitegood if it does not go completely from left to right when you read a bookit does not go completely from left to right but you also saya little bit of space, alternatively you can also click on the box full width instead of clicking on the boxthank you now completely from left to rightwell, I would now box quickly and now do the at play the sizewith the height that is also other goodsettings we have just selected default accordingly itsimply adapts to how many widgets move in again if I nowdrag a text editor underneath, for example, then thesection becomes a bit larger here The difference nowquickly goes to edit section again.You can also select higher for the minimum heightand then left orright here for the minimum height to select how high this section should be,what you can do is adapt to the screen instead select and then itfits exactly once in your screen rhine with this areaI would actually select adjust on the screen because it shouldfit into the screen at the top and then you should scrollbut for further areas below that so for further sections I wouldprobably be a minimum choose height and make it a bit smaller ennext so that the top position is with me, but we couldalso move it up, for example, and we have the column at the topor at the bottom but with me it is probably quite goodthe rest is ok structure we don’t needand then we can go to the style and here come now edit the background here you have normal again and hoferwe go first to normal and then here the underground typehere we have classic course video and slideshowlet’s start someone with the classic background so clickI put it on here and then we can first select a color here,for example, I could choose the primary color is the background coloror I could also choose a special color, for example here with thepink or purple that you already knowthen we would just have a normal one color as a background Ican click on it again what can be done is here go a courseand that’s a mixture of two colors like you have color 1 and here thesecond color and they mix then I could change that toblue and pink, for example, then I can change the position so where which colorstarts when I park very close to each other, for example, both herethen they don’t really get lost but just meet each other, but we can also reverse that, we can change the angleso that, for example, from left to right belongs from right to leftthat is the way straight linear, we can also make it radial, that means that it runs likea circle so you can definitely play around with it that isa little less boring than a single coloryou can for example also be two different types of purple thatis only one very small overflow is that you can definitelyuse to make it less boring what we can also insert cool hereis e in video background if I click on clique here we caninsert a youtube video here or also to vimeo link i have alreadyprepared one here i copy the link and insert it herethen you can select a start time so at how many seconds of the videothe whole thing would say if you start at 5 40 seconds and when that should be in thevideo let’s say after 70 seconds and then it starts again and then I have such a coolbackground view it is definitely A nice option you can alsochoose that the whole thing should only be played once,which means that it does not repeat itself after the 25 secondsyou can also choose whether it should also be played on a mobilephone or not I could also choose yesthen it will also played on mobile phone if you do not get it offso in the options as it is it is not played on mobile phonethen you definitely need to go ground fallback that meansan image that appears when the video cannotplay I would recommend that one way or another because sometimes the videojust can’t load then an image should appear there thatis shown instead but fundamentally I would probably notrecommend to use a video background because it just lives forever andmakes one side slower and it can also sometimes cause a bit ofproblems so I would probably leave it but if you have a cool videothat you really want to use you can definitely delete it herethe topic out well next you can also do aslideshow but I’ll show you right away then let’s go here again on thebackground type classic and here we can also select a picturethat means here I can go to plus and then a picture uploadfor this I can go to upload files, select files and thenselect one of the images n in this case I would like to use this picture, for example, so I can open it by clicking on others then it would beuploaded here super important that the picture is nottoo big 684 kilobytes is already quite big you have to say it should definitelynot be bigger What I would definitely recommend to you is if youare looking for such cool pictures you can use this page come to splashtop becauseyou should perhaps deal with the license rightsbut as I understand it but of course you have to look for legal advice yourself once you use these pictures for freealso commercially so that’s great and if the picture is toobig because such pictures usually even come in mb sizes thenyou should use a page such as com press image dot de orcom upload the picture here for example 90 percent off will go tocom press image and then compress it so it becomes smallerbut hardly loses quality and then use it again and upload it herewhite is super important that his pictures are not too bigotherwise a page lives forever visitors speak from google recognizes that andrankings deeper in the search results so super important that your pictures arenice and small then i have here this background image and then I can go tomedia 1 guide and I already have a background image thathappens now but it came in that means here I first have to adjust abit to a size of long since I can choose the size of thesuitcase then adjusted elements automatically adjusts the size so thatit fits in the screen there are other options, for example, it couldselect auto then quickly and easily automatically part of the image from thereyou can also choose different positions if, for example, at the topleft we are i think so at the bottom middle then he changes theposition here because you should always use the following size se here hen you cando it, but you always have to keep in mind that everyone has a different screensize and it must also look good on the other people’s screen and thatis often difficult with a car that fits in quite difficult in thiscase, for example, he then repeats that on the right and left picture that is alsonot so good and individually there you can choose how wide the picture shouldbe, for example it would be repeated here again andagain i would definitely miss asuitcase to use the position you have seen you need youappendix we do not need and repeat you can simply set that itshouldn’t repeat right and left that is bykow was not necessarynext we can insert a background overlay if,for example, we have a very light background image but would alsolike to use white as a font then a background should be usedinsert an overlay to make the background image a bit darkerdo that means here I can click on it once and then chooseclassic background type for background overlay then you can, for example,select black as the color, click out again and then change theopacity, for example a little less do that andnow the background is stop already a bit darker and you can see the colorbetter from the font you could even insert a background overlay as an image,i.e.A picture over the background image that works,for example, if you have something that is cut out and should stillfit in there but we stay for now times here at well that would be thebackground overlay very helpful if you want to use light font then we already have thebackground then I go back to the widgets and quicklybreak the text that would like to have whitebecause that looks better i will change my style text color andchoose s here eecondary and then fits great if the topic is no longer so lookyeah that’s pretty cool ok in the next step i want toadd another section to show you again and again normal picturesso i go back to here plushere i go now, for example, select one two threeI choose 2 and now I have a column on the left and here on the rightthen I could select minimum higher for the listening city and make the wholething a little bigger, for example so that looks good and then I can here go tothe widgets and quickly go to save but also save mycurrent status to use a richard image nowwe can select it here on the left and pull rhein then we have ithere then we have internet sd again andexpanded and can here I choose a picture that means I go to itand I can either upload 1 or I take 1 from my media libraryfrom the pictures that I already have Also loaded there I would, forexample, use this one because you should also make sure that it is notthat big and then you can go to insert media great here you can now choose the size so just one of thoseyou can with a little experiment e.g.Also individuallythe alignment we do not need a caption you could insertif you wanted, for example, your own caption and then describe here itwill appear underneath or you can even insert a linkthat means if someone clicks on it he ends up somewhereelse we go the style here we can change the width and helpfulagain but we have already changed a size accordingly thatis unnecessary opacity we do not need css filter we do not need the cornerradius I would actually change again if I now, for example, 25indicate round whose knowledge I would definitely use that issimilar to buttons I think that they would otherwise have to be too clunky.Well then we can go on and here we have margin andpetting penning you already saw with buttons that is simply how muchdistance from the outer edge of the image to the edge the gap is if I now give,for example, after 50 1 we have 50 pixel spacing to the topleft right and bottom basically makes a picture just smallerI do that again to zero margin just move your picture to the topleft right or down when I do Here, the values should be closely linked and hereI would recommend you to choose percent because I then go up and, for example, make100 upwards then I now have 100% distance upwards and havemoved the picture downwards, so to speak , I could do the same alsodownwards then I have a lot of space downwards or to theleft and right so basically you can simply know the objects with the carmove the whole thing , for example, you can evendo it with sections if you want to have more distance to the upper section becauseI would just play around a bit with that you can always find inextended exactly I now set to zero ok, we don’t really need moreWhat I wanted to show you again quickly is a movement effectwhen we go on it, namely under extended we can, for example,add animations to the entrance, for example threading, often thatmeans this animation appears when someone scrolls it downand then sees it For example, now drive it in from left to rightso you can do that too, but I wouldn’t exaggerate it makes it different itlooks different for me a powerpoint presentation by a ten year old thatwas now a normal background image of a section you can also makebackground images in columns if if you want to edit a column, you cansimply click column here click edit and there it could also changebackground pictures and colors well write 14 edit picturescheck so I would just play a little upwards before we dostep number 15 I want to quickly make twosettings first of all, the spell here if I always you get yes we have nowmade more link hashtag but when I click on it nothing happensthat means to do that now I will, for example, go to this sectionwhen I go to sections and go to the css id under extendedand enter more here or also save researcher or changesclick here this eye and now on why clique scrolls underneath maybethe cssr give the markets to this section and the hashtag linked to more, ie you can use that to be able to scroll through to the left on one sidetoo a cool effect and one thing i wanted to do inthis section because i find this transition is too hard if we work on thesection here and then on istria and trendy shapes i havejust opened that, we can select for example waves at the bottom under type then we have such smallwaves below that, so to speak, passed over a much easier one in the next one sectionpossible I find that she is quite curious about surfing and also fitsthematically because it can of course also choose something else choose a different colorchange the width change the height there youcan experiment a little looks good and we cango on and now Adapting the whole mobile thing a large part of the users will comefrom mobile devices, i.e.From smartphones or tablets, andtherefore we have to make sure that it also looks good on these devices tocheck that we can go to response off mode below and thenwe see tablet and mobile I can open a tablet, for example,and then I see my side on the table tt looks that look prettygood i can also open it on the go and then i see what it looks like on the smartphone in this case i think, for example,that the space between the words is too big and the words themselves are abit too big to edit that I would justclick on it once and go to the ministries and then into the typography and then it sayscustom accepted again there is not here then I would clickhere once on reset standard settings then itshould open that way and Here I now see this mobile icon next to the size, i.e.everything I change now, so where at least the mobile iconis, it only changes in the mobile version of the pageif, for example, I make the font tiny like here now and thenback to the desktop mode works is it still big then i go backto the mobile version and typography and adjust the size a bit,let’s say for example Or so then you could look further here,for example, I could change the line height for the mobile version orthe character spacing for the mobile version but something like the fontcut the conversions of the estv or the recording that would bechanged everywhere because here not seeing this icon is the same I couldnow, for example, make the buttons a little smaller in the mobile version that means I canedit the typography and then make a little smaller here in the mobileversion, for example the same for book the course thebiography size so, for example , if he could go further andcreate a little more space down here, that means I finally do that and give thewhole thing more space down by one percent andnow it’s looking around in the mobile version a lot better fromthere I would definitely see that it looks good there and always makesure that the mobile version on is selected there are a fewmore settings that you can make in response off mode that isdefinitely the most important thing I would recommend to you otherwiseif you look at the states page , under step 5 here I have a supervideo of your mentor linked that goes four minutes where they show everything how you canmake yours really responsive I would definitely recommend that to you, they explain that they are very,very good inside, good that we will alsopoint 15 the page make responsive check then we go back to thedesktop version and here it still looks abit perfect now I’ll show you again how widgetsrepositioning or deleting columns and sections if I want to reposition a widgetI can just click here Click on this material and then, for example,drag it to the right or drag a completely different column here, for example , I can do the same withabsc cut if I, for example, this section above that youwanted, I could scroll here to section india and drop this here, forexample, or with columns if I click this column on the left, I can also click on it, for example dragging to the right orhere also, for example, to the left under column if youwant to delete sections you can click on it and click on the ex or click ina learning area and click on delete and if you want to delete awidget you can also go to the right to delete with aif you want to delete memory you can also stick it on the right and passion soundsgreat now you have a blank page and have also done step number 16 buthave probably already noticed because we have been working with element uhr for a longtime now we can go to step number 17 inhalf an insider tip namely, work with templates and blocks if I am always inthe page inside well we the page is no longer open but youhave probably already worked a bit elementary and seen that itis fun and also quite easy but it also takes a long timeto build your own pages and if you are 100 percent honestwith yourself mostly not 100 percent professional outaccordingly i usually recommend to work with templates and blocksthese are prefabricated layouts by professional designers that youcan import into your site and then you only have to know the contentand the design for you to adapt but there is The big advantage thatthis layout and the whole thing is done very professionally isthat they are mostly super responsive and you just have these smallfine adjustments that bring the whole thing to the next levelbecause I definitely recommend you to work with itI can do that, however, there are two ways to delete ityou can work with blocks or with whole pages you can find them here in this green icon what we have installed with the elements plug-inI can also click on you and herewe see kids and blogs blogs are the blocks that are simpleSections of a page, for example about us section or frequently asked questions in the call to action in the contact areathere are very different bathrooms, for example,I could go to 4 o’clock and then you canchoose from, for example, I like that and then I can just open installtemplate go then import that into my page and now I alreadyhave this section here that I could then easily edit that is how your leads havealso shown that means I could see now and here is abutton I am working on the content of the in style adapts to myneeds i can also delete things idon’t like or i can do the whole thing too ett undothat then a lot of possibilities but this basic design thatjust usually looks better just like you could then go back tothe templates like blogs and continue with the next one, for examplea map maybe I like it then I can click install Going paceand then it is also the fact that the small problem with blizz is mostly that they arenot coordinated with each other and that means you still have to adapt the design toeach other outside of course you always want those who have the samestyle that will definitely save you alot a lot of time and you can be the way you want it,alternatively it can also insert whole tablets so whole pages of the village andthe elements go to free kids and here is now a temple pack so wholetopics, so to speak, for a caf or for music teachers, for example flighttraining whatever you want, you don’t have to choose somethingthat fits your site in terms of content t you can theoretically take the design of amexican restaurant if you are a lawyer its more about thelayout you still adapt the content for yourselfso here i would see if something like here for example thatyou like i can then i can open go to the gate kickt you can also move forwardin the village preview is then i can go to judith because we’re not inthe gate kids and here you see the sub-pages for example the homepagesales services career very different pages that duhcould use is say sometimes I would like to edit the homepage here, I can go really fast to import the whole page and then I would have a wholepage here that I can easily adapt for myself so have shown text pictures and buttons here you can simplygo in and click on everything that you want to change is of course notavailable h very, very many other gadgets as you can see here also onceunder the cross the good mentors that it has millions of users and accordingly there arealso thousands of tutorials that means if youwant to use any specific bridget you can either just drag it in and then lookwhat is there that is usually not particularly difficultvery simply look what is written there try it out and if in doubtundo it or you can also look at instructions for the individual widgets on theinternet the plaster also unfortunately i can not show every singlerichard in detail, of course But because I showed you chips in front of the main stage, I have already shown them almost all because the rest is actuallyalways the same exactly so my recommendation is definitely using tabletsso here prefabricated pages or blocks import that in each of yoursub-pages and then they just fit With the content and design at that is theeasiest saving amount e time and in the end they are usually a little betteroff you can delete everything you don’t likewell that would be point number 17 and thank you, let’s continue with pointnumber 18 here we now put the navigationor the menu in If I had looked at my site, it looksgreat here now, but I have no way of getting to thecontact page or about us or services normally always have a navigation in a websiteup here and we are now building it for thatwe have to add them first and thenedit the design of the entire header so that it also fits the page the be and then open – sounds we cangive the name here, I’ll call it mine and then we can go to the menucreate and I have this menu then we have left here now sufferingposts individual links categories and menu icons settings we wantto add pages to this menu that means here I wantto contact the service page about us and when I click here on the menu add theyappear rather on the right, I would also like to have the homepage in there,not at last.I see it in all ads andI have it, for example, to the top then I can click on the menu add againand then I have this here now three pieces then I canscroll down and under positions who will I generally go to menusave but if I have now updated the homepageI have a menu here home services in contact with us I canstill change the order that goes from left to right For example, if Iwanted to have contact second, I could drag this up hereand I can even insert sub-items If, for example, I wantservices to be a sub-item of above us , I can always pull it down andthen to the right and it is right here if I go to mini-saveand update that, the order has changed here and below aboveServices is a sub-item for us that is perfect, what youcould add, for example, it will be individual link turns, for example, youwant to link to an external page or on youtube.com you canopen individual links here insert the url here, for example, get https colon / youtube and simply get the link text the name forexample youtube and then add to the menu and then we would also havethe menu item youtube if you have the blog posts you can alsoinsert yourself by inserting posts from west and the good then I’ll take pointsagain myself and give also save and then currentlyI see the page again and this is what the menu now looks like that eIt’s pretty good because it offers the functionality but doesn’tyet look particularly good and we can do that now, soto edit the whole menu and the header we have to do a customizer thatis very similar to elementary only the version of team soto open the customizer we can click on his helpers on the left and then click on customizer it will open then customizerwe have here on the right the research of everything that happens and the left we canedit the page first of all we can change that up herethat you have two options in account either you caninsert a logo so if you are a no go you can skip the first 20 secondsif you don’t want to edit the text here you can do that by clicking yourleft on typography text and then on logo and then you canchange the font family here, so maybe you have the ford somewhere and the onefor the title of yours would like to use page is for example that then you canchange the font weight the style the font size the draftsman spacingall that was then we can go back and back again and thenwe could go to the head area namely here and thento logo and here the font color and the hofercolor could change again, so for example I could make the blue okay, Iassume that you have a logo or want to use a logo then you can upload fileshere under header on logo from filesselect and select the logo I now take,for example, matas here I think open and then selectthen I can even cut it a bit then I go tocrop the image and then we have it in here it is much too big but for thatwe can change the maximum width and have to increase it so and now it fits in here, too mobileand the tablet version simply open the tablet versionhere and see that it also fits here, for example in the mobileversion I would make it a bit smaller,let’s say so then I go back to the desktop version and that is how youcan insert a logo assuming this is not a logo yet and wouldalso like 1 for your website or because I haveearned a video on the start page at the bottom of how you can get a logo such as aprofessional one, for example that of a website You can do that at Punkt.de for a whoppingfive dollars and it’s also pretty easy soI’ll explain that on the start page if you’re interestedthen we can go back and here we are now in the head areathen we can go to general and here we can change the style of the menu sothat it is often set to a minimum, but we could alsoselect a transparent menu, for example n is the background transparentlooks pretty cool so you just have to make sure that it alsolooks good on the other undersides and that fits with the background, alternatively, you can also take a red menu with full screen or oneof the others, for example you can just choose what you like, I’ll take itin the sky then you can determine how high the head areashould be if it should be bigger so make the head area frame below that isjust a small line under the head area when I see the redthen you see yourself here, too, I could no longer select it thenwe no longer have it and then it is also gone right then it can change thebackground color of your head area to any color youwant e.g.Deal but I leave it sometimes in white then I can click here again.Basically, you can always just look at what you say differently andtry it out at a distance bra We’re not okay, so that’s all good,I think back and then to the mobile menu and then I open the mobileversion of the page here and then I see the mobile menu here,you can also select the menu for the countries, for example from the sidebar this is how itlooks now to drop down or full screen was now alsogoing to be used, namely so menu text displays is right here yes menu if Itake that away I only have this citizen icon okay here you could need usto change the text activate search I would deactivate it because down hereis investigating it just doesn’t work that well so I wouldtake it away then I can change the background color, for example, I would make the background blue here, for example, the link colorwe could make it high, for example, then it would be red or I would be white let thatwhite the left but is the color that appears when you think about thetop, for example, we could do it in yellowor similar kay the request for the links we could change are i didn’t look goodi’ll go to empty ok and the restdon’t really need super that means now we have already edited the mobile menui think again in the desktopok then we go back again and then here to menu and here we canedit the menu for the desktop again here we can change the positionfrom the middle right or left i leave it right we can give thewhole thing a left effect For example, if I select underlined from the left then it underlines the individualpoint when I drive over it and then we can also give my lefteffect color, so which color should appearif you only like that then the main styling the left isstraight this gray we could also make it blue, for example,the left was which link color appears if above what, for examplered, the left of m ark twain menu item right now we are onthe homepage, for example, we can do that back, for example,so that more is noticeable rest does not needand then we have here again search symbol functional parts drop there and therewe also go to deactivate because here on the right is this symbol toobut we want that deactivated because it does not work particularly wellokay then we have too that here once edited the innercolor I have already shown it a general then wego back two times and go here to typography to change the text a bit againso typography and then main menu here I can nowchange the font family so that the also fits the website there I would just go to anelement ear and look which one I use and then alsoapply in it so you end here you can change it then you can change the font thicknessfor example you can make it better lettering and make it discursive and thesize e.g.25 pixels so now it would be biggerthen we can go back and we can also use the mobile go to munichby opening the mobile menu and then I canchange the font family again font strength okay if I publish and update the page now I have a pretty cool menu uphere that is quite simple you candefinitely go to the setting here the main thing is actuallyhead area there you can go through it setting go and typographythen you can go through the logo automobilist menu settings butthat was just about the most important di e I wanted to show you here greatnow we have already created a navigation system that works andlooks good in the next step I would like to quickly show againhow I would build my lining with element for this I have the elements homepage here, for example on how meonly at night is actually quite easy i go to environmentsdown here jeffrey blogs go to futter here and here i have a selection offutter stays that are pretty cool and theni just look for one that is currently suitable for example the tank i refuel oninstall Temple then he imports that I adapt this once, forexample, I would only like three columns then I would like one becauseI adapt the whole content, maybe add a card to all thatand if we like this photo and I like the one on each one pagewould like to use or would like to use slightly adapted I can right-click onsection work and then on a ls tempel sch Weich approach this forexample the name fodder then go to save and now it issaved here if i go to ex club i could do the same process forexample for my whole page if you like the design of a pageand would like to open it If you want to reuse other pages, you canalso go to the option save as a tablet savethe whole name of each e.g.Home 1 and then you have also saved ithere when I open a new page in elements, for example,I’ll do that quickly soI would like to make all his contacts next, then of course I do thewhole nation of the bdp settings here and then I often revise with element and then I can go to my temples hereor add templates here in the middle of my tablets to othersI see now here where my sticker is not inserted and then continue to edit for methen I already have ma l the have page that I have already donebefore and I can do the whole thing for the shooter, for example I would like to havethem on my contact page, for example, I don’t always think so I could click on templates to addmy temples and then I saved it as feed, namelyhere then I can also go to insert yes and then I have thisphoto that has not been edited earlier so I can use it on each individual subpage that would be stepsnumber 19 and with it have we actually managed the most important of thesetting, there are a few more points that i would like to show you, but they are not interesting for every single one, so i would like to includeyou in extra videos first of all, would like to show you how to includea contact form that’s pretty easy, I’ll showyou under the strong side, he fell below five, I’ll be a vlink video next is still interesting if you work with templatesit is very likely that it is not sure that itis a small error with the ssl certificate but it canbe solved quite easily for it i will also make a three minute video that i willalso link below five times so if you have the problem you can have alook at it so that I would be happy to show you how to build with the customizer,i.e.With bags of the citizens, they don’t look that good, but there are more advantages that they are automatically on everyone yoursub-pages appear that means you don’t have to insert them every time isadvantageous be absolutely not so good but if youreally want to see that I’ll make an extra video to go below 5 as well asI have at the beginning of the video on the topic of hosting the aspect of securityaddressed, which is often not important to the topic of how to proceed, I would also like my extra video I guess it will take about tenminutes that I will link below five times hereyou can also look at that and that would actually be italready said you are looking for really nice pictures make thesmallest possible loads with a side cutter good colorsthat go with the topic and the pictures and find it demands that also go well with thepage if these three aspects are mixed well together the result is abeautiful picture on a website and that makes up the main part donot use too much text that reads Anyway, hardly anyone works with templatesor blocks that makes the whole thing a lot easierif you have any questions you can write me a commentif you liked the video you can give me a thumbs up thathelps a lot with the algorithm and if there are more videos want to see you canalso subscribe to me good luck
