How To Make a WordPress Website 2019 | Step by Step | Tutorial for Beginners

Articles, Blog

How To Make a WordPress Website 2019 | Step by Step | Tutorial for Beginners

How To Make a WordPress Website 2019 | Step by Step | Tutorial for Beginners


Hi my name is Patrick and in this video I’m going to show you step-by-step how to build an amazing website from scratch. Therefore we will use the number one Content management system WordPress but before we start I’m going to give you a little tour through the website which we will build in this tutorial. We will build this beautiful home page which looks really nice and clean. This about page where you could put an image and a description of you and your team and maybe add some funny facts about your company. Then a page to present all the services you offer and a blog with a nice grid layout and of course I will show you how to create different blog posts with a sidebar including social media buttons, recent posts and categories… different paragraphs, bullet points… then how to embed a YouTube video and we give our users the possibility to comment our posts. And last but not least we will create a beautiful contact page with a super easy and user-friendly contact form. You will learn how to add such a full width image which you could also turn into a slider..how to create a big heading like this, a subheading and these call-to-action buttons. How to design your own logo and favicon and add them to your website as well as creating a header menu for your website. Then we will create a row with these big and beautiful icons and buttons, a call-to- action area and a widget area. Here we could add different widgets like for example a recent posts widget, a contact widget, a second navigation menu and social media buttons. And I will show you how you can add your own copyright notice to your page. So is WordPress just an unprofessional home page builder? Definitely not! WordPress is used for big websites by famous companies and artists like Sony Music, Katy Perry, The Rolling Stones or even Walt Disney and it’s officially recommended by Google. And as you can see this website looks really professional and the reason for that is that we take inspiration from very successful companies like Apple, Spotify or Mercedes. And what we do is we take different elements like for example a thin header on top, a big heading and short subheading and call-to-action buttons… just like Apple does: They also use a small header and a big heading, a short subheading and a call-to-action or Spotify which also uses a big heading and two call-to-action buttons or Mercedes which basically does the same: A small header, a big heading and a call-to-action button. Another example could be this three column layout which is used in a similar way on the Mercedes website. Another awesome feature is that our website is fully responsive so our website will automatically adapt to the size of the window or display. And in that way our website will look incredible on all different devices. So no matter if you use desktop, a tablet or a smartphone: The website will just look awesome! So after this tutorial you will be able to change basically everything. So you can create your own layouts, add your own images or choose your favorite font family to create your own website. Still for the purpose of this video I‘ve created a folder with all the demo content I used to build this website. And in that way you can easily follow along this tutorial and build the exact same website. Just check out the description for more information. So if you want to learn all the WordPress essentials then I highly recommend you to do this Tutorial. You will definitely regret it if you don’t! So I would be super happy to see you in the next lecture. Awesome you decided to do this tutorial and I promise you it will be totally worth it. So let me give you a short overview on what we need to create our first website and what the whole thing will cost. So the first thing we need is a domain name. The domain name is our website‘s address. So for example the domain name of Apple is „apple.com“ or „google.com“ is the domain name of Google. We need that name so that the visitors can find our website. The costs for such a name is around 15 dollars a year. The next thing we need is hosting. A hosting server is online 24/7 and makes sure that our website can be accessed at any time. So that means the hosting server stores all the content of our website like images, text and settings. For a normal WordPress website you usually have to pay around 10$ a month but I will show you where to get hosting for less than 4$ a month. Then we need WordPress. WordPress is a Content management system which makes it easy to manage all the content on our website. So with WordPress we can easily add images, videos, logos and all that stuff to a website without knowing any code. There are two different WordPress software’s: There is the open-source software Word- Press.org which is for real professional websites and there is wordpress.com which is more for small blogs. We use WordPress.org because it’s just way better than WordPress.com. The only thing is that we have to get hosting and install WordPress on our own but I will show you exactly how to do that. And I promise you it will be so easy and a lot cheaper than buying a plan at WordPress.com which cost more than 20$ per month just to be able to install cool themes and plugins. So we use WordPress.org and that is completely Free! The last thing we need is a WordPress theme. The WordPress theme is responsible for the design of our website and because WordPress is so big there are thousands of themes to choose from. We will use a free theme so we don’t have to pay anything for that. And because we build the website on our own we don’t need to pay thousands of dollars to a web developer. So fortunately building a website today is really cheap. In the next step I will show you how to get hosting and how to register a domain name for your website. So let’s start with getting a domain and hosting for our website! The cool thing is that we can do both at the same place and my favorite place is the webhoster SiteGround which is one of only three officially recommended hosters by WordPress. I tried out different hosters but meanwhile I transferred all of my websites to SiteGround because of several reasons which I want to explain you now. Probably the most important point is that they have very powerful servers which speed up your website. That’s important because slow websites are bad for the users experience and Google hates that. So if you want to get visitors from Google in the future you have to host your website on a powerful server. Another reason is that SiteGround guarantees a yearly uptime of more than 99.9%! The reason why that’s important is because when your website is offline you lose visitors and rankings in Google and you can miss product sales or income through ads on your website. SiteGround is known for their amazing support team and I can tell you from my own experience that this is completely true. I remember that I had once a very advanced question and therefore contacted their 24/7 live chat. They found the solution to my problem in less than five minutes and instantly fixed it for me. Well and that impressed me a lot and I was so happy because believe me there is nothing worse than when your website is offline and you have no clue what the reason is. So but no worries you shouldn’t need to support team if you follow along my tutorial but it can always happen that you make a stupid mistake and in such a situation you wan’t help immediately and not hours or days later. Another important thing is that they handle personal data with the utmost care and they even adopted the good policies of the GDPR to all of their users even if they are not EU citizens. For me that’s an important point because I’m from Germany and I have to comply with these rules. SiteGround offers special WordPress hosting which comes with the possibility to install wordpress with just one click. That makes the installation process so easy and fast and you will see how easy that is later in this video. And well that could be another reason to choose SiteGround because in this tutorial I will demonstrate everything with this hoster. So if you choose another hoster you have to do a few things differently and you would have to figure it out on your own. That could be way harder and very time-consuming. So let’s take a closer look at SiteGround. They also offer different plans and the important plans for us are the StartUp plan and the GrowBig plan. The main difference is that you can host multiple websites with the GrowBig plan and only one website with the Start- Up Plan. Another reason to choose the GrowBig plan could be the SiteGround SuperCacher. With this tool you can further improve the performance of your website with just one click. But to get started I recommend you the StartUp plan because you can always upgrade your plan later. So if you decide to take the StartUp Plan the price is only 3.95$ per Month. One last reason why I recommend SiteGround is because of their very satisfied customers. SiteGround wins basically every single favorite web hosting poll in this big Facebook group and in this group are more than 10,000 members discussing about hosting related topics and every once in a while the admins create a poll where members can vote for their favorite web hoster. So here you can see SiteGround on number 1 and for example down there is Bluehost or Hostgator which are also very known or this poll also SiteGround on top with more than hundred votes… and for example… well I can’t find… Here is Hostgator or Bluehost, Dreamhost… So yeah I’m not the only one who loves SiteGround. So if you decide to go with SiteGround you can easily support me for doing this free tutorial. Just click my link in the description before buying. It doesn’t cost you anything more but in that way SiteGround will know that you’re a visitor of my tutorial and that I have recommended their services to you. As a thank you I will receive a small commission from them and I can continue doing tutorials like this. So when you’re on this page just click on „get started“. And now we have to enter our domain. So if you already have a domain you can just choose the second option or what we do is register a new domain name. So type in the domain name of your choice and click on „proceed“. Of course this name has to be available so if I type in for example Google.com it should tell me that this name is already taken. So yeah I type in something else and click on „proceed“. So once we picked a domain we just have to fill out all this information. Since I already have a SiteGround account I won’t do that again but I’ll show you what to do. So type in your email address and choose a password for your future SiteGround account… then confirm this Password, choose your country, type in your first name and last name, maybe company name and then enter your address, zip code and phone number. Here you have to enter your credit card information… and here you have the possibility to switch the hosting plan if you want to. Then here you can change the server location. I always choose the server location which is nearest to my visitors just to keep the response time low. And here you could change the billing cycle if you want to but I usually go with a one year billing cycle. And here you can decide to choose these extra services but in my opinion that’s not really necessary. So for example the domain privacy is avoiding spam because after a domain registration your name gets published in an online database and because of that you will probably get a lot of spam emails from web design companies but in my experience the massive spam is just for one week and my Googlemail is very good at filtering Spam. So but it‘s up to you if you think this extra service is worth the costs. And last but not least you have to read and agree these terms and you can choose if you want to sign up for the SiteGround newsletter. But this option shouldn’t be necessary… and then just click on „Pay Now“ and then we can already start with installing WordPress. Installing wordpress with SiteGround is super easy! All we have to do is to click on „My Accounts“… then on „Manage Accounts“ and then we click on this orange button „Go to cPanel“. Now we click on the WordPress auto installer and then we click on the small arrow and choose „Custom install“. Then I choose the HTTPS protocol for a safe computer network communication because nowadays that is a must-have to rank high in Google. If you use SiteGround you get such an HTTPS protocol for free so they won’t charge you any additional costs for that unlike some other hosters. After that I choose the domain on which I want to install WordPress. And then we could already change the site settings like the site name or the site description but we will do that later. We don’t need to enabled multi-site and then we can set our admin username and password so that we can login into our WordPress dashboard after the Installation. Then we could change our admin email address: I prefer [email protected] but you can choose whatever you want. Then we can select our preferred language for WordPress… I don’t install these plugins because we can always install them later if we want to and here we don’t choose anything because we will install another one later. The Advanced Options are fine like that and then we can click on install. So now it’s installing WordPress directly to our web address. And congratulations we are done! So let’s have a look at the website. So in my opinion that doesn’t look that bad but we will make this website far better. But now let’s log into the WordPress dashboard and therefore we click on that second link. And here we are: That’s how the WordPress administration area looks like and in the top right corner we can log out. And that’s how the WordPress login screen look like. You can get there through typing your domain adress slash „wp-admin“ and to log in again we have to type in our username and password which we chose during the installation process. And then click on „login“. So through this user interface we can create our whole website and the first thing we want to do is to change the basic look of our website. So let’s check out the current look of our website again and therefore we click on this button at the top left corner. And to change the look of our website we need to install another WordPress theme and to do that we go back on appearance and themes and here we see three pre-installed themes but we want to add a new one. Then we search for „Sydney“ and install the theme on the right. Then click on activate and now we can remove the other themes to keep everything clean. So just click on it and click on „delete“. Delete this one and delete the last one. So now let’s check out the new design… and I think that already looks way better than before. So now let’s make some general settings and therefore we will go back to the wordpress dashboard… then we click on „settings“ and „general“… and here we can change our website name and add a tagline. Don’t change this URL! …And here we can choose our preferred date format as well as the preferred time format. I leave it like that and click on „Save Changes“. Then I click on the writing settings but these are fine at the moment and I won’t change anything here. Same goes for the reading settings but you might check the „Discourage search engines from indexing your site“ button. Then we click on „discussion“. These are also fine like that but I will uncheck the first box and then click on „Save Changes“ and last but not least I click on „permalinks“ and here I highly recommend you to change the URL structure to „post name“ because that looks just far better and is more user friendly than some random numbers. Don’t forget to click on „Save Changes“ and let’s go back to the dashboard. What we will do now is to install plugins to add special features to our WordPress website. Therefore we click on „plugins“ …and here we can already see four pre-installed plugins which we will delete in the first step. Therefore we select „all plugins“, choose „deactivate“ and click on „apply“. Then we select all plugins again, choose „delete“ and click on „apply“ again. Perfect! Now all the pre-installed plugins are deleted. So now let’s install a few plugins which you need for this website and therefore we can click on „add new“ in the left sidebar or just on the blue button at the top. Now let’s search for „black studio“ and then we install the plugin „Black Studio“ widget and click on activate. This plugin adds a visual editor widget. Then we click on „add new“ and now we search for a contact form plugin. We install the „contact form 7“ plugin and click on „activate“. Then we add another plugin and search for „siteorigin“ and we install the page builder by a SiteOrigin which is an awesome drag-and-drop page builder which is in the backend and the reason why I choose this page builder is because I think it’s the best one to really understand WordPress and to learn how to work with not just those fancy fronted builders. Nevertheless I will also do videos on them in future. Then we click on „add new“ again and search for „siteorigin“ again and now we install the „SiteOrigin Widgets Bundle“ which works perfectly with the page builder we just have installed. And the last time: „add new“ and then we search for a JavaScript.. …ehm… plug-in and therefore we search for „TC JavaScript“… I’m sorry „TC JavaScript“ and then we install this one. Click on „activate“… you can dismiss this notice… and we go back to the dashboard. During the creation process of this video there was one major WordPress update and because of this we need one more plugin which is called the „Classic Editor“. The reason for that is that WordPress released their new but very unpopular „Gutenberg Editor“. So to get the „Classic Editor“ back just install this plug-in. It will not overwrite the new editor but it will give you the option to also use the classic editor. So now we want to add some pages and therefore we go on „pages“ and „add new“ …and the first one shall be the „home“ page so I will just name it „home“ and I will already change the template to the „front page“ template and click on „publish“. Then I add a new page and this one will be an „about“ page and click on „publish“. Then I will add a „services“ page… click on „publish“, add a new page …and this one is for my blog… click on „publish“ and last but not least I will add a contact page and click on „publish“. So now we are done with creating a few pages and let’s start with designing our start page. Therefore we click on „all pages“ and then we click on „edit“ homepage …and the first thing I want to change is this permalink because I want this home page to be also my start page and not just a sub page. And to do this we click on „appearance“ and „customize“ …then we click on „homepage settings“ and then I choose that our homepage shall display a static page and I will choose the home site for our home page and I already choose the blog site to be my posts page. Then I click on publish and then we go back …and now we see that this page is our start page. So the next thing what we will do is looking at the slider settings and therefore we click on „customize“… then we click the third option which is called „header area“… then we choose „header slider“ …sorry about the lags… and now we can change the slider speed which is currently set at 4 seconds. So every 4 seconds the background image will change and you could just change that number into whatever you want. I personally don’t like sliders at all so I will just enter „0“ and stop the text slider to deactivate the whole slider. Here you can set the background image as well as the title and subtitle and I will type: for example… for the title: „perfect sample“ and for the subtitle „simple. Beautiful. Free.“ and now let’s change this background image and upload our own and therefore I want to show you an awesome website where you can download amazing images for free so therefore let’s open a new tab and then we type in unsplash.com and here you can browse or search for high-resolution images which are completely free to use. So if you found an image you like just click on it and press the current download button to save it to your computer. The cool thing is that you’re even allowed to use them for commercial projects without giving credits. But I will still show you later how to create a credit page to say thank you for their amazing work so that you can decide if you want to give credits or not. I already chose all the images I want to use for this tutorial and created a folder with all the demo content for this website. If you want you can download this exact folder so that you can easier follow along this tutorial. Just check out the description for more information. So let’s go back to our website and then we click on „change image“ and then we just drag our image and drop it right here. Then we click on „choose image“… perfect! So now I will delete the image on the second slider and yeah that looks good! The title and the subtitle will change after publishing but before we do that I will also edit this call-to-action button. To do that we have to scroll down on the settings and here we can change the text for the call-to-action button and you can type in whatever you want… and here you can type in a link for example: slash services to link to our services page but we can also paste any external link in here for example a link to your Facebook profile. But I will just link to my services page. After that we can click on publish and let’s have a look at our website. Awesome! And if we click this call-to-action button we jump to the services page. Now let’s go back to „header slider“ settings and down there there’s one more option. Here you can define the responsive behavior of the slider for mobile devices so I will choose the full screen because I think that looks much better. Then I click on publish to save the settings and I will go back to my website. So now we will create a navigation menu for our header and therefore we need to create a new menu. So to do this we click on this link to get to the menu settings and here we can type in a name for the menu so for example I will call it „header menu“ but you can call it whatever you want …and then we click on „create menu“ and then let’s go back to our website to see the results and as you can see nothing has changed and it still looks like before and to fix this problem we just have to click on this link again and then we check this option to make this menu to the primary menu. Then click on „save menu“ and let’s have a look at our website again. And now we can see that our menu is displayed correctly in the header but still I notice that there are two links to our homepage and personally I don’t like the order of the links… so to change that we go back to the „menu settings“ and then we just remove that item and we can change the order of these menu items by drag and drop. Then we click on „save menu“ and then let’s go back to a website to see the results. And in my opinion that looks perfect now! Now I want to show you how to change the color scheme of this website and to do this we click on „customize“… then on „color settings“, „general“ and then we click on „primary Color“ and now we can choose a color by using the selector and as you can see every color has a specific hex code so if you already have a specific color code you want to use just paste it in here. I also already made a color scheme for my website and saved all hex codes in my tutorial folder. So I open this folder and I saved all the codes in this text file. So I will copy this code which is a nice blue and then I go back and paste that code in here and as you can see the button color changed immediately to this blue. Then I click on „publish“. And the next thing I want to change is the hover color of these menu items into the same blue… so I go back to the „customizer“ then I click on „colors“ this time „header“ and then I just paste the same code into the „menu items hover“ field. Then I will save it and then I go back to my website. And now I think that looks great! So in the next step I want to show you how to brand your website with your own logo. So in the first place we click on „customize“ again and then we click on the second setting. And here you can upload your own logo and below you can add a favicon. So the logo will appear in the header and the favicon is that small icon over here and to create our own logo will open a new tab and type in „logomakr.com“. So we can close this and now we can create our own logo and to start we can browse random logos to get inspiration or we just search for a specific subject. I will search for a simple „star“ and personally I like this one. So to change the color we can use this selector to pick a color or we can just paste our hex code… and as you can see it’s the same color like I use on my website. So now you could also just change the size of the logo and if you’re done you can just save the logo to your computer. I already save them to my tutorial folder so I won’t save that logo again. And to upload the logo to our website we go back and click on „select image“… then we click on „upload files“, then I drag the image and drop it here. Then I click on „choose image“… perfect! Now you can see the logo up here. Let’s now upload the favicon. So we click on „select image“ again click on „upload files“ go to the folder… we’ll go back click on „website favicon“… drag this image and drop it here… then we click on „select“ and now you can see the favicon up here. Perfect! Now we click on „publish“ to save the changes and then let’s go back to our website. So now let’s create this second row and therefore we go back and click on edit page and the first thing we have to do is to click on the page builder tab. Now we need to create a row which is separated into three columns… so we click on add row and now choose a three column layout. Now we click on a column to add a widget. And in this list we look for the visual editor and insert that widget into that column. The first thing I want to add are these big icons. I created all of them at logomakr.com just like we‘ve created the website logo. I think I‘ve searched for terms like „gears“, “responsive“ and „network“ to find these three icons and I just set different colors. I also saved these icons in the tutorial folder and you can find these in the subfolder home… so here they are. So to add them to your website let’s just go back to the edit page …click on edit and now you can add media. And as usual just click on upload files and then drag and drop this image. Perfect! Now let’s add a keyword like for example „support“ and then you can add for example the h3 heading tag… then press on enter and let’s add a short description. Therefore I saved some placeholder text to my tutorial folder which we can just copy and paste. Perfect! Now let’s preview the changes. Now that looks a bit weird to me so what I will do is I will Center all items. Therefore we go back… click on edit and now we can just… align center these items. Then we preview the changes again and that looks way better to me now. So let’s just duplicate this column and drag it into the next column because it’s basically just the same. We just have to replace the logo and therefore we click on edit and we’ll click on this small pen …click on replace, upload files and then we just check and drop this icon. Click on replace and align center… click on done. Then we duplicate it again and drag it to the third column. Click on edit, click on the icon… then on edit… then we’ll click on replace… upload files… and then we choose this icon and click on replace… align Center and then let’s just change the keyword into for example „social media“ and click on done. I think I forgot the keyword of the second column so I will do that fast. Change that to „responsive“ and let’s preview the changes. And now that looks great to me! Now I want to show you how to add these blue buttons and therefore we just go back to „edit page“ and then we choose any column and click on add widget. Then we search for the SiteOrigin button widget… then we click on edit and now we can type in a button text like for example „our services“ and because I want a link to the services sub page I can just type in here „/services“ but you can paste any link in here. Then you might choose this option if you want that the link will be open into a new tab and the next thing I want to change is the design and layout of the button and here I will choose a flat button theme and for the button color I will use my primary color…this one… …copy and paste …and for the text on the button I will just use a simple white and I will disable the standard hover effect because I just don’t like the look. Ok I won’t change anything here and let’s check out the result. Preview changes and yep that looks good but I want to show you a little problem which we will fix in a second. As you can see we need some space below the button in the responsive mode and therefore we go back… click on edit… …layout and then we add some mobile padding. For example „hundred“ but we just want padding at the bottom. Click on „done“. And as you can see it also looks great on a mobile device now. Now let’s just duplicate this button. Therefore we go back. Click on „duplicate“ and let’s duplicate that button a second time. Drag one to the left and one to the right and we might change the button text …for example „our work“… I leave the link like that… click on done… click on edit and then for example we link to the about page… so for example „about me“ and the destination shall be the „about“ page. Click on „done“ and preview the changes. And to me that looks really great now. And as you can see also on mobile devices. Now I’m going to show you how to make this row and therefore I go back on „edit page“… then I will add a new row and choose a one column layout because as you can see it’s just one column. Then I click on insert… choose this row and add a widget. This time I add the visual editor and click on edit and now I can type in some text in here like for example „create your own website“ and I will make this to a heading 4… click on the align center and click on done. Let’s preview the changes… and that looks quite good. What I want to do now is I want to add some background color so I click on the row settings… click on design and here I can change the background color of the row and I decided to choose a light grey for the background color and I already have a specific code for that. Then I click on done and let’s preview the change and yeah I like that grey… but what I want to do is: I want that the grey covers the full width and to do that I have to go back on „edit page“ then I click on „edit row“ and then I click on layout and then I will choose a full-width row layout. Click on „done“ and let’s have a look at the Website… and that looks way better now. Now I want to add this button and therefore I go back on „edit page“ and what I will do is I will just duplicate one of these buttons and drag and drop it right here… now I click on edit and then I will change the button text in for example „get started“ and then I will change the button theme and choose the wire theme and then I click on done. Now I will preview changes and that looks really good now. What I want to do now is I want to decrease this height and to do that we go back on „edit page“, click on „edit row“ and let’s see… yeah right here… top and bottom padding and by default it’s 100 pixels… the padding is 100 pixels but I will decrease it to 50 pixels… and to me that looks much better now. So let’s go back and click on update to save the changes and let’s go back to our website. Now I want to show you how to create this section and this section is a so-called footer widget area which has the benefit that we just have to create it once and it will be automatically displayed at the bottom on every side we create. And to get start we click on „customize“… then on „footer options“ and then we choose a four column footer widget area. Then we click on publish and then we close the customizer. Now we go to widgets and what you can see here are four footer widget containers which represent these four columns and in these we can place any widgets from the left side like for example the recent post widget and for the title I will just simply name it recent posts… here I can decrease or increase the number of posts displayed in this widget and click on save. Let’s have a look at our website and refresh the page and now you can see that we successfully added the first widget. At the moment there is just one default post displayed but we will add further posts later in this video. Now let’s add our contact information to the second column and therefore we go back… and then we add the „Syndey contact info widget“. For the title I just type in „contact“. Then here you can type in your address and your phone number… Well I will type in just some random numbers and your email address. And then we click on save. Let’s refresh our page and now we’ve added our contact information to the footer widget area of our website. In the third column I want to add a second navigation menu which shall include links to a privacy policy page, a terms of services page and to a page where we give credits to logomakr and unsplash and because we didn’t already created these pages we will do that in the first place so let’s add a new page… and the first one shall be the privacy policy page… then I will paste some placeholder text and click on preview. Personally I would like to remove this header image and the sidebar. And to do this we go back… then on appearance and then I will open the customizer in a new tab. Then I click on the „header area“ options, „header type“ and then I will set the site header type of all pages except the front page to „no header“ and then I click on „publish“. Then I can close this tab and now I preview the page again and as we can see we successfully remove the header image. And to remove the sidebar I have to go back on „edit page“ and change the default template to the full width template. Perfect! Let’s not forget to click on publish to save this page. And then we add another page. This time we add the terms of services page and therefore we just repeat every step from before. So paste in some placeholder text… click on preview… change the template… click on publish… and let’s check another time if everything went well. Perfect! And last but not least we add a simple credit page and therefore I already prepared the content. Just check out my tutorial folder… click on „links“ and then open this text file… and then just copy… and paste, change the template… and as you can see there went something wrong and that’s because I made a mistake and pasted this HTML text into the visual tab so I will cut that out and paste it into the text editor… click on preview… and as you can see that fixed the problem. So don’t forget to click on publish. And let’s go back to the widget settings. So to place a menu into this third column we have to place this navigation menu into the third container. As for the title I will type in „information“ but you can type in whatever you want. Now we can select a menu but till now we‘ve just created the header menu so let’s create a second menu for the footer. I will just open the menu settings in the left sidebar in a new tab and as we did before we have to create a new menu. This time I will call it footer menu… click on „create menu“ and now we can add the pages which we just have created to this menu. Personally I prefer another order which I can realize by simply dragging and dropping these items. Then we click on save and close this tab. Then we go back… click on save and refresh the page… and as you can see we can now choose between two menus and one of the menus is the menu which we just have created. And here it is: A simple but very useful footer navigation. So let’s just check if everything works correctly by clicking the links… and that looks perfect! So now let’s add these social media buttons to the last column… and therefore we go to the widget settings again and this time we add the… „Sydney FP social profile“ widget to footer 4. Then I will pick „follow me“ as for the title and then we have to create another menu: The „social menu“ which we haven’t done so far. Therefore I open the menu settings in a new tab again… then I click on create a menu… I will call it social menu and this time we don’t add pages to this menu but custom links. So I will add for example „facebook.com“… …add to menu… …then „twitter.com“… …then I will add „YouTube“… and „Instagram“ …and „plus.google.com“ for Google+. To me the order is fine like that so I won’t change anything here and then I will click on „save menu“. So let’s go back… click on „save“ and refresh the page… and now I can choose the social menu which we just have created. And let’s have a look at the page… and that looks pretty awesome to me! So let’s tidy up a bit …let’s just close a few windows and now I want to make some color changes and therefore I click on customize. Then on „colors“ …“footer“ and then I will copy and paste all the codes from my personal style sheet. So for the background paste in this light grey… …copy and paste… …this one… and last but not least the footer color. So that’s for the font… and then I click on „publish“. Yeah I really like that even though the old version also looked pretty good. You might also notice that these icons are not that sharp and the reason for that is a so called text-shadow which is by default on these icons. And you can see that here… and if I remove the text shadow the icons look so much better but how can we completely remove this text shadow? And we can do that by adding some lines of custom CSS code which are saved in my tutorial folder. Open this text file… then copy that code… and then we open the „customizer“… …then we click on „additional CSS“… we can close this… and then we paste this code into this field and here you can see the difference without and with the code and then we click on publish. And let’s go back to our website… and that looks perfect now! Last but not least I want to show you how to replace this default text with your own copyright notice and therefore we go on our dashboard… then on appearance and then we open the editor. Normally you should not make such changes directly in the editor because after a theme update these changes will be gone so instead you should work with a child theme but I don’t want to make it more complicated and further increase the length of this tutorial so I’ll just do it right here in the editor. So let’s search for the footer PHP in the right sidebar… click on it… and before deleting and replacing the current code with our own code I recommend you to make a copy in case anything doesn’t work as expected. So after we deleted the content we open the tutorial folder and then we open this text file „custom copyright footer.txt“. Then we copy this code and paste that code in here and then we click on „update file“. Perfect! So to change the copyright notice to your own just replace my link and my name with your data. So go back on the editor… click on the footer.php… here it is… and here you can change the link… and here you can adapt your name. So let’s close this and then let’s go back. I think that one button looks great but I would like to add a second one like on this page. So I want to have a blue one and such a transparent button with just a white outline. And to do this we have to go back and then we go on our dashboard… then on appearance… and then we open the custom JavaScript plug-in which we installed at the beginning. Now we will add a few lines of JavaScript and therefore we open the tutorial folder and open the „custom JavaScript.txt“ file. Now we copy everything and then we paste this code in here. Of course you can replace this link and if you want you can also change the text on the button right here and then we click on „update“. And then let’s visit our website. Perfect! Personally I don’t like the styling and the colors of the buttons so let’s change that in first place and to do this we go back on our dashboard… appearance and click on „customize“… then we will add some custom css again. You can find the necessary code in the custom CSS folder and then we need those two files. Then let’s copy this code and then you can just paste that code in here and then you can change the background color and the background color when hovering… and then we copy the code for the right button. …This file… where we also can just paste that code in here and then we can also adapt the background color which is in this case a transparent color or no color at all… then the border color which is white and also the text color and here are the hover settings… and here I just changed it into a light grey so you can see a difference when you hover over that button. And below there are some lines of code for a better presentation of the buttons when displayed on small devices but you don’t need to change anything here. And then we click on „publish“ and let’s have a look at the website. And I have to say that I really love this look! So in between I want to tidy up a bit and close a few windows. Perfect! Now I want to show you how to change the default font and therefore we open the „customizer“ …then we click on the „font settings“ and now we have to open this link. And on this page you can browse for a font you like. And for demonstration I will choose this one right here and then I will select this font… open this window… and then we copy this bold text and paste it right here. After that we copy and paste font family into the second field. Ok.. nothing has changed and I already see my mistake: I have to remove the „font-family“ at the beginning. So now you see that the font changed. Perfect! So if you want the same font for headings you can just copy and paste the same codes into the provided fields fort he heading fonts. Just copy and paste. And here it is! So let’s have a look…so we‘ve successfully changed the font. So personally I don’t really like this font so I will change it fast. So I quickly change the font to one I like and just repeat every step. So I will close this section and then I will search for „Roboto“. And I will add this font… open this window and remove the first font and then I will copy this bold text and paste it here and then the font family. Don’t make the same mistake again… So just this part. Well also paste it in here and that looks way better to me. And then let’s go back to our website. Now we are almost done with the start page but I want to make some adjustments …and the first thing what I want to do is something that we don’t see at the moment because we’re on desktop. Because as you can see on mobile devices we have this paddings below those two buttons and I want to remove them because I want that your website looks not just good but amazing. And to remove those padding’s we will edit the page… then we edit the third button of this row… then we click on layout and remove the mobile bottom padding. Click on „done“ and then I will do the same with the last button. Then I click on update and let’s see if that worked out. So view the page… Awesome! And to me that looks definitely Better. So now I want to show you how to change the color of the header and therefore we go to the customizer… then we click on the color options… „header“ options and then we can change the menu background color here. I will use my primary color so I will copy this code… and paste it in here. Perfect! But there is one problem and the problem is that it shows the same „hover link color“ and as you can see we should definitely change that. So I already prepared some custom css to fix that problem and …so open the tutorial folder …open „header menu – links“ and then we copy this code… then we click on „publish“ …and let’s go back to additional CSS right here. And then we will paste this code below our existing code. And this styling looks good both with the blue header and with the transparent header. So let’s click on publish. We could already add another custom code what I’d like to add and that’s for the link styling in the „footer widget area“ so open this „footer menu – links.txt“ file… copy this code and paste that code below our existing code. And this will color the links in the footer when one of the pages is active but you will see that later. The next thing I’d like to add is a light box-shadow below the header what you see on most websites from Google and the file is also in the tutorial folder and the file is called „header menu – shadow“…here it is… so copy the code… and paste that code in here. And as you can see there is a light box shadow or a light shadow below the header now and I think that looks really great. So to save all the changes we made we click on publish and then let’s go back to our website. In between I will close a few windows which I don’t need anymore and as you can see the link styling is so much better now and looks great on both backgrounds. And if you click a link in the footer it will color the link of the active page. So now we are done with the start page and in my opinion this page looks really really great! So yeah now we can continue with designing the next pages so let’s continue with the „about“ page. So first let’s clear things up and now we will create this page… with a nice call-to-action area with a row and call-to-action with a nice background image. Then we will add a section where you can present yourself or a team member and after that we will create this row with these funny facts and such a counter function. So let’s start with the first row and therefore we have to edit this page and then we will switch to the page builder and add a one column row. Then we will add the visual editor to this row and then we click on edit. Then we click on this icon to show the toolbar and then we type in some text like for example… I will type in “start today. start now“… then I will align that in center and I will make that text to heading 1. Then I will make this text white and click on done. Then I will also add the button… click on Edit… so I will write „view tutorial“ on that button… and the destination shall be the services page so I will type in „/services“ I don’t want the page to be opened into a new tab so I will don’t use this option and then I will change the button theme into the wire theme… and for the color I choose white and I will disable hover effects and then I’ll click on „done“. So now let’s set a background image and therefore we have to edit the row… then we click on „design“ and here we can select a background image… upload files… and then I will open the about subfolder and choose this image. Click on „done“… another time… and then I will preview the changes. And as you can see we have few things to do so we want to remove the sidebar, this heading and we want to stretch this image to the full width of the screen and I will remove the space between the image and the header… so let’s go back and change the template in the first place to the front page template and this will remove the heading and the sidebar. Then we will edit the row and then we change the rule layout to the full-width layout …click on „done“ and let’s preview the changes. Okay… I think we have to save the page to have the template successfully changed… so let’s click on save and let’s view the page again… and as you can see that worked. So now I would like to increase the height of this row and therefore I have to increase the top and bottom padding of the row and therefore I click on edit row… layout and here I can increase the value of top and bottom pay …so the default value is 100 pixels so to increase the height of the row I will just have to pick a higher value than 100 pixels… so I will choose… I think 150 pixels and before saving these modifications I will also change the mobile padding… and then I click on done. So let’s preview the changes or let’s update the page… and refresh that page and yeah that looks good. So let’s create this second row. So therefore we just have to create another one column row and of course if you want to display more people than just one …you can just add more columns and therefore you would just have to change the number of columns… right here. But I will choose a one column layout …and click on insert and I will click on this row and add a widget and choose this one. And I will click on edit… and let’s add some kind of heading like for example „about me“… then I will choose heading 3 and center this text. Then I will press two times enter and then I will click on „add media“ to upload the image. So „upload files“…then I will choose this image and when you click on this image you can also resize it if you want. So just click on it and here you can resize the image. And then you could write the name and for example the quote or anything you want below the image so I will copy some placeholder text… Then we‘ll center this text and I will add a heading tag to the name and change the color to my primary color. So we’ll click on this small arrow… here you could choose any color or click on custom color and then I can paste my code in here. Okay… and then I will click on done and let’s preview the changes. And I think that looks really nice so that we can already continue with the last row. So let’s save the changes and then let’s close some tabs we don’t need anymore. And the next thing we do is we create this row with these funny facts so let’s click on „edit page“… then we will add a one column row… and then we will add a widget to it and this time we add the widget „Sydney FP facts“. Click on „edit“… and in the first input box we can type in a heading which will appear above the icons right here. And then we can type in the first fact name… and then we can choose a value to which the counter shall count up. So for example I will choose the number „3“. And to choose the first fact icon we have to open this link… and now we can search for a matching icon. So just copy the code after the icon and then you could just paste that code in here but I already chose a few icons so I will just type in the name of these icons… and these are some kind of „gears“… and then let’s add the 2nd fact name… and just repeat the steps from before… and let’s repeat that for the 3rd fact… and the 4th fact. Then we click on „done“ and let’s have a look at the result. So to me that looks quite good but I’d like to add some grey background color to this row. So let’s edit this row… „design“… and let’s add a light grey for the background color and let’s preview the page again… and what I forgot is to stretch the row to the full width… so I have to do that now so I’ll click on edit row again… then on „layout“… and then I will choose the full-width row layout. Then click on „preview“ and now we are already done with the about page but don’t forget to save everything. So let’s go back and click on „update“. So let’s have another look at a page and also on how the page is displayed on mobile devices. And doesn’t that look great?! Now we will design a page to display the services we offer and therefore we will create this services page right here… with this nice two column layout and to get started we are going to edit the page and switch to the page builder and change the template to the front page template. Then we click on „update“ to activate that template and then we will create a row with just one column for the first row. This one! And then we will add the visual editor to this row… click on edit… and now we can type in a text. For example „build your first website with our help“. So I will choose the heading 1 tag for this text… I will Center this text and set the color to white. Click on „done“ and then let’s already select the image for the background of the row. So let’s edit the row, „design“ and click on select the background image. And then the subfolder services and I will choose this image. Click on „done“ and let’s preview the changes. So let’s set a full width layout… so let’s go back… „layout“ and then the „full-width layout“… click on „done“ and that looks perfect! So let’s also increase the height of this row so let’s go back edit the row and change the value to a higher one… like for example 175 px and I will also change the mobile padding to 30 px. Then I click on „done“ and let’s preview the changes. And I pretty like that! …So that looks good! So then we will create the second row which shall be a two column row… so let’s add a „two column row“ like this …click on „insert“ and then let’s add another „visual editor“… click on „edit“… and now I will paste some placeholder text which are saved to my tutorial folder. So open the folder, open this file and just copy all this text and paste it in here. Then I will make this to heading 2 and click on „done“. Then I will add another visual editor… click on „edit“ …and then we click on „add media“ to upload an image… click on „upload files“ and this time I will choose the image on the left. Then I will change the image size to a full size and click on „insert into page“. Click on „done“ and let’s preview the changes. And that doesn’t look bad but maybe a bit boring so we will make this row a bit more special and therefore we will remove the top and bottom padding completely and we will choose a full-width layout. So let’s go back and then let’s edit the row. Click on „layout“ and to completely remove the top and bottom padding we just enter the value „0“. Then we will change the row layout to a full-width stretched layout which will also stretch the content inside the row. So let’s preview the changes and I think that looks better but still not really good. So it removed the padding above the row but there could be some space around the text in the left column. And to do this we have to add some margin around this content and to do this we will edit the left column… then click on layout… and here you can add some margin around this content. So for example I will add 5% margin but you can set any value whatever you think looks good. Click on „done“ and let’s preview the changes… and I think that looks really great now! So let’s add the second row and therefore we can just… duplicate this row. And then we will change the order so we will drag and drop the image to the left… and we will drag and drop the text to the right. And the next thing what we will do is we replace the image. So let’s click on edit… then click on the image… click on „edit“ …click on „replace“ and now I will choose this image so I click on „upload files“ and drag this image over here. The size is fine like that so I will click on „replace“ then on „done“… and let’s preview the result. Now you can see this horizontal and vertical space between the columns which I would like to remove. And to do this we have to go back to „edit page“… then we’ll click on the row settings of the 2nd column or the 2nd row and then we set the bottom margin to minus 20 px and the gutter setting is by default 30 px and we will set the value „0“. Click on „done“… and then we do the same with the 3rd row: Bottom margin minus 20 px and gutter 0 px. Then I will click on „done“ and let’s preview the result again. And that looks pretty good now! I still want to make one little change and I want to add some light grey background to the second column. So I will edit the second row or the third row …click on design and here I can set the background color. So I will enter a hex code or a light grey and then I click on „done“. Let’s have a look at the website… and that looks really amazing! So let’s click on update to save the changes …and now let’s view the page as a whole again. And what we also do now this we will check how it… how its displayed on mobile devices. And I don’t know what you think but I think that we definitely could improve this view. So let’s go to the customizer …then on additional CSS and then we add some custom code again so let’s go to the tutorial folder… then we open the „custom CSS“ subfolder and then we will open this text file. Now let’s copy and paste this code below our existing code and what this does is it will remove the padding on the left and on the right. Then we will also make some changes to the font size when our website is displayed on smaller devices. So I will open this file… copy and paste and to save the changes we click on publish and let’s go back to our website! So let’s have another look at the mobile view and to me that looks already better but I still don’t really like the default order of these columns. So by default the website will order the elements row by row… from the left to the right well viewed on smaller devices. So it will start with first row… then with the left column of the second row… right column… followed by the left column of the next row and last but not least the right column of the last row. But I would like to start with the first row… then I want to display the image and the text… then the image and then the other text. And luckily we have the possibility to change this order and we just have to change one option. So let’s edit the page and then click on „edit“ of the second row… then layout and then we… we will change the collapse order to „right on top“… click on „done“… preview the changes… and this already fixed the problem. And let’s see how it looks on an iPhone for example… and to me that looks really awesome! So let’s close the preview and save our changes. And now we are already done with the services page! Nowadays most businesses have a blog on their website to post news and interesting topics for the visitors and customers and I will show you now how to create a blog with WordPress. We already set this page to a blog page which displays snippets of all our blog posts and as you can already see there is one pre-installed blog post which we don’t need. So the first thing what we are going to do is we are going to delete this blog post. So let’s go to the WordPress dashboard… posts… and all posts… and now we can just move this article to trash. Now let’s create our own first blog post so let’s click on add „new“… and here you can type in a title for your blog post. So for example „HOW TO CREATE A WORDPRESS WEBSITE!“. And below you can enter any news around your business or write a blog article and as this is just a demo website I will get some placeholder text for that. So I will copy this code… or this text… and paste it in here. And then I will preview the changes. And that’s how a blog post will look like. Now let’s tune this blog post… so the first thing what we are going to add is a „featured image“. So let’s click on „set featured image“ …upload a new file and I will choose this image. Click on „set featured image“ and let’s preview the website again. Perfect! And this image will also be displayed on a blog site where all the snippets are displayed. Then let’s add for example a subheading to our blog post. So let’s switch to the „visual“ tab… enter some text and pick an appropriate heading tag. Now we could also change the color… and I will use my main theme color. So I will copy this hex code and paste it in here. So another thing what we can do is we can add links to any word or even several words and to do this we highlight a few words and click on this little chain symbol. And now we can paste any link in here or type in any link. No matter if it’s an internal or external link. Click on „apply“… and if you want that this link will be opened in a new tab you can do that by clicking on edit… „link options“ and tick this option. So now let’s add some bullet points and therefore we look for a place where we add these… I will add them here… So I will enter some text… „bullet point number one“ „bullet point number two“ and bullet point number three. Then I will highlight them and click on this little icon. I will make the subheading bold… and then I will have another look at my website. So here’s the blue heading, our bullet points and here’s the link which should open my start page in a new tab… and as you can see it works perfectly! Now I will add some space here. I think that looks better and then I want to show you how you can embed any YouTube video on your website and therefore we change to the HTML editor and look for a place where we want to display the video. Then we open YouTube and search for any video. I pick such an amazing 4k video and then I click on „share“… then on „embed“ and now we have the possibility to hide the player controls and other options or „enable a privacy enhanced mode“ which I will do. Then I click on „copy“ and then I will paste this code right here. Let’s add some space… and let’s see how that looks on the front-end. Awesome! And let’s click on „update“ to save this post! Now I want to customize the sidebar and therefore we have to open the widget settings. And here you can see the container with all the default widgets displayed in the sidebar. And the first thing what I would do is deleting the search bar, the „recent comment“ widget, „archive“ and the „meta“ widget. And instead I want to add the social icons like I did in footer widget area and therefore I will add the „Sydney social profile“ widget again… choose the sidebar and add the widget. For the title I will type in „follow me“ and then I will choose the „social menu“ and click on „save“. Now let’s refresh this page and as you can see that looks pretty cool. So now I want the icons to be displayed on top so I will change the order of the widgets. Perfect! Now let’s add a few other posts to fill up the recent post widget with a few more items and therefore we go to our wordpress dashboard… click on post and add a new one and now just repeat the steps from before and you can find some demo content in my tutorial folder… So I’ve just created 6 different blog posts so you get a better idea how everything looks with more content and here you can see the snippets of all the blog posts which I just have created. And if I click on a snippet it will direct me to the blog post itself. You can see that the „recent post“ widget in the right sidebar is now filled with the titles of the new blog posts. And if you want to increase or decrease the number of posts displayed in this widget you can do that by going to the widget settings… then open the „recent post“ widget in the sidebar container and now you can change the number of posts displayed in that widget. I will choose six and click on save. So let’s go back to the blog and now there are all six blog posts displayed in that sidebar. Now I want to show you how to create different categories for our blog posts and therefore we go to our wordpress dashboard… posts and categories …and here we can add a new category. So choose a name for the category like „search engine optimization“ and in this category we will put all SEO related posts. But of course you can choose any category which fits to your business. Then add the category… then I will create another category for the topic „web design“… click on „add“ and then I will create a category for blog post with „WordPress“ as topic… and here you can edit the categories and make changes to them if you want. So I will change the name of this category to „general“… and click on „update“. Now we will assign our post to this categories and therefore we go to „all posts“… then we click on the first post and then I can choose the appropriate categories and click on update. Then we go back to „all posts“ and do the same thing with the next one. Just these two categories and click on „update“… „all posts“… there I will choose „SEO“… and for the post about hosting I will choose just „general“… and the blog post about the page speed will be for example „SEO“ and „WordPress“. And for this post I will just choose „general“ and „WordPress“ as category and click on „update“. Now let’s go back to our blog… and now our visitors can filter our blog posts by categories. So if I click on the category „WordPress“ it will show me all blog posts related to „WordPress“. Now I want to show you how to change the layout of the blog page and I think that’s really cool! So go to the customizer… then „blog options“ and here you can choose from different layout styles for your blog… but I will definitely go with the masonry grid style layout because I think that looks really great. By the way if you want to remove the sidebar in your blog posts you can just „check“ this option but I recommend you to not do that because it will most likely reduce the time of your visitors stay on your blog. So to save the changes just click on „publish“ and let’s go back and let’s make one other „general“ option and here you can reduce the space between the page content and the header and the space between the content and footer widget area. So I will set both to 40 pixels and click on publish. So let’s have a look at the result… and if you ask me that looks pretty awesome! Now we’re going to design the last page which is usually one of the most important pages of a website and I’m talking about the contact page. So let’s not lose time and get started. So let’s edit the page… then we will switch the default template to the front page template to remove the sidebar and the title. Then we switch to the page builder and create a one column row. After that we will add a visual editor to this row… and click on „edit“. Then we will enter a text like for example „FEEL FREE TO CONTACT ME“ and I will mark this text as a „heading“… align center and then I click on „save“ and „update“. So let’s have a look at the website… now that looks good so far but I think a blue background color and a white font color will enhance the look. So let’s go back… edit the text and let’s change the color to a plain white. Then I will open the row settings… click on „design“ and then I will change the background color to my main theme color. So I will copy my hex code and paste it in here and I will reduce the color strength a bit. And let’s have a look at our page. And as always we have to set the full-width layout so let’s go back to the „row settings“… then „layout settings“ and then we choose the „full-width row layout“… then click on „done“ and let’s preview the changes… and that looks perfect! Now I show you how to create this row with these two icons. So let’s add a two column row and let’s add another „visual editor“. Then click on „edit“ and let’s add a new media in the first place. So let’s upload the letter icon which is saved to my tutorial folder and you can find it in the „contact“ subfolder. This one. Insert into page… now I will center the image and add some text below the image. So for example „SEND ME AN EMAIL“ and I will mark it as a heading. Then let’s add the email address below… center and click on „done“. Now let’s duplicate this widget and move it to the right column. Then we will replace the letter icon with the phone icon… upload a new file and then we take this one… click on „replace“, align Center and then let’s adapt the text. „CALL ME AT“ and let’s add our phone number… I will just pick some random numbers and let’s click on done. Let’s have a look at the website and that looks perfect! So we’re already done with the second row and the next thing what we are going to do is we will create an awesome contact form like this. So let’s add another row… just one column and then we will add a „visual editor“ again. Click on „edit“ and then I will type in some text again or use this contact form. I will mark it as heading three and then I will center this text. And click on update. Now we’re going to add the contact form and therefore we installed the „contact form 7“ plugin at the beginning. So let’s go to the plug-in options and I will open them in a new tab and then I will add a new contact form. Then I will type in any name… and it doesn’t matter what kind of name you type in here. These settings are fine like that and then let’s click on „save“. Now we copy the shortcode in this blue info box. And then we’ll go back and edit the last row again. And then we will paste this shortcode below the text. Then let’s have a look at our website and as you can see that was way easier than you probably expected still I would like to center this contact form but unfortunately we cannot just center the shortcode. So we need a few lines of custom CSS again. So let’s go to the tutorial folder… then the „custom CSS“ subfolder and then we will open this „centered contact form“ text file. We will highlight the code and copy everything and then we open the customizer. Then additional CSS and then we paste all this code below our existing code and click on „publish“. And that looks way better to me. Still let’s add some space between the heading and contact form. So click on „edit“ and just add some space. Click on „done“… and that looks perfect! Now I think it will look far better with a light grey background color so let’s open the row settings… then we click on design and then we chang the background color to a light grey. But of course you can choose any color you like. Then we will change the row layout to the „full-width“ layout and click on „done“. Let’s preview the changes and that looks awesome now let’s have a look at a responsive version of this page and I think I will reduce the height of the first row and maybe add some padding below the first column in the second row. So let’s change the mobile padding in the first row and I will choose 45 px… and then we „edit“ this column and add some mobile bottom padding. Just for the bottom 75 px and then I click on „done“. And let’s check out the result and in my opinion this page looks awesome! And congratulations we’re done with the whole website! In the last step I want to show you where you can check the emails which you get through this contact form and the first thing what we have to do is to log in our SiteGround account. Then we click on „My Accounts“, „manage account“ then „go to cPanel“ and then we click on „email accounts“ and here you can create your email addresses. So for example [email protected]… then I will choose a password and confirm this password and create that account. And I will add another email and choose another password and create this account. Then we open a new tab and then we type in „our domain/webmail“. Now we type in our mail address and type in the password we chose. Then we choose a default webmail application… I like „roundcube“… and then let’s test the contact form. So let’s go back to the page settings and click on „update“ and let’s view the page. Now let’s type in some information and let’s leave a test message. Now let’s click on „send“. Now let’s check our inbox and you might have to wait a few seconds or refresh the page and there is the message. What you have to make sure is that you have the correct mail address deposited. So go to the contact form options and the mail options and make sure that these information are correct. Then let’s click on „save“. One last thing would I want to show you is how you can change the transparent header background to a colored one and therefore we have to add – for the last time – a few lines of additional CSS. So open the customizer… click on „additional CSS“ and then let‘s open the tutorial folder and open the „homepage – colored header.txt“ file. Copy and paste code below our existing code and then click on publish and let’s go back to our website. And now we are completely done with the website! So let’s log out and have a look on how our visitors will see our newly created website. So we builded an amazing website in less than three hours with a beautiful start page… a very cool about page with those fancy counters… then a services page with a very modern layout and an awesome blog to provide more information and value to your customers and visitors… and different blog posts which look nice and clean… and a very user-friendly contact page with a nice contact form. Furthermore we created a page to display our privacy policy and the terms of services as well as a credit page to thank other people for their amazing work. The best thing is that our website is completely responsive and that means our website will not only look great on a desktop but also on mobile devices and as you can see the content fits perfectly even on a small screen. And it comes also with the mobile optimized navigation menu and I’m pretty sure your customers will love It! So thank you for doing this tutorial! I hope you have now a comprehensive understanding of WordPress and are able to create your own website feel free to like the video or leave a comment, I appreciate every single one so see you soon and have fun building your first website! If you decided to go with SiteGround I have one more thing for you. So login to your WordPress dashboard… then click on „plugins“ and let’s add a new one. And now let’s search for „SG“ which stands for SiteGround and „Optimizer“. This is a plugin from SiteGround which you can only use if you are a customer of them and with that you can improve the performance of your website with just a few clicks. So let’s install the plug-in and click on „activate“. Then let’s go to the settings of the plugin and here you have many options to optimize your website. And for example you can enable HTTPS for your website, update to the recommended PHP version or activate compression and browser caching for a better performance of your website. Then you could also minify different resources to save data and reduce the number of requests to the server. And here you can activate that all the new uploaded images will be automatically optimized or you can activate lazy loading which means that the images will only be downloaded when it’s actually needed. And by clicking this button you can optimize all existing images in your library. So let’s check out the result by doing a short speed test and therefore I use the page speed tool by Google. I will just enter my URL and start the test. And with just this little effort we already have score of 87 for mobile devices and an amazing 100% for desktop devices. So let’s check out what the actual loading time of our page is… so let’s head over to „pingdom“ and enter our URL again and start the test. And here we got an amazing load time of less than half a second. For your information: Google recommends a site speed below 1 or 2 Seconds. So with this powerful plugin you can easily boost the speed of your website with just a few clicks and this will definitely have a positive impact to your rankings in Google since PageSpeed is one of the most important ranking factors. So this was a short bonus for all who went with SiteGround and supported me for doing this video. Thanks for watching! See ya!

3 thoughts on How To Make a WordPress Website 2019 | Step by Step | Tutorial for Beginners

  1. How do you like the website? I absolutely LOVE IT! ( Thumbs up or comments appreciated! 😉 )

    ► Buy Domain + Hosting: https://www.siteground.com/go/wpchameleon
    ► Download Course files: https://wpchameleon.com/how-to-make-a-wordpress-website/

    Best
    Patrick

  2. Can the Call to Action be moved – relocated – placed at a different place on the screen?
    I have the Sydney PRO version it offers so much more options no one has done a tutorial video on the paid version of this theme, can you make one?

Leave a Reply

Your email address will not be published. Required fields are marked *