{"id":10979,"date":"2017-10-27T08:57:00","date_gmt":"2017-10-27T06:57:00","guid":{"rendered":"https:\/\/ferdy.com\/?post_type=youtube-tutorials&#038;p=10979"},"modified":"2025-01-23T14:48:43","modified_gmt":"2025-01-23T13:48:43","slug":"how-to-make-a-website-using-wordpress","status":"publish","type":"youtube-tutorials","link":"https:\/\/ferdy.com\/youtube-tutorials\/how-to-make-a-website-using-wordpress\/","title":{"rendered":"How To Make A Website Using WordPress"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"h-important-links\">Important links<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/ferdykorpershoek.com\/how-to-make-a-wordpress-website\/\" target=\"_blank\" rel=\"noopener\"><br>Get a Free Domain And Webhosting<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<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-contact-form\">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\" id=\"h-header-css-for-blogpost\">Header CSS for blogpost<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">h2 {\nfont-size: 10px;\ncolor: #1F96C4;\nfont-weight: bold;\n}\n<\/pre>\n\n\n\n<p>Learn Step By Step How To Create A WordPress Website. In this tutorial we will be using free tools, plugins and stock images! If you have any question, please leave a comment&nbsp;<a href=\"https:\/\/www.youtube.com\/watch?v=NUlI09hn0Bo\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>. I will do my best to answers you a.s.a.p!<\/p>\n\n\n\n<p>In the video you see additional links and CSS codes that will help you to follow along in the tutorial! Goodluck!!<\/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 a professional website using a free theme, a free page builder called Elementor and free stock images. Even if you have never made a website before, and this will be your first one, this tutorial is for you. Let me show you what we are going to make in this tutorial. So this is the website we are going to create. You can have a call to action over here, your social media icons, a great menu with a submenu, beautiful logo and if you scroll down, it shrinks a little bit and it will be sticky on the whole website. Beautiful animated title with a call to action for portfolio or contact. If I scroll down, I show my services \u2013 photography, videography and web design, and we want to show a little bit about who we are, with a call to action, the About Us page, what do clients say about us, we can have beautiful animations like that. We can show the clients we work for\u2026 and over here we have the footer widget area, with an Instagram widgets, the Facebook widgets and the recent post widgets and here Ferdy Korpershoek productions and our social icons over here. I click over here, and I go up again but let me show you the power of Elementor.<\/p>\n\n\n\n<p>I click over here, and elementor is a free live page builder, so you can see the result immediately. So maybe I want this text to be bigger or smaller, then we have content, style and advanced. I want to style it so I go to style and I make this bigger or smaller and you see the result immediately. You see that line over here, it\u2019s not straight. I can click over here, on the section settings, I go to style, scroll down, I go to shape divider and I can go to the button which is over here and I can tilt it, I can change the height, so I can tilt it quite much and I can also say, I want to have mountains or drops. You don\u2019t see that good, I\u2019ll bring it back to tilt. You can also do it at the top over here; you can choose the type &gt; pyramids like that or [unclear \u2013 02:10] opacity like that, curve and you can change it, you can change the color, you can change the width and change the height. So you can do a lot of things within Elementor to style things within your website.<\/p>\n\n\n\n<p>Then we go to the About Us page; I\u2019ll show you how to configure this and it\u2019s all made with Elementor \u2013 a free page builder. That is the page builder we will use. If I scroll down, a nice text, I will show you how to create photos like this, a text about me, photo about me, a text about my wife and a photo about my wife with a beautiful animation. The call-to-action if you click over here, you scroll down to the get in contact with us, with a nice background of time-lapse and a few social media icons.<\/p>\n\n\n\n<p>If we go to the services page, I\u2019ll show you the services and if you click over here, you go to the area photography with a nice media gallery and getting contact button. Some information about videography; if you click over here you see more information, the amount of wedding films, business films and video clips we have made. It is amazing what you can do with it. It\u2019s an amazing page builder. Here we can show, what we are capable of with a nice animation, I show the website I made, and if people are interested based on what they see so far, they can click over here and then they go to the contact form and they can get in contact with us.<\/p>\n\n\n\n<p>We have the portfolio where we can showcase what we have made. You can select the category, for instance you only want to see videography, portfolio items or photography or web design. If I click on it, I can show the pictures like that and then you can go to the previous portfolio item or next one or the related ones. I\u2019ll show you how to create a blog page like this with a featured blog post and here we see the other ones and you see it all looks really clean and beautiful. If I click over here, I\u2019ll show you how to create a sidebar like this, how to create a blog post with images and headers like that, how to save a little bit about who you are as the author of the blogpost. People can leave a comment. And then we have the contact page where people can see where we are located, they can get in contact with us and they can see some information and they can see who they are dealing with. But it\u2019s all nice.<\/p>\n\n\n\n<p>What I really love about Elementor, when you have a website and it\u2019s finished and it looks amazing on a desktop and you\u2019re going to take a look at your tablet, then it can look a little bit weird. This looks fine but over here, I don\u2019t like this. What can you do \u2013 you click over here, on the elements, you go to the style to the content what you see, you see desktop icon, tablet icon and a phone icon. Right now, I\u2019m over here. Now just for the tablet, I can change the size. So I make it 20; so I say 20 over here, I click on this one I do the same, I go to style, scroll down into content and change the size to 20. Same over here, I save it and now it looks fine. But if I take a look at the same website on a mobile, then I see that this looks weird. So I click over here in the mobile version and here again, I see the alignment and you see it\u2019s at the right, I bring it to the center also over here, I bring it to the center and now if I save it and I want to view the page, you see it looks really nice on a desktop and if I make it smaller, it will be adjusted. This is perfect for a tablet and if I go to the mobile version, you see it\u2019s here in the middle. So that\u2019s amazing; you can configure everything exactly as you want it to be with the elementor page builder.<\/p>\n\n\n\n<p>If you like what you\u2019re seeing so far, please give this video a thumbs up. It would mean the world to me. Thank you for that and let\u2019s continue with this tutorial.<\/p>\n\n\n\n<p>Everything you\u2019ve seen so far is with the free page builder Elementor, you can also get elemental pro and you get extra possibilities and you get extra features and a few of those are the slider, you can have an animation in the background, you can have a call to action, you can have multiple sliders. The latest blog post, in a really nice way is displayed. Latest work in a really nice way \u2026 You have a lot of options. I will also talk about these options. So without further ado, let\u2019s get started with the amazing page builder called Elementor.<\/p>\n\n\n\n<p>The first thing we are going to do is get a domain name and web hosting, and I can provide you through my link with a 60% discount of your hosting. After that, we will install WordPress, after that we are going to install a free theme called flux and a free page builder called Elementor; and when we have done that, we will create our amazing website. So let\u2019s get started. If you have web hosting already, that\u2019s great- then you can skip this part, if not then follow along. So if we want to get a domain name and web hosting, we go to webhosting125.com and then we click on the link and it will redirect us siteground. Siteground is in my opinion the best web hosting provider. Their support is amazing and if you take a look at popular Facebook groups, you\u2019d see siteground is number one. So I advise everyone to use siteground. We have three plans and you need only one, so which one do you need, if you want to make your first website then you can start with a startup area. This is $3.95 per month euros or dollars and it holds one website, 10 gigabyte of space, it\u2019s suitable for 10,000 visits per month and if you get more than that, that is great, then you can upgrade to GrowBig. With GrowBig you can have a lot of websites under one name and you only pay $6.45 per month. What does it mean you get web hosting for $6.45 per month and besides that you can have extra domain names and add them to your web hosting, and in that way you can have multiple websites with a few domains for just $6.45.<\/p>\n\n\n\n<p>If you get more visitors and need more space, then you can upgrade another time to GoGeek. But we start with one website only $3.95 per month, I did some tests and siteground is the fastest web hosting company I\u2019ve found and they have great customer support, they have a live chat. So in order to get a domain name and web hosting here, let\u2019s click on get started.<\/p>\n\n\n\n<p>We can choose a domain name, if you have one already, click over here. You can fill in over here and it will do a website transfer for free. I want to register a domain name, if you choose Facebook and select .com and you say proceed, it says \u201cError, you have chosen invalid domain name.\u201d Why is that? Because Facebook.com already exists. But if I would say elementor2018.com and I say proceed, it says congratulations \u2013 domain Elementor2018 is available for registration with your hosting account. I need to fill in some details \u2013 my email address elementor@newwebsite.ferdykorpershoek.com and I need to create a password and here\u2019s some client information, my country \u2013 the Netherlands, first name, last name, my company, my city and all that stuff and your VAT number if you have a company, you can fill in your VAT number and then the taxes will be subtracted from the total amount you have to pay.<\/p>\n\n\n\n<p>I scroll down, I want to pay with credit cards, my card number, my billing address is the same as given in the contact information and I want to have the startup plan, I can change this from Amsterdam to Chicago because I want to create a website that\u2019s for English people, the period is 12 months, I like it and I have a domain registration, I don\u2019t want domain privacy. If you do that, then nobody can see who the domain owner is, so they can\u2019t email you with questions. I want to be transparent, I leave it as this. I don\u2019t need a site scanner, so I also leave that as it is. So total $59.35, I confirm that I\u2019ve read and agreed to the siteground terms of service and if you get web hosting here at siteground through my link, I get a commission. So thank you for that, it supports my channel and helps me to create more tutorials. And what you can do now is pay now. \u201cYour order was successfully submitted.\u201d So that\u2019s great. \u201cPlease hold, it takes less than 2 minutes to complete your account creation.\u201d And it takes less than 10 seconds. So we completed step 1. We have a domain name and web hosting.<\/p>\n\n\n\n<p>I click over here, proceed to customer area. Now siteground wants to help you, but we don\u2019t need the help of siteground because I will show you everything. So when this pops up, say thanks but I don\u2019t need help and click on proceed. I click on my accounts over here and I go to the cPanel. We are going to install WordPress. I go to the cPanel by clicking this red button. I remember my selection, I click on proceed and here is our cPanel. What I want to do, I want to install WordPress. Over here is the auto installers, you can click on WordPress or you can go to WordPress tools, install the WordPress, I click on this one, I scroll down and here it says install now. I click on it and I want to choose HTTP. If you have only one website, this is the only option, here it says the directory; I can install it at Elementor2018.com\/test or something like that. I keep this empty and here are the site settings. The site name is Ferdy Korpershoek Productions, the site description \u2013 you deserve to be seen. This is not necessary. And my username FerdyKorp and my password, I like it. My admin email \u2013 Elementor@newwebsite.ferdykorpershoek.com. The language \u2013 English and everything here is fine.<\/p>\n\n\n\n<p>What you see over here, I need to verify my account, otherwise my website will be offline within two days. So I go to my email, I click over here and I need to verify it. So in order to ensure your domain remains active, you must now click on the following link. Click over here, scroll down, verify information. \u201cThank you the following contact data has been verified.\u201d Really important to do, if you don\u2019t do that your website can be offline after a few days. I click on install and it says it can take up between 3 and 4 minutes, but it only takes 15 seconds. And now we have installed the WordPress.<\/p>\n\n\n\n<p>I can go to the front-end on my website or to the backend. If I click on the front-end, it opens in a new tab, this is the front-end. Everybody in the world that goes to Elementor2018 right now will see this. If you go to the backend, this is the place, only we can access and we can change everything on the website, then we see the backend. The great thing about siteground is that our website is online immediately. With other web hosting companies I worked with, it took 20 minutes, sometimes it took 2 hours and sometimes even 48 hours and now we are online immediately. What I want to do now, I want to clean my website up. When you install WordPress through siteground, siteground brings some plugins with it and I don\u2019t need them. I want to start really clean.<\/p>\n\n\n\n<p>So the first thing I will do, I will dismiss this over here. I will close this and what I want to do, now I go over here to FerdyKorp and I edit my profile. You can choose a color scheme, you can have it light or like sunrise, or midnight; I like to use it as default. I scroll down, my user name is this one, my first name is Ferdy, my last name, my nickname and then my display name publicly. If I click over here, and I hold command or control on the PC, I go to my website and here\u2019s a blog post. If I click on it, you see it\u2019s by Ferdy Korp. I want to change that. So I change my name publicity to Ferdy Korpershoek. You see right now it\u2019s \u201cHowdy, Ferdy Korpershoek.\u201d I scroll down and if you want to, you can generate a new password. I can do that over here, update profile and that\u2019s done.<\/p>\n\n\n\n<p>Now if I refresh this page, it\u2019s by Ferdy Korpershoek. What I also see when I\u2019m here at this blog post, I see Elementor2018\/ the year and the date and then the title. If you want to change that, go to the back end &gt; go to settings &gt; permalinks, I like to keep things clean and here it is displayed, the common settings of the permalinks day and name; so it will look like this. I don\u2019t want that, I want it to look like this \u2013 Elementor.com\/ (then the post or the page name). So I click on post name, I scroll down and I say save the changes. Now if I go to the home page, I click on this link and I go to elementor2018.com and I go to the blog post and I click on it, it looks like this. It\u2019s better\u2026 way better. I close this for now and I go to the dashboard.<\/p>\n\n\n\n<p>Here is a post and I want to delete it. So I click on the post, I click on trash, now I need to go to the trash over here and I can delete it permanently by clicking this link or I can empty the trash. I click on empty the trash and now if you go to the dashboard, it is gone. I go to plugins and jetpack came with siteground; what I can do, I can deactivate it and I can also select all the plugins and do a bulk action, which is delete. I click on apply &gt; yes, I\u2019m sure and now if you go to the dashboard and I close this, and this, and this, and this \u2013 it looks way better in my opinion. It looks really clean. I like to work in a clean environment, and in that way you don\u2019t have unnecessary stuff on your WordPress website. Your website will be quicker.<\/p>\n\n\n\n<p>So what I can do? I want to create a few pages. So I can go to pages &gt; add new, but if I\u2019m at the front end I can hover over new and create a new page. This bar is only visible when you are logged in, so all the visitors of your website will not see this, only when you are logged in so I hover over new, I click on page and of course I want to create a home page and when I\u2019ve done that, I can publish it and you see Elementor2018\/home. I add a new one and I want to tell a little bit a little bit about myself. So I can say About me, or About us or about\u2026 Publish; add new, I want to show my services so I say services &gt; publish. And in this tutorial I will have three services I will offer \u2013 photography, videography, and web design and I do that on purpose because I will show you it with portfolios how we can have different categories. If you\u2019re not a photographer, videographer or web designer, this tutorial still applies to you because I will show you the principles I use in this tutorial that will help you to create a beautiful website. So the three services are, the first one, I add a new page for it; Photography &gt; publish, Add new, videography, I publish it, and the third one \u2013 web design and I publish it. What else do I want to have? I want to showcase what I offer, so I click on add new and I say portfolio, publish. Maybe we want to write a few blog posts, then I add a new one and I want to have a blog page, blog and I want to give people opportunity to be in contact with me, so I add a new page and I say contact, publish.<\/p>\n\n\n\n<p>When I take a look at the website, you don\u2019t see all those pages, how can we do that? I want to close this for now. I hover over here and I can go to menus or I go to the back end, to appearance, menus and we need to create a menu. So I give it a name, I call this main menu, you can give it a different name if you want to. I create the menu and here are all the pages I just created. I want to view them all, I want to select them all and I want to add them to the menu like that. What I see, I have two home pages; one is a page we just created and one is a custom link. I want to remove the custom link, how can I do that, I click on this arrow down, I click on remove. If I save the menu and I open this in a new tab, I still don\u2019t see the menu. I go to the back end and I scroll down and I want to assign the menu to a certain place on the website; menu settings, display location and I want to show it in the top menu. So I check this and if I check the social links menu and I save it, and I refresh it, I will see it over here and if I scroll down, I will see it over here but I don\u2019t like this way of displaying things. So I uncheck this one. I can also change the order.<\/p>\n\n\n\n<p>So the whole page I wanted to be the first page, so I drag it up then about us and portfolio and between those my services, blog and contact. So if I save it now and I refresh the page, I have home first, about us, like that. But I want this to be submenu items, how can I do that? I scroll down, I grab photography and I go to services but I go to the right a little bit and you see there\u2019s a tab. I release it and now it is a sub-item. The same I can do for videography over here and over here. I even can have another sub item, so I drag it to the right even more. Now web design is a sub item of videography, videography is a sub item of services. So how will that look? I refresh it, home, about us, services, photography and if you hover over videography, you can go to web design. So that\u2019s how you can navigate through your menu. It\u2019s really easy just dragging and dropping. I like it this way, I saved the menu and if I go to apple.com and I go to iPhone and I want to go back to the home page. There\u2019s no home page over here, you need to click on the logo. So that\u2019s why I want to do the same, I want to remove the homepage, click over here, remove it, because I want to let people click on the logo when they want to go to the homepage. Right now, we don\u2019t have a logo but we will have one. If I click on this name, I go to the home page and what does it say over here, Posts \u2013 nothing found. A WordPress homepage is normally showing the latest post, but we don\u2019t have any posts. I want the homepage to be normal page. So I go to the back end, to settings &gt; reading &gt; front page displays, your latest post; I want to change it to a static page and I want to select the page home and the post page blog. Save the changes and now if I go to the home page, it shows the home page. There\u2019s not much information, but it shows the homepage.<\/p>\n\n\n\n<p>I want to go to the back end and walk you through the settings, in general we have our site title FerdyKorp Productions, the tagline \u2013 \u201cyou deserve to be seen\u201d; you can also say something else, the URL, your email address and you can go to the writing and leave this as this reading we just changed. If you want, you can discourage search engines to following your website and if you go to media, you can organize all your files into month and year based folders in your website, if you uncheck it, it will all be stored in one folder called uploads. I like this one. If I go to permalinks, we discussed this already, so those were the settings. What I want to do now, I actually don\u2019t like the way how this look.<\/p>\n\n\n\n<p>I want to use a different word press theme. What is the WordPress theme? If you go to the backend, you go to parents and go to themes, you can choose a lot of look and feels for your website. If you install WordPress, you will get three themes and if I would activate this one, the information on your website will stay the same but the look and feel and the navigation will be different, and now it will look like this with the menu over here. If I click over here, it will open like that. There are also premium themes, I have a lot of tutorials about them but in this tutorial, I want to focus on the best quality website without spending money only for web hosting. So I want to use a free theme and we can find it within WordPress, I go to themes and I add a new one and here you can choose between a lot of WordPress themes. You can even take a look. I want to search for Phlox \u2013 it\u2019s a flower. I want to install it, I want to use this theme for this tutorial. It\u2019s an amazing theme. I activate it and what I like to do, I want to keep it clean, so those themes I don\u2019t need anymore, I have phlox, I don\u2019t need those three. So I click on theme details, delete, delete and the latest one, delete.<\/p>\n\n\n\n<p>Well, if we take a look at the website and we refresh it, we don\u2019t see much yet. Our menu is gone, but we will create something beautiful out of this. So I go back to the backend and what it says here above \u2013 I need to install the core plug-in. I click over here, I say install now and I want to activate it. I can run the setup wizard, I don\u2019t want that. I want to do everything myself. I want to add my menu, so I go to the backend &gt; menus and here below, I want to assign this menu to the primary navigation. Save the menu and refresh it. Now it is over here, about us, I don\u2019t like that it\u2019s here above, but we will fix that. I close this for now- the backend, and I want to customize the homepage especially the header area for now. How can I do that, I click on customize. Everything has its own customization option and this free theme has really great options, and I will show them to you step-by-step, you will see the result immediately, I press CMD \u2013 (minus) once, so I see the website as I should see it \u2013 this area at the left, and the menu at the right. You see, this looks really nice. The first thing I want to do, I want to add a logo. If you want to follow along in this tutorial with the same images I use, then go to FerdyKorp.com, go to tutorials, Elementary tutorial 2018 and over here it says \u201cdownload the images I used in the tutorial\u201d; click on it, you download it, you unpack it and then you can follow along with the same images. I cannot share all the images I use because for some images I have paid, so that would be illegal. I go to site identity and here I can upload a logo. I select a logo over here and I can upload a logo clicking this button or I go to upload files and I click on this button. On my desktop, I have the file you can download and I go to customize and here is my logo. It\u2019s 92 by 82 pixels, I open it, it\u2019s a PNG so the background is transparent and I can optimize it, so I say space over here, over here; I will select it, I will copy it and I will paste it in the alt text and you should do that with all your images, that\u2019s good for the search results. I select it, I don\u2019t want to crop it. I skip cropping and there it is. Here\u2019s my site title \u2013 Ferdy Korpershoek productions, you deserve to be seen and here we can change the width of the logo. So if I would say 30, you\u2019ll see the logo becomes really small. If I would say 200, it will not be larger than this area. So let me see, 92 is original width and I will leave it like that, then we have the site icon, it\u2019s the area you\u2019ll see over here, so I select an image, upload files, select files and here\u2019s the favicon 62\u00d762, it needs to be square and it doesn\u2019t matter how big it is, you should have at least 16 x 16 pixels. I open it, optimize it, select &gt; no cropping, and there it is, I really like it.<\/p>\n\n\n\n<p>I scroll down, I think it\u2019s okay and I say it\u2019s safe and publish. I go back and now I go to the general settings over here. I click on it and I go to the general layout and here I can assign what kind of layout I want to have. Do I want to have a full white layout or a box layout. If I would say CMD \u2013 \u2013 \u2013 and I say box layout, you\u2019ll see there is a box around here; that means that the website will be wrapped in a box. And we can have a different background if we want to, but it means if I have full width slider, it will not go from here to here. I want that, so I choose full width. Then we can have a really wide website like that or smaller one like that. I like 1200 pixels, I say CMD + 0 and minus (-) one time, so I see how it is. So I like this layout. I go back and I go to the website socials. We can have social icons in our website and I really like that, so I go to Facebook, I go to my Ferdy Korpershoek page and I copy this link and I paste over here and what we see, over here appears the social icon. Same for twitter, twitter FredKorp, copy the link and paste it; google plus, I have a YouTube channel \u2013 youtube.com\/ferdykorpershoek, copy link, paste it, I have Vimeo but I will not show that over here. Let me see, I have Instagram over here. Instagram, there it is; copy it and that\u2019s okay for now. I save it and I publish it and now we have our social icons over here. I go back, page animation and pre-loading. If you want to, you can have a page animation. If I turn this on and the website loads, you\u2019ll see a small fade. You can also choose this one with animation and then you will see, it appears like that.<\/p>\n\n\n\n<p>It looks okay, but I don\u2019t like it. I don\u2019t see the use of it so I uncheck it. What you can do, you can enable the page pre-loading if you have a really big website with a lot of images, then you may want to use a page pre-load; that means there\u2019s logo over here and when the complete website is loaded, then the complete website appears. So instead of you first see this image, then this image, then here a few images, it all appears at once; but if you use a page pre-loading, then you first see the logo until the website is loaded completely.<\/p>\n\n\n\n<p>If I do that again you see also a bar over here like that. So use custom loading, I can have an image, I delete this one, I add one \u2013 for instance this one. What you\u2019ll see over here, because website loads really quickly, you see the really short time. And if you have a progress bar, you can give the progress bar a certain color. I will not use it but I wanted to show you what is possible. So I save it and I publish it and I go back. Here we have custom JavaScript code. I will not use it, I go back. I want to use this for Google Analytics and if you have Google Analytics, go to GoogleAnalytics.com; if you don\u2019t have it, you can sign up you, you go to admin. I have it already. You can go and create a new account \u2013 Elementor, Elementor, Elementor2020.com for instance; this is all fine with me, get a tracking ID, I accept everything, I can click over here, copy the code and then I paste it over here. I save it and I publish it and that\u2019s it. I go back and I go back again, I go to appearance to the website background and we don\u2019t have the background because we have a full wide website. But if you wanna have a box layout, you can turn this on; you can give everything outside of the box different color or an image and if you add an image, you can style it a certain way. You can have a pattern, you can have a repeat of the background, you can have a certain position of the background, you can make it a fixed background so if you scroll, the background stays in the same place, but I don\u2019t use it so I go back. Content background is this area over here, if I make this black, everything here becomes black. I don\u2019t want that of course, I want it to be white. A website frame, if I turn this on, you will see a nice frame over here. Maybe that is nice for photography websites, so you will see better and I turn this off.<\/p>\n\n\n\n<p>Typography, we see certain typography over here, our fonts. I can turn this off. Then we have all the default fonts that comes with Phlox, I can turn this on, I can select a different font over here; there are a lot of fonts. So for instance if I go to the main content over here, we don\u2019t have that, you do not see it. But if I go to the page heading, that is this title over here and I would say Questrail, you\u2019ll see it changes. So that\u2019s how you can change it over here. I like open sans, I select that one and like I say make it really bold or really thin. The menu over here, you can change it; you can make it even bolder or you can make it really thin, then you don\u2019t see it. So I like 600 and I like to use Raleway. So that\u2019s that, the skin options \u2013 if you have a video player or audio player, you can choose dark background with light icons or the other way around. I will probably not use it and if you have a lot of blog posts, then you can navigate to different pages, you can select the layout of the navigation of that. The mobile browser \u2013 you can change the color of the address bar, I want to change it to this color of my logo. I use color picker for that. In Google Chrome, just search for Google Chrome color picker and you will find it, you can install it. I grabbed the color, I copied color code and I paste the color over here and I say apply. I go back, I go back and I go to the header settings. The header section is this area over here, we can select the certain layout. Right now, we have the logo at the left and the menu at the right but you can also have it the other way around. I click on this one and you see immediately the logo at the right and the menu at the left. Almost all the websites in the world have it the other way around, so I use the same thing because I want people to navigate really easily through the website. So it will be a little bit weird if my website is completely different than all the other websites in the world. I don\u2019t want people to get confused, I want people to make use of my services. So I leave it as this. What I can do, I can have a hammer menu or a burger menu and then it becomes like this and if I click on it, it looks like that \u2013 a real nice option.<\/p>\n\n\n\n<p>I scroll down, but you can also have it like this, the logo in the middle \u2013 menu like that. So there are a lot of options, I\u2019ll use the first one and I scroll down. We can have a search button here at the right but I don\u2019t want it, I have one already here, so I disable it.<\/p>\n\n\n\n<p>The header width \u2013 right now, it\u2019s from here until here. If I press CMD \u2013 a few times, you\u2019ll see it starts here and it ends here. If I would say, the header width is completely 100% of the page, then will be totally at the left and the menu totally at the right. I don\u2019t want that and I can also change the height of the header, so I can say 150 and then they\u2019ll be like this. I will leave it at 80. If I scroll down, you see the logo fits really nice. It becomes a little bit smaller, I can disable the border so it will be gone over here, I like the border. We have \u2018enable overlay header,\u2019 you do not want to do that. If you do that then this area overlaps the menu, it looks really weird. And we can have a header background color, so this area can have a certain color if you want to. And then we have the sticky header height, if you scroll down, this is the height of the sticky header. It\u2019s 50 pixels you can make it bigger or smaller. So say 80 or 60 and if you think the logo is not shrinked enough, then you can go back, go to site identity and make it a little bit smaller like that. Save and publish and if we take a look, it looks like this and when we shrink, it looks like that.<\/p>\n\n\n\n<p>You can also have a color for sticky header, so if you change this color, when you scroll down it means you\u2019ll adjust this area over here. \u2018Scale the logo on the sticky header\u2019 \u2013 yes we want to do it, so it will be a little bit smaller, otherwise it will be the same height and width. Go back and let\u2019s go to the header menu. It\u2019s a horizontal menu, you can make it vertical and then it will look like this; I don\u2019t know why you should want that. I bring it back and then we have the sub menu skin. Right now, if we hover over services you see this. If you select this one for instance, it will be a dark background and light text. So you can take a look what you want. I like this one, so when I hover over it, it becomes dark.<\/p>\n\n\n\n<p>Submenu animation effect \u2013 right now it will be there immediately, you can also say, fade and move; now if I hover over it, it appears. I like it more. Right now, we see those dots over here, you can uncheck it and then it will be gone. I like this better, so I leave it as this. Here you can select the location of your submenu. I save it and I publish it and I go back to the burger menu. This is only if you have a burger menu, so if you go to header section and you say I want the menu to be like this and go back, you go to the burger menu, you can change the color to this one, you can change the form, make it bigger like that. There are a lot of options here, use an indicator. Do you want to have the toggle like that? And you see Phlox shows that really nice. So you don\u2019t have to select it or activate it before you can see. You can see it over here; and that\u2019s what I like about this theme \u2013 some options are even better than paid themes, premium themes. So that\u2019s a great thing.<\/p>\n\n\n\n<p>I don\u2019t use the burger menu so I go back to the header section and I select the first one, but it shows you a little bit what the possibilities are. I go to the top header bar, it\u2019s this bar over here with social icons and I want to display it and here again social icons, on the left we can have something else and here you can choose for social icons, the menu and the text. If you enable this and you have WooCommerce, then you will see a shopping cart, I will bring it back to this one, I change it to this one here at the right. Now I have social icons and at the left I have text. So I scroll down even further and the message on the top is get in contact and then I can have a number over here; like that.<\/p>\n\n\n\n<p>I go back and to the full-screen search, you can choose a skin, dark background, light area or the other way around, so you can choose that. So that was the header settings. Blog we will discuss later. The page, page layout, do we want to have a sidebar \u2013 no, we can edit manually later at certain pages. Display content top margin \u2013 no, I don\u2019t want to have margin at the top; I uncheck it. And I want to have full white layout or a normal one. I leave it as it is. I go back.<\/p>\n\n\n\n<p>Page title \u2013 I don\u2019t want to show a page title. It should be gone, it isn\u2019t. I save it and I publish it. If I close this, you still see it. You can edit the page, scroll down, go to the title section setting, display title bar \u2013 no, update, view the page and now it is gone. I don\u2019t know why it works like that, but this is what we have so far. I think it looks really nice\u2026 a logo, if I scroll it shrinks, the menu sticks around. I have a nice animation. Now, what I want to do. I want to change the look of view of the menu. So I go to customize again, I go to appearance &gt; typography. I enable it. Then I go to the menu over here \u2013 raleways, okay. I want it to be bold. So for instance 800, if I save it, now you see it is bold. It is too bold in my opinion, customize it again, appearance &gt; typography, I scroll down, I say 600 and now you see it like that. I go back and what else\u2026 blog, we\u2019ll take a look at later.<\/p>\n\n\n\n<p>We are at the footer. I like it for now, I will take a look at the footer later and all the other options. For now, this is okay with me. I save it and I publish it. I close it and right now it looks like this. We see the footer over here, we will change it later. For now I\u2019m really happy with how everything looks. The next thing we will do, we will use Elementor as our page builder. Elementor is a free page builder with really professional functions and I will show you how to create a beautiful website with it.<\/p>\n\n\n\n<p>So let\u2019s go to FerdyKorp.com, then we go to tutorials &gt; Elementor tutorial 2018 and I click on get elementor. I click on download or free download, you can leave your email address or you say no thanks, I just want to download Elementor. And now we are downloading, I go to the backend of WordPress, I click over here, I go to plugins &gt; add new &gt; upload plug-in &gt; choose a file, I go to downloads, then I go to Elementor and I open it. I install it now and I activate the plug-in and now we\u2019ve installed the Phlox theme and the page builder Elementor. Now let\u2019s create an amazing website.<\/p>\n\n\n\n<p>And there it is. It\u2019s a free version, you have a lot of amazing options and I will walk you through the options. I close this for now and now if I go to the home page, and I want to edit the page, I can say edit with elementor. I click over here and now we are going to create our home page. So, if we take a look at Elementor here at the left, we can add elements and here we can add new sections. I will walk you through it step by step and at the end of this tutorial, you\u2019ll have a great understanding of the Elementor page builder.<\/p>\n\n\n\n<p>So first we need a section; I click on it and in that section, I can select my structure, one column or two or five. I want to start with a header, so I want to start with one column. I click over here and here it is. There are three parts in this section; we have the section itself. Within this section, we have columns \u2013 we can have one column or two columns or three columns and in those columns we can add elements. So if I click on the plus, I see an overview of the elements and all those elements we can use. This is by far the best free page builder I know. It has a pro version but I\u2019m going to show you what you can do with the free version. So, I want to remove the columns. I want to have only one column, so I hover over here, I remove this column. I hover over here and I remove this column. If I want to go to the settings of the section, I go to this blue area, to this icon and I click on it and here at the left, I can edit the section settings. The sections, columns and elements have three parts, the layout, the style and advanced.<\/p>\n\n\n\n<p>Over here at layout, I can stretch this section. I want the section or the background in this section to go full white. If I press CMD \u2014-, I want the section not to be from here until here, with full white like that and now it\u2019s from the left of the page to the right. Come on zero. The content, I want it to be between the logo and the contact element, so I leave it as boxed and I want to add a background. So I click on style, I can add a color as a background or a gradient or a video and I want to use an image for now. So I click on classic and on image. If you want to use free professional images for your website, then go to pixels.com or unsplash.com and there you can find beautiful images.<\/p>\n\n\n\n<p>So over here at pixels, maybe I like this one and I click over here, I click on free download and that\u2019s it. It\u2019s a really big image as you see. So right mouse click &gt; save image as &gt; save. I go to the backend, I go to media &gt; add new &gt; select the file; I grab the file from the desktop, the original one, it\u2019s 8.7 megabytes and it\u2019s really big so I open it and if you use this within WordPress, your website becomes slow and you don\u2019t want that. So how can you fix this within WordPress, I will show you. I click on the image, I say edit more details, I scroll down and I say edit image. Then I say I want to scale this to 1920 and then it will say 1280, scale. So now it is scaled. I can restore this later if I want.<\/p>\n\n\n\n<p>Now I want to make a selection. I can do it like this and I can change this to 1920 by 1080. Let me see 1080, like that. I select the area I want to have, maybe a little bit lower like that. I click over here again and now it will be cropped till 1920 by 1080. I save it, I update it and now the size is not 8 megabytes anymore but just 385 kilobytes. So I can go to the website and edit it with Elementor and I want to add a background. So I click on style and on image and it is this one 1920\u00d71080. So take a look at pixels.com; you can search for beautiful images like that, all beautiful and you can use it for free in your website or unsplash \u2013 sunset like that, or mountains, wow! Look at that. And you can all compromise it and scale it with WordPress. So that\u2019s amazing. I use an image what I paid for, so I delete this image and I delete this one. The file I will use, I bought it so you cannot use it unfortunately, but you can use all the other pictures at pixels or unsplash. Here it is, the one I will use 1920\u00d71080; I remove the dash, copy the title, place it in the alt text. Okay like that.<\/p>\n\n\n\n<p>You only see a part of the image, how can fix that. Over here you can scroll down, show the position where it should be fixed on, this is also the position where it will be fixed on the mobile phone when you see the website. So center will be this area. What I like to do, the size I want it to be set on cover; no-repeat, default, and the attachment. Right now, if I scroll the picture is still and I want it to be fixed like that. I think that looks really professional. There are so much more what we can do, I will talk about it later about adjusting this area. For now, I want to add something in it.<\/p>\n\n\n\n<p>I go to this icon, so I see all the elements and I want add a heading. I drag it over here and I say Ferdy Korp productions. I can link it, I will not do it for now. The size is default, I can change it later. H2, that\u2019s okay. This can be H1 and I bring it to the center. I go to style, the text color will be white, I close it by clicking on the color and I want to change the typography. And before we do that, I can go over here to this icon, and I can add a few global settings. So I want to change the global colors, so I will see all those colors every time I open a color palette, so I don\u2019t have to type the code in manually, I can just select one of those four.<\/p>\n\n\n\n<p>The first one I want to use is this blue color of my logo. I can use a color picker of Chrome, I have a tutorial about that and I grab this color, copy, escape and I can paste it over here. I click on the color, the second one is this gray color, copy it, escape, paste it over here and the third one is a green color and I want to use a color that Google advises, so I say Google colors and I click on the upper one , I scroll down and I want to search for green. For instance, this one; I copy this code, Google probably knows what\u2019s best so why should I figure it out myself, if I use green, I use this color and the accent. I also want to choose an orange kind of color, and it will be this one. So I click over here, I paste it, I click on apply, I click over here again and I go to the fonts, the primary headline and actually I want to use Open Sans everywhere \u2013 open sans. So if I want something else, I will change it in the element but everything will originally be Open Sans, apply and here again I want to place the same colors. So I go to global colors, I copy this one, I go to color picker, I leave black and white. So I grab the latest four, I paste it here, global colors second one, second one, the third one, and you do this one time and then you can enjoy the benefits the rest of the time you are making this website. So that\u2019s great. So that\u2019s it; I click over here again or I go over here, I click on the text again and now if I go to style, to the color, I see those four colors. I can use them really easily. I click here \u2013 title, typography; I can make it bigger. This already is open Sans, so if I will say open Sans, it will stay exactly the same. The weight \u2013 really thin, like this and I want it to be upper cases Ferdy Korp productions and the style is normal, you can do italic, adjust default.<\/p>\n\n\n\n<p>We don\u2019t need line height, because we have only one row and we can have text shadow, I\u2019ll take a look at it later. For now, I don\u2019t need that. Then we can go to advanced, and here we can use the margin padding, we can use an animation like this, we can make it slow, we can have delay. For now, I like it to be normal and I say safe and then I will duplicate it. So I hover over here, if I want to duplicate the column, I hover over here and I click over here and now I have two columns which are exactly the same. I hover again and I remove it and if I want to duplicate this element, I go over here to the right and duplicate it and that\u2019s what I want to do.<\/p>\n\n\n\n<p>I click over here, I go to the text and I say \u201cYou deserve to be seen\u201d and I want to make it smaller like that. I go to the elements by clicking this icon, and I want to add a divider. You can search for it over here or you can search for it over here and in that way, you can navigate all the elements really quickly. It\u2019s a green line, it\u2019s solid but you can also change the style like that. Add some weight, make it bigger. I changed the color to white or to the blue color, make it solid again, change the weight. I will change the width like that, I want it to be in the middle so I bring it to the center and I can increase and decrease the gap. I want to decrease it, make it a bit smaller. You know what, I will make it white, make it a bit bigger like that. Save it; I close this for now and I want to take a look. You see the animation like that, Ferdy Korp productions, you deserve to be seen. I want this also to have an animation. So, I go to advanced, I scroll down; fade in from left like that, that\u2019s okay. If I want to bring this closer to each other, I can do it in a few different ways. I can click over here, go to advanced and change the margin, bring it to \u2013 and then you\u2019ll bring it closer or I can go to this one, go to advanced, margin say zero, [they fall \u2013 59:18] to only change the top and the bottom, I can unlink all those four, so I can adjust all individually. Here I say -15 and with the bottom, just arrow down \u2013 15, so it\u2019s close to each other. I like it and I save it and this is what we have so far.<\/p>\n\n\n\n<p>And I think the animation is a little bit too soon. So I click over here, click on this one, go to advanced and I say animation delay in milliseconds, so a thousand milliseconds is one second. So I would say after a half second, this will come and at the same time this one, then a small delay \u2013 extra 750, and I say save it, refresh. I like that; I like it so far.<\/p>\n\n\n\n<p>Of course you can adjust it to your own wishes, I just want to show you what is possible. I want to add two buttons, how can I do that? I go to the home page, to elements and I want to drag this column over here below. The first column, the second one; I can click on the plus and I can search for a button. I drag it over here and I want to align it to the right. You can choose a type and it\u2019ll give you some settings. This one is green, this one is orange. I just want to use the default one. Change the text to portfolio, the link will be \/slash portfolio, the size can be medium, and I can have an icon if I want to. I can select it and at portfolio I want to use a camera. So I say camera and here it is. Or you can search the whole list like that and I select one. The icon position lets you decide, if you want I can to be before the text or after the text. I want it to be before the text. You can change the spacing like that. Then we go up to style, here we can change the colors and stuff. The text is white, the background color. I want it to be this green color. You even can make it transparent like that. You can have a border, so if you make it transparent, it will look like this which is also really nice. I do it like this and if you have a border, you can change the border thickness like that. And if you have a border or if you don\u2019t have a border, you can have a radius then if I remove this for now, you can change the radius and make it round or less round. So there\u2019s a lot you can do. I will bring it back to square. You can have a shadow, change the color of the shadow to black for instance. Now it\u2019s 50% transparent. You can change the blur, the spread, the position; there\u2019s a lot you can do. So there\u2019s a lot of freedom to do what you want to do. I don\u2019t use the box shadow, I want to keep it flat and clean. We can change the typography, make it bigger, and weight 300, so it will be little bit thinner. But this is a button, so I want it to be bold or just normal or default. You can have it, uppercase, lowercase capitalized and again italic, oblique. You can have more space between the letters like that and the great thing is, if you click on hover, you can adjust everything.<\/p>\n\n\n\n<p>So when you hover over it, how should it look. You can say if you hover, the text should be white, the backgrounds should be transparent, the border color should be blue and width of the border should be two. Now if you hover over it, it looks like this. I clear this for now and I clear this also, so it will stay the same. I don\u2019t use a border but what you also can do, if you hover there can be an animation. So push for instance, like that or grow or shrink. I will use shrink. I save it and I want to make a second column. I close the third one like that. I click on it and at content, I will bring it to the left. I\u2019ll change the text, contact \u2013 \/contact. I change this to address-book and I want the icon position to be after, like that. You know what, I\u2019ll bring this to before and I go to the style, I scroll down and I go to normal, text color is OK, background color can be blue. And if I hover over it, I want it to be green. So I go to hover over here, background color green. So if I hover over it, it becomes green. And this one I could make blue if I want to; style &gt; hover &gt; blue. Save it, refresh like that. I think they are a little bit big, so I will make them smaller. I can do it really easily. I click over here, I go to content &gt; medium, I bring it to small or extra small and over here also extra small, save it. Let\u2019s see what it does. Okay, and I want to make the text smaller. So I go to style, make it 14 or 16; Ferdy Korp Productions \u2013 \u201cYou deserve to be seen\u201d; portfolio, contact.<\/p>\n\n\n\n<p>I think I don\u2019t like the fit to hide thing, so I go to the backend, over here to the settings of the section and I change it from fit to screen to minimum height and it will be 400. I think that looks better. Refresh and I want to add some animation to it. So I click on the button &gt; advanced &gt; entrance &gt; fade in. You know what, fade in left and after one and a half second and this one, advanced &gt; fade in from right after setting it on 50 milliseconds, so let me refresh it. It looks like that, I like it. If I go to the back end and I go to the section settings, to style and I scroll down, I can have a background overlay and I want to use a gradient for this. So just the first color, second color; so if I would say the first color is blue, the second color is less blue or a darker blue a little bit or you know what orange, you see I get an overlay maybe like that. And I can do a few things with it. I can change the location, so the bigger part can be the red color or the blue color. I leave it in the middle, it can be linear; it can also be radial. So the inner part will be blue, the other part will be red. I like to use a radio. I can change the angle like that, I want to drag this little bit around. I can change the opacity, so this is nothing. This is everything 100%. So I want to reduce it to something like that and then there is the shape divider. It\u2019s a really nice tool. I\u2019ll show you what you can do. This is the top, I can place mountains, so it will get an effect like that or drops. You can do a lot with it. I will use the tilt one and I can change the color but this color is white, so why should I change it. And you can change the height, but I don\u2019t want to do it here. At the top, I want to do it at the bottom. So I change the type to none, I go to the bottom, I change it to tilt and I want to bring it back to something like that \u2013 37. I really like this effect.<\/p>\n\n\n\n<p>I can flip it, I can bring it to the front which it is already; so that\u2019s it for now. I save it, and if I want to take a look to the whole site, I can click over here and then I see how it is. It looks really nice in my opinion. I open it again and if I refresh it, you will see the animations again, really nice. So that\u2019s that, let\u2019s go to the second element. I go to the backend, I click on add new section and I want to have three parts. So I select this one, and here\u2019s the first one. I can click on the plus and I want to add a icon box. I drag it over here and I want to show my three services. The first one is photography, so at the title and description I say, photography and I want to change this to a camera like that.<\/p>\n\n\n\n<p>I can change the text, I double click, I use this text and the text is green right now, so that\u2019s not what I want. So I go to the settings over here, global colors and the text color, I\u2019ll bring it to something like that. So primary color, secondary text and accent. An accent, I\u2019ll change it to blue, apply. I click over here again and the view can be default or stacked like that or framed. I like default, only the icon; the text I can link it to someplace, so I link it to photography. Keep everything in the middle, h2 and then we go to the style.<\/p>\n\n\n\n<p>You can change the primary color of this icon. I leave it, you can change the spacing, the size of the icon, I think 50 is okay. You can rotate it, you can have a hover, shrink it, like that or make it bigger. I want to make it bigger and the content in the center, vertical alignment is top, title color, typography; I want to use uppercase and make it a little bit smaller like that. Line height, though we have the description, the color is this one, the typography. You can change the line for instance like that. I think that\u2019s okay, the letter spacing. If I don\u2019t want that, I say CMD+Z and it\u2019ll be back. I save it and I go for a new element and that is the image carousel. So I search for carousal, here it is. I release it and I can add a few images. I upload files, select files, you can also use these files. I go to homepage, photography and I select them. I create a new gallery, I can change the order if I want to, I can make this one first or I can reverse the order, insert into the gallery. Now I\u2019ll see three in a row, so I will use the full size. Slides to scroll \u2013 ten, I want to bring this to one, like that. Image stretch \u2013 no, no arrows, no dots; link to URL \/photography or to the media file. I want to use a lightbox, no caption. Additional options \u2013 pause on hover \u2013 no, autoplay \u2013 yes, autoplay speed \u2013 every five seconds, infinite loop; so after the last photo the first one begins again. The effect I want it to be a fade instead of a slide and the animation speed, if you take a look. I think it can be one second and direction doesn\u2019t apply because the fact is a fade and not a slide. So I like that. Then we go to the style, we don\u2019t need a border, we don\u2019t need a radius and the margin, I want to bring this closer to this text over here, so I uncheck this one and I use my arrows down and I will bring this closer to this area. I don\u2019t want to have an animation, so I\u2019m okay with this. I save it and that\u2019s okay.<\/p>\n\n\n\n<p>The third element I want to use is a button. I drag it over here below, default. More information, link\/photography, bring it to the middle, make it medium. I want to have the same icon \u2013 camera; that\u2019s all fine. I go to the style, text color is blue \u2013 this one. The background is transparent, I want to have a border \u2013 a solid one, two pixels, no radius, no shadow, no text padding. If I hover over it\u2026 I want it to be inverted, so the text will be white. The background will be blue like that. No animation or an animation will be shrink. Now we can go to advanced and I like it the way it is right now, I save it and I want to refresh it and it looks like this.<\/p>\n\n\n\n<p>What I want to do now, I want to bring this a little bit more in this area. So I go to the section settings, I go to advanced, I uncheck the link and with margin I say \u2013 and I hold it for a while, I scroll up a little bit; let\u2019s see -150. I save it, what I do, I click over here at the section settings and I bring this to 550. I click over here, I go to Advanced &gt; Background and I make the background white, like that. I go to the element style, padding and I say 10 pixels and I can even make it 20 pixels. Save it and refresh. So I like this style. And I want to bring this more up because now, this is the button, this is the top and this is not in the middle, how can I do that? I go over here to these settings, advanced and I bring it down again. I uncheck this 0, 0, 0; and I bring it up again like that. So it should in the middle. I save it, refresh and what I will do, I\u2019m just trying other things a little. I\u2019m bringing it back to 450. So even we have a small desktop screen, you will see this area immediately, like that photography and I think this is okay.<\/p>\n\n\n\n<p>What I want to do, I want to give this an animation also. So I click over here on the column, advanced and I say fade up &gt; slow with a delay of 1000, save it, refresh like that. I want to duplicate this one more time and the second time and I want to remove this one, remove this one and I click over here. I go to advanced, this one after 1500 seconds and this one after 2000 seconds, save it, refresh and now this is how it looks. I really like it. So it looks really professional and I like that because it\u2019s a free theme with a free page builder and I\u2019m really impressed with what it can do. I need to adjust those of course, so I will do that.<\/p>\n\n\n\n<p>I\u2019ll go to the second one, change this to a video, change the title, change the text, I remove this one because I will not show photos. I go to the third one. I search for address, I like that one or this one title \u2013 web design, here\u2019s some text. I click over here, I want to clear those images, delete them add images &gt; upload files &gt; select files and I go to web design. CMD + A \u2013 open them all, create a new gallery, insert the gallery and there they are. Save it then I search for the video. I drag it over here, I click over here and I will say Vimeo with a Vimeo link, autoplay, loop it so it will start over again when it\u2019s finished. I don\u2019t want to show the title, portrait or byline and I save it. What you\u2019ll see, this one is a little bit lower than this image. Why is that? If I click over here and I go to advanced, I see -14 and I want to do the same over here. Advanced, no link, -14.<\/p>\n\n\n\n<p>Here it says Photography, here videography and here web design, so we have to change it over here. So I go to more information and if you change the link to videography, and I want to change the camera icon to video camera icon like that. Also over here change the link to videography. And I go to web design, I change the link to web design, I change the icon to address card, like that. And also here the link web design. I save it, I refresh it and this is how it looks; really nice.<\/p>\n\n\n\n<p>Okay let\u2019s add a new section. I go to the backend and over here, I click on new section and I have only one column. Here it is, I click over here on the settings of the section. I want it to be stretched, I want it to be full wide or full width; style &gt;background &gt; classic. I want to add an image. I upload a file; select files and here it says \u201cwho we are?\u201d; open it. This is me with my wife. We are is not a title I want to be found on, so I don\u2019t optimize it; insert media. I go back to layout, and here I say minimum height of 600. I go to the style again, I scroll down a bit and I change the size to cover and attachment to fixed. Now over here, I create a second column, so I click on duplicate in the right column, I go to the elements and I drag the header over here. And I say, who we are, what we do. And I want to style this, there\u2019s no link. This is all fine with me, I want it to be aligned. At the left, I go to the style \u2013 the text color is this one, typography \u2013 I want it to be really small, like this. We are what we do and I want to change the background of this column, so I click over here on the settings of this column and I go to style &gt; background &gt; classic and the white color. I want to make it a little bit transparent like that. I go to the elements, I search for divider, I drag it here below, I release it. The weight can be two pixels, the color can be also the blue one the width \u2013 I make it smaller like that and a gap. It\u2019s okay like that. I make it a little bit wider like that. See how easy it goes, I really like this page builder.<\/p>\n\n\n\n<p>Now I want to add a text element, text editor like that and change the text. I don\u2019t know if this text is correct but I leave it as this and I want to play around with the margin. If I save this and I take a look, refresh it, I scroll down, we are what we do. I want to make the margin bigger but also here I want to make the margin bigger \u2013 how can I do that? A few ways, I go and add a divider. I drag it over here at the right, the weight is zero. There\u2019s no color and the gap is 20. Now over here, I go to the settings of the column &gt; advanced, margin is okay, I want to go for the padding \u2013 40; save it, refresh it. That\u2019s better. I don\u2019t want this to stick at the side, so what can I do. I go to margin, I uncheck this and I say right 80 pixels. Save it, and now I want to make the background a little bit less transparent, so I go to style, to the color, make it less transparent. Save it, fresh and there it is \u2013 who we are what we do. And there\u2019s a lot of space over here. Maybe a bit too much so what will I do, I click over here, I make it 12 or 13, I go back and I want to duplicate this area so I hover over here and duplicate it. I grab it over here at the blue area and drag it down. I release it and drag it even more. I click on it, the link will be about us at the left, no icon and I say \u201cmore about us\u201d; save it. And you see, in a relatively short time, we\u2019ve created this area which is really nice. So this is what we are so far.<\/p>\n\n\n\n<p>Let\u2019s take a look at a new section. I go to the backend, I scroll down and I add a new section with only one column. I want to show few testimonials of people we have worked for, and I want to have a background, so I make a stretched section, full width. I go to style &gt; background &gt; normal and I want to have an image. I want to have again this image, I insert the media, I scroll down, attachment-fixed and that\u2019s it. I go for the background overlay and I want to have a gradient, two times this color, only the second time, it should be a little bit darker. I like that. I go back to layout and I say height, minimum height of 600, so I can see how it looks. And I want to change the gradients from vertical to horizontal. So I go to style again, to the background overlay and the angle should be 90 like that.<\/p>\n\n\n\n<p>Opacity, I can increase it or decrease it. I like this. I go to the elements and I start with a header. I click on it and I say: \u201cWhat our clients say about us.\u201d No link, it should be in the middle. Styling \u2013 it should be white and then by typography, I only want to change the weight and it will be 300. Maybe a little bit bigger like that. What you can do, if you go to the backend and you search for testimonial, you can have a testimonial element, what I don\u2019t like about this element is that you cannot slide between different testimonials, that\u2019s only with the pro version, I will talk about it later, how we can do that. We want to work with the free version for now. If I search for test, the great thing is you also see the Phlox elements. If I remove this and I scroll down, you see general elements and below that you see WordPress elements, those are the elements that come with a WordPress theme you have. So the Phlox theme has also all these elements and one of them is testimonial. So I can use that one if I want to, but I also don\u2019t like that one; so what will I do, I will use a column and create the effect that I want. I go back and I search for the text editor. I drag it over here and I want to click over here and add it to column settings. I go to style &gt; background and I want to make that white, like that. I click over here and now I want to place my testimonial text of the first person and that is this text. And this is Daniel and he has a website DanielOrtega.com and I want to add an image so I point my mouse over here and I click. I add media, I upload files, I select the files and if I go to the homepage folder and I go to the smiles, I can say CMD+A or I select them all and I open them like that. I deselect those, I only want to add one image. And if I click on it, I scroll down. I align it to the left; no link and I want the thumbnail like that Ferdy and Anna create some amazing pictures of me and my companions. Thanks Denniel\u2019s and I want to make a link of this. So over here insert edit link \u2013 HTTP, DanielOrtega.com; open in a new tab, update and save. I refresh it. What the clients say about us, and you have this area. I like it.<\/p>\n\n\n\n<p>What I can do now, I can duplicate it hover over here, duplicate and remove this one and if I save it, and I refresh it, what do I see; they stick to each other. I don\u2019t want that. So I go back, I click over here on the column settings, I go to advanced and the margin is 10 pixels and now you see, it appears like that. And at the inside, I also want to have a padding so margin is for the outside to push from the outside and padding is to push from the inside. So 15 pixels, if I would make this 50, you\u2019ll see this will be pushing the borders to the side. This is way too much, so I say 20 or 15. I like that.<\/p>\n\n\n\n<p>What else I\u2019ll do, I will scroll down. I want to have an animation fading up and the delay will be nothing. I save it. I can remove this one now and I copy this one, like that. I go to this one over here, to the settings of this column, I go to advanced &gt; delay \u2013 500; save it. And what you\u2019ll see now, if I go over here, I refresh it and I scroll down, there\u2019s a nice delay. So I like it. What I want to do now? I want to duplicate this column section, so I duplicate it like that. Now I want to change the text of course, so I click over here, I remove this one and I add an image and it\u2019s the second one, insert into post and the third one, remove the image at media, this is from Heather \u2013 HeatherAndrews.com, copy the link, HTTPS or P \u2013 in a new tab, update and the latest one, change the text, remove the image, add media, Gwenn and David \u2013 GwennAndDavid.com; something like that; save it, and refresh. I scroll down and this is how it looks. What our clients say about us. I think that looks really nice.<\/p>\n\n\n\n<p>We\u2019re going to create another section with a white background, I click over here. So I hope you get to see how this all works. It works really easily and you can work really fast. So if I want to duplicate this for instance, I hover over here duplicate it, drag it below, over here; you see nothing because the text is white. I go to style, change it to the blue color, change the title to clients we work for. I go to the elements, I search for carousel, image carousel, I drag it over here below. I add a few images, upload files &gt; select files, go to the home page to clients, those are a few. Open them and I create a new gallery with them, I can change the order. Insert them into the gallery and let\u2019s configure it is\u2026 I want it to be the full size, slides to show \u2013 4, so now you see three, now you see four. Slides to scroll- two that\u2019s okay. Image stretch \u2013 no, navigation \u2013 none, no links, no captions and the additional options, pause on hover \u2013 no, autoplay \u2013 yes, infinite loop \u2013 yes and the animation speed \u2013 1000. I like that. I want to have more margin over here, so I click over here, I go to advanced, margin, I uncheck this and top is 40; save it, refresh. Clients we work for, now we have those and scrolls I get. What I want to add to the homepage is, the latest blog posts and the latest portfolio items, but we don\u2019t have them yet so I will leave this for now, but look at this \u2013 a beautiful home page with a free theme, a free page builder, almost all free images and a beautiful result.<\/p>\n\n\n\n<p>So that\u2019s it for now, let\u2019s go to the about page. I want to close the home page for now and I want to remove this area over here. So I edit the page, I scroll down and I go to the title section settings and again I scroll down and over here I say no, update; now I edit this with Elementor and there it goes. I want to show a few new tricks using Elementor on this page. So I start with something we did already. I add a new section, one column and here are the settings. I stretch it, I want to make it full width, I go to style and I click over here for a background image and I click on the plus. I will go through it a little bit faster because it should be a little bit familiar already with everything. I upload the files, I go to about us and I want to go for we love Capetown. I open it. I can optimize it like this, but for the sake of the tutorial. I will not do that anymore. I insert the media and I want to make this cover everything and I go to layout and the height will be 400. That\u2019s okay. I go to the elements and drag the heading over here and heading will be this text; no link, the size \u2013 I will change it later. I\u2019ll bring it to the center. I go to style, the text will be white and typography, it will be 300 in weight like that. If I close this, now you see, it looks like that. I want to make the background a little bit darker, so I hover to this area, style and I can have a background overlay, you can have a gradient or just a color. I will grab this color, make it a little bit more transparent or I can do that over here at transparency. This is 100% zero, something like that. So you can see the image but you can also see the text. That\u2019s nice.<\/p>\n\n\n\n<p>I want to add a new section, a really simple one, with just the text. So I go to the elements and I drag the text editor over here. Now I\u2019m going to write a text like that. I go to style, I bring it to the middle, text color is okay and I want to make it a little bit bigger like that. I go back, what I can do, I can copy this so I\u2019ll go here to the right, copy it and drag it over here, I change the color of course and then I change the text here at the content and I say about us. So we\u2019re busy with this for five minutes and this is the result already. Now we have this already, there needs to be more space over here and I want to remove this area. So I edit the page, I scroll down I go to layout options and over here at display content top margin \u2013 no, update, view the page and now it is gone. I want to have a little bit more space over here, how can I do that? I can do it two ways or I click here and I go to the padding top and I say 20 or I go over here to the header, advanced margin 20. So you can do it in different ways. I like this way for now.<\/p>\n\n\n\n<p>I say we love to have fun travel and enjoy life and I want to show a few pictures about that. So I add a new section over here with four columns. I click on the plus over here and search for an image and I drag it over here. I click on the image, upload files select files and I want to select four files I have \u2013 Anna Italy, Ferdy Italy, Ferdy Cape Town and Anna photography. Open it and I want to start with this one, insert media and this is how it looks like. Actually, I don\u2019t like it. I want this image to start totally at the left. How can I do that; I go to the settings of the section, stretch the section, full width, no column gaps and now if I do this, you see it\u2019s totally at the left. Okay, I click on it again. This is all fine with me. Link to the media file, do you want to have the lightbox \u2013 yes, and what I want more, if I hover over the image I want an animation or just a simple shrink like that or a grow; I like shrink. That\u2019s it. I save it, what I can do now, I can duplicate it and I can remove those. So all the settings are the same, I just click on it and I change the image to this one, the third one, click on the image, change it to this one close it and the fourth one, change the image to this one. So this one is looking to the right and this one is looking to the left and those are in the middle, I like it. I save it and I refresh the page. About us, a text and then here, you see those images. I like it and that\u2019s how easy you can work with this amazing tool, with this amazing page builder called Elementor.<\/p>\n\n\n\n<p>I\u2019m going to make a new section with two columns and here at the left, I want to have some text about myself and here at the right I want a picture of myself. I click on the plus, I search for an image like that or what you can do, you can put the image in the background. The difference is if you use an image you cannot have text over it and if you would use the image in the background, then you can add text over it or a different image or a button or all the other elements. In this case, I just want to use an image so I drag this over here, I click on it, upload files and it\u2019s just Ferdy Korpershoek and I will also upload Anna Korpershoek. The images are square and here it is. I insert the media and there it is. No link, no caption. I go to style, it\u2019s all fine with me and then I save it and then I go to the settings of the section, and it is stretched. It is full width. The column is gone, no column gap. So if I close this, the image is covering the whole right area of the page. And over here, I have an area and I can click on the plus. I can add a heading and say Ferdy Korpershoek and then I go back, I search for a divider; I drag it over here. Color can also be the blue one and I can make it smaller like that. I can even add a gap like that and now I want to have a text about myself. I go for dummy text, and I grab this area over here, I copy it and I paste it over here. Make a new fewer [alineas \u2013 1:47:26 ] like that; maybe one more. What I want to do now, if I take a look at this and I refresh it you see it\u2019s totally here at the left and at the top. I don\u2019t want that. So what I will do, I go to this area, advanced and I say padding \u2013 100 pixels, that\u2019s maybe too much, 50, save it, refresh. Now it looks like that. I think that is better. I want to add a button, so I go over here, search for button. I drag it here below and I click on it and I say get in contact and I link this to hashtag contacts. Now I\u2019ll explain later, why I will do that. We already configured the buttons so I leave it as this and this is okay for me. I want to duplicate this area, I will do that over here and here it is again, this area \u2013 I drag to the left or this area to the right like that. I change this to Anna and this text is also okay. This is also okay and I change the image of course to this one and now we are talking, this is way better. Refresh, Ferdy Korpershoek, Anna Korpershoek and in that way, you can put some information about yourself. I like it. So if you hover over here, you see this \u2013 you see some text about us. The quote and I think we made it really quickly, so that\u2019s great.<\/p>\n\n\n\n<p>Now what I want to do, I want to add a contact area over here. So I click over here add a new section and what I want to do, I want to add a video in the background of this. So I go to the settings of this section, stretch the section, make it full width and now I go to YouTube and if you take a look over here, this is made in South Africa. This is me in South Africa. This one and this one, so why not find something about South Africa; Cape Town time lapse. I click over here. Yes this one begins immediately. If you copy this and you paste it, the sound will not be used. So over here, I click on style and background, click on the video icon and paste the link. Go to layout, say fit to screen, so there it is. I\u2019ve been here, this is such a beautiful place. I really like this one. So what will we do right now, I go over here and I want to add a text editor, and before we continue \u2013 I save this, I go over here to the backend and we are going to install the contact form plug-in. I go to plugins &gt; add new and I search for contact form 7. It\u2019s a really easy contacts form maker. I use it all the time and I install it now; it has more than a million installs. I activate it and now we see over here, the contact form plug-in \u2013 I click on it, I dismiss this and I grab this code, I copy it and over here I paste it. Maybe I should save it first and I will close this, I go to the website again, to about us and there is a contact form. It looks a little bit weird like this, so I will fix that. I edit it with Elementor, I scroll down and over here, I have the video in the background but here at the column, I just want to have a white background like this. And then I go to advanced, I uncheck this at margin and I say the top \u2013 100 right \u2013 200, bottom \u2013 100, and left \u2013 200. I save it and how does it look now, it does look a little weird. Why? I have set the height of this background to fit to screen and I should not do that. So I go over here to the settings and I don\u2019t say fit to screen, but I say default. Now it is at the right place. I also click over here, I go to advanced, to padding and I say 20. Save it so there\u2019s a little bit more space over here. I refresh it and if you scroll down, you\u2019ll see the form over here. I don\u2019t like this way of showing the form, so I made something for that. If you go to Ferdy Korp.com, it will change the look of view of the form and go to tutorials &gt; Elementor 2018, scroll down and then copy this text, go to about us, to the back end, to contact, click on the contact form 1 and then replace this text with the text you just copied. Save it; close this. Now if we refresh it, and we scroll down, it looks like this. Now the name is within the area, you can type over here, so that is great. So, if you take a look at the real result, I scroll down, it looks like this \u2013 name, email, subject and your message and you can send it. What I want to do now, when people click on this link or on this link, they will go directly to this area, that\u2019s called an anchor link. So I go to the backend, I search for anchor and there it is, menu anchor. I drag it over here on top of the menu and I call this contact. I save it, I refresh the page when I\u2019m here on top, I scroll down and I click over here and there I go to the form.<\/p>\n\n\n\n<p>One more thing for this page. I go over here, and I duplicate this area like that. I drag it down and if it does not work, then I can use the arrows over here and I bring some padding on 20. I go to content, get in contact with us, save it. So in quite a short time, we made this page \u2013 the About Us page, with a header, with a background and the title. Some text about us, some images and if you hover over it, you can open them in the lightbox with area like this, with an image and the same time, the other way around. And if you click over here, you go to contact, get in contact with us. They can fill this form and when they do, you will get an email. If you want to change the email of the receiver, then go to the backend, to contact, contact form, mail and change this email address.<\/p>\n\n\n\n<p>Let\u2019s take a look at the services page. So we made two pages already \u2013 the home page and the about page and now I will go through it a little bit more fast. So hang on. I edit the page, I scroll down and I go to display content top margin \u2013 no and I go to title settings &gt; display title bar section \u2013 no. I save it and I edit the page with Elementor. I want to showcase my three services over here. I add a new section, one column, stretched content width boxed and I go to style, background type, I upload a new image, upload files, select files and here I go to services, services background; I open it, I insert the media and I go to layout again, height \u2013 minimum height of 250 or 300. I save it, I click on the plus if I want to and I want to add a button. We have styled a button before, so I will do it really quickly. This is photography, the link is #photography, in the middle it\u2019s a large button, no icon. I go to style, text color is white, background is transparent. And I have a solid border like that. I go to hover and the animation is shrink like that. I save it and I want to duplicate the whole column, so I get a second column. I hover over here and I click over here. I go to the second one, which is videography. I copy this text and I paste it over here and I remove the capital like that and everything is correct. I save it and I do it one more time, hover over the column, duplicate it, I click over here, I change this to web design, I copy the text, I paste it here and I remove the capital W. I save it. I scroll down, I add a new section and this time it is this one. 1\/3rd and 2\/3rd, like that. I go to the elements and I go for the heading, I drag it over here and I say photography. I go to style &gt; typography &gt; weight; like that. And I go to the section &gt; advanced, I want to add a padding from the top. So I uncheck this, make it 20 or 30, like that. Okay. Below that, I want to have text about photography and I want to go for a dummy text. I think this will do. Make a few alineas. I rather have less text and let the final result of the pictures or the videos or the website speak for itself. So I\u2019ll remove this and I make a button again. How can we do that, we copy it, we go to the element itself, duplicate it and I drag it over here. Scroll down and drag it even further. I click on it, I go to style and the text color should be blue and then everything is fixed. I click on it one more time. I go to content and I drag it to the left like that. Here at the right, I want to have an image gallery of a few images of photography I have. So I search for image and gallery, you see over here. I drag it here at the right and I want to add a few images. I upload the files, I select the files and I go to Elementor, portfolio &gt; photography &gt; Daniel Leah and I add those all. Open them; I create the gallery and I insert the gallery and there they are. I can configure this if I want to. Right now it says thumbnails. I can also say full size and what you\u2019ll see, the images will be posted in their original format. So this one is longer than that one, so I\u2019ll bring it back to medium. So it will keep the aspect ratio or you know what thumbnails like that. So it all will be square, I like that more. How many columns \u2013 three, like that. We can link to the media file, have a lightbox \u2013 yes, default ordering. I go to style &gt; spacing \u2013 we can have a custom spacing, so I can make it bigger or smaller. So I will save this and I\u2019ll take a look now. How does it look over here. Photography, videography, web design \u2013 I like that. Photography and I think that I don\u2019t like this, there\u2019s too much page in my opinion. So what can I do? I can do a few things. I can drag over here like that, save it and that\u2019s how easy you can change things with Elementor and now it looks like this. It looks better in my opinion. What else we can do. I can go to content, make it full, click on the images and I will remove this one. Insert &gt; I drag this to the left again, now you see it contains the aspect ratio, refresh and I like that. If I click on the image, I can navigate to the right and to the left and what you also can do, if we go to the back end, you can go to the settings over here to the global settings and then here you see light box settings. We can turn it on, we have turned it on, we can enable it in the editor \u2013 that means if I click over here right now, I will see that. Now I\u2019m again in the gallery settings, so I click over here again \u2013 global settings &gt; light box and I can change the background color. So I click here one more time, global settings light box, I can change the color to this one for instance and I can change the transparency, so if you want to maintain your style or you want to give it look like this, then you can use that. You can also make it more transparent as I said before. So it will really be focused on the picture. So that\u2019s really handy, you can change it if you want to.<\/p>\n\n\n\n<p>I save it. If I click now, it\u2019s like that and if I refresh it and I click, it\u2019s darker. That\u2019s what you can do, maybe a little bit more spacing; over here advanced and make this 50. And at the bottom also 50. I save it. What I have to do now; I go to the elements and I go to anchor and there it is \u2013 menu anchor. I drag it over here on top of the title photography and I call this photography. I save it, if I refresh the page, and I click on photography, I go to photography. The same I will do with videography and web design. I don\u2019t want to have a title over here, so I do duplicate this, I drag it over here, what do see, I can only put it over here, I make the text white, so how can I fix that? I drag them all to one column; this one I remove, this one I remove. So we have one column now. In that column, I will drag two columns and I can even make it three columns. The first one I drag over here, the third one over here, the second one over here, and photography, I bring it here to the middle and I say \u201cservice with a smile\u201d \u2013 I don\u2019t know, I make something up.<\/p>\n\n\n\n<p>I\u2019ll make it bigger. I like that. Save it, refresh it; service with a smile \u2013 Photography, videography, web design and here we see photography. And if I click on this link, let me change that. The link should be #contact. Now I duplicate this whole area over here, I duplicate it and here it is. I can drag this to the left, this over here I change it to videography, I change the title to videography, and I can say videography \u2013 let me put something new over here. I close this, I go to elements, let me see what we have not discussed yet. We have discussed all these, this we will discuss in contact page, this one we have discussed I think in the first page. I want to use a toggle for now. So I drag it over here and here I can say wedding films with a certain text. I close this, the second one is business films, I can duplicate it and here\u2019s the third one and I can say video clips. And at each one I can give an explanation; \u201cWe love weddings\u201d and then some more text. For your website, you can fill in your own text. I\u2019ll leave it as it is. I save it, I refresh it, I go to videography and I want to see more about wedding films, business films and video clips. I close them. We can add more items if we want to, we can go to the style, make the border thicker or thinner and we can change all this stuff over here if we want to.<\/p>\n\n\n\n<p>I want to add a small text, let\u2019s say we offer three kind of services \u2013 videography services like that. And people can click over here and if I click over here, this text should be changed, actually to get in contact, here also get in contact, I save it. I to remove this one and I go to the desktop, to Elementor, to the folder, portfolio, films Montana, Montana Vimeo link and I want to grab this video. Copy it, I drag the video over here, the video player, I select Vimeo and I paste the code. No autoplay, no intro title, just like that. What we can do; I save it, refresh it and now it looks like this. We offer three kinds of videography services, wedding films, business films and the video clips and here we have an example. These areas are both white, this one and this one. So I want to make this one blue. I can do that really easily, I click over here, style &gt; background, a color \u2013 the blue color and I need to click here. I go to style, make it white. Over here I go to style &gt; background, white and then to typography in this text, we can make that also white.<\/p>\n\n\n\n<p>I click over here, go to style and make it white. Save it, refresh, photography and here videography. I see this area here at the left is not white, so what we can do, we can go over here and stretch this section. Now it\u2019s totally blue from the left to the right like that. I don\u2019t see the button anymore, so also over here, I click, go to style and change the blue colors to white. Save it, and now I can add a new section, I want to do that but it\u2019s still part of this section. So I add a new section, one column, click over here, make it stretch. I go to the backgrounds and grab an image, it\u2019s the same one we have used before on this page and I go to background overlay and it will be black like that. And I go over here and I go for a counter. Here it is, like that. I want to give this a blue background. So here at the background, at Advanced, I select a white background like that and at advanced, if I go to element style I want to have a margin of 50 like that. I go over to content, how many wedding films did I do already \u2013 27 and I go to the title over here, wedding films, save it. I go over here and I duplicate the column, the second one of course is business films with it \u2013 48 already; and the third one we duplicate it, and we did already 12 video clips. Save it. Refresh. Now this the area of videography \u2013 wedding films, business films, video clips. Maybe you think it\u2019s already counted, you can make it slower; so animation duration you can say make it 5 seconds and then it goes like that. Also here, 5 seconds and the higher the number, the faster it goes of course. Save it, refresh. So we have photography, videography, now we need web design. What I want to do, I want to duplicate this section over here, like this and now I have two of them. So I hold this over here, I want to drag it down over here. It\u2019s not working, maybe the other way around like this. And then this area like that.<\/p>\n\n\n\n<p>I\u2019ll rename this to web design. I rename this to web design, this is the anchor link, so if you click over here you scroll over here. Let me see what we can use, we can have an icon list or a progress bar. So if I drag this over here, my skill \u2013 my skill is web design or you can say HTML and PHP. I bring this up to 100 and here\u2019s the inner text. I don\u2019t need inner text. I want to show the percentage and if I want to change the color I can do that over here. I can also duplicate it and I can say Java Script and I can make this 75. I can change the color like that. What you also can do, you see a light area over here, so for instance if I make this background a little bit darker, so for instance like this, if I make this black and I save it and I go to JavaScript, style background and I make this transparent, then you see I see this black background. So in that way, it\u2019s really nice to remove the background. I go over here again, I bring this back, people are not interested in knowing the script languages I know. They just want to know if I can build my website. Well, this is all for illustration purposes. So I can make this one blue again. Let\u2019s say \u2013 creating a webshop, and I can say hundred again. Save it and over here I want to showcase my websites, so I click over here. I close it. Now I go for image carousal like that. I click on it. I add a few images upload files &gt; select files, I go to portfolio &gt; web design, select them all and I open them, create a new gallery. I want to show the full size, show only one slide at a time, no arrows, no dots. I want to link it to the media file, lightbox \u2013 default, additional options, the speed \u2013 every 5 seconds. I want to change them every three seconds, infinite loop \u2013 yes, I want it to fade and the animation speed is a 1000, which is one second. I remove this text, save it, and let\u2019s take a look. Web design, like that. Get in contact and over here and this is changing every few seconds. So I like it and get in contact if you click on it nothing happens. We need to create a contact area. I\u2019ll do it really easily and I create a new section like that, I go to the text editor, I go to the front page, to the back end, to contact and I copy this code and I paste it over here and there it is.<\/p>\n\n\n\n<p>Then again I can go to this area and make it stretched, give it a background \u2013 the same one I used before. Bring the dark overlay, for instance black, change the opacity over here like that and then over here. I want to have a margin but this time not in pixels but in percentage. So I want to say only at the top 5%, the bottom also 5%, and the right and the left 20%, like that. Save it, go back, search for the anchor, drag it here above and call this contact. Save it, click over here, view the page. I close this. Now if I click over here, I scroll down to name, email, subject and sent. So that\u2019s great, I want to fix the background, so I hover over here \u2013 style, attachment, fixed, save, refresh. Now it looks like that.<\/p>\n\n\n\n<p>I like it very much. I can add one more text over here. Bring it to the middle, \u2018get in contact with us\u2019 change the style, text is white, typography &gt; weight \u2013 300 and I want to give it a little bit of padding from the top \u2013 30. Save it. Voila! Get in contact with us; name, email, subject. So that is our services page. We\u2019ve also a few pages about photography, videography and web design and I want to use this information on these pages. So what I want to do, I want to save this page as a template. How can you do that? Go to the backend, I close this and over here you can hover over the folder icon and you can save this as a template. Enter the name services, I save it, I close it, I save this and I go to the photography page. Let me do this really quickly. I edit the page, I say no over here, no margin, no title. I update it, then I say edit with Elementor. I go to the folder icon, template front library. I can use a lot of different templates over here, I can click on it and I can insert it but I also have my own template which is this one \u2013 the services page. I insert it and there it is and I don\u2019t use this for photography. I only use this. So this over here, I can remove this area, this area and get in contact, I\u2019ll leave that. &nbsp;Save it, view the page, the photography page and now if I am at a home page and I click on more information, I go to this page over here. The second one is videography and then the third one web design, and that\u2019s how you can work really efficiently within Elementor and really quickly. But what if I only want to use this header. Then I click on save over here, save your section to the library, header home page. Save it. Now it\u2019s saved. I close it, I save it and now if I only want to import the header of the home page, I go over here \u2013 Template library &gt; my templates and here you see it\u2019s only a section. I click on insert and there it is, and that\u2019s how it works. Let\u2019s keep those pages. I will do that later. Let\u2019s go to the contact page.<\/p>\n\n\n\n<p>Edit the page and we do the same thing again, say no over here, say no over here. Update and use Elementor. So what do we want to place on a contact page? I want to show people where I am located. I want to give people the opportunity to get in contact with me through a form, so we will use contact form 7 again and I want to give people some information about my company \u2013 the address and stuff. So let\u2019s start with the location; I add a new section, 1 column. I click over here, I stretch the section and the content width will be full width. I go to the elements and I search for map and there it is, Google Maps; I drag it over here and I want to fill in my address. It is 93 William Street, New York and there it is already. I want to zoom in a little bit more, so I go to level 13 so people see this is New York. I can change the height, I think 250 is okay \u2013 250. And if you scroll over here, you just scroll down, if you uncheck this and you scroll here, you can zoom in and I don\u2019t like that. I go over here again, I see a small white area over here, so I go to column gap and I see no gap and the gap is gone. Save it, let\u2019s take a look. I think that looks fine. I go to the back end, to contact and I copy this code, then I go to Elementor add a new section with two columns and I start with having over here and I say get in contact with us. I go to style &gt; typography and change this to 300. I go to the elements, text editor, I drag it here below, select everything and I paste the code of the contact form. I save it, I close this and I take a look at the page, get in contact with us in the contact form again and here I want to enter some information about my company. So I go to the elements, I go to the text editor, I drag it over here and I start with the address again \u2013 93 William Street\u2026 if I say enter. I start a new alinea, I don\u2019t want to start a new alinea but a new line, so I say SHIFT + ENTER, now it starts right below the 93 William Street sentence, 1920 New York\u2026 NY, now I say enter and I say W: elementor2018.com; Shift + Enter, the E of email \u2013 info@ elementor2018.com, shift enter \u2013 the P of phone: +312345678.<\/p>\n\n\n\n<p>I select Elementor2018.com, I copy it, then I click on this icon; HTTP and I paste this, ENTER, I select the email address, create a link and then it will be emailed to link. So if someone clicks over here, they will go to their email client and can send me an email and I like it that way. I can also make this bold, click over here or press command or control B. I go to the elements and I want to add an image. I am the one who deals with all the clients. So I drag this over here below and I want to add a photo of me. I want to upload it, select files, Ferdy Korpershoek Maassluis in about us, open it and what I want to do with this picture, I want to make it round. I will bring it to the left and I go to style. I can give it a border of 20 pixels and you see those curves in the corners. I will remove this and I go for percentage and I say 50% and now it is a perfect circle. I save it and I refresh it and there it is, get in contact with us William Street and what I can do I can duplicate this, drag it here to the right and say Ferdy Korpershoek productions. Okay.<\/p>\n\n\n\n<p>I want to create a little bit more space between this area and this area. So I click over here, go to advanced, uncheck this and I say margin top \u2013 30 pixels; save it, refresh and this is our contact page. I like it. Now I want to go to the portfolio page and I want to add some portfolio items. I go to portfolio, I close this and I want to edit this page and this time we will not use Elementor. I will edit the page and again I will remove this area and the title, I also want to remove it. Update and view the page okay and before we are going to configure this page, I want to create a portfolio item but before I do that, I need to install the portfolio plug-in. So I go to the backend, to appearance, install plugins, it comes with the Phlox theme and here it says Phlox portfolio. I click on install, okay \u2013 it\u2019s installed. Now I go to plugins over here and here it is. I want to activate it and now if I go to the front-end, to portfolio for instance, and I hover over new, I can create a portfolio item. So I click over here and I say this is a wedding, so I will say Daniel and Leah and over here I can create a category. So I have photography, videography and web design, so I create a category called photography. Here I say add Photography, then I scroll down and I want to add a featured image. I add one and all those images I used already, so they are over here. So I can choose one image I want to use, and I like this one. So I add this image as a featured image, I want to hide it on the portfolio item itself. I\u2019ll show you where it will show up and also here I will do it twice, the same one set featured image. What you can do over here, you can add some text, add some images. So I go to add media and I grab one image, I scroll down, I want to align it to the center; no link and I want to show it in full size. I insert it into the post, I click on it and now I delete it again. Now I add the media again and now I can select them all. ALT + SHIFT, click over here. Now they will all have these settings. I insert them into the post and there they go; really nice. Now I can publish it.<\/p>\n\n\n\n<p>Now I go to the website, I go to portfolio and I still don\u2019t see it. How can I fix that; I want to edit the page and I want to work with the site origin, page builder that comes with the Phlox theme but I don\u2019t see it. So I go to appearance &gt; install plugins and those are plugins that you can install with the phlox theme and let\u2019s see, the page builder is over here. I click on install and again I go to plugins, and I want to activate the page builder by site origin and since we\u2019re installing plugins, I go to appearance &gt; install plugins and let\u2019s see if I can use another one; page builder widgets bundle. So I select this one and that\u2019s it; only this one. I click on install, I go to plugins and I activate it. So now we have a few extra widgets, we can use later in the tutorial. Now I go back to the home page, I go to portfolio, I click on edit the page and what you will see now, over here at the right, you see the page builder. Just like Elementor, this is a page builder. I click on it and please don\u2019t get scared. It\u2019s this area over here and I want to use one simple thing. I want to add a row, just click here and this row has two columns right now. Here we can change the columns to one, so it\u2019s one column and I insert it and inside this column, I want to add a widget. So I click over here and I search for a recent portfolio and create tile and masonry. I click on it and there it is. If I update it now and I view the page in the new tab, I see this item over here \u2013 Daniel and Lia photography and I can edit it because I\u2019m logged in. This is the featured image we use and it has also the category photography. This looks okay. If I click on it, I will see this over here, the images like that and in that way I can showcase my photos, videos and websites. Here we see related projects, we\u2019ll take a look at this later how we can configure this, but I go to portfolio again and I want to add a second portfolio item but this time I want it to be video. So I hover over new &gt; portfolio and I say Montana Lisianthus and because this is a portfolio item, I cannot use a page builder. But what I can do, if I go to visual, I can go to short codes and I can still put some things over here in the content like that. I want to add a new category which is videography; add new, you can also have a subcategory for instance \u2013 business films. And I say the parent category is videography, add new, so I could also say wedding films, video clips as a subcategory of videography. I\u2019ll explain later what you can do with that. I want to go for a featured image, I add the image upload files, I select files, I go to blog Montana and I grab this photo, I open it and I add the image. The same I will do over here. Add the image, I will hide the image and now I will add the video. I go to the Elementor, I go over here to portfolio films, Montana and I grab the Vimeo link, this one. I paste the link and over here, I want this to be shared. So I click over here, I grab this code and I show the options and I say show text underneath the video \u2013 no. I think that\u2019s okay. I grab this code, copy it, close this; I go to the text tab, here you see the visual, so if I say hi there and I give this a color, you see there is a color but if I go to the text tab, you see the code behind the style. So I go to the text tab because I\u2019m going to paste the code and if I go to visual, I will see this over here like that. I click on publish and if I want to view this, view the portfolio in a new tab like that, I go to portfolio and now we see photography, videography and business films. If I click on photography, I only see the photography items. If I click on videography, I only see the videography items. If I click on business films, it\u2019s the same. How can we change this? Let me add one more and then I will talk about the portfolio page.<\/p>\n\n\n\n<p>I go to new &gt; portfolio; I close these two and I say CounselMaassluis.com \u2013 something like that. Add a new category; it\u2019s called web design. I add a new portfolio category, I want to get the image &gt; upload files, go to Elementor &gt; portfolio &gt; web design &gt; Counsel Maassluis, open it, add the image and the featured image and actually over here also, I will just add the image and I want to add the link to the image. So I click on the image, I go to the link icon and I say http:\/\/CounselMaassluis.com; I want it to be opened in a new tab. Update and I publish it. I view the portfolio item and if I go to portfolio, we have now three different items. Well I\u2019ll add a few more and I will fast forward. I will add 12 more portfolio items and then I will show you how to configure the portfolio page.<\/p>\n\n\n\n<p>I will fast forward right now. So I added them all. If I refresh it, we get this; we only see 8, that\u2019s why we are going to configure it and we see a lot of categories. So if I select videography, I only will see videography. If I say photography, I\u2019ll see all these. Let\u2019s edit it because we are going to make it look better. I go and edit the page and over here, we go to recent portfolio and grid, click on it. Now we can adjust it. It looks a little bit weird but that\u2019s ok. Here we can select the categories. I close this and I will select videography, I search for photography and w for web design. I only want to show these three categories. These are the main categories, all those others are subcategories.<\/p>\n\n\n\n<p>The number of items I want to show. I want to show 50. Do we want to exclude things or include \u2013 no. How do we want the layout to be shown? Look at the layout and the image aspect ratio, I can change it to 16 x 9, we can have an overlay title style. We can remove the title or metadata or the filters. How do we want to show the filters, in the center or at the left or at the right? I want it to be in the center. How do we want to show the filters, right now it looks like this and we can also use this one or this one and actually I like this one. So I select this one and let\u2019s take a look. Say done, update, I view the page in a new tab; now this is how it looks like. If you hover over it, you see engaged business films, Vang quality, web design. I like it. And you can select Videography, you see all the videos and photography. I really like it. I want to change one more thing. I click over here or actually two things. I want to change the aspect ratio to 4 by 3, again, you can play around with these settings and if I go to layout, I want to change the padding from the top to 40 pixels. Done, update; so there should be more space over here.<\/p>\n\n\n\n<p>I refresh it and now we have more space over here. So this is our portfolio page. Play around with it. I really like this. So that\u2019s it. That\u2019s how it works. Really beautiful. If I click on an item for instance this one, I see the video here at the left and here at the right I see share. Actually I don\u2019t want that, so I want to adjust the single post areas. How can we do that, I click on customize. I close this, press CMD minus one time, so we see the website. How we should see it and I go to portfolio, to the single portfolio and here it says, at the left we should see the content and at the right, we should see other stuff. I like this better but I don\u2019t like the share area here. So I like this even better \u2013 this one. So we have the video at the top, below we have the share button and I want to uncheck display portfolio Meta information and here I can adjust a few things. Display single portfolio categories \u2013 no, display single portfolio Tax \u2013 Tax, if you have a sidebar you can let it have dark background. We can have next and previous portfolio like that. I would like it with a picture like this. So you can see it like that and you can take a look over here. I can go to the previous or to the next portfolio item. So that\u2019s how it works with the portfolio, really nice.<\/p>\n\n\n\n<p>Let\u2019s go to the blog page and if we are at the blog page, you will probably see nothing found. If you don\u2019t see this then go to the backend, go to settings, reading and the front page display \u2013 a static page and then the post page should the blog page. We are not going to configure the blog page yet, we are going to create a blog post and I will show you how it works. I hover over new, click on post and I\u2019m going to create a blog post about Elementor and this time I will not use Elementor, I\u2019ll just use the visual build over here. I can also use a page builder, but I don\u2019t need that. So I go back to normal editor, but first I want to create a category which is WordPress. I have WordPress related posts and this one is WordPress, so I add a new category which is WordPress. What kind of format do I want to have, just a standard format. What does it mean? If you change this to image or a video, when you go to the blog overview, instead of seeing an image you will see a quote or a link or a video or an audio. I will leave that standard for now, I want to create an image. So I set the featured the image, I want to upload a file over here at blog Elementor elementor2018. I set it as a featured image and I will publish it for now and I view the post, and you see this over here and I don\u2019t want that. So I also do not want to see this, how can I fix that? I added the post, I scroll down display top content \u2013 no, title section settings \u2013 no, I want to view the post again, it looks like this, no more title, bread crumb. Here we have a right sidebar. I don\u2019t need it, through visual.<\/p>\n\n\n\n<p>Now let me show you a little bit about this page builder. If I click over here, I see only this row, if you want to have more options click over here and it will give you more options. I want to start with a title and then I want to start with a paragraph. So how does it work? I start typing the elementor page builder. What I can do now, if I press ENTER, I create a new Alinea. If I say SHIFT ENTER I create a new line. Now if I would say ENTER again, I create a new alinea or a new paragraph. This is a paragraph. Let me add some text to it, for instance this is a paragraph. If I want to have a new paragraph, I do not say shift enter, but I do say enter and I can add a new alinea like this. So actually we have four alineas 1, 2, 3, 4 and if I do one more and I say responsive. I can make a header out of this. So if I update it, maybe you\u2019re like what are you doing. Well, I\u2019m trying to explain something. Let\u2019s take a look. Right now, we\u2019ll get rid of this later. We say only in this text is all flat no style, nothing. I want to organize this in paragraphs and headers. How can we do that? I go to the backend and over here you see paragraph and heading one until heading 6. If I select an area or I just click on it and I say make it a heading 2, you see the text becomes bigger. But the same thing goes this one. If I would grab this paragraph I click on it and I say make this heading two, the whole paragraph becomes a header two. I don\u2019t want this, I want this to be a paragraph. So\u2026 and if I want only this line to be a title and I want this to be a paragraph, that doesn\u2019t work because I said SHIFT ENTER, and as long as you say shift enter this will be one text. You cannot make this a header and this in alinea or a paragraph. So if you want this to be a title and this to be an alinea, if you try it like this, it will not work but if you say ENTER, then you create a new alinea, I remove this for now and then I can select this, I say make this a paragraph. So we have titles and alenias. I hope I make myself clear. This is also a title or a header. If you don\u2019t understand it, no problem, you will get it. I will create a blog post and I will show you how it works. I update it for now. I refresh it and now you will see, you have titles and blog posts. So I will paste the text over here, now what can you do. If you take a look at visual, you can add colors and stuff. I can select this, if this a different color, I can select this over here. I can make it bold. If you click one time, you go to that place. If you click two times, you\u2019ll select a word and if you click three times, you select the alinea. So I click two times over here and I can make this italic, or two times over here and I can give it a link. And I say go to http:\/\/elementor.com. Now if I update it, and if I refresh it, you\u2019ll see this is purple, this is bold, this is italic and this is a link. So that\u2019s how it works.<\/p>\n\n\n\n<p>If I take a look at the text editor, now I\u2019d see the code. So this header over here has a code behind it in HTML and if you want to see the HTML, you can go to the text tab then you\u2019ll see HTML. You don\u2019t need to be here because you can do everything over here. I will select it all, remove it and I will paste a text. I paste it like this and this text has no style yet. So I update it, I refresh it and you see it\u2019s a text but it really looks ugly. If somebody enters this page and he thinks okay, an image and then he sees the text, this is not appealing; how can we make it appealing \u2013 I will show you step by step. I edit the post and as I said before, we work with headers. I select it over here, I want this to be a header. So I change it from paragraph to heading two, don\u2019t use heading 1. If you use it, use it only once on your website. So I could say the elementor page builder, I can select this and make this a heading 1, but it can only appear one time on your post or on your page. Then I select over here or I click once and I\u2019ll make a heading 2. Over here heading 2, heading 2, heading 2. I update and I refresh. Alright, now it looks like this. The header 1 and all the header twos and it looks already a little bit better. Now I want to add a few images in it, but before I do that. I want to optimize this page for google. How can I do that? Over here you see Elementor2018\/Elementor and google search for this term after the .com, so if I only say Elementor, it does not give a lot of information. So I want to drag this over here, Elementor page builder and that will be the title of my blog post. And if I update it, you see the permalink is still only Elementor, so I can edit this and add something manually and it will be the same. If I say okay, it will automatically create the dashes and remove the capitals. I update it, now if I view the post, it looks like this. Elementor page builder, which is way better. The Elementor page builder, now this looks okay but I want to add some images. So I edit the post and if I want to add an image, we\u2019ve done this before, I click over here and I add media. I upload files, I select the files and I want to add all those, open them and I want to start with this one. I click on it I scroll down, I want to align it at the right, link to media and the size is 300\u00d7152 like that. It is responsive; that is nice. One minute template setup, below that I want to show the templates. I add the image, it is this one and this time I want to align it in the center. I want to show the full size, insert it into the post so it looks like this. And here we have Elementor Pro, I want to say something about that. So I click over here, add the media, and I want to use this one. I want to make it a little bit smaller, but bigger than this, so what can I do. I make it small for now or medium. I bring it to the right like that and now I want to make it bigger. So I click on it and drag it over here and make it bigger like that. Now, if I update it and I refresh it, it looks like this. The Elementor page builder with this image and with this image and with this image and if I click on one of the images, I see it like that. I can go back. There are a few things I don\u2019t like, this is way too big. I want to change the font and I want to get rid of this area over here. How can I do that? I go to customize press CMD minus once, so I see the website with the logo here at the left and the menu at the right. And I go to appearance &gt; typography and I change the main content \u2013 this text over here to open sans; just the regular but also the main titles. This one open sans, the page heading, open sans; only the menu can stay like this, I like that. Save and publish, I close this, I want to get rid of this, so I edit the post, I scroll down and I want to remove the featured image, so display featured image on archive block \u2013 yes, display featured image on single post \u2013 no. Then I go to the title section settings, it says no already and then I go to advanced settings and here we can add some custom CSS and if I take a look at the blog post, I want is to be a different color and I want this to be a little bit smaller. How can I do that? I want to add some custom CSS, CSS is a code that will tell your website, WordPress does it for you and the theme does it for you, but we can also adjust a little bit manually. In order to do that, go to FerdyKorp.com; I have a CSS code over there that you can copy and paste.<\/p>\n\n\n\n<p>I go to tutorials, elementor tutorial 2018, I scroll down and here it is \u2013 HeaderCSS for blog post. I copy this, I go to the first tab and I paste it over here. And if I update this and i refresh it, you\u2019ll see it\u2019s a little bit smaller and it\u2019s blue now and here it is still normal, why? Because this is a Header one and this is a header two. So if we go to the backend, scroll down; we can copy this. If this is a Header one and what I also want to do, I want to change the font white to normal. Also this one, normal and now we are here and I want to change the margin a little bit; margin bottom -10 pixels. Let\u2019s see what will happen. Copy this, update, close this and what it does. It brings this 10 pixels closer to the alenia. Refresh, this is a little bit too close I think. So I go back and I change it to 5 and you know what, I bring this to 5, set of -5. Update, so there will be 5 pixels between those two, between the header and element like that. This is what I like. So this is our blog page and we have the title over here and because we have the title over here, I don\u2019t need it over here anymore. So I can remove this, like that. You see still this area over here, if you want to remove that. Go to text and here is the code. H1, then we go to visual and then we fix it, update and this is our post. Elementor page builder, October 25th, 2017 by Ferdy Korpershoek with no comments. And the text and the image and the titles, and the headers, I like it the way it is. People can leave a comment which is amazing and then we have this area at the right. I want to show the latest post over here. How can I do that? I go to the widgets and if I take a look at the blog post, I go to blog and I click over here, so I go to the blog post. You see search recent posts and as everything you see over here at a global primary widget area, what our widgets? Widgets are additions to your website that will show information in a certain way. So we can have a search widget, a recent post widget, recent comments and I don\u2019t like this, so I delete them all, I open them here, delete, delete and I delete them all. I like that. If i refresh it, you see nothing.<\/p>\n\n\n\n<p>Now I want to add a recent post widget with thumbnails. We don\u2019t have that so we need to get it. We go to plugins &gt; add new. Over here, I can search for recent posts with thumbnails and it\u2019s from Martin, installed a lot of times, a really good rating so I install it now. I activate it and now if I go to appearance &gt; widgets and I take a look over here, and I search for a recent posts with thumbnails, you see it over here, I click on it once and now we need to select an area and it\u2019s a global primary widget area. So I scroll down and I say add widget and there it is. And I say recent posts, I want to show five, I don\u2019t want to open them in a new window. I think this is all okay, all categories &gt; display post featured image and I want this to be 45 x 45 pixels. A lot of options, I don\u2019t need them. I save it and now I refresh it and there you see it, our recent post \u2013 elementor page builder; really nice. So this is our first blog post and if I go to the blog page, you\u2019ll see an overview with a featured image and the title and the date, and also here you see the latest blog post complete. We can adjust later; I will create a second blog post, so I hover over new &gt; post and as a photographer, I like to make photos and there was a really beautiful cruise ship here in the Netherlands and I took some photos and I want to share that with my customers, with my visitors. So I say \u201cOasis of the Seas.\u201d I want to add a text over here, I have it already. Press ENTER. I add some media, I upload files, select the files, I go to blog, \u2018oasis of the seas\u2019 and there are two pictures. And what I do, when I upload pictures, I don\u2019t call them IMG0001 0002 etc. I call them \u2018oasis of the seas Maassluis\u2019, \u2018oasis of the seas Rotterdam\u2019 why? If people search for \u2018oasis of the seas Maassluis,\u2019 and they go to images, my picture comes up first, why? If I take a look at the image, it\u2019s called oasis of the seas Maassluis.<\/p>\n\n\n\n<p>If you search for img0001 and you go to images, you see this image why? If you take a look at the image, you see it\u2019s called IMG0001. People are not searching for this if they are searching for the Oasis of the Seas. So rename your pictures always before you upload them because you will be found better in Google. So I upload those two files and if you want to optimize them for Google even more, which I did with this picture. Then remove the dashes over here, copy it and paste it at all text and I want to bring them to the center. I uncheck this one, center \u2013 no, link to the media file. I want to show them at full size. I insert them and again, now the settings are correct so I delete it again, add media and I will select them both and insert them into the post. It\u2019s not WordPress, it\u2019s photography and featured image is this one and again it\u2019s general settings \u2013 nothing, featured image \u2013 don\u2019t show or yes here it can be shown. Don\u2019t show it, so over here I say no. Title section \u2013 no, advanced settings, we can have custom CSS. I don\u2019t need it so everything is fine. I don\u2019t want to have this, so I uncheck it and I publish it. We can view the post and what we will see, here at the right we have oasis of the seas and Elementor page builder. The title, the date again \u2013 so that\u2019s how it works. And now we can have a previous post or the next one. If we go to previous post, we can see the next one over here. So I will add a few other ones, I will fast forward and then I will come back to you. So there you have it, four blog posts; one, two, three, four. Maybe I\u2019m, like my honeymoon, was way earlier than now. So what can I do I click on honeymoon, I edit the post here it says October the 25th. I can edit this and I can say it was in November 21st or 20th of 2015. I say okay and if I update it now, and I view the post, you see it\u2019s now November, the 20th 2015. What I also can do, I can click on Montana Lisianthus, I can edit the post and I say\u2026 I want this to be published in a month, so I press okay, and now it\u2019s scheduled for November the 25th, 2017.<\/p>\n\n\n\n<p>If I schedule this then go to the blog page, you don\u2019t see it anymore. But at the 25th, at the time it is set to, it will appear automatically. So you can write blog post all day for one day and then spread them out over the next 8 weeks and then that way you can upload automatically new blog post every week without doing it manually. You only have to configure it once. So that\u2019s great, I\u2019ll bring it back of course. I go to the back end and I go to posts &gt; all posts and here it\u2019s as scheduled. I can do a quick edit and I can say release it right now. Update, go to the website, to the blog page and this is our most recent one and categorize so I click on it, I edit the post and I make a new category which is personal. I uncheck this one, update and now again if I take a look at blog, it is in personal.<\/p>\n\n\n\n<p>If I click on personal, I will see all the categories that are in personal \u2013 our honeymoon is personal. So in that way people can navigate really easily through your website, maybe people only want to see videography blog post, then I click on film projects on that category and then they see all the blog post that has category film projects. So that\u2019s how it works, really nice. I go back to the blog page and I can configure this if I want to. Right now we see the latest post over here with the featured image, the title and the date and the category and here at the right recent post and here all the blog posts, but we can change that. I can go to customize, CMD minus and I go to blog and I can change things on a single post but for now I can do it on the blog page and here you see, how it looks. We can also make a grid of it and then you still will see this and then it will be displayed as a grid. And in grid layout we can change it to this one and let\u2019s configure this a little bit. The columns are three, not more and I save it and I publish it. I see not everything is correct, so I close this for now. Our featured blog posts and then we\u2019ve those three and I don\u2019t see the images, so I click on this one, I edit the post, I scroll down \u2013 here is a featured image. Maybe I should have one also here. Here I should say yes probably, display a featured image on archive block. If I would say update and I go over here to blog, now I will see them. So I should do that manually, maybe I can do it also here at the customize and I don\u2019t know why but you have to turn it on manually. So what are the different options. We have to read more text over here, we can remove the sidebar, so make it like this. Actually I like that, I save it and I publish it. I close it, what else can we do? First I want to open this one in the new tab and this one CTRL tab and then I go to the next tab, edit the post, edit this post. I scroll down, I go to featured image setting, say yes always, update; also here. Featured image over here \u2013 yes, so yes and no, update, refresh this and then over here, it looks better already. And there is no sidebar and if I click on elementor page builder, I will see the sidebar over here with the recent posts and also here, I can go to the previous post or to the next one. If I go to customize, I go to blog &gt; single post and I scroll down. I have the sidebar. I can also have the sidebar at the left like that or no sidebar. I want to have it at the right, I can have a dark side bar like that. I don\u2019t want that or no lines like that. I want to have a line. Content style like this or like that, I want this one display post info \u2013 yes, display post date \u2013 yes, I want to show that, author \u2013 yes, comment numbers \u2013 no, especially not in the beginning. Do I want to show the categories? For now \u2013 no. Display like button \u2013 no, display text, we can add text, I don\u2019t need that, so I remove that. Display author section, you can do that. Then you can put some text about yourself. I will show you how that works. Display author biography text, we can do this in a few minutes, display other socials, display next and previous post over here. And if we want to do that, how do we want to show that, just like that and that\u2019s it. I save it and I publish it. I close it and then I go to the back end, I go to users &gt; all users &gt; click on myself. I changed my email address, update and my email address is connected with a profile on the internet. If you want to get a profile like that, go over here to Gravatar and then you can configure that and here I can say something about myself. Something like that. I can have all my social icons over here. So for instance https:\/\/newwebsite.ferdykorpershoek.com; that\u2019s okay for now. I update my profile and now when I go to a blog post, for instance this one, I scroll down. It says, Ferdy Korpershoek, my name is Ferdy Korpershoek and then I see some icons over there. So that\u2019s how it works. If I leave a comment, great blog post; because I\u2019m logged in, I can do it by myself. I can submit it and you see it over here. If I log out, I can say my name is Josh at Ferdy Korpershoek and no website. I say this is amazing, submit, your comment is awaiting moderation. So I need to accept it. So if I log in again, I see a comment over here and I can say, I approve it or I bring it to the trash. Now if I go to the blog post over here, it says this is amazing and I can reply on it. \u2018Thank You Josh\u2019 and that\u2019s how it works; submit, great.<\/p>\n\n\n\n<p>So now I want to add a few widgets over here, footer widgets. So I go to customize, I scroll down and I go to footer, sub footer and I want to turn it on like that. Here I can choose the amount of widgets; right now there are three and I want to make it four. And you see an area over here and it\u2019s quite light. I want to make it darker, so the background color of the widget area, the footer widget area will be like that. I like it, I save it and I publish it. I can put widgets here in two ways. I can go back and I go back again. I go to widgets and then I go to the sub footer first widget area and I can add a widget and I can see the result immediately. But I need to plug in for the first widget, so I close this, I go to the backend, to plugins &gt; add new and I say Instagram widget by WP zoom. Here it is \u2013 ten thousand active installs. Install Now &gt; activate it; I need to configure it, so I will do that. If you don\u2019t see this then go to Instagram widget it by WPzoom, go to settings, this can look a little bit complicated but just follow along. I hold control or comments to open this in a new tab, connect with Instagram. It sees my name already, so I say I\u2019m not Ferdy Korpershoek. I need to log in, so I log in like that. And I say authorize and my user ID is this one and my access token is this one, and I need my access token to be filled in over here. So I paste it and I save the change, okay. I can close this and then I go to appearance &gt; widgets and I scroll down and I search for it \u2013 Instagram. I click on it, I scroll down for the sub footer first widget area, add the widget and I say follow us. Number of images to show \u2013 nine, how many rows \u2013 three; this is all okay with me and I save it. I take a look, I scroll down and there it is. What I see is that this title is dark, so I go to customize, close this for now, I scroll down, I go to footer, sub footer. And over here it says dark-skin for widgets, I turn this on and now the title will be white like that. Save and publish. Then I close it. I go to the backend, to plugins &gt; add new and I want to add a Facebook like box. The best one in my opinion is Facebook by WebLizar, install now, activate it. Now go to appearance &gt; widgets and search for it. Here it is; I click on it, I scroll down, sub footer, second widget area, scroll down add the widget and then say like us on Facebook. Our Facebook URL \u2013 Facebook, my page, copy it, paste it. I want to show faces. I don\u2019t want to show the live stream and I think this is all ok. I save it and again I\u2019m going to take a look. Go to the contact page, the footer widget you will see everywhere on all pages and here it is. Follow us on Instagram and like us on Facebook. The third one, I want it to be recent post, just as we have at the blog page. So I click on customize, I close this, I scroll down, I go to widgets- the 3rd widget area. I add a widget and I search for post. Recent posts with thumbnails; I click on it. I say recent posts, I want to show 5. Again all categories, 45 x 45 and you know what, I will go back, I\u2019ll go back and go to footer, sub footer. I change the background color, make it lighter, like that. And then I closed this and I could screw up and I say disable dark-skin. Now it looks like that. Follow us, like us on Facebook, recent posts and what I can do, if I\u2019m like this is okay, I want to only have three widgets, then I can turn on this one or this one and I like it. Then I can go to the widgets one more time, widgets, the third widget area and I want to bring this back to 70 x 70. Let\u2019s see what it does. I like that better, I save it and I publish it. What I will do now, I will adjust a few things. I will just show it to you how quickly I will do this. So over here, I like this. I like this too. This is all fine with me. I go to about us, I want this text to go from the left to the right. So I say edit with Elementor or from the left to the right.<\/p>\n\n\n\n<p>So I scroll down and over here, I say fading from left like that. Also over here, I click over here, advanced, fading from left and here fading from right. You can have it normal, fast or slow; it is okay. Here\u2019s a small white area, so I add a new section like that. Click on the plus and I search for social icons. I drag it over here, Facebook. I copy it over here, Twitter and I paste it; no Google+ but I can add another one or I change it to LinkedIn. Paste it, I want to have another one which is of course Instagram, copy the link and paste it. So I go to this area, advanced padding-top, now I\u2019ll say- 30; save it, refresh and this is better. I go to services and the rest is fine with me. So that\u2019s how you can change things really quickly. So we have this beautiful website over here and on a desktop it looks amazing in my opinion.<\/p>\n\n\n\n<p>But as you probably know most of the people these times visit your website through a smartphone or through a tablet, so how does your website look on a mobile or a tablet. Well let\u2019s take a look and the great thing is, with Elementor you can adjust everything for the desktop and separately for the tablet and also for a smartphone. So let\u2019s take a look at that. I edit with Elementor and this is our website on the desktop. Well I want to know how this looks on a tablet, so I go over here. I click on the screen and I go for the tablet and this is how it looks on the tablet. And you see, I don\u2019t like this very much. Let\u2019s take a look at this first, I click over here and if I go to style, you\u2019ll see three icons over here. If I click over here, I can see the settings for the desktop. If I click over here on the tablet, I can adjust it for the tablet so maybe like this and if I click over here, I go to style. I can do the same, make this a little bit bigger like that. I click on the divider, and here at tablet I can make it bigger. So that\u2019s better. I save it.<\/p>\n\n\n\n<p>And If I scroll down, I think this does not fit. It should be in one line. I click on it, I go to style, to content and again the size, I make it 20. Also here, style &gt; content \u2013 20 and here also style &gt; content -20. So it\u2019s just amazing what you can do. So I really like it. I save it and if you really want to see the results, push this away and this is what you\u2019ll see now on a tablet. But if I go to a mobile phone, it looks like this. I don\u2019t like it and you see this looks really weird. So let\u2019s fix this.<\/p>\n\n\n\n<p>I think this is OK, I want this on one line. I click on it I go to the style and I make this like that. Maybe I can make this a little bit bigger, at style &gt; size like that. And I click over here and align that a little bit like that. This looks weird, so I click over here and add alignment for the smart phone, I can bring it to the center. Also for this one I can bring it to the center. So I scroll down, this is all fine with me. So that\u2019s great. I save it and here on a smart phone, it looks nice. On a tablet it looks nice and on the desktop it looks nice. That\u2019s the power of Elementor.<\/p>\n\n\n\n<p>I take a look over here, I view the page. Let me show you one more time in different way. This is on the desktop, make it smaller. This is on a tablet and this is on a mobile. I go to about us and again, here it looks really nice, &nbsp;those animations, these animations. But what I see, here I have my text at the left and the picture at the right and here I have the other way around. How will that look on a mobile or on a tablet. I edit it with Elementor and I click over here, I go to tablet and this looks all fine.<\/p>\n\n\n\n<p>So let\u2019s take a look how does it look on a mobile. This looks great, this looks great. I like this and here I see Ferdy Korpershoek and my text and here I see the picture, but here I see the picture of my wife and then below I see the text. How can I change those two columns. So first you will see the picture of me and then my text, really easily. I click over here on the section. I go to advanced, I scroll down, I go to responsive and here it says reverse columns. When on a mobile, the column order is reversed. So I check this and now you see first the picture, then the text, then the picture and then the text.<\/p>\n\n\n\n<p>Over here, I don\u2019t see this form. How can I fix that? I click over here. I go to advanced and again on a mobile phone, you can have different margins but we should not edit the margins of the section with the margin of the column. So I click on the column, I go to advanced and if I say 0000, you see no background but I could also say 5 pixels or 10 pixels and then you see a small background like that. But you also can do if I remove all this stuff. It looks a little bit weird but if I go to desktop, I click over here, I see the padding is in pixels, that\u2019s why it looks so weird on the mobile. If I were to remove this and I change the pixels to percentage and I will say 10% on the top, 20% at the right, 10% at the bottom and 20% at the left and I save it. I want to take a look here at a mobile, it looks like this. Maybe not that great, so I can go back to the desktop and change this to 10. Save it, let\u2019s take a look at the mobile and in that way, it looks great on both devices \u2013 on a desktop and on the mobile and the tablets, it looks also fine.<\/p>\n\n\n\n<p>So sometimes it\u2019s better to work with percentage instead of pixels. Okay let\u2019s go to services edit with Elementor, let\u2019s take a look on mobile. I like this, this is all fine with me. It looks great. I view the page and I go to contact, the portfolio and blog page look great and what you also can do the last thing, I will show you edit with Elementor, you can also say certain elements, I only want to show on a mobile or I only want to show them on a desktop. So for instance this one, I only want to show on a desktop and on a tablet. What can I do then? I click over here, I go to advanced, scroll down go to responsive and I say hide on a mobile phone. So I save it, and on a desktop I will see it but if I go to mobile I still see it but if I remove this then I will see the final results and then it\u2019s gone. So let me show you, I view the page. This is the desktop version, this is the tablet version and this is the mobile version and that mobile version you don\u2019t see it. So in that way you can make your website perfect for a desktop, for a tablet and for a smartphone.<\/p>\n\n\n\n<p>So if you want to take it to the next level we are going to work with elementor pro. If you want to work with elementor pro, go to FerdyKorp.com, go to tutorials &gt; Elementor tutorial 2018 and click on get elementor. Click on pro and click on buy now. Here we have a few prices, there\u2019s some discount right now. I hope for you that\u2019s the case right now. If you want to use it for only one site, it is normally $49 this time $39. If you want it for 3 sites, then it is $79. If you want to use it unlimited then it is $200 it is $199 normally and now $159. I want to use it for 3 sites, you get one years of updates and support and after that you can still use it without paying for a second year. If you want to get new updates and support you can upgrade, it will probably cost less but this is to start with.<\/p>\n\n\n\n<p>So I click on buy now, here are my details. So I say check out now and I want to pay with PayPal. So I click on continue and it is completed and now I can click over here and get Elementor Pro. It\u2019s downloading right now. I go to plugins &gt; add new and here I say upload plugin &gt; choose file and here are downloads. I go here for Elementor Pro. I open it and I install it now. I want to activate the plug-in, \u201cwelcome to Elemental pro, please activate your license key.\u201d So I want to activate my license and I can find my license over here. You can also find it in the email you will probably get or you go to your account and there you\u2019ll get it. So I fill this in over here and I activate it. So I can use it for 3 websites and right now it is active. Now, if I go to the home page and I go to Elementor Pro and I click on edit with Elementor and I scroll down, you see the pro elements, posts, slides, plugin, navigation menu, price list.<\/p>\n\n\n\n<p>As you see I made a few things with Elementor Pro. If you want to learn everything about Elementor pro, please follow the tutorial you will see in the description. This was it, for now thank you for watching this tutorial. I hope you create an amazing website.<\/p>\n\n\n\n<p>So what is the next step for you? I have a few tutorials for you that will help you to continue to build your website. I have two tutorials about search engine optimization, I will show them in the description. I have a tutorial about MailChimp where I show you step-by-step, how to create an account. Create an opt-in form and grow your email list. I have a tutorial about WooCommerce, how to create a web shop within your website.<\/p>\n\n\n\n<p>So feel free to take a look at those tutorials and grow your business even more. This was it for now, thank you so much for watching this tutorial. Please like the video, subscribe for more upcoming videos and then you will see me next time. Bye Bye.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Important links Contact Form [text* your-name placeholder &#8220;Name&#8221;] Header CSS for blogpost h2 { font-size: 10px; color: #1F96C4; font-weight: bold; } Learn Step By Step How To Create A WordPress Website. In this tutorial we will be using free tools, plugins and stock images! If you have any question, please leave a comment&nbsp;here. I will [&hellip;]<\/p>\n","protected":false},"featured_media":12020,"parent":0,"comment_status":"open","ping_status":"closed","template":"","yt_v_categories":[114,115],"class_list":["post-10979","youtube-tutorials","type-youtube-tutorials","status-publish","has-post-thumbnail","hentry","yt_v_categories-wordpress","yt_v_categories-wordpress-themes"],"uagb_featured_image_src":{"full":["https:\/\/ferdy.com\/wp-content\/uploads\/Wordpress-Website-Elementor.webp",1280,720,false],"thumbnail":["https:\/\/ferdy.com\/wp-content\/uploads\/Wordpress-Website-Elementor-150x150.webp",150,150,true],"medium":["https:\/\/ferdy.com\/wp-content\/uploads\/Wordpress-Website-Elementor-300x169.webp",300,169,true],"medium_large":["https:\/\/ferdy.com\/wp-content\/uploads\/Wordpress-Website-Elementor-768x432.webp",768,432,true],"large":["https:\/\/ferdy.com\/wp-content\/uploads\/Wordpress-Website-Elementor-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/ferdy.com\/wp-content\/uploads\/Wordpress-Website-Elementor.webp",1280,720,false],"2048x2048":["https:\/\/ferdy.com\/wp-content\/uploads\/Wordpress-Website-Elementor.webp",1280,720,false],"bricks_large_16x9":["https:\/\/ferdy.com\/wp-content\/uploads\/Wordpress-Website-Elementor-1200x675.webp",1200,675,true],"bricks_large":["https:\/\/ferdy.com\/wp-content\/uploads\/Wordpress-Website-Elementor-1200x675.webp",1200,675,true],"bricks_large_square":["https:\/\/ferdy.com\/wp-content\/uploads\/Wordpress-Website-Elementor-1200x720.webp",1200,720,true],"bricks_medium":["https:\/\/ferdy.com\/wp-content\/uploads\/Wordpress-Website-Elementor-600x338.webp",600,338,true],"bricks_medium_square":["https:\/\/ferdy.com\/wp-content\/uploads\/Wordpress-Website-Elementor-600x600.webp",600,600,true],"gform-image-choice-sm":["https:\/\/ferdy.com\/wp-content\/uploads\/Wordpress-Website-Elementor-300x300.webp",300,300,true],"gform-image-choice-md":["https:\/\/ferdy.com\/wp-content\/uploads\/Wordpress-Website-Elementor-400x400.webp",400,400,true],"gform-image-choice-lg":["https:\/\/ferdy.com\/wp-content\/uploads\/Wordpress-Website-Elementor-600x600.webp",600,600,true]},"uagb_author_info":{"display_name":"Ferdy","author_link":"https:\/\/ferdy.com\/author\/"},"uagb_comment_info":14,"uagb_excerpt":"Important links Contact Form [text* your-name placeholder \"Name\"] Header CSS for blogpost h2 { font-size: 10px; color: #1F96C4; font-weight: bold; } Learn Step By Step How To Create A WordPress Website. In this tutorial we will be using free tools, plugins and stock images! If you have any question, please leave a comment&nbsp;here. I will&hellip;","_links":{"self":[{"href":"https:\/\/ferdy.com\/wp-json\/wp\/v2\/youtube-tutorials\/10979","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=10979"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ferdy.com\/wp-json\/wp\/v2\/media\/12020"}],"wp:attachment":[{"href":"https:\/\/ferdy.com\/wp-json\/wp\/v2\/media?parent=10979"}],"wp:term":[{"taxonomy":"yt_v_categories","embeddable":true,"href":"https:\/\/ferdy.com\/wp-json\/wp\/v2\/yt_v_categories?post=10979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}