{"id":10895,"date":"2020-05-11T09:00:00","date_gmt":"2020-05-11T07:00:00","guid":{"rendered":"https:\/\/ferdy.com\/?post_type=youtube-tutorials&#038;p=10895"},"modified":"2025-01-23T14:22:56","modified_gmt":"2025-01-23T13:22:56","slug":"how-to-create-a-wordpress-website-the-new-way","status":"publish","type":"youtube-tutorials","link":"https:\/\/ferdy.com\/youtube-tutorials\/how-to-create-a-wordpress-website-the-new-way\/","title":{"rendered":"How To Create A WordPress Website | The New Way"},"content":{"rendered":"\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/ferdykorpershoek.com\/siteground\/\" target=\"_blank\" rel=\"noopener noreferrer\"><br>Get Webhosting At Siteground<br><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wpastra.com\/?bsf=629&amp;campaign=1hour\" target=\"_blank\" rel=\"noopener noreferrer\"><br>Get the Free Astra Theme<br><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/ferdykorp.com\/elementor\" target=\"_blank\" rel=\"noopener noreferrer\"><br>Get Elementor<br><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/ferdykorpershoek.com\/wp-content\/uploads\/ImagesTutorial.zip\" target=\"_blank\" rel=\"noopener noreferrer\"><br>Download the images I use in the tutorial<br><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.freelogodesign.org\/\" target=\"_blank\" rel=\"noopener noreferrer\"><br>Make A Logo<br><\/a><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Menu Size and Uppercase<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">.main-header-menu a {\n\tfont-size: 17px;\n\ttext-transform: uppercase;\n}\n<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">White and Bigger Title Featured Image<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">h2.avia-caption-title {\n    color: white !important;\n    font-size: 36px !important;\n}\n<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Transparent menu CSS<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">#top .av_header_transparency {\nbackground: rgba(0, 0, 0, 0.6);\n}\n<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">White and Bigger Title Featured Image<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">h2.avia-caption-title {\n    color: white !important;\n    font-size: 36px !important;\n}\n<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Contact Form<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">[text* your-name placeholder \"Name\"]\n<\/pre>\n\n\n<p>[email* your-email placeholder &#8220;Email&#8221;]<\/p>\n\n\n<p>[text your-subject placeholder &#8220;Subject&#8221;]<\/p>\n\n\n<p>[textarea your-message placeholder &#8220;Your Message&#8221;]<\/p>\n\n\n<p>[submit &#8220;Send&#8221;]<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Portfolio Code<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">[elemenfolio postsperpage=\"12\" columns=\"3\"]<\/pre>\n\n\n\n<p>Learn how to create a professional WordPress website using free tools like Serverpress, WordPress, the Astra theme, Elementor and free Images. I always want to give the viewers the best! Well, The Astra Theme is one of the best themes there is. In this video I will walk you through all the steps that enable you to create a professional website!<\/p>\n\n\n\n<p>Hi guys, my name is Ferdy and in this video I will show you step by step how you can create an amazing website using free tools. Like WordPress. Like the page builder called Elementor. Like the Astra theme. Free images and more. Let me show you what we are going to cover in this tutorial. We will create an amazing website using an intuitive header with a logo and a menu. Below that people will see who we are, what we offer and how they can take action. And I will show you step by step how to create this page from scratch using Elementor: The best free page builder for WordPress. We will also import remade templates and adjust them to our wishes. So we can save a ton of time. We can use templates from Elementor and from my free template library. And of course we will optimize our website for all devices and fro Search Engines. Besides that we will create blog posts, portfolio items, sidebar widgets, footer widgets and make use of free plugins. And if you take a look at the comments people seem to love those tutorials. So when you watch this video and you apply the things I show you, you will become a pro web designer and you can even do this for a living if you want to. In the description of the video you can see timestamps. So if you want to go to a certain part of the tutorial you can click on the timestamps. If I go too fast for you in the tutorial you can click on the icon here and lower the speed of the tutorial. If you like what you see so far then please like this video and feel free to subscribe for more upcoming videos about WordPress, starting your own business and hit the bell icon so you get a notification when I upload a new video. Having said that: Let\u2019s get started!<\/p>\n\n\n\n<p>The first thing we are going to do is get a domain name or web hosting, and I can provide you through my link with a 60% discount of your web hosting. After that, we will install WordPress. After that we&#8217;re going to install the free Astra theme and the free page builder called Elementor and when we&#8217;ve done that, we will create an amazing website. So without further ado let&#8217;s get started!<\/p>\n\n\n\n<p>If you have web hosting already, that&#8217;s great then you can skip the next part. If not, you can follow along. So what are domain names and web hosting and why do we need it? If I go to &#8216;facebook.com&#8217;, you see a nice address over here &#8216;facebook.com&#8217; &#8211; that is the domain &#8211; and what you see over here is the web hosting. So how does it work? Web hosting is a really fast computer that is turned on 24\/7. That computer stores all of your images, all the text and the whole structure of your website &#8211; all the plugins, WordPress, everything. So if Facebook would have web hosting without a domain name, it would look like this: you see the website, but you need to fill in this address in order to go to Facebook and we should not want to remember all the numbers of all the websites we want to visit. So what is a domain name? Actually it&#8217;s a simple address that will link to the web hosting. So if I would go to Ferdycorp.com, it will link to the information of my web hosting. So that&#8217;s why you need a domain name and web hosting. So if you want to get web hosting, you can go to webhosting128.com and then you can click here to go to SiteGround, this is in my opinion the best web hosting platform there is. It is not only my opinion, there&#8217;s a big web hosting related group on Facebook, and every year there&#8217;s a poll where people can vote for the best web hosting companies; SiteGround is number one every year. If we scroll down we see three packages: the Startup package, the GrowBig package and the GoGeek package. If you start with only one website, then the Startup package is for you. You can have one website, 10GB of web space, which is more than enough and around 10 thousands visits per month. If you want to have more websites, then you can get the GrowBig package. You pay a bit more per month and you can have unlimited websites, 20 gigabyte of web space and, 25 thousand visits per month. So if you would go for GrowBig, you can get five different domains and you still pay only this amount per month, and besides that you need to pay for the individual domains, but it can save you a lot of money if you have a lot of websites.<\/p>\n\n\n\n<p>If things are going really well, you get more visitors and then you can always upgrade to GoGeek and I hope this happens for you because that means that you have a lot of visitors and a lot of business. I will start with only one website, you can always upgrade later. So I click on StartUp &gt; get plan. Now we can register a new domain name. If you already have a domain name, you can click over here and fill in the domain name. And if you don&#8217;t have a domain name, you can click on register a new domain name. So I can fill that in over here, and over here I can choose the extension. This is Dutch but I want to have dot com but you see there are a lot of options. I choose dot com and if I would say, I want to have facebook.com and I click on proceed, it says error you have chosen an invalid domain name. Why is that? Because facebook.com is already in use. So you need to have a domain name that is still available. And I was thinking, for the sake of the tutorial, normally I say Elementor Astra, but maybe I can do &#8220;Elementoire&#8221; &#8211; a little bit French. Let me see if that&#8217;s still available. Proceed and elementoire.com is available for registration with your hosting account. So choose a domain name that is still available. I need to fill in some information: account information, my email address: elementoire@ferdykorpshoek.com. Then I need to create a password, and of course you need to remember it. Where are you from? I&#8217;m from the Netherlands. My first name, my last name, my company is Ferdy and Anna Media and since I&#8217;m from outside of the USA, I have the VAT registration number. If you don&#8217;t see that, you can skip it. If you have this, you can fill it in if you have a company and then the VAT amount will be subtracted from the total amount so you pay less. So I place mine here then my city is Maassluis, this is my street address in the Netherlands and here is my zip code. There can be no space over here and my phone number. Then I scroll down and I can pay with my credit card or with IDEAL. So depending on the country where you&#8217;re from, there are local payment options or Global payment options and I like to use credit card. So I fill in my details over here and then I scroll down to the purchase information. Here is our plan, we chose a StartUp plan, you can change there but I still want to choose StartUp. The data center is in Amsterdam because I&#8217;m from the Netherlands but my audience is the USA. So I can choose USA and it actually does not matter that much but I rather have something in the USA if I want my visitors to come from the USA. So if you&#8217;re from Europe, then you could say Amsterdam, if you&#8217;re from Asia you could say Singapore, but it does not matter that much. The period, 12 months, 24 or 36 &#8211; the longer the period the more discount you get. But I think 12 months is fine. I scroll down, and I don&#8217;t want to have a SiteGround Scanner, but what I do want to have is the domain privacy and why is that? If you don&#8217;t check this, the whole world can see the email address you have used to sign up for this account and then a lot of companies will spam you with hey do you want a logo? Do you want me to make your website? So I don&#8217;t want that, so I just check this and it will save me a lot of spam emails. So I scroll down and the total amount is 73.05 euros. If you&#8217;re from somewhere else, you could see dollars but there&#8217;s not much difference in the price. Then I need to confirm that I&#8217;ve read and agree to the SiteGround Terms of Service and Privacy Policy and you can choose to get news and special offers by email. I want to say that if you buy this through my affiliate link, then you don&#8217;t pay more but I get a commission. So thank you for that. I click on Pay Now and it says your order was successfully submitted. And the great thing SiteGround is that your website is live immediately. With other web hosting companies, I&#8217;ve not seen that and I had to wait for two hours or sometimes for 48 hours but right now with SiteGround, we are live. Now we have our domain name and web hosting. Let&#8217;s install WordPress.<\/p>\n\n\n\n<p>So I click on proceed to the customer area and then we see this over here. We can set up our website. So I click on Start a new website. We want it to be made with WordPress and then we need to fill in some information over here about some wordpress login details. What is your admin email? I also would like to say elementoire@korpershoek.com. Your username, you need to remind it because you need it to login into your WordPress website. I&#8217;d like to say FerdyKorp and my password&#8230; I scroll down and I click on confirm. I don&#8217;t want to add the SiteGround scanner, I click on confirm and I confirm one more time everything and I click on complete setup. And then it says it is processing your setup. So right now our WordPress website is being installed, and this can take a few seconds. Now it says, &#8220;Your hosting account is ready to use.&#8221; So I click on proceed to the customer area. Now we need to go to my accounts over here and then over here, we see our website, and at the right there is a green button and I can click on, &#8220;Go to the admin panel,&#8221; and there it is. Now we can login at elementoire.com, so I bought this a few minutes ago and right now we are live and that is really amazing. We have installed WordPress, now let&#8217;s configure our website. So my login name is FerdyKorp and I&#8217;ve chosen my own password and I click on remember me for the next time and I click on login, I can save my password and there&#8217;s a wordpress starter and I don&#8217;t need that, so I scroll down and I click on exit. So this is the back end of your website. What does it mean? This area in your website, the back end, is only visible for you because you are the owner of the website. But if I click over here, on my blog then we go to the website. Everybody at this moment that goes to elementoire.com will see this and let me tell you, in my opinion this is really ugly. I don&#8217;t know why WordPress does it, but this looks nothing like a beautiful website. So we are going to do that, but first I want to go to the backend and show you a few things. We can go there by clicking here, or clicking on the dashboard. By the way, this bar over here is only visible when you are logged in. So when you get visitors, they will not see this upper bar over here.<\/p>\n\n\n\n<p>So over here, we have the dashboard and here at the left we have a lot of information. We can go to the blog posts; we can add images; we can create pages; we can change the look and feel of our website using different themes; we can add plugins, add users and there are so much more, and through this tutorial I will tell you more and more about this. Well, what I want to do first: I like to keep things clean. Right now, I think it&#8217;s a little bit of a mess. What is this? I don&#8217;t want that. I will clean up the place a bit. So first I will remove this area by clicking here &#8211; don&#8217;t show this again. Then I want to go to plugins and I want to remove everything. So I select this area over here, and if I do that, I select all the plugins or you can select them individually like this and I want to deactivate them. So I click on Bulk Actions &gt; Deactivate, and I will deactivate all the selected plugins. I click on apply and then I check this again, bulk actions &gt; delete and I click on apply. Now I delete those two plugins, then I go to the dashboard and I dismiss this message, I dismiss this area, I collapse this and this and then this one and this one, and now this looks clean in my opinion. What I see over here is &#8220;Howdy Ferdy Korp&#8221;; this is my login name, I want to change it to my real name. So I click on Edit My Profile, and here you can change a few things. You can change the look and feel of the backend but only you will see, but I like the default one. I can scroll down, here is my username. I cannot change that but I can add my first name which is Ferdy and my last name which is Korpershoek and my nickname, that&#8217;s still this one, but I don&#8217;t want to be displayed as Ferdy Korp, like this blog has been written by Ferdy Korp, but I want to display my full name to the audience. So I say Ferdy Korpershoek and now we see over here Howdy Ferdy Korpershoek. I can change my email if I want to and I can scroll down and I can say something about myself, I can change my profile picture by creating a Gravatar accounts. I have tutorial about that, you can find it over here but it&#8217;s really easy to do at this moment. It&#8217;s ok with me, I can generate a new password and I can update my profile over here.<\/p>\n\n\n\n<p>What I want to do now? Over here you see my blog. There is the title of our website. I want to change it. So I go to Settings &gt; General and then the site title is My Blog and I want to change it. I want to create a website about Photography, Videography and Web Design. That is what I want to offer to the visitors of my website as a service. So I can create a site title with my name, my company name is Ferdy Korp Media and after that I could say: Photography, Film and Web Design; but, Google takes a look at everything that&#8217;s at the very left. So if people don&#8217;t know me and they search for a photographer, they will not search for me but they will search for a photography. So what I like to do, I like to put some keywords here at the left and after that, the name of my business. Like this&#8230; So place here at the left where you want to be found on &#8211; photography film and web design &#8211; and after that, you can have your own name. Also here at FerdyKorp.com, the first thing is: learn how to create a website. If people search for that, then the chances are bigger that they find me. But they will not find me if they don&#8217;t know me, and they search for learn how to create a website and I have Ferdy Korp over here. So then there&#8217;s a tagline and it says in a few words explain what this site is about. We offer a three-in-one solution to help you to be found on the Internet. Maybe it&#8217;s a little bit long but you can do whatever you want to do over here, say something about your business.<\/p>\n\n\n\n<p>Our website is safe already and using SiteGround, that&#8217;s a free option. So, you can have a secure layer over here and that is amazing. So I scroll down, and in Europe you don&#8217;t say March the 5th, 2019 but you say the 5th of March 2019. So if I want to change that, I can do it like this. The fifth of the third month like this, or I can do a custom one and I copy this and I do the J first, then the F and then it says 5 March, 2019 and I&#8217;m removed comma J F Y and then it says 5 March 2019. If I&#8217;m English, I should stick with this but if you&#8217;re from somewhere else and you use a different type, you can change it here. The time I like to use, 24 hours in a day so I like to use this one, and the week starts on Monday. I save the changes, then I go to permalinks and if we have a blog post that says, &#8220;Hi! How are you?&#8221; At this moment it would say Elementoire.com\/2019\/03\/05, hi! how are you?<\/p>\n\n\n\n<p>I want to remove this area. I don&#8217;t need it. Google doesn&#8217;t like it. This is also really bad. So what I like to do is, post name. So it will say Elementoir.com\/hi-how-are-you. So that keeps everything clean and Google really likes it. Save the changes. Okay!<\/p>\n\n\n\n<p>So if we take a look at our website, it still looks really weird. So we are going to change that. How can we do that? I go to the Dashboard and what I want to do? I want to add a few pages. So I go to pages and I click on: Add New. You can also do it by hovering over here, New and then Page. It&#8217;s both the same. I remove this and I will create a title. Well, what kind of page do I want to have on my website, of course the home page. What I need to do, I need to publish it by clicking on this blue button and then I need to click on publish again. So I click over here, and now we&#8217;ve created our first page.<\/p>\n\n\n\n<p>We can view it over here, but we can also create a second page. So hover over new page, now what else do I want to show on my website? I want to say something about myself or about my company. So I can say about or about me, or About Us. I&#8217;d rather say About. I click on Publish. I will edit nothing. I only will publish it. What else, the home page and the About page and I want to talk about my services. So I hover over new page and I say services, publish and publish and I have three services I want to offer. So I want to create a page for each service. I hover over new page, the first one is photography, publish; the second one is film or a Videography. I call it film, publish and publish. The third one is Web Design.<\/p>\n\n\n\n<p>So you can think of what kind of pages you want to have in your website. I like to think about having a home page, saying something about myself or about my company, showing the services I offer &#8211; maybe it&#8217;s one service or more services, in my case: photography, film and web design. Then I want to show a portfolio, showcase what I&#8217;ve done already so that the visitors can see hey! what he&#8217;s doing is really great. You can have a blog page and share information about the service you offer or about related information and then I would like to have a contact page, so that people can get in contact with me. So first web design &gt; publish &gt; publish.<\/p>\n\n\n\n<p>Then I want to create a portfolio page. Portfolio &gt; Publish &gt; Publish. New page, blog page, publish and publish. New page and then the contact page. I publish it and I publish it again. So if I go to the home page, I don&#8217;t see those pages, so how can I get them in the website? Then I need to go to the back end. I can hover over here and I can go to menus or I go to the Dashboard &gt; Appearance &gt; Menus. Now I can create a menu, and use the pages we have just created. So the menu name, it can be anything you like, because nobody will see it. It can be Uncle Jim and as long as you know that Uncle Jim is the main menu, it&#8217;s okay. I rather call this main_menu and then I create the menu. So this our menu over here. What we can do now? We can add menu items here at the left. We can add pages, posts, custom links and categories.<\/p>\n\n\n\n<p>So over here are the pages we have created. I can view them all and I want to select all the pages. I add them to the menu and there they are. And you see everywhere it&#8217;s called page except over here; here it is called home. But we also have our home page over here, so I don&#8217;t need this one. So I click over here, I remove it and I save the menu. So if I take a look at the website, holding command on the Mac or CTRL C and clicking over here, still nothing. We need to assign this menu to a certain place in the website and every theme has a different place and this theme&#8217;s display location is here below. I like to have the primary area. Save the menu. Refresh the page and now it is over here.<\/p>\n\n\n\n<p>I don&#8217;t like the order. We can change that. How can we do? I can just click here and hold my mouse clicked and I drag it here above. Home | About | Services |. The services are Photography, Film and Web design. Then we have the portfolio blog and contacts. If I go to apple.com, they spent millions in optimizing their website. So over here, you see a logo and the menu and if you click on iPhone, you want to go back to the home page there&#8217;s no home text. You need to click on the logo. So I want to do the same. I don&#8217;t need the home page area in the menu. So I remove it. So it is about services, photography, film, web design etc. But what I would like to do is I want to create a submenu.<\/p>\n\n\n\n<p>So below services, I want a photography, film, and web design. Right now, you see them all next to each other. How can we do that? Simply click over here and drag it to the right until you see this step over here. Now if I release it, it is a sub-item of services. The same I can do for film. Drag it to the right and I can even take it a step further. I can also create a sub item of a sub item. So if I go to the right even more, now, web design is a sub item of film. So if I save the menu and I refresh the page, you see services, photography, film and then here another tab and that means that this is a sub item of film. So if I drag it to the left again, not too much, save it. We have a sub menu over here. So I like that. If I click over here on the logo, or on the text you see nothing found, ready to publish your first post. Why is that? Because by default, WordPress has said that the homepage should show the latest blog post. We don&#8217;t have any blog post and that&#8217;s why you see &#8220;nothing found.&#8221; How can we change this? Go to the back end, to settings &gt; reading, and here it says your home page displays your latest posts. I rather show a static page. So I select this over here, and the home page is home and the post page is blog. I scroll down, I save the changes and now if I click over here, we see home and we can edit it and you see all the stuff over here. So at this moment, it looks really ugly; how can we change that?<\/p>\n\n\n\n<p>As you see over here, we have the title; the subtitle; we have our menu; title of the home page and some widgets. Well this information can stay the same, but we can change the look and feel, and that&#8217;s the power of WordPress. We can use a different theme. So if I go to the backend and I go to Appearance &gt; Themes. You see that right now the theme is 2019. But we have also a different themes we can choose. So here we&#8217;re 2017 and if I activate it, it means that all the information on the website will stay the same but the look and feel will change. So right now, this one is active. So if I refresh the page, we see the title, we see the subtitle, we see the menu, we see the homepage title but it looks totally different. So this is our submenu. So again, I can also say I want to activate 2016, refresh and now the same information but a different look and feel. Well I don&#8217;t really like those themes, but there is a theme I really like. So we are going to get it. It&#8217;s the Astra theme; it&#8217;s free. And if you want to get it, you can go to FerdyKorp.com, then you hover over tutorials and go to Astra Elementor. I click on it, I scroll down a bit and then over here at the links, I search for get the free Astra theme and I click on it. Okay, we click on download now, and I scroll down and what you see is a few Pro versions, but we are going for the free version. If you can&#8217;t find it over here, you can scroll down and over here &#8211; &#8220;can&#8217;t decide which plan is right for you; download the free Astra Theme.&#8221; What you can do, you can leave your name Ferdy, my email address elementoire@ferdykorpershoek.com, and then you can subscribe and download or you can say, &#8220;No thanks, I just want to download Astra.&#8221; But if you do this, you get updates about sales and all that stuff because there&#8217;s a pro version. I have a lot tutorials about it if you go to YouTube and search for &#8220;Ferdy complete Astra tutorial for the free theme,&#8221; but I have Astra theme tutorials. It&#8217;s a full playlist with all the pro functionalities. But with the free version, there&#8217;s also a lot possible. So I close this and if you don&#8217;t want to do all that, then can go to the Backend &gt; themes. So if you&#8217;re here at the dashboard: appearance &gt; themes (I close this) &gt; add new, and then you can also search for Astra. I click on install and I activate it. Now if i refresh the page, it starts to look a little bit better. Since we&#8217;re downloading stuff, let&#8217;s go and get Elementor. We can go to FerdyKorp.com and then again go to: tutorials &gt; Astra Elementor. Scroll down and click on &#8220;Get Elementor.&#8221; And also here we can have a free download, my email address: <br>elementoire@ferdykorpershoek.com. But also here I can say, no thanks, I just want to download it, or here you can go to the backend &gt; dashboard to plugins &gt; add new and search for elementor and there it is. More than 2 million installs. It&#8217;s crazy what&#8217;s going on with this page builder. It&#8217;s only two years old and it&#8217;s taking over the WordPress world. It&#8217;s amazing. Install now and activate it. So now we&#8217;ve installed the Astra theme and Elementor; let&#8217;s create an amazing website.<\/p>\n\n\n\n<p>So I see this message over here and you can watch this video, but I want to close this and I want to collapse this and I take a look over here, I can remove that, I can close this and this is how our website looks and this is how our back-end looks. What I want to do now? I want to go to the website and I want to configure the Astra Theme. I can do that through the customize options. So I click over here and now we can configure this. It looks a little bit weird and we can make it look better. If you want to use the same images, I use in the tutorial then you can go to FerdyKorp.com, then you hover over tutorials and you go to Astra Elementor. I click on it. I scroll down a bit and over here download the images I use in the tutorial. So I open them and I drag them to the desktop. Now I close this and I&#8217;m here at the customized options and the first thing I want to do, I want to get rid of this big text and replace it with my logo. So I go to: layout &gt; header &gt; site identity, and here I can upload a logo. So I select my logo and here I can select files. Then I go to my computer &gt; images tutorial &gt; number 6 and here is my logo, FerdyKorp logo. I open it and I can optimize it. I can change the title, create a space over here, remove logo, copy the title and paste it here at the alt text and then I can select it. I can crop the image but I don&#8217;t want that, so I click on skip cropping and there it is. So now we have the logo here and the text over here, I will get rid of this in a minute. But I can also upload a different logo for the retina device. So I check that, select an image, upload files, select files and I can go for this logo and it is twice as big. You see this higher quality. I open it and it will look much better on a Retina screen. Again, remove this, copy and paste. Like that. Now it looks really great. You also can have a different logo for a mobile device, but I don&#8217;t want that.<\/p>\n\n\n\n<p>So, I scroll down and before I change the logo width, I want to get rid of this site title text. So I uncheck this and this looks much better. I think it&#8217;s a little bit too big, so how can I fix that? I can change the logo width over here. Let&#8217;s see. Maybe 160 that looks great in my opinion and then I can scroll down, and I can have a site icon. At this moment you see this as an icon. If I go to Apple.com &#8211; you see an apple over here. I want to have the initials of my logo over here. So I go over here to the site icon and I click on select image &gt; upload files &gt; select files and here it is: the favicon. It needs to be a square image &#8211; 300 by 300 &#8211; and it should be at least 16 by 16 pixels. If you open it and your image is not square, you can crop it. I don&#8217;t have to optimize this, so I click on select and if your image is not square you can make it square over here. I skip the cropping and now we see it over here which looks amazing. Okay, I publish it and I&#8217;m happy. What I want to do? This is in capitals, I want this also to be in capitals. If you go back you see that you can have more options with Astra Pro and then you can make this capitals, but you can also do it a different way. I go to the dashboard, to appearance &gt; menus and then over here I can click on this arrow down and I can change the navigation label. So here I could say: about me. If I save it, and I go to the website, it says about me but when I click on it, here you see about and here you see about. So what it says, if I go back to menus and I open it, you can change the navigation label and that will only be changed in the menu. So you can put whatever you want over here.I like it to be in capitals, so I say about in capitals, and I will do that with everything. And I will fast forward. Okay! Like this; I save it. And if I take a look at the website, now everything is in capitals and I like it very much.<\/p>\n\n\n\n<p>I go back to the customize options and I close it and I click on customize again, so it will be with the new menu with all the capitals and we can go to layout again: Header &gt; primary Header. And here we can change the layout of the Header. So here you see the header layout. Right now, we have the logo at the left and the menu at the right. We can change it, have the logo in the center like this or at the right. Well, this is okay with me, but this one is for me, a no go. Why? Because almost every website in the world has a logo at the left and the menu at the right. So why should you change it? If you do that there&#8217;s a chance visitors get confused. So I would say logo at the left, menu at the right.<\/p>\n\n\n\n<p>Sometimes, people say to me I want a website that is unique and then I like to say, &#8220;No, you don&#8217;t want that; you want a website that&#8217;s intuitive.&#8221; You don&#8217;t want to lose customers because they get confused because of your website. So logo at the left, menu at the right. We can also disable this menu over here if we want to. We can also have a last item in the menu. So search icon or a button. So if you have a non-profit, you could say: Donate, and give it some more attention by using those colors. Then if we go back, and back, and back here at buttons, we can change those colors as far as I know. So if I change this to red, it becomes red. So there I can style the button. I go back, I go back, and I go to Layout &gt; Header &gt; Primary Header. So over here last item in menu, you can have that over here and then you can choose the link over here and change the text over here. We can also have a different button style, and we can have those too. So we can click over here and then we can customize it. I don&#8217;t use it. I say none. If I don&#8217;t have a big website, I don&#8217;t use the search icon because there are only a few pages over here. Then we have the header button border, you see it over here slightly and if I would make it thicker five pixels, and I will make it blue. I want to get the color of my logo. I use the colorpick eyedropper from Google Chrome. So I grab this color, copy it escape and then I can paste it; and it&#8217;s look like that. That is quite nice. So I say two pixels.<\/p>\n\n\n\n<p>It is not possible to change the background of the menu in the free version of Astra, but it is possible to have a transparent background. I will take a look at it later in the tutorial. Then we have the header width. If I make the screen smaller, CMD -, or CTRL &#8211; on the PC, you see my logo starts here at the left and the menu ends here at the right. If I would change the content width to full width, it will be totally at the left over here and totally at the right. So no matter how big or how small your screen is, the logo will stay totally at the left and the menu at the right. I don&#8217;t like that. So I bring it back to content width. Then we are talking about the submenu over here. I scroll down a bit and if I hover over here, it looks like this. Well, we can change the submenu container border. So if I would say 6, it looks like this. It&#8217;s a little bit thicker, or 4 and you can change color, so you can also say green and then if it&#8217;s green I will not use this, but if you want to, you can. And here at the right, in the bottom and at the left you can also change things, so it will look like this. We can also have an item border between those items by checking this and also we can give that a color. So if I would make it red, it looks like this. I like it to be greyish, so I go to black and then fill it with gray and I bring this back to 2, 0, 0, and 0 and that looks like that (maybe a little bit lighter) like that. Or maybe, I like the button to be also the blue color. Whatever you want, it&#8217;s all up to you. You can change.<\/p>\n\n\n\n<p>The animation right now &#8211; it fades &#8211; you can also make it slide down, or slide up. I like fade. Then we have the mobile header. If I want to see how it looks on the mobile, I can click over here on this icon and now we go to the mobile version, you see my logo over here really well and if I click here, I have the menu with a submenu. I think this area is really small to click on with your thumb. So I want to make this area bigger. How can I do that? I scroll down a bit and then we see menu label on small device. So I say in capitals: MENU. What you see over here is that the area to click on the menu is bigger. So if you have a thick thumb, it is better. Then I go over here again, so I publish it and I go to elementoire.com. So over here at the menu breakpoint &#8211; what does it mean? When should this menu change from this menu to a mobile menu or a hamburger menu. If I make this smaller &#8211; let me see &#8211; this is the normal menu. And now over here, it becomes this menu. So this over here right now is the breakpoint. So right now you see the menu, but if I will make this 500 for instance, publish &gt; refresh, then it&#8217;s like this. And if I make it smaller, that means that this is 500 pixels.<\/p>\n\n\n\n<p>Well, I want it to be bigger. So maybe I can say 800 publish &gt; refresh. If we make it bigger, this is the breaking point. Well I think Astra knows what they are doing, so I reset it and I think it&#8217;s okay. Then we have to drop down targets for the mobile so I go back over here, drop down target, I skip that it&#8217;s actually both the same as far as I know. The toggle button style, at this moment it look like this, you can also say outline and there&#8217;s a border like this, but what I like is a fill and then I like to have the color of the logo like that. It&#8217;s the same now. So I prefer that one, you can choose a different one. We can also have a border radius. I bring it back; right now you see at the left &#8211; a logo, and at the right &#8211; menu. You can also stack it upon each other like this. So whatever you like; I like it this way. The great thing is the logo adjust automatically. So if I&#8217;ll make this longer, this will adjust automatically. I really like that. You know what, I think this is a little bit too overwhelming. So I can say minimal&#8230; like that.<\/p>\n\n\n\n<p>Okay! that&#8217;s perfect! I click on publish, and I go back and I go back. And we have more layout options, for instance: the blog page, sidebars, footer. But since we will take a look at the blog page later, I will skip that for now. If I take a look at the sidebar, by default we have here at the right sidebar and I don&#8217;t want that. So I say no sidebar and we&#8217;ll take a look at that later. I go back. I do want to take a look at the footer area and we have footer widgets. In the free version of Astra you can have four footer widgets; you can have a facebook live box; you can have a menu overview; you get the most recent blog posts; most recent comments; you can show your Instagram feed. There&#8217;s a lot you can do. We&#8217;ll take a look at that later. For now, I will disable this and I go back to the footer bar. So here we see this text and section one is this area over here. Section one custom text, we can change that. I want to remove the copyright&#8230; and the site title and I can say FerdyKorp Media and then I could say disclaimer or privacy policy. You can make this link. How can you do that? I copy the text. I go to new page, and I create a page called disclaimer. Publish, Publish; and I start typing disclaimer. Then I select it, and I want to make this a link and it is \/disclaimer &gt; Enter. I click on this icon and I can say open it in a new tab. Now I hover over here and I click on it and I click on the three points and I say edit as HTML. Then I remove this area and this area and I copy this, and this is a link. So if I go back over here, and I paste it that means that this over here is a link. You see it at the pointer, it looks different. You can click on it. We also can have a second section footer menu custom text or a widget, so if I would say custom text, we have two texts over here and we can change it from stacked upon each other to left and right. Well, I don&#8217;t need a second area so I just leave it at one and I say none. So it looks like that. Footer bar width, you can also have it full width but it&#8217;s not necessary because everything is centered at this moment. Footer top bar, again you can make it thicker, give it a different color; if you want to see it just do a color like that and there you see it. I bring it back to two and it&#8217;s okay with me. I go back and I go back and I want to take a look at a few colors. So I go to colors and backgrounds. Well first, the base colors. Again, I need to copy the color of my logo, copy or you go images &gt; tutorial &gt; miscellaneous color codes. I use those colors. So blue is this one. I want the link color to be the same. The text color, I want it to be 444444, it&#8217;s not too black but it is really dark. And the link hover color, I want it to be the color of my logo again. We can change the background color, but I suggest you do not do that. It looks a little bit weird. I think it looks better when everything is white in the background. And here again, why should you do something totally different. There&#8217;s a big chance it will be a distraction. You can also have an image in the background but I will not do that if I were you. I go back and I go to the footer bar and there&#8217;s some background color over here and I want to have something dark blue. I paste my color, my logo and then I make it more blue. Yes I like that.<\/p>\n\n\n\n<p>What we can do now? The text color &#8211; we can make it white. It&#8217;s already quite white and then the link color we can make it something different. So now it&#8217;s green. So let me see, what can you do? You can also make it a little bit darker but that looks a little bit weird. So I think this color should stand out so maybe green is an option like that. Why not? When we hover over it, you can change the color to red for instance and then it becomes red. So I prefer to make it different &#8211; blue, green a little bit lighter. Like that. Or the other way around, and then this one darker like that.<\/p>\n\n\n\n<p>You can also have a background image in the footer. Okay! well, we can take a look at a lot of more things: typography, buttons &#8211; you can edit the button if you have one over here. The menu, well! we&#8217;ve discussed this already. Here you see photography, film, web design and over here you can switch that and then this film, photography and web design. So you can play around with that if you want to change that over here.<\/p>\n\n\n\n<p>You can also add more items, posts, categories, texts and formats but I leave it as it is. Okay! I go back and I go back. We&#8217;ll take a look at the widget later. The home page settings &#8211; we&#8217;ve discussed this already &#8211; a static page, the home page is home the post page is blog. And we also can take a look at custom additional CSS. I click on publish. I go to the home page and visit site and this is how it looks. So I want to take a look at one more thing, one important thing. I go back and I go to layout, container. This is really important. If I make screen smaller, I can change that container width. So if I would drag it to the right and I release it, you see it becomes wider and if I drag it to the left, it becomes smaller. I say CMD or CTRL &#8211; (minus) to bring it to the 100% width and I like it to be 1140. I think that&#8217;s great. Then width of the default container and right now it says content box. And how will that look, that means that there is an area around this box.<\/p>\n\n\n\n<p>I can also say boxed. I&#8217;ll take a look at it later, because it has everything to do with the size of our widgets, so right now I will leave it but you see it is in a box. I can also say full width contained, that means that the whole background is white even if I make it smaller. But the text, the title and all the information of the website will be contained from here until here. But if I would say full width &#8211; stretched, that means that it starts here at the left and here at the right. So if I make the screen even smaller, it will stay totally at the left and the text will be spread all over the website. Well, I don&#8217;t like that. So I say full width but contained. You can change it for every page. So at the container blog posts, I can say I wanted to be boxed and the blog archives also boxed or content boxed. I will take a look at this later. I click on publish and then I refresh the page and now it looks like this. So that looks nice. For a free theme, I think this looks really beautiful and what I can do now, I can edit the page. I close this and I can edit it with Elementor. So if I click over here, Elementor will be loaded. If this is not the case with you, you can go back over here, exit to the dashboard and I&#8217;ll go to Elementor &gt; Settings and then at Advanced, you can switch the editor loader method to enable and that should fix it. I save the changes, I go to the website in the new tab holding command or control on a PC. So here we are at the home page and I can edit it with Elementor again. What I wanted to show you in the beginning. iIf I click on the plus over here and I click over here, you see three icons over here and if I hover over here, nothing happens. If we want to have more options, I need to do a right mouse click and then I can duplicate it, add a new column and also here right mouse click and I can do more things. But I want to work efficiently. So I go back to the elementor settings. So here, Elementor settings advanced and here at editing handles, I want to change it from hide to show and it says show editing handles when hovering over the element edit button, so I save the changes so when I hover over here I see nothing but when I refresh the website, CMD+R on the Mac, f5 on a PC. New area like this; now when I hover over here, I see those options. Now also here, I can duplicate it. So I close it, but that&#8217;s how you can work more efficiently.<\/p>\n\n\n\n<p>So finally guys we arrived at Elementor. What is Elementor? Elementor is free page builder that enables you to create a beautiful website and to optimize for all devices.<\/p>\n\n\n\n<p>So let me show you how it works. We have nothing, so if I update the website and I click on this &#8216;I&#8217;, I can preview the change over here. So what you see we have exactly nothing over here. I will close this. So how can we create something. We can do two things, over here we can click on the plus, if I do that, I can select the structure and if I would choose this one, you see this blue outline that means that this is a section. So Elementor has three parts. We work with sections. In those sections, we have columns and in those columns, we have elements. So let me show you, at this moment we have chosen a section with one column and the section area is blue and the column area is gray. So there is a column in the section with what I also can say, I want to have two columns so I duplicate it in one section or three columns. I can also change the sizes and in those columns, I can add elements. So if I click on this icon over here, I go to all the elements. There are three elements there are general elements. There are WordPress elements and if you get the pro version, you have Pro elements. If you get Astra ultimate adults, you also have more elements. We have also more free elements &#8211; we&#8217;ll take a look at it later. What I can do now, I can drag elements in those columns as you see. I go back and I can drag something else in it: a button. I can drag it here above or here below. So it is just drag and drop.<\/p>\n\n\n\n<p>One more &#8211; Google Maps. Over here, I drag it and there it is. If I would update it, it will renew the page automatically and now you see this. So that&#8217;s in a nutshell what you can do. And all sections, all columns, and all elements are configurable. So if I close this, and I open a new one and I want to have three colors, I click over here. I have one section with three columns. At this moment, since I selected the blue area, I can edit the section. First, we have layout, so I can stretch the section. I can change the height so I can make it minimum height or fit to the screen. I like the minimum height. I can go to the style tab and here I can change the colors, the background. So I can change the background to a certain color, or I can use an image or I can have a gradient. So from dark blue to this, or we can have a video in the background. So there are a lot of options and then we have advanced. Here we can take a look at margin and padding, and the great thing is everywhere where you see this icon, you can change the settings for every device; for a tablet or for a smartphone.<\/p>\n\n\n\n<p>So we can make our website pixel-perfect on any device and that&#8217;s the big power of Elementor and one other great thing is that this is all free. You can upgrade to Elementor Pro which gives you even more options but in this video, we will focus on all the free features of WordPress Elementor and the Astra theme. So right now I&#8217;ve done something over here with the section settings, now I can go to the column settings. So if I click over here, I have the column settings and again I have layout, I can change the percentage. So I can make it smaller or bigger, I can let things aligned. I can go to the style and also here I can say I want to have a background that is white. Well we don&#8217;t see it yet, why is that? Because we don&#8217;t have an element in it. If I want to go to the elements, I click over here and now if I would drag a heading over here, you see the background is white. So now since we have dropped a heading over here, we see the heading settings and here you have content, style and advanced.<\/p>\n\n\n\n<p>At the content, I can change the content so I can change the text. I can say &#8220;Hi! there.&#8221; I can add a link to the text. I can change the size. I can change the HTML text, I can bring it to the center. Then at style, I can change the color, the typography; I can change the style how it will look. And then at advanced, again, we can use the margin, the padding. So if I want to change the padding of the column, I hover over here. I click on the grey column. I go to advanced and I say margin 50. Margin is everything outside of this area and padding is everything within the area.<\/p>\n\n\n\n<p>I&#8217;ll take a look at this later, but that&#8217;s how the structure works. We will create a page from scratch but what I also want to show you, if you click over here you can make use of pre-made pages, pre-made blocks and it will save you a lot of time. So if I see something I like, I can insert it. Now we have this in a few clicks and if I want to change something, I click over here, I want to go to the section settings, style, we see color one, I want to change it to dark blue, the color two. I want to change to be a little bit purpleish. So that&#8217;s how easy you can change things. Then I can click over here, then I select this text. I can say Ferdy Korp media, so again here at content we can change the text. Here at style, we can change the style. So maybe I want to have a shadow. I click over here. I want to increase the shadow a bit, so you can see it better. Blur it a bit more, this is weird. And if you see something like this, it&#8217;s loading again. You can change it, so that&#8217;s how easy everything is. You can change the color of the shadow and here I think I want to have a different style. I click over here, I go to the style of the button and it&#8217;s all easy. The button, the typography &#8211; maybe I want to make the size bigger. Maybe I want it to be upper case. So I go to Transform &gt; Upper case. I close this. I want to change the text color. Maybe I want to make it white because I want to have a light background. So I choose white over here and then I go to the background color and I can make it black. When I hover over it, it looks like and I can change that also if I want to. So that&#8217;s another option. If you want to make a website really fast without learning how to do everything from scratch then you can go to Youtube and you can search for Ferdy Elementor One hour 2019 &#8211; that should bring my video. Yeah. I uploaded it two days ago and there I will show you how you can do it within one hour. But in this video, we will start from scratch.<\/p>\n\n\n\n<p>So I close this, close this and close this, close this etc. And now we can start from scratch. Well, there are so many things I want to tell you at the same time because there are so many great features about Elementor. But I will show you everything step by step. So, before we start, if I would go to buttons and I drag it over here, and I go to style and at the text color &#8211; I can choose a color over here. But here you see also a few colors and I want to add some colors that I want to use a lot, so I can save some time. How can I do that? Then I click over here then I go to default colors. What is my primary color? Well you can find it in my images tutorial folder at miscellaneous and then here you see color codes and I want to use the blue color as my main color. It&#8217;s the same color I use in my logo. I click over here and I paste it. For the text I want to use 444444. So it&#8217;s not black, it&#8217;s a little bit lighter and the accent &#8211; I also want it to be blue. The secondary color, I also want it to be blue. So it looked like that, then I click on apply. I go back over here and then default funds we&#8217;ll take a look at it later when we have some funds over here. I click on the color picker and this is what I was talking about. We have black, we have white, then I want to have my main primary color and then I want to have this green color which I can find again over here &#8211; color codes. Green and then the in-between color and then I would like to have 44444 again. And then those two, I keep them white because I will not use them.<\/p>\n\n\n\n<p>Apply &#8211; so now I click over here. I go to text color and I can choose the colors, black, white and blue color and green color. My in-between color, so that&#8217;s how it works. I close this and now we are going to start creating our website. Well, if you create a home page, keep in mind that the first impression of your website can make it or break it. So the first impression of a visitor on your website should be amazing, because maybe there&#8217;s a person that wants to pay you thousands of dollars for a service you offer. But if they see your website and they are like, &#8220;what is this and what is this about?&#8221; you can lose them. So what I like to do; when visitors visit my websites, I want them to know who we are; what we can do for them and how they can get in contact with us. So how would I like to do that. I click over here and I want to start with an area. It&#8217;s called a hero and I start with a section. I want to stretch the section, so the background will be totally from the left of the website until right and then I want to height to be minimum height of 400. Let&#8217;s start with that. Then I go to style and I want to have a gradient overlay. So the first color is my blue color and then the second color can be my lighter color. Or, I make it a bit darker. That&#8217;s what I prefer slightly like this. I can change location. I can change the type from linear to radial. Maybe I like this and if you would say linear, you can also change the angle. So maybe 135, like that from left above to the right button.<\/p>\n\n\n\n<p>What I would also like is a background overlay. So I want to use an image in the website. Well, you can do two things; you can go to istockphoto.com; you can buy images for maybe 30 dollars. So if I would search for City, I like city images. So maybe you&#8217;re operating from New York. You can find this image and you can use it in your website. Maybe you&#8217;re like &#8211; why should you do that? That&#8217;s so expensive. Keep in mind that this can make or break the first impression of your website. So I have this image, I like to use it in my tutorials because I think it has a professional look, or this one. And if you want to have something else, Sahara, you can find high quality images. If you don&#8217;t want to pay, you can go to pixabay.com or unsplash.com or pexels.com &#8211; a lot of these websites have the same images. You even have video if you want to add it and you can see that the quality here is also really nice. I like PixaBay the most. So I can search here for city or computer, and then you can find some amazing things. So maybe this one. I click on it. I can donate some money but I can also have a free download and I want to go for the resolution 1920&#215;1386 &gt; download, I am not a robot and download. There it is. What I like to do &#8211; I like to open it in finder and I like to rename it to FerdyKorp Media Web Design &#8211; something like that or web design, photography film. Now I go to the website; I close this and I close this and I close this. I go to Elementor. What I can do, I can go to the background overlay and there I can get an image. So I upload files &gt; select the file &gt; I go to downloads and here it is. I open it and I want to edit the image, because I want to make it smaller. Right now, it&#8217;s 1 megabyte; it is really big. I click on edit image. First, I would like to make the image smaller if that&#8217;s needed. Over here I want to have 9020, well that&#8217;s the case already. If you don&#8217;t have it, if it&#8217;s bigger you can say 1920 then scale. Well that&#8217;s scaled already, so I want to have an aspect ratio of 16:9, and now I will make a selection within the image. And you see it has the aspect ratio of 16:9, so I make it totally from the left to the right, then I select an area I like to see, and then I hit this icon and I save it. Let me update it. Let me see; I go to the library; I click over here &#8211; now it&#8217;s 500 kilobytes, which is far less. So let me see, I close this; I select it again, insert media and now I can do a few things over here. The size I can make it cover, I can change the position manually. So I can say custom and I can drag it exactly how I want it to be then I should also say over here custom. So I can change the size, I can do a lot of things but to keep it simple I have a tutorial about this. You can find it over here, how to make this pixel perfect. Right now, I want to say focus on the center of the center and make it the size cover; like that. I want to see less of the image and more of the gradient. So the opacity I change it to something like this. So you see through it, but not that good. You can do so much more: you can make it blurry; you can change the brightness; saturation. I can bring it back and then we have the blend Modes. So if I would say multiply, for instance, I make this one and then I can blend those images together. Screen, overlay, darken, lighter and then you can change the transparency and you can change the CSS filters. So you can do so much things over here. I&#8217;ll bring it back, I don&#8217;t need that. I don&#8217;t need this one. I say normal and I&#8217;ll bring back the opacity. Yeah; like that.<\/p>\n\n\n\n<p>Okay &#8211; that&#8217;s it and if I want to change something in the section I can click over here, I go to layout and there I can change everything. I want to make this a little bit higher, so I can say 500. I go over here to all the elements and I want to start with a heading. So I drag it over here and I almost do not see it. So I go to style because there we can change the style of this element, text color white. Then I go back to content and I can change the text over here. So I say Ferdy Korp or Ferdy Korp Media. I want to bring it to the center. I do not want to use a link and the HTML tag can be h2, because you can use only one h1 tag in your website and I want to save that for something else which is more important to me than Ferdy Korp Media. I go to style again and here at typography, I would like it to be in uppercase, like that.<\/p>\n\n\n\n<p>Then at the size I can make it a lot bigger, and I will take a look at the font later. I think this is okay. Then I go back to all the elements and I want to go for a divider. I drag it here below and then again when I release it, I can configure it over here. What is the style. It is solid or double, or dotted. It&#8217;s really small so you don&#8217;t see it. So if I would change the weight, you would see better. Double or dashed. I like it to be solid and let&#8217;s make this three. The color can be white. I want it to be aligned in the center, so when I make it smaller in percentage, it will align to the center and not to the left or to the right. So, I bring it to the center. I rather work with pixels because if I make my screen bigger, the size will change and I want it to be pixel perfect. So I bring it to pixels and now I can say how big I want it to be. I think this is perfect. Now I want to duplicate this area. How can I do that? Right mouse click &gt; duplicate. Or I hover over here and I click on this icon and I duplicate it. If I want to see the whole screen, I can update it and take a look over here. I close this or I can just click here and I see the result. Well, right now, I don&#8217;t see this area that good and I don&#8217;t want to drag this below this divider. So let me see, I drag it like this and then it becomes blue and I release it and that would look like that. Here, I want to talk about my services, that is Photography | Film | Web design. Well, this is way too big. So I go to style &gt; typography, and I can make this smaller. And if I want increase or decrease it by the increments of one, I can click here and press arrow down or arrow up. So let me see. I think this is perfect and this looks weird; I don&#8217;t like it. So what I can do, I can click over here at the divider. I go to advanced and add margin, I uncheck this and at the top, I want to say: &#8211; (minus). So I bring this closer to me &#8211; 25, and at the bottom I also want to say &#8211; 25 but I cannot do that. So I leave it at 0. I can also do that over here. I go to advanced, uncheck this and at the top I want to say &#8211; 25. So it&#8217;s all closer to each other. Update and now it looks like this.<\/p>\n\n\n\n<p>So, people see us FerdyKorp, the menu and FerdyKorp Media: Photography | Film | Web Design &#8211; all with free tools. I really like it. So people see who we are. They see what we offer and now I&#8217;ll want to have a call to action. So what I can do: I can go to the elements, I can go to the button and I drag it here below, and I can say, &#8220;Get in contact.&#8221; You can say &#8220;Contacts&#8221; but you also can make it an action &#8211; get in contact, instead of contacts. And if you want to link people to the contact page over here, you can say \/contacts and then Elementor and WordPress will say ok, you go to elementoire.com\/contact. So you don&#8217;t have to fill in the whole website, just forward slash and then this area. I want to bring this to the center and you can make it bigger, so that&#8217;s okay. Then we go to the style, here we can change the typography and when we hover over it, you see nothing. So I can go to hover &gt; change the background color to green, so when people hover over it, it becomes green. We can have an hover animation, so right now it only becomes green; you can also say I want it to grow like that, or to shrink. So you see how many possibilities there are. It&#8217;s amazing, we can have a border, a solid border of one pixel and it can be white. But it also can be a different color. I like it to be white, so I&#8217;ll leave it at that, and you can have a border radius. So if I click over here and I have this turned on, that means that when I increase it, it will be increased on all four sizes. So what you see when you take a look over here when I increase it, it gets more rounded edges. You can also say percentage and then you can say 25 and then it also has rounded edges. We can also give it a box shadow. There it&#8217;s a little bit vertical, make it blur a bit more, you can also say 0,0, then you see a nice shadow around it.<\/p>\n\n\n\n<p>And if I think it&#8217;s a little bit too close to this text, I can go to the advanced area of the button, uncheck this and at the top I can increase it. So that&#8217;s how it works &#8211; really nice. I go back to style, because I don&#8217;t like it. I want to remove the solid to none and I want to change the border type to none or the radius to zero and I want to get rid of the shadow. I want to keep it flat like that. What I can do now: if I want to duplicate this, I can say right mouse click &gt; duplicate. But then I see the button below &#8211; this button &#8211; I don&#8217;t want that. So first I change this to portfolio and the link will be to portfolio &gt; update. Let&#8217;s take a look, but I want this to be next to each other. How can we do that? Well over here, we click so we go to the button, I go to advanced and then add custom positioning. I can change the width from default to inline and then over here I click here and I can also go to advanced, to custom positioning and the width will be inline. So now there are next to each other, but it looks a little bit weird. How can I bring this to the center: well, then I need to go to the settings of the column, and then add horizontal align. I can bring it to the center. And there are a few different options: I can also say align with space between everything, or space around, or space evenly. If you say space evenly that means that this area has the same width as this area and this area. So if i will duplicate this, you see the space is still evenly. Well I don&#8217;t like that, so I go to the column settings and I say, again, space-between, let me see &#8211; no. Space-around &gt; no. I go for the center, but then everything is near to each other. I can remove this hovering over here like this and now I can click on portfolio and I go to advanced and then add margin, I can increase left, let&#8217;s say 10 and the same I do at get in contact &gt; advanced and then here at the right, I say 10. What else do I want to do? I want this to be the same size. How can I do that: I click over here. I go to the style and padding. I uncheck it and at the left, let me see. I increase it and now I want to check it, so how can I check this? I can click over here, go to advanced, custom positioning; I say default again, okay. So now I can take a look at it better. I go to style &gt; left = 46; at the right also and also over here, I change this to default. I get rid of the 10. Also here, I get rid of this 10, I can say CMD+++; so I see it a bit better and now over here, I go to style, I can make it 50 and 50 and then it&#8217;s perfectly aligned. So let&#8217;s do the same with top. Fifteen, maybe fifteen. I say CMD 0; sometimes it looks so complicated I try to show you as good as I can, how it works.<\/p>\n\n\n\n<p>I go back to custom positioning and I bring them both back to inline and also here advanced &gt; custom positioning &gt; inline. And then advanced &gt; left &gt; 10 and at the right = 10; update. So it looks like that. I want to change the color of &#8220;Get in Contact&#8221; to style and the normal background color should be green. And the hover background should be blue. Update. So now it looks like this. I hover over here and it becomes green, I hover over here it becomes blue. Great!<\/p>\n\n\n\n<p>But how will this look on a mobile phone, or on a tablet? I can click over here on the responsive mode, and I click on tablets that looks perfect, and mobile. Nah! I don&#8217;t like this. So how can I change this for a mobile? Well, since we are in the mobile style, all the settings are now also in the mobile style. So what I can do, I can click over here and I can go to the Typography and it&#8217;s already in the style for a smart phone. So I can change this and I can do that pixel perfect to this. Then I click over here, I go to Style &gt; Typography and I make it smaller. Like that. Over here, I click here and I go to advanced and now I want to have no margin whatsoever. And at portfolio, I want the same. No margin, only between those.<\/p>\n\n\n\n<p>I&#8217;ll check this, and at the left, I say 5 and here at the right, I uncheck this and I say 5 &#8211; Update. And if you want to, you can click on the section settings and change the minimum height for the mobile to something like this if you want to. And then it can show something else over here already. But I actually like it to be like this. This is the first thing people will see and to be honest, I think this is all a little bit too close to the sides. So I go over here &#8211; Typography &#8211; make it smaller; this one. Let me see &gt; content, change it like that and also photography &#8211; make it a bit smaller like that. Update. So let me see. Desktop, perfect. Tablets, perfect. Mobile, perfect. I love this about Elementor. We still haven&#8217;t paid one dime outside of web hosting. It&#8217;s amazing what you can do with this free tool.<\/p>\n\n\n\n<p>What I want to do, I want to make this text smaller. So I go to typography and I say, weight, make it 400 or 300 and then we can make it a bit bigger to align it. No that&#8217;s okay. And again, let me see how it will look; okay. And how it will look and maybe it can be&#8230; yes, perfect! And then we can click here and the menu will pop up. Update.<\/p>\n\n\n\n<p>So what else can we do? We can make use of animations. It can make your website slower but I want to show you how it is done. I click over here I go to advanced, I close this and I go to motion effects. Entrance animation. I can say make it fade in or come from the left, zoom from the left; that&#8217;s too much for me. Let me see. Slide in &gt; left. I like that. Then this one &#8211; I want it to zoom in. So I go to advanced &gt; motion effects and I say zoom in; like that. And then the third one, Photography | Film | Web Design, advanced &gt; motion effects. I want it to slide in from the right. And then this one can come from the left. Motion effects &gt; slide in from the left and this one can slide in from the right. You can also search for it &#8211; slide in right. Update. Look at that. That is a lot at the same time. So how can we change that. I click over here and the animation duration can be slow. Also for this one, slow. Update. Okay. What I&#8217;d like to do now, I want to bring some delay in it because now you see everything at the same moment. This one can come after a half second &#8211; 500 milliseconds. Then after 750 milliseconds, second one will come and after one second, this one. Then after 1.25 seconds, this one and after 1.5 seconds, this one. Update. Yes. But I don&#8217;t like those over here, let me see maybe I can do zoom in from the left, no. Fade in from the left, yes. That&#8217;s better. And fade in from the right and it can also be slow. Everything can be slow. Update. I think this looks amazing. We can also say, you know what? On a smartphone, I do not want to have all that stuff. So on a smartphone, I can say &#8211; None. So when I go to a tablet &gt; default, when I go to full screen, zoom in but nothing at a smartphone. Well, I want it to be just the same, so put it on default. Yes, perfect. So what we can do now. We&#8217;ve shown who we are, what we do and people can get in contact with us, or go to the portfolio page. So I want to do two more things.<\/p>\n\n\n\n<p>Over here I want to go to content and I want to make this an h1 tag because I want to be found by photography, film and web design. It&#8217;s more important for me than FerdyKorp Media. Then the second thing I want to do if I update it, and I take a look and I scroll down, you see that the background is static. I want to change that. I go to the section &gt; style and let me see, background overlay &gt; attachment &gt; fixed; so even if I scroll, background will be fixed. I like that effect. So let me show you one more time; like that. I think that looks better.<\/p>\n\n\n\n<p>So what is next? We&#8217;re going to the next section. So I click on the plus over here and this time, I want to have three columns because I want to show more about my three services I offer. So I go over here, to all the elements and let me see. I want to go for an icon box. So I drag it over here and I want to adjust it. First, the content, the icon. I want to talk about photography, so I search for a camera. And I can choose one, I like this one &#8211; really simple. Then the title and the description &#8211; what do I want my title to be? Photography. So I want to tell more about the services I offer, so they can read it over here and see some examples, so then I have this text over here. So I&#8217;ve created a text but I don&#8217;t like this. I update it and if I take a look, it&#8217;s just not appealing to me. So I will configure this, then I go to the link \/photography and I can change the icon position. I like it to be at the top. The HTML tag can be h2 and then I go to the style, the primary color &#8211; this one, and then I can change the spacing. I bring it up a bit. I can change the size but before I do that, I go back and at the view, I want to change it to Stacked or Framed. Well I want it to be stacked and the shape can be a circle or a square, I like it to be a circle, I go to spacing again. The size, I can make it bigger, not too big, like that. The spacing I to bring it a bit back &#8211; like that. Padding, I can change that if I want to, I can make it rotate, change border radius. Then, when I hover over it, I want to make it green or a little bit lighter blue like that and we can make it grow. Okay. Then I go to content alignment at the center, that&#8217;s okay. Vertical alignment at the top, we can play with the spacing. This is okay and then we have typography and the description. Typography, that&#8217;s a title, so I want to change that to uppercase, make it a bit smaller &#8211; let me see, is the color correct. Okay. What I see over here is that the text is bold. So I don&#8217;t like that. How can I fix that? Over here &#8211; default fonts, body text I want to be open sans, and the weight is 400 &#8211; that&#8217;s okay. If you want it to be bigger, you can make it 900. If you want make it thinner &#8211; 100, but I think 400-500 is okay. Then we have the accent text and I want it to be exactly the same &#8211; open sans 500. Then we go to the headline, I would like to say Raleway &#8211; that&#8217;s for all the titles. Also the secondary Raleway and then 600. So that&#8217;s what I like.<\/p>\n\n\n\n<p>So what is next? I close this, apply and then I want to show a few images. How can I do that? I go over here and I want to go for an image carousel. Your image carousel &#8211; I drag it here below. And now I can add a few images. What I suggest you do is that you use all the same aspect ratios and resolutions for the images you want to show in a carousel.<\/p>\n\n\n\n<p>So I go to the desktop &gt; Images &gt; Tutorials &gt; Home &gt; Photography &#8211; select them all &gt; open. What you see is that I renamed all the images to concert- photography-Rotterdam-Maassluis, because I want to be found on that. Because if someone searched for concert photography Massluis and I go to images, you see my picture here first. So it&#8217;s really important to rename your files because if people don&#8217;t do that, and they search for IMG0001, this is what you will see. Why is that? Because people did not rename their images. So you should do that, because then you will be found better in Google. So I can select one, remove the dashes to optimize it for Google, then I copy the title and I go to the alt text or twice tap, tap, tap. I paste it and I do that with all the images, and in that way they will be optimized and I can beat my competition.<\/p>\n\n\n\n<p>So I&#8217;ve selected four images, I click on create new gallery. I can change the order. I can reverse the order. I click on insert gallery. Now you&#8217;ll see them like this. So now we need to configure it. The image size &#8211; I like to use medium large. Don&#8217;t make them too big, because it&#8217;s not necessary. And how many slides do I want to show? Well actually only one at a time. Like that. I don&#8217;t want to stretch the images. I don&#8217;t want to see navigation or something else. I want to link it to the media file with the lightbox and I don&#8217;t want to have any captions. Then I go to additional options, pause and hover &#8211; no, autoplay &#8211; yes, and every five seconds the photos will change. So I can say every three seconds; infinite loop &#8211; after the latest picture, should the first one appear again? Yes; and I like it to fade instead of slide in.<\/p>\n\n\n\n<p>So right now, you will see how it fades and I think the fade is too quick. So I say one and a half seconds, like that. I like it. Okay &#8211; that&#8217;s great. Then I want to do one more thing over here, I go back and I want to add a button. So I drag it over here and I can say &#8211; More info\/photography. I&#8217;ll bring it to the center and the type is default, I can have something else over here but I don&#8217;t want that. I can do that here at the style, more info, the size is medium and I can have an icon and I want to have the same as this one so I say camera, like that and I can have the icon before or after and I can change the size between those two. Then I go to style, when I hover over it, I want it to become the green color. So at hover, I say background color green like that and I also want to do that here. So I click over here, I can hover green like that. And of course I want it to grow when I hover over it. I go to hover I wanted to grow.<\/p>\n\n\n\n<p>So that looks nice. What I can do now? I can build this all again and change the subject to film, change the text. I can also duplicate it by hovering over here and clicking on this icon, and again then I hover over here and I click on the X and on the X, that&#8217;s how fast you can change it. So now I want to change a few things over here. So I click here and I want to change the title. I say film, I want to paste the text and at film I also want to change this to film, let me see &#8211; camera, video camera &#8211; also here camera, and video camera and this should link to film and also here. It should link to \/film. Then the third one is a web design. I want to change the text like that and then the icon something like this. Also here, and then the link of course to web design. I copy this. I click over here again, I search for the link area and I paste it. Update. Let&#8217;s take a look. Okay. If this text will be shorter than this one. Let me try something new. So I click over here, this, I will make it go away. This is okay and over here, I want to copy a sentence like this. If I update it, then this looks all really weird. If I want to make this align, how can I do that? Well there&#8217;s a trick for it. I open a new area over here with three columns and I drag this one over here, this one over here and this one over here. Update. So, here below it&#8217;s all the same size, but here it isn&#8217;t. We can do it through a few ways, but I can just drag this over here above, just like this one above and like this one above. Update. So now they have the same height. So that&#8217;s a trick that you can do in order to get everything the same height. So I want to fix my text. So here I want to change the images. I clear them &#8211; yes. Add the images &#8211; upload files &gt; select files and then I go to images &gt; tutorials &gt; portfolio &gt; web design, CMD+A, open and I create a new gallery. Insert. Like that. So update, and I want to continue with the animation but this time not in an element but in the column.<\/p>\n\n\n\n<p>So I click over here, the first column &#8211; Advanced &gt; Motion effects and I say fade in up &#8211; like that. And I wanted to be slow and I want the duration to be 2 seconds &#8211; yes. So the same I do over here, fade in up, slow after 2250 ms and then the third one &#8211; the column &gt; Advanced &gt; Motion Effects, fade in up, slow 2500; Update. So now you&#8217;ll see it go like this. I like that. But what I want to do now, I want to grab this section, go to advanced &gt; uncheck the margin and I want to make it a negative number. So it will go up like that. Let me see how far can I go. Quite a bit I think. I think this is OK &#8211; like that. But now we don&#8217;t see the text that well. So I can click over here on the icon box &gt; Advanced &gt; Backgrounds and I make it white. So now it looks white but I think there&#8217;s not that much padding or margin over here. So how can I fix that? I go to advanced and I say 10 everywhere from the outside and 10 everywhere from the inside and make this 5.<\/p>\n\n\n\n<p>Now I can do the same over here or I say right mouse click &gt; copy &gt; right mouse click paste style and paste style. That&#8217;s how easy it is. Update. Let&#8217;s take a look. I like it. I like it a lot. It looked great but what I don&#8217;t like is that this area is a little bit low. It&#8217;s close to this area and less close to this area. So how can I fix that? I go to the column &gt; Advanced &gt; Uncheck this and bring this to a negative number, until I think it is all close enough. Let me bring this up to -100 and then over here. I bring it up even further. So also over here, let me see until it is in the middle. Yes, I think this is great. Update. So this is how it looks &#8211; perfect. And a bit lower because I don&#8217;t want to see this sentence. So over here, 130 and then over here also 130. Okay. That looks okay. What I want to do; you see there&#8217;s a nice flat line over here. I want to change that. How can I do that? I click here. I go to the upper section. You can go to style, so the style of the upper section, you can close the background options and go to shape divider. And here at the top we can select the type, the zigzag for instance, change the color to white and then increase the number and the height and then you can have an effect like that.<\/p>\n\n\n\n<p>I don&#8217;t like the zigzag but I do like the tilt. But not for on the top. So I can say none, but at the button I can say tilt opacity for instance. So over here and then I can increase the width and the height. So you can have a nice effect like that. You can flip it, you can bring it to the front but then it goes through this area, I don&#8217;t like that. So in that way you can give a nice style to your website. So let me see. Right now you see better. I like it. I like it a lot. Beautiful! I want to flip it back and make it a bit higher &#8211; 120 and 100. Update. Beautiful! So here we see the images, different images and here I don&#8217;t want to see an image, I want to see a video. How can I do that? I hover over here and I click on the X and then I click over here to the overview and I can also search for a video, and there it is.<\/p>\n\n\n\n<p>I drag it over here above the button, and then I can select a video. So I go to Images &gt; Tutorial &gt; Portfolio &gt; Film &gt; Montana &gt; Montana Vimeo link, and I want to go for the one with sounds. Copy it and here i select Vimeo and I paste it and then I can change the starting time. I can do auto play. I like to do that. I want to mute it &#8211; no sounds; and I want to loop it and I don&#8217;t want to see all that stuff. So now it starts playing automatically. So when I update it, I take a look &#8211; the video plays. So those two images change at the same time if they are loaded correctly and if I click on more info, I go to the photography page. Also when I click on the film over here, so that&#8217;s how it works. People see Who I am, what I do and they can get in contact with me or take a look at my portfolio. They can see a photography, film, or web design &#8211; I talk about it and I show people what I do, and if I click on it, it opens like this and I can navigate through the pictures. As I said before, if you have something like this, please use the same aspect ratio on the same resolution otherwise this image will be like this and the next one can be higher and it will have a really weird effect. What I see is that there&#8217;s not much space over here, so I can do that here at the settings of the section &#8211; advanced and here at the button, I can increase the amount of space. So let&#8217;s say 20 &#8211; Update. How will this look on a mobile? That&#8217;s not unimportant. I click on tablet first. On tablet it looks like this. I think this is OK and on a mobile it looks like this.<\/p>\n\n\n\n<p>Well I don&#8217;t want that. So first, over here on a mobile 2 at the left and here 2 at the other side or 3, so total of 5. Okay! Then over here at the settings of the column. Here at entrance animation, it says default. So there&#8217;s also an entrance I don&#8217;t want it. No entrance on the mobile. Also here no entrance and here none. Okay! let me do some next-level stuff and I hope I can make it clear. What I also can do, what I see over here &#8211; photography, film, web design and then you see the images and the buttons. How can I merge them together? Well over here, I click and I go to advanced, I go to responsive and I say there&#8217;s a whole section with those three areas. I want to hide them on a mobile. Yes, just like this one responsive, hide them on a mobile &#8211; update, so let&#8217;s see. Here they are. But when I make the screen smaller, they are gone.<\/p>\n\n\n\n<p>So for a mobile I want to show something else or in a different order &#8211; actually just like this. So how can we do that? I go back to responsive &gt; desktop. I will duplicate this area, drag it here below and I will duplicate this area, this section and also drag it here below. And now I want to merge everything. So I bring this one here and the button here &#8211; just like this. So we duplicate everything actually. And why do I do that? Because over here, there are multiple sections. This is a section, this area over here and then this one below and why is that? Because then all the text will align really nice, even if I have more text over here those images and videos will still align. But on a mobile, they&#8217;re all below each other. So over here, I click and then I say advanced &gt; responsive &gt; hide on a tablet and on a desktop. Update. So if you don&#8217;t get it, again let me show you. This area is one section, below there&#8217;s another section that has the images and all the buttons. And then here below we have everything in one section. The difference is that this is shown on a big screen and other tablets and hidden on a mobile and this one is hidden on a desktop and on a tablet, but shown on a mobile. So now if I make the screen smaller, you still see it like this. But now I do not want to have the entrance animation. So I can go to the column &gt; advanced &gt; motion effects &gt; nothing. Also here &#8211; nothing, and there&#8217;s a big chance that you don&#8217;t need to do this because everything is aligned. So, if I update it, it looks great and on a smartphone, it also looks great. Only thing is there&#8217;s no divider over here. So if I want to add that, I can do that over here. I scroll down all the way, divider and make this blue, three pixels and then below I want to have a margin of ten. Duplicate it. Bring it over here and duplicate it. Update. It will be refreshed and then there&#8217;s the divider that makes it a little bit better.<\/p>\n\n\n\n<p>So what&#8217;s next? Let me show you more. So I go for a new area. I want to talk about my team and that is me and my wife. I want to have one area over here and I want to stretch the section and change the height to minimum height. I go to the style, I want to add in background. So background Type &#8211; Classic, I want to add an image my upload files &gt; select files and then I go to images tutorial &gt; home and then we are 1920 x 1080. I open it. I can optimize it; insert media and there it is. This is me with my wife. You don&#8217;t see her right now so let&#8217;s fix that. Position &#8211; where can we focus &#8211; center, center, or maybe top center but I want to change the size to cover. You know what, center, center and then I go to the layout and I make it a bit higher &#8211; 500. So then you see us, what I like also for this picture is attachment. Fixed like that. Okay. How does it look on a tablet &#8211; fine and on a smartphone. On the smartphone I could say custom and then like that in the center. Perfect. So for every device you can make it pixel perfect.<\/p>\n\n\n\n<p>I go back to desktop and there we are. So, we have one column. I want to make it two columns. I click over here and in this area I want to play something. So I want to have a header. Okay, no link &#8211; h2 is fine, it&#8217;s all fine. I go to style, text color is okay, typography is also okay. But I want to change the content of course. I forgot it almost. Who we are? What we do? Okay! Then I go to the elements. I want to have a divider over here and I change the width in pixels. Do something like this, or you know what&#8230; until here. I bring it all a bit closer &#8211; minus 20; minus 20 &#8211; that&#8217;s not working, so minus 1, 0 minus 1, and then you can change it like that. Okay.<\/p>\n\n\n\n<p>I go to the settings of the column, Style &gt; Background type: I can make it white. I go back, and I search for a text editor. I drag it here below and I start typing &#8211; something like that. Then I want to style it a bit more. So I click here. But I cannot reach this area. I can do it if I cannot reach something, I do the right mouse click and I click on the navigator and here I see the sections and I can select things and then I go there. So here I could click twice and I could say services mobile, and here I can say services desktop. And I can close it; I can also click over here, then I go to the navigator. I can also attach it to the right and that&#8217;s great if you have a big screen and why do we need this? Well at this moment, I make it removed from the side, I scroll down and it sticks with us. I cannot select this. So I go to the latest section, I can say who we are? I can open it and you see two columns &#8211; left, right. At the right one, we have a few elements. So I can click over here and I&#8217;ve selected the divider.<\/p>\n\n\n\n<p>So that&#8217;s how you can use the navigator and one other thing over here. We made use of margin that is minus, so if I would drag this on top over here, I can almost not reach it. Well now I can, because Elementor did an amazing update. But if I could not reach this, I could say you know what? I want to have the Navigator and I want to change those back and then everything will be normal. So that&#8217;s how we can use the Navigator. Let me go back to the divider. I want to change the color to blue &#8211; make it a big thicker too. Okay. I want to have a button over here, so I can use this one: right mouse click &gt; duplicate or over here I hover &gt; duplicate. I drag it here below and I bring it to the left, I don&#8217;t want to have an icon, but I want to say: Get in Contact and then a \/contact. Okay.<\/p>\n\n\n\n<p>What I would like? I would like to have a small area over here where you can see the background. So I click over here, I go to advanced and then I uncheck this and at the right, I would say plus an there you see it. Okay. And at the padding, I would like say &#8211; all sides are 15. Okay, but how will it look on a tablet. There it can be a little bit less. So I could say 40, and on a smart phone, I would like to say 10 everywhere, and 30 everywhere like that. I go back to the Desktop view, and I want to make this a little bit transparent. So I go to the: Column Settings &gt; Style and then at the background we&#8217;ve chosen a white background, but I want to make it a bit transparent. So I can drag this down and now you can see through it. Update. That all looks like this. You can see through it and if you make it smaller, it looks beautiful. Maybe this one is a little bit harder to see. So what we could do to show you again, I could duplicate it and then over here, I go to: Advanced &gt; Responsive and I say &#8220;hide on the mobile.&#8221; Over here, I could say Responsive: Hide on a tablet and on Desktop, and then here I could say Style, the white color make it less transparent. Then I update it and I take a look. I make it smaller. I can see through it and when I go to the mobile version, it looks like this. Perfect. I go to the editor again. I scroll down and I want to create a new area. I click over here and I want to add an area with testimonials. So I want to have one column and I want to drag a header in it like that. I want to say testimonials. Bring it to the center, give it a bit of space. So I say margin top 20 and button, okay like that. What I want to do now. I want to work with an inner section, because right now we have one column. So if I want to have a header here at the left and a header at the right, it is not possible. You can work within lines but a better solution would be to use an inner section. Over here at Basic, I drag it here and now we have an inner section. So it is a section in a section. And now I search for &#8220;Testimonial,&#8221; I drag it over here and there it is and here we can create a text. So I say&#8230; so we have a text over here. Now I can choose an image here below, choose an image: upload files &gt; select files, and then I go to Home &gt; Testimonials and I will add them all. So CMD+A or CTRL+A on the PC, open and I choose this one: Daniel. Insert, okay. Image size: Full, I say 300 and the name is DanielLugo, and he is a designer and his website link is https:\/\/daniellugo.com. I can open it in a new tab if I want to and the image position &#8211; right now it is aside at the left. I can also place it on top. I like to be aside.<\/p>\n\n\n\n<p>We can change the alignment like this. I like it to be in the center. Then we can go to the style tab and we can change the text color if we want to. This looks okay. I update it, but I want to take it to the next level. So I scroll all the way up, right mouse click &gt; copy &gt; scroll down. So over here, right mouse click &gt; paste &gt; style. So now it looks like this. I go to the section settings &gt; style and I want to remove the background overlay. I only want to have the gradient. So I click over here. This is not necessary anymore. I go to style, and I make the text color white. Also over here, at the column I go to style &gt; background type and I make it white &#8211; like that. I can do more things. I can go to a Border &gt; Border radius; I can increase it. So you see those rounded edges over there. I like it to be 15. I close this. I go to the testimonial element and I go to Style and then to the Typography. Let me see &#8211; 20 is okay. The image, I want it to be a bit bigger, 70 or you know what 100. Then the name &#8211; also a bit bigger: 20. And designer can be 15.<\/p>\n\n\n\n<p>What I can do now &#8211; I can duplicate this column like that, and this one I remove. What I see they&#8217;re totally next to each other. There&#8217;s no space between them. So I click over here: Advanced &gt; Add margin &#8211; I say make it 10; Right mouse click &gt; copy &gt; Right mouse click &gt; paste the style so I like that. Now I want to change this of course. So I click over here, I want to change the image to this one: Elisa. So I scroll down and I say Elisa Dupont &#8211; and she is a photographer. It&#8217;s what she says. Okay.<\/p>\n\n\n\n<p>What I can do now &#8211; I can duplicate this whole area like that. And then over here, I change the image to the third one and I change the name: Heather Andrews. She&#8217;s a traveller and here we have a wedding couple and I call them Gwen and David, and they are a wedding couple. Of course, they don&#8217;t need have a website, neither does Heather but it&#8217;s an option. Then I go to the section and add Style. I scroll down and I want to remove the shape divider. So I go to bottom and I say none. I go to advanced. I want to increase the padding top and bottom. So right: nothing, left: nothing.<\/p>\n\n\n\n<p>So we have testimonials &#8211; four testimonials. Maybe you think there&#8217;s not much space over here. How can you fix that; you click over here and you make this 20 and then right mouse click &gt; copy &gt; paste style, paste style and paste the style. Update. I click over here. Let&#8217;s take a look. This is what we have. Beautiful! I want to have a bit more space over there. So again, I go over here and I make it 30 and 30. You can do one other thing: if I click over here, I go to style, you&#8217;d see normal and hover. If I click on hover, there are a few new options. I can change this to something else &#8211; maybe a bit greyish, like that. Maybe a bit lighter; I can change the transition to one second. The same I can do for the border. On normal it&#8217;s this and on hover, I can say, I want to be 5. So then get this and also here you can change it to 1 second. I don&#8217;t like it, but it shows you that you have more options. You can increase the border when you hover, so that is what you can do and of course you can copy it and paste it again. But I think, I rather have it like this. Copy &gt; Paste style. So you don&#8217;t see anything when you hover over it. Okay, so that&#8217;s how that works. New area and in a few minutes we are going to work way faster with pre-made templates, but I just wanted to show you what is possible with the amazing free page builder called Elementor.<\/p>\n\n\n\n<p>So over here all the new area like this. I copy this &gt; duplicate and I drag it like that. What I also can do, if I don&#8217;t like it I say CMD\/CTRL+Z, I can go to the navigator &#8211; navigator &#8211; and then I have who we are. Second column, I have the heading over here. Let me see. I have two now. I can drag it like this really easily.<\/p>\n\n\n\n<p>and I open this one, section, and then I drag it over here. I bring it to the center and I say, &#8220;Companies we work for&#8221; and I want to make use of the carousel again. We&#8217;ve done it before. So let me show you. I search for carousel and there it is. I drag it here. I add a few images: upload files &gt; select files &gt; home &gt; who we work for. I open them all and I made them all the same aspect ratio and the same resolution. That&#8217;s the best thing you can do. But it looks a little bit of weird. How can I fix that. Image size: I would like to say medium large, like that. Slides to show &#8211; I can say 4 and then slides to scroll &#8211; one per time; like that. Then we can say image stretch: no. No navigation and no link, no caption and then there are additional options &#8211; pause on hover: no. Autoplay: yes, and every 3 seconds there should be a new image over here &#8211; 1, 2, 3 &#8211; infinite loop: yes. After the latest one, the first one appears again. The animation speed can be a little bit slower. One second and they come from the left. We can change the spacing. We can have a border but I think this is fine. Well this is close to each other, so over here, I say 30 and 30. Update and let&#8217;s take a look. &#8220;Companies We Work For&#8221; &#8211; perfect!<\/p>\n\n\n\n<p>So a few more things I want to show about Elementor. So I go to the editor and in the beginning, we added a few buttons. So I can duplicate this and what I can say is &#8220;Buy Now.&#8221; I want to remove the animation. So I go to motion effects and I say: none. I want to go to the padding: none; none. What I want to do &#8211; if I go at advanced to custom positioning, right now it says in line but there are more options. I can also say custom and now at position I could say absolute. What this does is the next thing. I can drag it wherever I want to &#8211; pixel perfect and if I update it, and I take a look, I have a button over here. If I scroll down, it stays there. So you have more freedom to place it wherever you want to place it. Update. Like that!<\/p>\n\n\n\n<p>So you can use it if you want to and I will not use it like this. So I can change the text and I use it not as a button, so I use this as a link and then the text is amazing. Drag it a bit over here. I go to style or to, let me see, the padding 30 and 30 &#8211; like this. Update. So it works like that. But we can also do something else. So I hover over here and I duplicate it. So now if another one, and here I go to advanced &#8230; to custom positioning &#8230; custom and then not absolute but fixed. So now, it is fixed and if I cannot find it, I can also play with the offset over here from the left to the right and top to the bottom and I can place this left in the corner like that. And here I can say &#8220;get in touch&#8221; \/contact. I can make it a bit bigger, large and I can drag it around like this; place it wherever I want. And now if I update it and I refresh the page, you see it over here. But if I scroll down, this one disappears, but this one stays over here and this is amazing, if you want to have a sales page and you want to have a button &#8211; Buy Now. So people are reading, then they are convinced they want to buy what you have to offer and then they don&#8217;t need to scroll anymore, they just can click over here. So that&#8217;s amazing. But at advanced add custom positioning, Elementor is warning us &#8211; &#8220;please note custom positioning is not considered best practice for responsive web design, and should not be used too frequently.&#8221;<\/p>\n\n\n\n<p>So let me see, what will happen when we go to a tablet. Well, I should drag it more down. So in order to do that, I go to vertical offset, where is it? There it is. So then it works there on a tablet. And on a smartphone mobile, let me see, I also want to have it over here. So I need to find it again &#8211; vertical offset, let me see where it stays. There. So now, when I scroll to the page, you can see it. What you also can do, if you go to Style &gt; Background Color &#8211; you can make it green but also transparent. So it&#8217;s a little bit light and when you hover over it, you can change it to a normal color.<\/p>\n\n\n\n<p>You also can say advanced &gt; responsive and hide on mobile, but I think it&#8217;s working like this. So our absolute position FerdyKorp is amazing and get in touch. Scroll down and we hover over here, you can click on it and you go to the contact page and we still haven&#8217;t paid one penny for this page builder and for the theme. So I&#8217;m really impressed with what you get for the free version.<\/p>\n\n\n\n<p>So I hope you learn a ton of stuff about Elementor and if you want to know more about all the elements, you can go to youtube.com and you can search for &#8220;all elementor elements explained&#8221; and there you find all elements explained of the free version and I also have all Pro elements explained. And if you go to Elementor.com and we go to pricing, you can get elementor pro for one site for $50, three sites $100 and unlimited sites $200 and here you see all the advantages: more elements, more templates, the pop-up builder and their support for one year and updates for one year. So you could also buy it once and use it for the rest of your life. The only thing is that you don&#8217;t get updates anymore after a year and the second year you get 50% discount. So that is amazing. You have a 30 day money back guarantee and as I said before, I have a lot of tutorials also about pro. So if you search for &#8220;Elementor pro tutorial&#8221; you have a pro tutorial where I show you how to work with all the pro elements. But as I said before, with the free version you can also create amazing pages like these. So what I want to do now, I want to talk about templates. You know there&#8217;s a really great community around Elementor and people want to offer value for the community so they create templates. I&#8217;ve done the same. So if I would go to the about page, we can build this page totally from scratch by clicking on edit page &gt; edit with Elementor and then start building. What I also can do, I can go to FerdyKorp.com, I go to templates and here you can get a lot of templates for free. You can fill in your first name: Ferdy and your email address elementoire@ferdykorpershoek.com and I can click on give me the package. I&#8217;m from Europe, so I need to consent with everything. I click on subscribe and now I need to go to my email account and I need to get the template back. So here I am at my email account, double click and then here it says get the Elementor template back. So here&#8217;s an instruction video, but you can also follow this tutorial. I can download the pack over here, and then I can choose what I want to import, or I can import all templates at once within Elementor and then I can choose over there. I rather use this way, so I click over here, download the template pack and I like to unpack it and drag it to the desktop. So here at my Desktop, I click on it and I can take a look at the images, the JPEGs and then below there&#8217;s a JSON file that you need to import. This template, I can go through all the images and if there&#8217;s something I like, I can import it. So over here About Us page, I like that. So what do I need to do then, I go over here, I click on the folder icon and I click on this icon to upload a new JSON file. I select it. I go to the desktop &gt; complete elementor template pack and I go for the About Us page. I open it and this can take a few seconds and then I click on insert. And I want to overwrite all these settings I have on this page. So I click on yes, and now I have it over here. So let me show you something: if I click on the eye and I go to the home page and I click on edit with Elementor, I can hover over here, right mouse click &gt; copy and then on the other page, right mouse click &gt; paste style. You can copy and paste styles from other pages. So I go over here to style and let me see, I want to go to the shape divider. I don&#8217;t want to use that but I want to have the gradient. So I go to the background overlay and I click over here and I bring this image back. I should optimize it; copy &gt; paste, this was our honeymoon in Cape Town and by the way beautiful place to be. Let me see. Yeah.<\/p>\n\n\n\n<p>And then I go to the layouts and I make it 400, like that. Well it&#8217;s quite easy what you can do over here. You can change the text, you can change the style, make it bigger, change the weight. Let me see if you can make a break like this: &lt;br\/&gt; &#8211; so you can decide where you want to start a new line. Then I go to Style &gt; Typography and I increase the line height. So that&#8217;s what you can do. Maybe I want make it uppercase and make it bold &#8211; yeah. And then I want to go back to the section &gt; style &gt; background overlay and I want to decrease it a bit. So over here, opacity like that. We love to have fun travel and enjoy life &#8211; that&#8217;s why we do what we do. And if I want to have the same style as a different page, I go over here to this title; copy, paste the style. The only thing it said is also pasting the style that it was at the left, so I need to go to content and bring it back. And now it is the same style as our homepage. So that&#8217;s how it works. You import a premade template and then you&#8217;re going to change the content and change the style. And in that way you can save a lot of time. Over here this can be a text about you. You can change the name, create your own text, add an image and that&#8217;s how easy it is.<\/p>\n\n\n\n<p>So let me see I will grab this one and then over here, this is me. If it&#8217;s not fitting and I want it to fit then I can go to Style &gt; Change the Width or what I can do, I can remove this, I can go to the column settings style and I choose the backgrounds and now I have a bit more options. So that&#8217;s what you can do. What you see over here is get in contact with us.<\/p>\n\n\n\n<p>But then you see this code over here, we need to plug in in order for this form to work. I click on update and over here, I go to the website &gt; to plugins, add new and I search for contact form 7. More than 5 million active installs, I click on Install Now &gt; Activate it and now if I refresh this, this is working. If you want to know more about contact form 7, click over here and I have a tutorial about that and we can change the background information by clicking here &#8211; Style. You see we use a YouTube video for our backgrounds. Here it can change the links to your Facebook page, Twitter. Here also you can add an item and here you can choose whatever you want to have. There&#8217;s a lot and then can paste the link below that. So that&#8217;s how easy it is. It will save you a lot of time. So I&#8217;ve shown you how to create something from scratch. I&#8217;ve shown you where you can even learn more about Elementor using the videos on YouTube I&#8217;ve created and I have shown you how to import a premade template and adjust it to your wishes, and how to add a contact form 7 element.<\/p>\n\n\n\n<p>So if we take a look, this is how it looks. About Ferdy, About Anna &#8211; get in contact with us. So we can do the same over and over again. If I go to services, I can do the same. I can go and scroll over here or I can go to FerdyKorp.com, click on templates and then here \/all. Then you go to all the elements. So if I want to go to complete pages, I click over here and then I see all complete pages. I&#8217;m trying to add pages every now and then. So I can click over here, on the image and then I see how it looks on a normal screen, on a tablet and on a smartphone. If I like it, I can click over here and download this template. Then I need to unzip it and then I go to my website &gt; edit this page &gt; edit with Elementor. I click over here and then over here select a file. I go to the Download folder and there it is &#8211; Services page, V1.json. Open it, some time this takes 20 seconds, so we need to be patient. There it is. Insert: yes, and the great thing about this is I used anchor links. Let me tell you a bit about it, if I click over here it goes to anchor photography. So if I take a look at the result, I see three services. If I click on photography, I scroll down a bit. If I click on videography, I scroll down even more. How does it work? Here we make use of an anchor link and then over here, we make use of a menu anchor. So if I place this over here and I call this photography, that means that when you click over here and place this before photography and you call that the link within the same page, then you go over there. So over here it&#8217;s called videography. So here&#8217;s the link &#8211; #videography etc. etc., and get in contact when people click on getting contact, they scroll down to this place. And if I think hey, this text is dark, I click over here. I go to style and I say text color should be white. That&#8217;s how easy it is. Update. So if you have a website you want to make, please let me know if there&#8217;s a certain website you want to have and you would like to have templates about, so I can make them. Because I want the library Elementor.ferdykorpershoek.com to be ten times as big as it is right now. So a lot of people can learn how to create a website really fast but they also learn the basics as I&#8217;ve just shown you with the home page. So what I will do, I go to the contact page; I close this, close this, close this and this and this one. Okay. Edit page &gt; edit with Elementor &gt; click over here and now I can also search for contacts over here. And there are a few Pro versions, so you need to have Elemental Pro for it. But this one is for free. So I click on insert, so you can also get elementor templates from within Elementor and now I change the color to this one and I can change the background image but I like it, but what I want to do, I go to style &gt; background overlay &gt; gradient. I get this color and then this color. I want to change it to 90 degrees and change the opacity a bit. Then here I can say make it white and over here at Advanced &gt; margin, make it a bit smaller. At the content, I change the color to white, remove the transparency&#8230; like that.<\/p>\n\n\n\n<p>Then over here, I can change the color to this one or two this one. Also of the title. So I go to content and I think that should be also blue and then I can say, right mouse click &gt; copy &gt; paste style and paste style and that&#8217;s it. Also here with this color, of course you can change the address; copy &gt; paste style and pastes style. Well I can change this to Los Angeles and then I can say Beverly hills and then I can zoom in. I can change the height prevent scrolling, over here I change the background color to blue. I go over here and then add style and make the primary color white, and then the secondary color blue &#8211; like that. If I want to change the height, I click over here on the section, advanced and here I say 30 and 30. Update and that&#8217;s how we can change it.<\/p>\n\n\n\n<p>Wow! so what we are going to do now. We&#8217;re going to take a look at the blog page. So I click over here, but we need to create our first blog post in order to see the blog page over here showing blog posts. So I hover over new and I click on post and as you see over here, we can create blog post with Elementor but I also want to show you a bit about Guttenberg &#8211; the new editor in WordPress.<\/p>\n\n\n\n<p>The first thing I want to do I want to create a title and the title is, &#8220;As a Man Thinks in His Heart, So is He,&#8221; and when you write a title like this, this is really important for the Google search results. So I would use some keywords &#8211; well there&#8217;s a known saying from the Bible so I think this is okay as a text. So when I would copy this and search for it, you see in the title people have this also as man thinks in his heart, &#8220;As a man thinketh,&#8221; then I click on publish, and publish. Now we can view the post and this how it looks. The title, we can leave a comment, there&#8217;s no category and it&#8217;s written by Ferdy Korpershoek and people can leave a comment and as you see over here, Elementoire.com then this URL, which looks really beautiful in my opinion.<\/p>\n\n\n\n<p>I click on edit post, and now I will tell more about Gutenberg. Well we start with this right area before we start to create the blog post. We have published it already. I can also say over here, I want to publish it tomorrow and then when I click on update, it will be scheduled. That means that it will be uploaded in 24 hours &#8211; March the 16th. So in that way you can make 10 blog posts in one day and you can schedule them for every Friday for instance, and then you have blog posts for the next 10 weeks. I like to keep it at the 15th, and now I can publish it again instead of schedule.<\/p>\n\n\n\n<p>Close this, it is visible for public. You can also say make it private or password-protected. We can move it to the trash. Here we see the permalink, I think this is perfect. Then we have categories. At this moment it says Uncategorized. I want to change it to self-improvement like that. Now I uncheck this one. So now the category, if I update it and I view this, is self-improvement. If I have a lot of blog posts about self-improvement and I click on self-improvement, I will see all the blog posts that have the category self-improvement. So in that way you can keep it organized.<\/p>\n\n\n\n<p>You also can have a subcategory. So within self-improvement, I could say Bible &#8211; because this is a Bible proverb, and then the parent can be self-improvement and now it looks like that. But I don&#8217;t want to use that, so I close this and then we have tags or you can just find a few keywords. So I can say proverbs and that can be good for the search results &#8211; Hard thinking. Then, we should have a featured image and that image will be shown on your website at the blog post: Upload files &gt; select files. I go to images tutorial &gt; blog and here is the text and here is the image I want to use. In this image and a lot of other images I use are from pixabay.com. You can use them for free and you don&#8217;t have to give credit for it. Open, of course I optimize it like that, copy it and paste it. If I search for this at the images there&#8217;s a chance you will find this image in a few months. So always optimize your images. Select it. Okay. Then we have an excerpt, that can be a small paragraph that says something about the blog post: &#8220;In this blog post, I will talk about the relation between your thinking and your life.&#8221; Something like that. Discussion &#8211; do we want people to comment or allow pingbacks or Trackbacks. Post attributes &#8211; kind of template I&#8217;ll leave it as this and then with the Astra settings. So if I would update it and I take a look over here, right now we see this image. We see the title, leave a comment and you see this header over here. If I would like to say, you know what, over here I want to have a right sidebar and I want to disable the title and the featured image and I refresh the page, then you see that is all gone. So per page, you can change things over here which is really nice. I bring everything back so that&#8217;s it.<\/p>\n\n\n\n<p>A few more things, here we can create our blog post and what I can do, I can click over here and then I have more space to work on my blog posts. So I start writing. So over here I have my first paragraph. Now if I hit enter, I can start typing a new paragraph. You see when I hover over here, it is one area and also here. So this is a paragraph as you see over here and this one is also a paragraph. If I want to continue typing over here on the new line, I can say SHIFT + ENTER and then I can continue typing in the same paragraph. So that&#8217;s the difference: SHIFT + ENTER is a new line and enter is a new paragraph. So, I start typing here again. So right now, here at the right I have an arrow up. I can change those paragraphs. If I click over here you see they&#8217;re changed. I want to bring this back here below like that. So this is a block called paragraph and this is also a block called paragraph. But there are so many more blocks you can have. If I hover over here on the edge, I can see a plus (+) icon and there I can add a block. So if I click over here, there&#8217;s so much more than paragraph that you can add. You can have custom HTML, an image, a list, a gallery, a heading, a quote and much more. Than we have the common blocks, formatting, layout elements, widgets and embeds. So you can do so much more than just typing. So I want to add an image. So I click here on image and you can also search over here. Image and I click and I can upload one or get it from the media library or from a URL. I click on upload and I go for &#8220;As a man thinks in his heart,&#8221;; I open it and now it looks like this.<\/p>\n\n\n\n<p>So a paragraph-image-paragraph and you can change it if you want to like that. But what I would like to have is that this text is wrapping around this image. So if I click on it, I can make it smaller and it maintains the aspect ratio. What I want to do now, I want to wrap this text around this image. How can I do that? I select the image and I click here. Align it to the left or to the right and it&#8217;s not wrapped around it but you see the images right and the text is left. So if I would make this text bigger, paste and paste, it goes around it. So I click on update. I refresh the page. Now it looks like this. You cannot click on it. So I go back. I will remove the extra text and if I want to have a new paragraph, I just click here and say enter and I can start typing again.<\/p>\n\n\n\n<p>Now I want to style this. I click over here and I change it from a paragraph to a heading. Then I can choose &lt;h2&gt;, &lt;h3&gt;, or &lt;h4&gt;; why not &lt;h1&gt;? Because the title is already &lt;h1&gt;, it can have only one &lt;h1&gt; in one page. So I like this. Here are hover over here, and then click on the plus (+). I want to add an image &gt; upload &gt; smiling people and I want to align this one at the left and I want to make it smaller like that. It can also have a caption over here &#8211; &#8220;Don&#8217;t worry, be happy.&#8221; Okay. Update.<\/p>\n\n\n\n<p>Okay. Update. Let&#8217;s see how it looks. Refresh. I think this looks nice. Okay, what I want to do now, over here I press ENTER and I start with a new title: Five Steps to Get a Better Self-image. Enter again, and I click on the plus (+) and I want to have a list. So I click here and I have a list with a bullet point. Okay. Over here, I want to change it to a title, a heading. Update. Let&#8217;s see how it looks. Perfect! So we made a blog post like this and I want to end with a video. So I go to YouTube and I want to talk about mindset there, this video, I want to use it. Copy the link address. Today I watched my own video again, I think it&#8217;s a great video where I talk about my journey how I develop myself as a person. I click on insert from URL, I paste the URL remove this and I say ENTER, and there it is. I want to bring it here and in this video I&#8217;ll talk about how you can change your mindset and how that will change your life, because as a man thinks in his heart so is he.<\/p>\n\n\n\n<p>I saw myself as a bad entrepreneur and as a people pleaser and I became one, and now I changed. So you can watch this video if you want to and of course continue with this tutorial. So that&#8217;s amazing. You can also do this with Elementor as I said before. Let&#8217;s click over here. We discussed all those options over here. And over here there are a few more options you can use. We can use the top toolbar, that means if you click over here, you see all the information over here so you don&#8217;t have to hover over here. So if I would turn this off, you see it here. I like it to be over here. So over here I can click and then I align it to the right or to the left or I make it bold, you also can use spotlight mode. So when you work here or here, the rest becomes less visible and we can work with full screen mode.<\/p>\n\n\n\n<p>So if I click over here, then it is totally like this and to be honest I don&#8217;t like the old light modes. So let&#8217;s do a few more things. You can highlight words. So let me see. I remove this. Maybe, I want to focus on earth. So I can click over here and I make it bold and italic. Yourself, I can select it and I can place a link and I can say go to https:\/\/yourself.com and then it becomes a link. Maybe you want to underline something &#8211; this whole sentence or make it italic &#8211; so I get a few words I like to make bold. I can also use CMD+B or CTRL+B on the PC and that&#8217;s how you can roll. So let me see; refresh; this is our blog post.<\/p>\n\n\n\n<p>What I would like to have on a blog post is a sidebar at the right. So I click on customize, I close this, I scroll down a bit and I go to layout. Then I go to sidebar and at the blog posts, I want to have a right sidebar like that. I think this looks amazing. Beautiful! So I publish it. I close it and this is our first blog post with an image, the title, we can leave a comment the category self-improvement by Ferdy Korpershoek and it looks beautiful. And here people can leave a comment. Okay that was our first blog post. I will create a few more. But if I go to the blog page, you see an overview of all the blog posts, but we only have one: &#8220;As a man thinks in his heart so is he.&#8221; And here you see this excerpt text. So if I would go to the first alinea, I would copy it and I edit the post. I click over here to document, and to excerpt and I place it here and I update it and I refresh the blog page. It looks like this.<\/p>\n\n\n\n<p>So that&#8217;s how you can create a blog post using Guttenberg. I will create a few more and I will be back with you. So here I am, with a few blog posts. I&#8217;ve made them all with Guttenberg. So if I click over here, you see it looks really nice. So I want to do a few things that I could not show you before. If I click on customize, we can go to layout &gt; container and the default container is full width contained. But for the blog posts we always had boxed and what you see is that it is boxed. So this blog post is in a box. And besides that, you see this grey area and this is also boxed. I think this look really really nice. You can also change that if you want to. You can say content boxed, so only the content here is boxed and this is not boxed. Or you say, you know what? I want it to be default, that means that it will have the same settings as over here. So one white background and then it looks like this. I like it to be boxed and also for the blog archives, I like it to be boxed.<\/p>\n\n\n\n<p>So the blog posts are the individual blog posts and the blog archives is the blog page with an overview of all the blog posts. So I like it this way. I click on publish and I close it. Now I want to take a look at these widgets over here. Let me see, you see them on the blog page and you see them at all the individual blog posts. So how can we configure this. You see search, recent posts, recent comments, archives and categories and meta. Well, if I don&#8217;t want it work if I want to configure this, I can hover over here and I go to widgets or here at the dashboard you can go to appearance and widgets.<\/p>\n\n\n\n<p>So here you see the main sidebar and if we take a look at our website, at the blog page, you see the search widget over here. Then the recent posts, recent comments &#8211; you see them all over here. So if I want to configure this, I don&#8217;t want to have a search bar. So I click on this arrow down and I click on delete and now if I refresh the page, it is gone. We see recent posts. I don&#8217;t want to have recent comments because my website is new and I have no comments yet. I don&#8217;t want to have an archive. I do want to have categories and I do not want to have meta. So I refresh it and that looks like this. I can also change the order, just by dragging it and now it has changed. That&#8217;s how easy it is and as I said before if I click on a category, personal for instance, you see all the blog posts that have the category personal, and those are two. So that&#8217;s really nice if you have a big website. It creates some structure. I bring it back and maybe you want to add a new widget, well you can find them over here. You can add a gallery, you can add some simple text. You can add a tag cloud, a video, RSS; but you also can add something else that&#8217;s not here using plugins. So I go to plugins &gt; add new and I search over here for Facebook like box. And I go for the &#8220;Easy Facebook Like Box,&#8221; more than 100,000 active installations. I click on install now and I activate it. I click over here and then I go to appearance &gt; widgets and now over here you see the Easy Facebook Like Box. So I can drag it over here or I click over here, and I can select where I want to add this. I want to add it to the main sidebar so I click on add widget and there it goes. I can say, &#8220;Follow us on Facebook,&#8221; and then I go to my Facebook. Let me see, this one. I copy the link and I paste it and everything else is fine. I click on save and if I refresh the page, you see it over here. If you have not, please like this page and feel free to subscribe to this YouTube channel, it would help me a lot. And if you want to, you can like this video. Thank you for that. That&#8217;s a great way to support me. So I go to the blog page and I close this and I want to configure this a little bit more. So I click on customize, then I go to layout, blog and this is the blog archive. With an overview of all the blog posts, so I click over here and what do I want to show over here? Do I want to show my excerpt, or the complete text? If I would say full content, you see the whole blog posts. So if you want to, you can do that. I don&#8217;t want that. I want it to be an excerpt.<\/p>\n\n\n\n<p>Do I want to show this image? I can turn this off or on. So all those settings over here, I can turn them on or off and if they are a little bit like this, they are not visible. So I do want to have to date : March the 15th, 2019 and I want it to be over here and at the top. So you will see it over here. I don&#8217;t want to show comments, I do want to show the category and I don&#8217;t want to show the author. First author, then the category and then the publish date, like that. Block content width, I can make it smaller if I want to. So it&#8217;s a bit smaller but I leave it at default. Then I click on publish, I click on a blog post, for instance Elementor page builder and there you see the whole single blog post. So over here I go back and I go to the single post and here we can do the same. If I uncheck this, it is gone and I want to show the title and blog meta. So here I want to show no comments, again the publish date, author, and categories. And here it says &#8216;Uncategorized&#8217;, so I should give it a category.<\/p>\n\n\n\n<p>And here you can also say, make it smaller. Publish. Close it, and now it looks like this. Our blog page looks like this and our blog posts looks like this. That is nice, but we can also do a totally different. If I would go to the dashboard and I go to settings &gt; reading. It says over here that our post page is the blog page. If I click on select that means that there will be no more blog posts on my blog page. So over here, I see nothing. I can create my own blog page using Elementor which gives me much more freedom. So I click on edit the page, edit with Elementor and this gives me so much more freedom. So I click on the plus (+) one area and I go to the style, gradient, color is blue; the second color is lighter blue. I change the angle to 90 degrees and minimum height can be 250. Then I go for a heading, I drag it over here and I say blog. I change the color to white and I bring it to the center. And I make this &lt;h1&gt;. Okay, I update it and I can come back now to all the elements, but there is no recent post element and I want to show the recent posts over here. So how can we fix that. Well I can go back, clicking here exit to the dashboard and I want to add a plug-in. I click over here and I go to plugins, add new and that&#8217;s great thing about the WordPress and about Elementor there&#8217;s a big community of people that are working on all these amazing plugins and extensions. So I search for add-ons elementor. And I search actually for essential add-ons for elementor by WP developer; more than 100,000 installs and you also can take a look at other things. So a lot of people are creating free tools that will help you get even more out of Elementor. So I click on Install Now, and I activate it &#8211; no thanks. I click over here and I go to the blog page and I click on edit with Elementor.<\/p>\n\n\n\n<p>Now if I scroll down, general, and now you see essential add-ons and there are some amazing add-ons over here. Well, why do people do that? Why is elementor for free? Why Astra for free? Why is this for free; these essential add-ons? Well let me show you. WP Astra &#8211; it gives you something for free. It&#8217;s called &#8220;freemium,&#8221; in the hope that you will upgrade to their Pro versions. So if I click on pro, you get even more options. So they give a lot of great stuff for free, so you see how the product is and then say do you want more? Then you can get the pro version. The same goes for Elementor.com &#8211; it is free but if you want to take it to the next level, you can get the pro version. The same over here, exit to the dashboard. Go back and here at essential add-ons, you can upgrade to the pro version. So that&#8217;s how it works; premium elements, whoa! those are a lot. I should make a tutorial about this. This is amazing. Well, there will be a tutorial about this, but we will make use of free tools in this video. So, one more time, I go back to the blog page and I click on edit with Elementor. I close this, I close this and I want to take a look at the essential add-ons. And I want to go for a post grid. So I drag it over here and look at that. I will configure this. The source our posts, I can also say pages or a minimal selection &#8211; I like it to be post. And I can say I only want to show posts of the author. Well, there&#8217;s only one &#8211; that&#8217;s me. So I don&#8217;t choose this. I can select only a certain category. So if I would say personal, I will only see two blog posts. But I want to show them all. I can select them based on text or exclude certain blog posts and I want to show three per page; like that. Or you know what, I want to show them all. So I say ten.<\/p>\n\n\n\n<p>I don&#8217;t want to have an offset. I want to order them by date &#8211; descending, and then we go to the layout settings. The amount of columns; I want to have three columns like this. Do I want to show &#8220;Load more&#8221; button: no, do I want to show the images: yes. I want the image size to be bigger. So the quality is better and I like to upload everything in the aspect ratio of 16:9. So otherwise, this image would end over here and the other one over here and then you get a weird look. I want to show the title. I want to show an excerpt and the excerpt words are a thousand. Let me see what will happen. Yeah, then you see the complete excerpt. So one is longer than the other &#8211; no problem, and do I want to show metadata: yes. Where do I want show it? At the header, or at the footer. Well I think at the footer is great.<\/p>\n\n\n\n<p>So that&#8217;s how it looks. What you also can do &#8211; I duplicate it. I drag this here below and I can say blog version 2, and then here below I drag this one. Now it&#8217;s with a timeline. So I can configure this, show 10 posts, layout settings, use some colors and the quality of the images is quite bad. So, I go to content &gt; layout settings &gt; make it bigger or full. So that&#8217;s how you can show it. And I click on update. I will take a look. So this is what I like and this is a second option.<\/p>\n\n\n\n<p>So let me go back to this one &#8211; style, color typography, I want make the header blue. I can align everything in the center and I can make it bigger, I make it capitals &#8211; whatever I want to do, I can do that. Then I go to the excerpt, this over here. I think that is fine and I think this can be a bit bigger. So I go to the meta style and it will be bigger and bold and smaller. Like that. Update. If I want to see my image over here, I can hover over here, click on edit my profile, scroll down and change my email address to my email address that is linked to my Gravatar account. You can also add one over here, if you want to see a tutorial about that click over here and you will find it. And I click on update profile, then I need to confirm it and I&#8217;ve done that if I refresh the page, you see my image.<\/p>\n\n\n\n<p>So now if we go to blog &#8211; the blog page, you see this. That looks so much better in my opinion and as I said before, I want to show you one more time. Right now you see 2019 will be an amazing year. I can change the date I have published it. So I click on edit post, right now it says I published it March the 15th and I want to change that to the first 01 of January at 12 o&#8217;clock. Update. What you&#8217;ll see, right now it&#8217;s first. But now, it&#8217;s the latest one because this is based on the date. So here it says January the 1st 2019 and here March the 15th. So that&#8217;s it about the blog page. What I want to do now before I go to portfolio, I want to take a look at the footer area. We will take a look at footer widgets. So I go to the home page. I click on customize and I scroll down all the way and then I go to layout &gt; footer &gt; footer widgets and I only can have four footer widgets. I can not have three or five. This is it; but that&#8217;s okay. I go back. I go back. And I go to widgets &gt; Footer Widget Area 1. I can say something about myself. So I have a text. I want to go for some dummy text, dummy text editor and I copy this. So I just will see how it will look, like that &#8211; a little bit less and I can also have a Second Area Widget. So I search for image and I want to show my logo. Add an image Ferdy and then I can change the order. Then I go for the Second Widget Area and I go for the Facebook Like Box. My facebook page is Ferdy Korpershoek and over here you don&#8217;t see it, as you see, but when I publish it and I close it, it will be here.<\/p>\n\n\n\n<p>Then the third one I would like to have a recent post area: recent posts. But I don&#8217;t like the way this looks. So I delete it, I click on publish, I close this and I close this. Now you&#8217;ll see it is here. I go to the dashboard &gt; to plugins &gt; Add new &gt; Recent posts widget image, and recent post widget with thumbnails. So I click on install now. A lot of installs and a lot of likes, activate it. So now we go to appearance &gt; widgets. I go for Footer Widget Area 3, and let me see where it is. Recent post with, yes thumbnails.<\/p>\n\n\n\n<p>I go for Footer Widget Area 3, add a widget. So let me see. Most recent posts. I want to show five, open in the window: no. No. I want to keep it really simple. I&#8217;ll show all categories, show a thumbnail. I save it to see what will happen. Let&#8217;s take a look. And because this is longer, I can also say I want to show three recent posts instead of five. And then the latest one, what do I want to show? I want to show a site map. So over here, I want to have a site map or a menu: Navigation menu &#8211; widget four, and then I can say site map. Select the menu &gt; main menu, save it, refresh and then at Facebook I would like to say, &#8220;Follow us,&#8221; and at widget area one I want to say, &#8220;About us.&#8221;<\/p>\n\n\n\n<p>So everywhere it is a title. Of course, I need to save that, also over here. Perfect! I want to customize it. Close this and I want to go to the colors of the footer area: Colors &gt; Footer Widgets. Let me see &#8211; I want to make it this color actually. So I grab it using the color pick eyedropper, copy, escape and the backgrounds is like this.<\/p>\n\n\n\n<p>Then I go to the footer bar &gt; background color and I make it a bit darker, like that. Perfect! I publish it. I close it. And it looks like this. Okay! For those who want it, we will add a portfolio. I click over here. So in order to activate a portfolio, I go to the back end, to plugins &gt; add new, and I search for &#8220;Portfolio for Elementor.&#8221; It is by WP Pug over here. Install Now; then I activate it. And now we see here at the left portfolio for Elementor. So I can create a new item and actually it&#8217;s just a normal screen of WordPress. Well I want to change it. I want to enable Elementor to do it. So I go to Elementor &gt; settings and then here post types and general I select portfolio for Elementor. Save the changes. So now, here at portfolio for elementor, I can add new item and I can use Elementor. So I can say Wedding Daniel and Lea. I add new category, it&#8217;s called photography and also here, I can have subcategories, but I don&#8217;t need them and I want to have a featured image. So I said it, upload files &gt; select files and I&#8217;ll select all the files of this portfolio item. So I go to folder 3 &gt; portfolio photography Daniel and Lea, and I will select everything, CMD+A or CTRL+A on the PC. I open it and I select this as my featured image. Okay. Then I publish it first and then I click on Edit with Elementor. And it says, &#8220;The preview could not be loaded.&#8221; Well that can be the case; in that case you should go to settings &gt; permalinks &gt; post name &gt; save the changes and another time. Now I go to portfolio for Elementor. I click here and I click over here &#8211; Edit with Elementor and now it should work.<\/p>\n\n\n\n<p>I click over here so I preview the changes, but actually I want to go to the blog page &gt; Edit with Elementor and what I want to do, right mouse click &gt; save as a template and I call this Header. I save it over here. I close it then I go over here. I click on this folder. I go to my templates and I insert the header: yes. And I call this Wedding Daniel and Lea.<\/p>\n\n\n\n<p>Then over here I want to add a gallery. So I search for gallery &gt; image gallery and I add all the images. Select this one and then hold shift and select this one, create the gallery. I can change the order &#8211; reverse the order, Insert gallery. Change the image size to medium large, columns: three. You know what, large and I want to use the lightbox and I can also say I want to have a random order. Okay. I go to style, I can change the spacing &#8211; 15 is okay. You can increase it decrease it; 15 is okay.<\/p>\n\n\n\n<p>We can have a caption but I think everything is okay. I can click over here. I update it before I do anything else and I can go to the global settings and then here I see lightbox. Image lightbox: I want to turn it on. Enable in the editor: no, because then if I click on the image, I open it. I don&#8217;t want that.<\/p>\n\n\n\n<p>So again over here global settings Lightbox, enable, not in the editor but I can change the background color, the user interface color and the hover color. So if I take a look over here, now it works and I can navigate through all the images. So I really like that. I click over here again, content, I don&#8217;t want to have a random order about default, but over here I want to change order. I want to bring this one here below because that&#8217;s the longest image we have. Like that. Update. And we can take it a step further. Now I want to duplicate this area and drag it here below and I say related portfolio items. Then I go over here, I scroll down to essential add-ons, and I go for the post grid. I drag it here below in a new section and I change the source from post to portfolio for Elementor. We only have one but I can configure it. So portfolio category photography, now I want to show three posts and the layout settings, I want to have three columns, show the image and everything else. I don&#8217;t want to show no title, no excerpts, no meta; you know what &#8211; may be the title.<\/p>\n\n\n\n<p>Then I go to color &gt; typography &#8211; I make this blue I make centered and a bit smaller like that. Perfect! Update. Now I want to save this page. How can I do that? Save options and I save this page as a template. I call this portfolio photography. Save it and then I close this. Exit to the dashboard and I add a new item Montana Lisianthus and this is the category Film. I want to have a featured image, this one. Then I publish it and I edit it with Elementor. What I will do now to save some time, I click over here &#8211; my templates &gt; portfolio photography, I insert it: yes, and then over here I select Film. So in that way you see related portfolio items for every category. I need to change this to Montana Lisianthus and I want to remove this and I want to add a video. So I search for video, then I need to grab the link &gt; portfolio &gt; film &gt; Montana and I grab the link from Vimeo, copy it, the source is Vimeo and I paste this. I don&#8217;t want to show all this stuff, just like this. Perfect! Update.<\/p>\n\n\n\n<p>Now I will add a few more portfolio items and then I will be back with you when I have nine portfolio items. So over here, we have nine portfolio items and if I go to the website, to portfolio I see nothing. So I edit the page, I edit it with Elementor and over here I search for portfolio &#8211; there it is. I drag it over here and there they are. So if I update it and I take a look, this how it looks. And when I click on it, it looks like this. So over here &#8211; related portfolio items are video related. So if I click over here, I see another video and if I go back to portfolio and I click over here, I can see the images I can click on it and scroll through them. And over here I see related photography portfolio items and also here. So that looks really beautiful in my opinion, but we can take it a step further. I click on portfolio and I go to Elementor. So right now, number of projects to show: 12 is okay. Do I want to show category filter: yes, and there it is. Use the item margin; if I would say &#8211; no, there&#8217;s no margin, maybe you like that. The amount of columns: three, grid style boxes or masonry &#8211; that means when you have a different size for instance over here, it will be longer. But what I don&#8217;t like is that there is a gap over here. So I say boxes, and I&#8217;ll leave the project details. Advanced &#8211; no. Perfect! So update; refresh.<\/p>\n\n\n\n<p>What we can do now &#8211; we can categorize everything. So if I only want to see the film related portfolio items, I click over here. If I only want to see photography, I click over here and if I only want to see web design &#8211; I click over here. So that&#8217;s how it works. When I hover over it, I see the title and the category. So if I go to the home page, I want to edit it with Elementor. i want to scroll down and over here I want to click here and I want to go to my templates and import the header, yes. Okay; over here I want to say recent blog posts. I go over here, close this, close this. I want to add the EA post grid, drag it here below and I want to have posts as a source: three posts. And at the layout settings three columns, like this. And what I can do, I click on the preview changes then I go to blog &gt; Edit with Elementor &gt; right mouse click &gt; copy &gt; right mouse click &gt; paste style and now we&#8217;ve changed the style.<\/p>\n\n\n\n<p>So from here to a different page, isn&#8217;t that amazing? I want to make the title smaller, so let me see. Style, color and typography and I&#8217;ll make it smaller like that. And excerpt, I want to get rid of that. So I don&#8217;t use it. Layout settings &#8211; where&#8217;s the excerpt? No excerpt. I can place everything in the center if I want to. Here&#8217;s the title, over here. Like that. I go to the section settings and here at padding, I say Ferdy and at the right zero and at the left zero, then I duplicate this area, I make this blue or this blue over here. I want to make the background white. I can also say it over here &#8211; white. I remove this. I call this recent portfolio items. I search for portfolio. I drag it over here, show three projects, no filter. Use margin and it is okay &#8211; update. Now I go to the home page and it looks like this. This is the website we have made recent blog posts, recent portfolio items, nice footer. The about page where we used a template and we adjusted it, we got the plug-in contact form. Same goes for services: we imported a template, we have the portfolio page, we can filter things. And we have the blog page with two different ways of how to display it &#8211; actually three, because you also can use the Astra settings and the contact page.<\/p>\n\n\n\n<p>So what is next? If you have questions, you can leave a comment on YouTube, or you can go to Facebook.com a search for Elementor community. You can join all those groups and ask questions over there. If you want to know more about SEO, you can search for Ferdy SEO or take a look at the description. I have two tutorials about it and they are from 2017, but they are still great and I will make a new one meanwhile. You can learn more about MailChimp, or you can learn more about how to start a business from scratch and that&#8217;s called &#8220;byobas ferdy&#8221; and there I&#8217;ll talk about how to develop a business mindset, how to find your niche. Create an instruction video like I do. So there&#8217;s a lot more that you can see. I want to thank you for watching this video. You have made an amazing website and now you can make websites for a living if you want to. Good luck with everything you do. Feel free to like this video, feel free to subscribe for more upcoming videos and then you&#8217;ll see me next time. Bye.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Menu Size and Uppercase .main-header-menu a { font-size: 17px; text-transform: uppercase; } White and Bigger Title Featured Image h2.avia-caption-title { color: white !important; font-size: 36px !important; } Transparent menu CSS #top .av_header_transparency { background: rgba(0, 0, 0, 0.6); } White and Bigger Title Featured Image h2.avia-caption-title { color: white !important; font-size: 36px !important; } Contact [&hellip;]<\/p>\n","protected":false},"featured_media":12003,"parent":0,"comment_status":"open","ping_status":"closed","template":"","yt_v_categories":[114],"class_list":["post-10895","youtube-tutorials","type-youtube-tutorials","status-publish","has-post-thumbnail","hentry","yt_v_categories-wordpress"],"uagb_featured_image_src":{"full":["https:\/\/ferdy.com\/wp-content\/uploads\/How-To-Make-A-Wordpress-Website.webp",1280,720,false],"thumbnail":["https:\/\/ferdy.com\/wp-content\/uploads\/How-To-Make-A-Wordpress-Website-150x150.webp",150,150,true],"medium":["https:\/\/ferdy.com\/wp-content\/uploads\/How-To-Make-A-Wordpress-Website-300x169.webp",300,169,true],"medium_large":["https:\/\/ferdy.com\/wp-content\/uploads\/How-To-Make-A-Wordpress-Website-768x432.webp",768,432,true],"large":["https:\/\/ferdy.com\/wp-content\/uploads\/How-To-Make-A-Wordpress-Website-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/ferdy.com\/wp-content\/uploads\/How-To-Make-A-Wordpress-Website.webp",1280,720,false],"2048x2048":["https:\/\/ferdy.com\/wp-content\/uploads\/How-To-Make-A-Wordpress-Website.webp",1280,720,false],"bricks_large_16x9":["https:\/\/ferdy.com\/wp-content\/uploads\/How-To-Make-A-Wordpress-Website-1200x675.webp",1200,675,true],"bricks_large":["https:\/\/ferdy.com\/wp-content\/uploads\/How-To-Make-A-Wordpress-Website-1200x675.webp",1200,675,true],"bricks_large_square":["https:\/\/ferdy.com\/wp-content\/uploads\/How-To-Make-A-Wordpress-Website-1200x720.webp",1200,720,true],"bricks_medium":["https:\/\/ferdy.com\/wp-content\/uploads\/How-To-Make-A-Wordpress-Website-600x338.webp",600,338,true],"bricks_medium_square":["https:\/\/ferdy.com\/wp-content\/uploads\/How-To-Make-A-Wordpress-Website-600x600.webp",600,600,true],"gform-image-choice-sm":["https:\/\/ferdy.com\/wp-content\/uploads\/How-To-Make-A-Wordpress-Website-300x300.webp",300,300,true],"gform-image-choice-md":["https:\/\/ferdy.com\/wp-content\/uploads\/How-To-Make-A-Wordpress-Website-400x400.webp",400,400,true],"gform-image-choice-lg":["https:\/\/ferdy.com\/wp-content\/uploads\/How-To-Make-A-Wordpress-Website-600x600.webp",600,600,true]},"uagb_author_info":{"display_name":"Ferdy","author_link":"https:\/\/ferdy.com\/author\/"},"uagb_comment_info":4,"uagb_excerpt":"Menu Size and Uppercase .main-header-menu a { font-size: 17px; text-transform: uppercase; } White and Bigger Title Featured Image h2.avia-caption-title { color: white !important; font-size: 36px !important; } Transparent menu CSS #top .av_header_transparency { background: rgba(0, 0, 0, 0.6); } White and Bigger Title Featured Image h2.avia-caption-title { color: white !important; font-size: 36px !important; } Contact&hellip;","_links":{"self":[{"href":"https:\/\/ferdy.com\/wp-json\/wp\/v2\/youtube-tutorials\/10895","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ferdy.com\/wp-json\/wp\/v2\/youtube-tutorials"}],"about":[{"href":"https:\/\/ferdy.com\/wp-json\/wp\/v2\/types\/youtube-tutorials"}],"replies":[{"embeddable":true,"href":"https:\/\/ferdy.com\/wp-json\/wp\/v2\/comments?post=10895"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ferdy.com\/wp-json\/wp\/v2\/media\/12003"}],"wp:attachment":[{"href":"https:\/\/ferdy.com\/wp-json\/wp\/v2\/media?parent=10895"}],"wp:term":[{"taxonomy":"yt_v_categories","embeddable":true,"href":"https:\/\/ferdy.com\/wp-json\/wp\/v2\/yt_v_categories?post=10895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}