November 17, 2019
How to Make a Drag & Drop WordPress Website – ▼FOR BEGINNERS▼ EASY! 😀

How to Make a Drag & Drop WordPress Website – ▼FOR BEGINNERS▼ EASY! 😀


Hi, my name is Hogan. And today I’m going to teach you how to build this beautiful, stunning, yet simple website. This video tutorial is not for you, if you want to build the next Facebook, Amazon or eBay but if you’re a online entrepreneur, a freelancer or a small to medium sized business owner then this video is perfect! And you’ll never look back. There are 3 problems that people face when building their first website. And I want to discuss that with you because I want to help you understand why I made this tutorial and also help you decide if this tutorial is for you or not for you. The first problem is that when you are first starting out, you want something cheap and easy. And a lot of people build their website on free website builders. And the problem with that, is that a lot of them are built with flash. And that it is not search engine friendly, so being a not search engine platform your website is not going to rank on well on Google. So if it is not ranking well on Google then you are missing out on huge chunk of highly targeted traffic. And if you are missing out on traffic, then you are missing out on customers and sales. So that’s really important you have a search engine friendly site and platform that your building your website on. Secondly, you get a non brandable domain. So, You have your username. So for example. creativeway10 and then dot Wix dot com slash your business name. It’s unprofessional, it’s hard to remember and it doesn’t build any trust with your customer. And Thirdly, you’re going to have to pay anyway. So, to get an upgrade to your own domain – you have to pay! To remove the ads that they put on your website – you’re going to have to pay! To get extra storage, to connect your Google analytics and even your icon, your favicon – you have to upgrade to their premium version. And the worst thing is its actually a lot more expensive then getting this. then getting your own domain and hosting account. They make it look like your getting a great deal, but you’re really getting ripped off And It’s for people that don’t know any better, and if you knew better you’ll never recommend to your friends or family. It’s something you’d recommend to your seven year old cousin. Secondly, if you go to YouTube now and type in how to make a website. Take a look at all the tutorials and take a look at the end result of the website that they teach you to make. And you’ll find that the websites they teach you to make is really bad. They go through the bare minimum, so they tell you how to get the domain and hosting, and how to install the WordPress and then how to add sample content. And then the end result looks something like this. So it looks shocking, it looks like it’s from 2009. It’s uninspiring and just plain old ugly. Um. As you guys know, that having a website is like your signage of your business. So it shows who you are, what you stand for and why should the customer care about your business or product or services. So that’s really important you don’t build a website like this but unfortunately that’s what most tutorials show you how to build. It’s quick, you know? but it’s not comprehensive enough. Or you code learn how to code a website from scratch, but if you’re like me then you might thinking after you watch some of the tutorials that you’d probably hire a web agency. But that leads to our third problem and good web agencies are really expensive. To build a five website like this – might cost $3,000 And they are going to charge you by the hour if you want to make any edits, or support which mostly pays for their expensive office and their staff. So you might a cheaper agency or web design company but it looks like that they haven’t updated their skills either. As you can see some of their websites they do. Um.. It just looks old. And the problem with working with web design agencies is that communication is a total waste of time. Um. You back and forth, back and forth. And You never really get the thing you want done properly or just the way you like it. If you haven’t worked with one before then you won’t know. But if you have then you know exactly what I’m talking about. I’ve been through all those three stages and it was really frustrating and I finally found a solution. And that solution is themify builder. I think they’ve really built a simple tool that allows everyone to become a designer and developer all in one. So, I’m going to show you the power of it right now. So I’m going to log in to the website and show you. I just want to let you guys know that it’s search engine friendly, it’s built on the WordPress platform, it’s one of the most search engine friendly platforms you can build your site on. Top sites such as Forbes, CNN and even Katy Perry build their sites on WordPress. And you get your own domain name, so it’s brandable, and it’s trustworthy and it’s easy to remember. And as you can see it is not ugly at all. It looks really nice. Take a look at the gallery page and you’ll see what I’m talking about. So, I’m scrolling down. You’ve got parallax scrolling down here, you’ve got your image sliders and a animating background 🙂 You’ll see it changes colours every 8 seconds. I’ve taken inspiration from most progressive companies in the world, such as Uber, Air bnb, Xero (which is an accounting software) and Upwork (which is a freelancing website). So why did I take the inspiration from them. The reason is because these are billion dollar companies and they’ve probably spent millions trying to optimize their site, to test what works and doesn’t. So it’s only naturally that we take some of their design elements and trust building element and implement it for our own sites. As you can see, all of them have a feature image and a call to action button here. And they’ve got video on their websites as well, along with feature images, a call to action section – such as here. They’ve also got testimonials, so which we have here. You don’t have to pay $3,000 for it and the funny thing is that, you could probably sell this website to some local business owners. Just don’t tell them you’ve learnt your tutorial from here, in 3 hours. So let’s turn on the Themify builder now. So, as you can see you’ve got these little boxes. I call these modules and… If you just want to edit the text – you click here. And we edit the text – it works exactly like Microsoft word. So, if you know how to use Microsoft word then you’ll know how to use this. You can change the colours, sizes all really easily which I’ll show you in the tutorial. If you want to move these images around, you just move them around like that. Do you want more columns? Okay. You just add more columns, so there’s 3 columns now. You want to move these around as well? So you can edit things whenever and to wherever you like and you can even do it on your tablet or phone. Um, you save a ton of time. And you can make the things perfectly just the way you want it to be. So you can get a totally unique website. Not like those websites they create, which sort of look the same you can move things around without actually um, you know emailing them or contacting them to move the thing around. You can do this all yourself, so it saves a ton of time. You won’t have ads on your site that you don’t want to put. I’ll even teach you how to remove the Powered by WordPress thing down here. Yes, you can add Google analytics and as well as your own favicon. Everything you need is at your fingertips, so if you want to add a button you just click on edit here. And you add the button. I’m just going to type a sample one. I want a large orange outline and then you enter your URL that you want to link to. And then all you need to do is insert and save. And then you’ve got your orange button there. So everything is literally at your fingertips, If you want to add a video module, a slider, a post, a map you just drag these modules into here. So if you want to add your slider. You just drop the slider in here and then you upload your images and you save and then you have your slider. So it’s really that easy and I’m going to show you exactly how to do that in this tutorial. Let’s go to the services page. So click on services. Now you drag down and you’ve got your icons here. There’s actually icons included in here, so changing it is really easy. It saves a ton of time, you don’t have to download it from Google images or buy it from some graphic website. All you need to do is, select the icon that you want. So, I want this bug okay. I want to change colour to pink, basically change the colour here. And then you just save. And then you’ve got your cool icon here, everything fits exactly perfectly. Your buttons, you can even add icons to your buttons. I’m going to refresh the page and as you can see you’ve got this beautiful video background. That’s really easy to add as well, it’s all included with this theme. I’ll teach you how to build a blog page, a simple blog page. And an about page, a simple about page. And a contact page with a map and also a contact form which blends in perfectly with the theme. Unlike a lot of YouTube tutorials that just teach you how to add the contact form in but it doesn’t look like it suits the theme, I hate that. And this website is mobile responsive, so what that means is when you reduce the size of the screen um for example. If people are viewing your website on mobile screens then it shrinks down perfectly to fit that screen as you can see here. You can check it out yourself, just go to hoganchua.com on your mobile phone. This is really important because it increases the user experience and Google will take that as a positive ranking signal, so they’ll rank you higher on the search engines. And as a result of ranking higher, you’ll get more traffic to your website. So, I think the combination of the Themify builder and how it’s actually built on top of WordPress. It means that it is completely scalable, easy to use, yet extremely powerful and allows you to build beautiful websites with ease. So, I hope you guys are excited to begin and I’m going to begin with an overview now. You can build your website in just four steps. The first thing you’ll need your domain name. That is basically the address to your website. So, for your domain name it will be your business dot com. For example, my one is hoganchua.com. YouTube’s domain name is YouTube dot com. Secondly, you’ll need hosting. This is where all your website files are stored so people all around the world can access your website 24/7. Thirdly, you going to have to get WordPress. WordPress is a content management platform, it allows you to manage all your content without knowing how to code. A lot of big companies use WordPress. For example. Forbes, CNN and even Katy Perry. The fourth thing is, I’m going to teach you how to build the website. Before we are going to do that, we going go through the costs. So for a domain name, it normally costs you around $15 per year. Hosting normally costs you around $10 per month. And installing WordPress, is free and building the website is also free because this tutorial free for everyone. So you are going to save a couple of thousand dollars. So the total cost is going to be around $20 because I have a coupon code to save you around 5 bucks. So we are going to head over to hostgator.com to get our hosting and also our domain name. So, just type in hostgator.com and then click on enter. Click on get started now. There are three different plans to choose from. I personally recommend you get the baby plan because you get to upload unlimited domains. So if you want to create more than one website then this is definitely the best deal because the hatchling plan only allows you to create one website. And the price difference is not much, 7 dollars 16 cents compared to 8 dollars. So, it saves about 80 cents. So, I really recommend you get the baby because um I personally get that one as well. So select a monthly one, or if you want to save a little bit more money then get the one with 2 or 3 years. So bigger discount. So, just click on sign up. Now, this is where we will register your new domain. So type in your businessname.com. For example. I’m going to type one in now. Inspirational website and then click on the outside of this box, so just click here. And then it will start loading and finding the domain and see if it’s available or not. So this domain name is not available, so you are going to have to choose again. I don’t recommend you choose anything like .space or .club because um .com is more trustworthy. And also people also generally just type in the .com extension into the search bar. They don’t think of typing .space. So if they type in .com and they don’t reach your website (you know) they might not try again. So it’s really important you get .com, or the last resort .net or .org. So, I’m going to choose. So just make sure you just choose one that is available. For example. this one probably. And then you just select um, select that. Then we choose the package type, we are going to go with the baby one. We are going to choose the monthly option. Just type in your user name here that you want. Type in your security pin that you want. And basically we are going to fill in the details now, so this part is really straight forward. You just enter all your details, your phone number, address, the country, um your state and city. Actually…this is meant to be Melbourne and the postcode is 3000. Then we enter your credit card details here and then you can also pay by PayPal. So you just select that option. These are additional services which I don’t think you’ll need. So just un-tick these. Um, you can get the domain privacy protection if you want. It helps you protect your identity online. So they can’t see your contact details if they are searching up your website they can’t find your contact details. But for me, I just going to un-tick that. Um, you enter a coupon here. I’ve got a coupon code that saves you 25%, So just type in Hogan25Off and then click on validate. So I get a small referral fee for you guys using my referral code. It allows me to keep making these amazing tutorials. So I really appreciate it, if you use my coupon code. So, as you can see um, we save around $4.50. And the amount that you have to pay is around $20. So now select that you’ve read the terms and conditions. And then click on the check out now button. I’m not going to check out now, because I already have an account with Hostgator. But if you check out and if you are paying by PayPal you’ll have to login to your PayPal account and just confirm that payment. Um, But if you are paying by credit card then you should get a congratulations page and after that you should go check out your email cause they will send you all the website details to your um email address. So click on a new tab. I’m going to login to my Gmail. You should get an email from Hostgator that looks something like this, with all your details in it. We’re going to login to the control panel now, where we are going to install WordPress. So, click on this link here. I think everyone’s link is different and also just type your username name now. And enter your password and click on login. So, this is the control panel. You need to scroll down and once you reach software and services. Click on quick install. Now, click on popular installs, WordPress. And then click on install WordPress. Um, Select the domain name you just bought um it should appear in here. Inspirational website. Leave this empty, unless you want to install it on inspirationalwebsite.com forward slash something. But most of you guys should leave that empty. Enter you email that you want to put in and change your blog title. Enter in a username. First name and your last name. And then just click on install. So it’s going to take a few seconds for that to install. And then they’ll provide you with the login details here. So click on view credentials, and then you’ve got the admin area. This is where we’re going to login to edit everything. This is your username, and this is your password. If you click on this site right now, it might not be up yet. But generally it should be up within 10 to 15 minutes. In some case, it may be 2-3 hours or up to 24 hours. So take a little 15 minute break and then come back. Okay, so I’m back. And what we are going to do is click on this here. And then copy the username. Um, it should look something like this. Click on the username and then login using this password. So just paste the password in there and login. So this is your WordPress dashboard and if you look at the site now. This is what is looks like. Pretty empty and plain but we are going to transform all of that in a second. Before we get any further, um I just want to show you guys where we are up to. We got our domain name, we got the hosting and we’ve already installed the WordPress. So right now, I’m going to teach you how to build the site. But before that we are going to edit some settings. So, go down to users, here and click on your profile. Um, we’re going to change the password, simply because that password is too long to remember. So just select um your own password here. And confirm password. And then you update your profile. you can also change your display name public as. So, I’m going to change it to Hogan because I want it to display as Hogan. So, Then you just update your profile. Then I want you to go to settings and general. This is where you can change the site title and um the tag line. Um, You can edit that if you want. I’m just going to leave it as is. Then you can just save the changes. Now, I want you to go to permalinks. And change your permalink settings to postname. This is for search engine optimization purposes and it also might also increase you click through rate when your website is on Google. I’m not going to explain to much about that but make sure you change to post name. Cause you don’t want your post to look something like that. It’s much better to have the title in there. So, we are going to save changes. Now we’re going to remove some plugins and install some new plugins, so click on plugins here. Deactivate all these plug-ins first, cause to delete it we have to deactivate it. So, select all those, deactivate and apply. Now select them again and then delete them, apply. Yes. And lets add some new plugins, so click on add new, up here. In the search bar here, type in contact form 7 and then click enter. Okay, so this one has over 1 million active installs. So make so you get this one and install now. Activate the plugin. Now let’s search for another one, so add new again. Now, I want you to download easy Google fonts and hit enter. And this one has over 100,000 installs. So click on Easy Google fonts, you can click on install now from here as well. Okay, so activate the plugins. Add new, so one last plugin. This is going to be Mailchimp. Mailchimp for WordPress. So type that in and hit enter. We’re going to download this last plugin because I want to show you how you can actually add your email *opt in form. So hit enter and this is the um, download I want you guys to get. So Mailchimp for WordPress and click on install now. Hit activate plugin. So, that’s it! So, we’re going to install theme now. Before we can install the theme, we have to download it from my website. So go to Hoganchua.com and hit enter. And then you’ll reach this site. And click on *Start Here, so this will direct you to the blog page where you can download my theme and the images. So just click on download theme. And it should download install instantly into your download folder and also while you’re here just download the images as well. This is all the content that you need. I’ll always upload the latest version of the theme here. So, you’ll find the latest version if you come to this site and download it from here. So, after you download that then you go to appearance and select themes. Click on add new. And upload themes. So click on the choose file and go to where you’ve saved the theme. Um, Here it is, so just upload it as it is and then it will unzip it itself. So just open it. And click on install now. So as you can see here, it’s uploading and it will take maybe a few seconds or a minute. So just wait until that uploads. You can always find the latest version of the theme on my website and you just download the new version if you need to. So that’s pretty much done. Now, what you want to do is, click on activate. So you’re going to click on begin installing plugin – for this is the Themify portfolio posts. I’m not going to go through it in this tutorial but you might use it later on. So I’m just going to show you how to install it, so just click on begin installing. Now, hit on install. Return here and you can activate it. So now click on the home icon, which will go to your home page. So, this is what the homepage currently looks like. It looks better now, but right now we are going to start editing the homepage. Before we do the homepage we are going to edit the settings in the backend first. So click on this um dashboard again. It goes back to your dashboard. Now click on Ultra and Themify Settings. This is where you upload your favicon. This little icon thing up here. And I’m not going to teach you how to make your icons. It’s basically the same as your logo. So you can upload you logo and it will automatically resize to a small version. You can get your logos at fiver.com. So you type in fiverr.com. You can get logos for as cheap as five dollars. So you just go to logo design. The reason I’m not teaching you how to make your logos is that because there’s tutorial that teach you how to make better logos or you can get it for five dollars. So, just look at the reviews and see which one is for you. Or you can go to 99 designs, where you pay a little bit more money. But you get better designs and you get more designs. It’s basically like you submit your design requirements and then people will submit their logo designs. So for the basic logo design which is the bronze version, you pay $380. And You can expect 30 designs that you can pick from. And you basically just select the winner and after that you get your design. And then you just upload it onto your website here. So, For this tutorial, just click on the upload and upload the HC black – which is my logo and just open it there. Now, scroll down to Google Fonts and select show all Google fonts. Then click on save. So that’s done. Now go to default layouts. So, I’m not going to go through every single setting what it’s all about because it will take too long. So, I’m just going to try and go a little bit faster and only explain the things that we are going to change. So, for the first index sidebar option we want to select the full screen. So that’s how we make the thing full screen and without the sidebar here. So, select that one. Scroll down a little bit and you want to hide the post title, select yes for that. You don’t want the post title and also hide the meta. So select hide. Now for the auto feature image, select this one. And feature image position, select this one below post title. Scroll down and this is the default single post layout. You want to leave everything default. But I’m going to hide the tag cause I don’t think it looks good. Post comments, I’m going to disable the post comments down here. You can enable it, it’s up to you so you can play around with these settings. but for this tutorial we are going to disable it. We’re going to scroll down to default page layout. I want it to be full screen, so the third option and I want to hide the title as well and I don’t want page comments. It’s really annoying, so disable that. And just click on save. Now, scroll back up again and let’s click on theme settings. The tab there, scroll down. As you can see for header design, it’s default. I want to change it to a skinny header. Um, as you can see you don’t want the header to be too big. So we want a skinny header, disable the sticky header. So what that is, is um I’ll show you now. I’ll just copy this thing here and paste it into here. And as you can see this site here. When you scroll down, okay there’s nothing on this page so it won’t show but this little thing here sample page, it actually sticks here. So when you scroll down it will keep showing the navigation menu. I don’t want to show that so I’m going to disable the sticky header. Um, I’m going to keep the site logo, I’m going to disable the site tag line, exclude the search form, exclude the RSS. This is the search thing and this is the RSS thing. So disable that, disable the header widgets, disable the social icons as well. Um, make sure you leave this one because you want it to show your menu navigation. So, scroll down. Scroll down to your footer design so for the footer design you’ll want to exclude the site logo, I don’t want it to show that. You can show it if you want to. Exclude that and exclude the menu navigation , leave those actually. So, let’s scroll down again. For the image filter, leave this one empty. So select greyscale for this one. Apply to all images. And this is the animated backgrounds that you see on the gallery page. So when you go to the gallery page here, you can see that it changes colours all the time. So this is where we set the colours, so go here. And you can also enable the colours to show up in your header or footer by just ticking these options. I want to set the speed to 8. And you just basically select the colours you want to show and I’ve already selected a couple colours. So I’m so gonna type that in. Okay, so I’ve entered all the colours and you might be thinking how I found my colours. Um, what I did um is go to Pixlr Editor. I’ve included a colour palette into the content that you’ve downloaded so click on open image from computer and upload this one – bonus pastel colours. And how I did it was, you pick the colour picker here – colour picker tool on the left. And you essentially just select the colour that you want. I selected it from across – so from left to right and then from down here, left to right. So it sort of changes gradually, it doesn’t change from like pink to yellow. It changes um naturally, so it goes from orangey pink to purpley and then blue and then green and then slowly to yellow. So that’s why it’s got like a nice effect to it. So you just click on here and then you click on this left hand side here. And that means you’ve got your colour code, so you just copy the colour code in here. And then you go back to your website here. And then you paste in the code that you want. Paste as plain text. And you do this for all seven colours. So you could do, this colour, and then this colour, this colour and then this, and then this and the last two colours right? And you just paste those all in. Now, scroll down for the footer text – the footer text is the text you see here, when you scroll down. So this is your footer text 1, this is your footer text 2, as I told you I’m going to tell how I’m going to remove this and it’s really easy. So, if you want to remove this thing – which I don’t want to. You can actually just press um space here and then it will remove it and then once you save it, it will remove it. But I want to leave that there. So, I can press save err.. space and then save. I want to remove the footer thing here, so I go to refresh. And then there you go, it’s gone – okay? So, but in here I just want to write in copyright and then save. So when you go here and refresh, you’ll see that it’s added copyright. So that’s what I want, you can even err… add your own text link in there if you want. So if you want to do that, then you can just go to posts. So right click on it and the open link in another window. And just go to edit for this. Okay, so let’s say you want to add a link in there and the hyperlink you want to do is um.. for example. Website, okay? So, all you need to do is select that then edit that. Type in the URL you want it to link to. Um dot com, add link. And then all you need to go to is text here and then copy this file. And then, let’s paste into here. So, this is the code you’ll need. Or you can just type in the code if you know some html. So, click on save. Now, when you refresh it. There you’ll see, you’ve got a link there. So, it’s that easy. So, I’m going to delete that and click on save. Okay, so now we’re going to go to social links. And this is where you add your URL’s to your um.. social accounts. So you can go to the website here, go to blog. I’ve already got the URL’s ready. So, what I’m going to do is to copy and paste it from here. So, where am I up to? I’m up to themify settings, so I’m just going to click on themify settings. So, I’m going to find the social..okay, so the social links tab. I’m just going to copy the URL’s from here and paste it into here. And I’ll do these all for the facebook and YouTube as well. But to change the colour – the icon colour, you just pick colour here. Edit any colour you want, you can change the background. But for this one, we’re going to change it to um.. white. And for the background, it’s going to be a grey. So I’m going to quickly do it for the rest of my… my social icons. So, as you can see I’ve added all the URLs into here. For facebook and for YouTube and also changed the colours. Try to keep the icon colours all the same for all your social icons and also same for the background. Um, that’s really important to make sure that’s professional. Make sure you click on save. Now, click on your um.. icon up here and you’ll see that your social icons aren’t showing yet. So we need to add those in. So hover over here and select customize, now click on widget. And footer social widget, add widget and then go down to here – Themify Social Links. So, click on this to add it in. Okay, so we’ve added the social links in here. But I want to change the size of it. So all I need to do is, just update it to large. And that looks good so far, so all we need to do is to save and publish. Click this arrow here, this back arrow, not the one for the browser. Only for the one, for the customize thing – click on that, and then click on the x here to close. So, we’re going to go back to the dashboard and it’s time to setup our homepage. Okay, so hover over pages and click on all pages. We want to delete this sample page, because it’s annoying – so let’s delete that. Click on trash and go to your trash folder and make sure you delete permanently. Now, click on add new – we’re going to add the homepage. Now, enter the title here – so we want to name it home. Scroll down to the Themify Custom Panel and then we want to edit the settings here. So, select the page option tab and then for the content width we want to set it to this one – full width. We want to leave this one as default. This sidebar option default cause we’ve already edited in um.. the whole general theme setting. So we don’t need to edit this um… for these page individually. We just need to update content width. Um, as you can see you can change the settings for each page individually but we don’t need to do that cause we already edited in our Themify settings which applies universally to your whole site. So, it saves a ton of time. Now, we need to go to theme appearance tab and we select transparent background for the header. So just click this, and then settings are done. So, we just click on publish. We can go to view page to see what it looks like, and as you can see it’s taking shape a little bit. So, go back to your dashboard select on settings, hover over settings and go to reading. We want to set a static page, static page which means we want our homepage to be our homepage to be for example. inspirationalwebsite.com We don’t want it to be inspirationalwebsite.com/home. So we need to select that, click on static page and select home. And then you save the changes. So, now it’s time to start building the homepage. So, let’s go to pages. Click on home and then select edit. Select the Themify builder tab and we are going to switch to the front end so we can see what we are doing. So, now your Themify builder is on. So we’re going to edit the first module row. That’s what I’m going to call this row here. And, click on options. So, we’re going to upload a background image. To upload a background image we click on browse library. But before we do that, I’m going to show you how to edit the background image on Fotor. Which is a really cool app that allows you to edit photos really easily. And it also resizes it for you, so you don’t have to upload such a huge file into WordPress. Which saves you time as well. So, click on edit a photo and then we want to select DIY, which is do it yourself home background. So, click on open. I want to show you guys how to edit your photos because I think it’s an important skill to have. And once you know how to use it, then you’ll always be using it for your websites. So, before we begin editing um.. you can go to stocksnap.io to get free err.. images that you can use for your website. You can use it for commercial purposes as well and you don’t have to credit the author or anything like that. Or you can also go to unsplash.com this is where I got all my images that you see in the content you’ve download. And you can search by keyword, filter by subject and you can click this thing. So you can show more pictures at once and click on all, then you’ve got all these amazing photos that you can use. So as you can see, the current pixels is 2000 pixels – which is the width. And the height is 1333 pixels. So, I want to crop the image to 2000 pixels across and to about 770 pixel in height. The reason I want to do that is because I want the text, the quote here to be within the clouds. So, this is the perfect err.. height for the image for that. So, I’m going to just crop it here about 1.3 centimetres from the top. Obviously, you’re going to be cropping a different photo when you’re uploading your picture. So, it’s up to you but for this tutorial it’s going to be these proportions so we’re going to click on apply. Now, you can click on one tap enhance, to enhance the photo and make it look a little brighter. So I’m going to do that. Okay, so that’s looking good. So, we’re going to save it. So click on save here, and make sure you save it as .jpeg – not png okay? And for the homepage, I’m going to select the high quality. Normally, you can select the normal quality and it shouldn’t be a problem. So select high and save it to your computer. I just want to save it as, done. And then click on save. So, that is done. Now we’re going to go back to our website and don’t upload using this button because if you upload using this button – it will automatically resize. So, I’ll show you what I mean by that. So, when I click on open. And when you see the image file here, it’s automatically change the sizes – so it shrunk it to about 1000 pixels and 400 in height. So the quality is going to be really bad. So, I’m going to cross – click on the cross. And use this function, browse library and upload from here. So, select the files and select this image here, okay? And click on open and then insert file URL. Because we have already uploaded it – so I’m just going to go to our media library here and select the file here and click on insert file URL. So for the background mode, you are going to have to select full cover. And then, scroll down and click on save. So you can’t see the full image yet, because we still have to add text in here and add some space. So, we’re going to drag a text module into the box. Okay. First this is we want to add our text. So, type in Inspire And you want to make this a H1 Tag, so heading 1 is H1. I’m going to refer to H1 for the rest of the um..video. Select that, If you can can’t see the option for that. You got to make sure you actually click on the toolbar toggle. So, if I toggle this – it will disappear and if I click on it – it will appear again. So, make sure this is the heading 1 tag and then click on styling and for the text – you’ll want to align it to centre. You can also align to the centre using this button here but I’m just going to do it from here. Now, you want to scroll down and add some padding. So, padding is basically just some space. And you’ll see what I mean. So type in 260, px stands for pixels. So, we want 260px on the top and then just click on save. So, as you can see it’s have added some space for us. And um.. so the length that, so it is about 260 pixels as you can see. By the way, this plugin is called Jing. It’s an awesome software – you should probably download it you can just click here and then you can capture the image, capture video as well and you can send screenshots to people really easily. It’s a really good tool to have. So, let’s add in the next module. So drag a text module underneath inspire. So you want to type in – you must be the change you wish to see in the world. I’m not going to type that in because I’m just going to copy it from my blog page. So, I’m going to head over to my blog page. And where are we up to? We’re up to module 1 – click on that. And it will scroll down there. So, this is the text we want. So copy the text from here and then head over um.. to the website. Make sure you click, right click to where it is actually flashing. If you right click here, you won’t be able to paste in your text. So, right click and paste as plain text – cause we don’t want to have any of that formatting. So, I want to change this to the h3 tag and I want to align it to the centre. I want to also add a little bit of padding. So, I want to put it as minus. So, it actually moves up a little bit. -30 pixels to the top and click on save. Now, we’re going to add another text module underneath. And for this we’re going to um paste in Mahatma Gandhi – just copy that and right click again. Paste as plain text I want to change this to the h6 tag and we’re going to click on save. So, as you can see the text is on the left here. We want it to move across a little bit, so what we want to do is create some more so click on the three columns and basically you just drag the text over and move it over. And we’re going to click on edit. Um, highlight it and align it to centre and then save it. So, it’s pretty much that easy. Now, we’re going to add a button. So add another text module, right under there. So, click on the short codes tab here and select button type in begin journey or you can type in your text obviously. The button style, there are a lot of styles you can combine. So, for example. you can just type in large yellow rounded. But for this one we are going to type in a large white outline and if you sort of find it hard – then make sure you go to this visual buttons guide. You can click on the link um on my blog. So open as a new tab and I’ve basically compiled a visual guide for you. So you can choose which button you want and…all you need to do is copy the style and just paste it into here as plain text obviously. And then you’re good to go. And you can also change your background colour, so you have to put in the hex code. To get the hex code, I’ll show you after I put in the button link. So type in the link you want it to link to. I’m going to put it to blog, you can also change the button text colour. And if you put an underscore blank it will open in a new window. So, I’m going to insert now. For the hex code, you can basically go and click the text colour here. Just open this thing and click on custom. And just play around and select the colour you want. And just, you can get the hex code form here and just copy that. And then, you can just paste in the hex code like that. And then, you can change the background colour and the background text. So click on close, and what we want to do is align the button the centre again. I want to add a little bit of padding as well. So the padding I want is 50 on the top, um 140 for the bottom. I also want to change the font, um.. you can change the font just by clicking here. And then I want to change it to Roboto, so type in R. And then scroll down a little bit. And It should appear (there you go) – just click on that. And then you’re going to save. So, as you can see it doesn’t look that great yet. We still need to edit the font. So, to edit the font we need to head over to the easy Google fonts plugins we downloaded earlier. So click on save first and close. Um, you have to do that before you go and edit anything else. So, hover over this dashboard icon here. Scroll down and click on customize. Now, what you want to do is click on typography. Default typography, and you can edit the text here as you can see. So, for heading 1 – which is this title here, we’re going to change the font so click on edit font. For the font family, we want change it to Roboto. So click on Ro b and type it out sort of and then you can select it, easily. So we’ve got the font there, you can change the thickness of the font. So for example , it’s really thin now cause it’s at 100. This is a really cool feature and it make the site look so much better. So, you can play around with that but you can change it 300 if you want, to 700, to 900 but for this tutorial we’re going to set it as regular. For the text decoration, so that means um – you can do it underline, line through and all those things. Going to keep it as default. You can also change it to lower case, capitalize, upper case, all those things. Keep it as default. Click on the appearance tab, and we can change the font colour. Just play around with that, it’s up to you. We’re going to change it, we’re going to keep it as black so just default. You can also change the background colour and this is where we change the font size. Okay, so. We’re going to drag it to 100. Okay, we’re going to make it extra big. We can change the light height, we can change the letter spacing which is really cool. We’re going to keep that as default. So, click save and publish. So, now we’re gonna close this one. We’re going to edit the heading 3 tag which is the quote in here. So edit font, select font family to Roboto. Now, for the font weight – I’m going to set it to 300. The rest of these fonts we’re going to leave as default. Now, click on appearance tab. We’re going to change the font size to 26. Now, we want to change the letter spacing as well, to 3. And, that’s done. So we’re gonna save and publish. And, now let’s change the heading 6 font. To Roboto, same font as well. Try keep your font to just one standard font for your whole website otherwise it’s going to look unprofessional. For the weight, we’re going to change it to 300. Go to the appearance tab, change the font size to 14. So, we’re going to make it nice and small. And we are going to save and publish. Now, we are going to click this back here – not the back here. Otherwise, it’s going to go back and it won’t save. Now, Click on the exit. So, as you can see – it looks pretty nice now. Now, we’re going to edit header – which is the. We’re going to sort of add the transparent header. And, also I’m going to teach you how to add your logo into your website. So, to add the slightly transparent header – just like this one here. Um, we need to go to customize – so hover over here and select customize. Now, as that is loading, go back to our blog page and scroll down to here. So add transparent header and logo. We’re going to copy and paste this code. So copy from here, the hash tag to the last bracket and select copy. Now, click on Themify options if it’s not open yet. Click on Custom CSS and all you need to do is right click and paste as plain text. And there you go. So, you got your slightly transparent header in there. So, we can change the colour to anything we want. So you can go to colour picker and select any colour you want and all you need to do is copy the RGB code here. And paste it in as so. So, I’m going to show you an example. So, I want it to be let’s say a yellow, a bright yellow. We copy the code, so 250, 247 and 60. Okay, I’m going to try and remember that and head back here. And you edit the code, um here. So, 250, 247 and the last one was I believe was 60. So as you can see, it’s turned slightly yellow and you can change the transparency here. Um, with the last numbers here. So for example, if I put it as 0.9 that would mean it would ah.. 90% opacity. So, if I put it as 50% – 0.5 would be 50% and 0.1 is 10%. Okay? So I’m going to just leave this as um.. triple 0’s. So we’re going to just save it and publish. Now we’re going to add – I’m going to show you how to add the logo in. So, click on site logo and tag line here. So, you can actually change the site title here as well. So, Hogan Chua. I might want to change it to Hogan. And as you can see, it takes a few seconds to load. If you don’t have a logo – then I recommend you to just enter a site title here and choose from over, I think 600 different fonts. And then just leave it as that. So, I don’t really recommend you spending time to make your own logo unless you’ve got the Photoshop or the tools to make it. Otherwise, just head over to fiverr or 99 designs again and get your logo. But, I’m just going to show you how to actually add the logo image in. So select um logo image here and click on the plus sign. We’re going to upload a file. So Upload the HC white and click on open. Just insert the image, okay as you can see it’s really big. Um, a really cool tool is that they allow you to actually edit the size within the theme. So it save a ton of time. You don’t have to edit the size in Photoshop or in fotor or anything like that. You just basically change it, so I’m going to change it to 40 x 40 pixels. I just want it kind of small – you can add a custom site logo link. So, if you press it – it’s going to link it to whatever link you put in here. But normally – it’s just going to homepage. So just keep it as, default. Now, we just want to save and publish. Um, close the customizer and top part is done. Now, let’s add the video module – So I’m going to show you how to do that. So, this video module here. Just click back here and turn on the Themify builder again. All you need to do is, click on video and drag it and put it into here. We just need to add the video URL, so you can go and get the video from here. Just copy this URL and basically just paste it into here. We need to go to, save it. We can change the size, add the title and all that stuff here but I’m not going to show you that – it’s easy to do. So, just click on save. Now, as you can see it’s not a um.. full cover like err.. this video here. To change that, you go to the row options this is the module options here, okay? That’s where you edit the row module options. If you want to edit the whole module you got to click on this toolbar here and options. Now, we need to change the row width here to full width. So, it allows it to expand. So click on save. Um, actually before we do that, we are going to add a background colour. So a background colour, I’m just going to leave it as black. And, click on save. So, that’s really easy to add that in. To add a YouTube video, it’s really easy – just go find your video. For example this one – just click on that and basically just click on the thing here and copy the URL and paste it in. So, you could upload your business video to YouTube and then just paste in your URL. And, that’s all you need. Okay, so we’re going to add the feature boxes – as you see here, to our website. So, what we need to do is go to our row options and edit some of the umm.. setting first. I want to set the animation effect to fade in so you can select from a range of options here. Select fade in and make the background colour a light gray. So, type in f6f6f6. Now, I want to set the padding so add a little bit of space. 40 pixels to the top, 40 to the bottom. And now, we’re going to save it. Now, we’re going to create 3 err.. separate columns within the row. Hover over here and select 3 here. Now you want to select a image module and drag it into the first box. We’re going to select the image style to be the 4th style here. So click on that, and we’re gonna upoad the image but before we do that – I’m going to show you how to crop the image again. So, I’m going to show how to crop the images for um..most of the homepage because I want you guys to know how to crop it properly. So, Let’s just go to um.. Fotor again and open then image. So, it is name after DIY feature image – so click on that. And open, now once that’s uploaded – click it here on the right hand side. Click no. Now, before we can crop it – we have to resize it first. So, we want to resize it to about 600 600 width and it will automatically keep the proportions if you have this ticked, which we want. Now, we’re going to crop the image – so click on crop. And we want the size to be 360 x 360. So this is the actual ideal size for 3 feature boxes. But, if you make 4 then it might be smaller. So you have to play around with that. So, let’s pick the best spot in the middle – okay? Now, just click on apply. And now it’s done, so just click on save – save it onto your computer. Save it as normal quality, that should be fine. And, you just type in done or cropped or whatever you want. And save. Now head back to your um.. website and we’re going to browse library to add it in. So, upload files and select feature image – ah.. done, open. We’re going to insert file URL, now for the image appearance we’re going to deselect everything you can play around with these again. We’re going to remove the width and height. Now, for the image title – we want to put a title in here. So, I’m going to type Our Mission>. And obviously, you can type whatever you want you can add a link. So, we’re going to put the link um.. in here. And it’s going to go to our about page. We haven’t create that yet but I’ll show you how to do that. You can also add an image alt this is for search engine purposes because the search engines can’t read what your images are about. If you put the image alt then it will read that and it will see if the page is relevant to the um.. searchers query. Now, after we’ve done that you can add the caption. We’re going to leave those empty. So, we’re going to styling and then we want to change the font colour to white. Um, change the font size to 16 pixels and also we want to align centre. Now, we want to save it. Okay, so that looks pretty good so far. We want to keep the settings for that for the rest of the images here. So an easy way to do that is to click on duplicate. So just do that ah, twice. Okay, so you go the two images here. We just drag that across to the boxes here. Now, all we need to do is to click on edit. We need to click on the cross here – we need to browse library and upload um.. the picture. The picture we want now is our team. So open, and click on insert file URL. So, we’re going to change the image title to our team. And also we are going to change the URL so this is just a sample. And that’s all we need to change cause it retains the settings that we’ve put in before. So, it saves a ton of time. Just save it. Now, do the same for this – so edit. Cross. Browse library, upload files and this we want to choose our work. So open that, and insert file URL. We want to change this, to our work and we want to change the URL to a maybe services or our work. It’s up to you – click on save. And, there you go. So we’ve finished the ah…features row and we’re gonna move on to the logos row um over here. So, now we need to click on options and select full cover. We want to change the background colour to a grey. So type in f6f6f6. Now, we need to save it. We want to divide it, into 3 columns – so select it here. Now, I’m going to show you how to actually edit the logos. So, logos normally look like this there normally different colour and if you put the logo just like that into your website it will look really unprofessional. So, I’m going to teach you how to edit it and change the colour so it’s going to blend into your theme nicely and look really professional. So, you have to go to pixlr editor – so just click on that. So, just type in pixlr.com/editor and now go to image from computer and click on DIY AirBnb. So, I’ve already included this in your content for your website – just click on that. Click on open, now we’re going to edit it. So, we’re going to double click these layer first to unlock it double click the lock, okay? Now, we want to select the text and the logo we don’t the background colour so we need to select the wand tool. So, this is the wand tool – click on that. And we need to select it, so just click on thing you want to select – for example this logo okay? Now, to select the rest of these one we need to hold down shift. So hold down shift and click these. Okay, so you’ve got your selection there. Now, what you want to do is to control c, or command c to copy it. You want to click on this page thing, which adds a new layer. Now you want to close the layer 0. So deselect it. Now, you want to um paste it, so control v or command v. So, as you can see we got the logo here and it’s the white colour and it’s all good. So, what we need to do now is actually to change the size. So, go to image size and we want to change the height to about 75, I believe. Okay, 75. So, we’re going to save it now. And make sure you save it as png – so that keeps it as transparent. So just click on okay. Now, you want to save it as done. Click on save. We’re going to head back here and what we need to do is, to add a text module. Um, if you guys have Photoshop it’s much um.. better to do it on Photoshop because you get a better quality. So, we’re going to add the media and upload files and this one. Open. Now, on the right hand side make sure it is um.. linking to nothing. So, link to and select none. You don’t want to link out to anything. Insert into post, now its um white so you can’t see it. You can align it to centre by clicking here. Save it. And there you go, so you’ve added your nice logo there. Um..as you can see, it’s not balanced and and It doesn’t look very good so we’re going to add a little bit of padding. So go the row options, click on row options. Scroll down and to padding here and click on here, the top padding. Change it to 50 pixels and click on save. You should edit the row padding because that allows the whole row to have 50 pixel padding instead of individually, okay. So, we’re going to add the rest of the images in here. So, just add a text box and we want to add media. Upload the files. We want to add 99 designs, make sure you link to none – insert into posts. Centre it and save it. And, same for this one. Now, add in oDesk. Open and insert into post after you’ve made it link to none. Centre it, save it and there you go. So, we’re basically done with that. And Click on save and close. Now, I’m going to teach you how to add the call to action and also the hover colour. As it can see, it looks really professional. So, let’s go to Xero and see what they’ve done. Open a new tab and you go to xero.com. And when you scroll down, they’ve got the overlay blue colour on top of the image. And the image sort of has a blur effect to it. So, I’m going to teach you how to do that as well really easily. It really just adds that professional touch to your website. So, we need to go to fotor again and open, and select the image. It is called DIY call to action, okay? So select that and open. Click on that on the right hand side and no. So, what we need to do is to basically crop the image. Um, in the middle. So before we do that, because this is actually a background it doesn’t really have to be high quality and we don’t want the size to be too big. So I’m actually going to resize it before we crop it. So, resize it to 1500 pixels across and then it will type automatically 999. Then, we want to crop it. So crop it as 1500 and around 400 or so um.. in height. So, select the middle or anywhere you like. I think that looks nice there. And then click on apply. Now to add the blur effect, all we need to do is click on this effect icon here. Em.. Scroll down, scroll down to tilt shift and as you can see, you can change the settings here and move it around. So, can blur the whole thing – it’s really up to you. You can also reduce the size of it, like that. You can use the circular one. So click on the circular one, so that would mean that the middle is sort of not blurred out. And sometimes, if you have a face there or something, then you might want to make the face a little bit clearer. So, that’s what this one is for. So if you want to focus on something – on the computer screen so you can do that as well. So, it’s a really cool feature. So, I’m going to set it like um.. in the middle. And you can change the intensity, so from really blur to like not that blur. I’m going to keep it as 15 default and we’re going to save. So click on apply. Now, that’s all you need to do here. So, we’re going to click on save. You just want the normal quality um.. and then save to your computer. Save it a as done. Now, head back over to the website and go and click on the row options for the um.. next row. Now, we’re going to upload the image – so browse the library and upload the file. It’s going to be called call to action done and click on open. We’re going to insert file URL. Now you got to change your background mode to full cover. Now for the overlay colour we’re going to put in sort of green so 55a127 and make sure it’s the same for the um.. overlay hover colour. You don’t want it change from blue to red or something like that. It looks really unprofessional. So, for the overlay colour , we’re going to select that colour. And we’re going to change the opacity to around 80%. So, 80% will be around somewhere there. It’s up to you, but to me it’s looks about there. And, for this one we’re going to change it to 65% which is somewhere there. Okay, I’m not sure why that changes – anyways. Now, we’re going to align the text to centre. So it makes all the text in the middle that we’re gonna add um… align in the centre – so we don’t have to um.. change them individually. I’m going to add a little bit of padding. So, 10 pixels on the top and now click on save. So, sometimes it might be like that. So you need to go back it means that the options weren’t saved properly. So, just reselect that and then save. And then, there you go. Okay, so we’re going to add the text now. Add a, drop a text module in there. Now, type in 60 day free trial and we’re going to change this to the h2 tag. Heading 2. Um, go to the styling tab we don’t have to align to the centre, it should be in the centre because we already changed it to align centre for the whole entire row. So, we’re going to add a little bit of padding. So, 20 pixels on the top – 20 for the bottom. And then click on save. And let’s hope it’s umm in the centre. Okay, so it’s in the centre. That’s all good. We’re going to add another text module, right underneath and I don’t want to type that in. So I’m going to head over the blog and see where we are up to. We’re up to the fifth row, so just click on that and copy this text here. Head back here and then paste as plain text. Now, what you want to do is go to styling and change the colour to white. The font size to 18 pixels. And we want to add some padding for the top and the bottom, 20 pixels. Now, click on save. Okay, that’s looking good so far. I might actually add a space there I think. Hit enter there and save. Okay, that’s looking good. Now we’re going to add the button. So add another text module. Click on the short code here and add button. For the button text, type get started. And for the style we’re going to keep it as large white outline. And button link, you just add your URL into here. Now, click on insert. And we’re going to save. Um, actually I forgot to add the padding – so we’re going to add a little bit of padding first. 20 pixels on the top and 20 on the bottom. Click on save. Okay, that’s good so far. Now, click on save and close here. We’re going to edit the font, okay? So, to edit the fonts um.. we need to go to customize again. So head over and click on customize. Now, select typography default typography. We’re going to scroll down, so we can see what we’re editing Okay, so this is the h2 tag I believe – so heading 2. Change the font to Roboto, the weight style – we’re going to change it to 300. We’re going to leave the rest as default. Now go to appearance, I’m going to change it to white. Now, for the size of the font – I want to change it to size around 50 pixels. Should be enough. Now, the rest of it – we’re going to leave a default. We’re gonna hit ah.. save. So as you can see this font here is not Roboto and I’m going to teach you um.. change the font for the body of the um.. whole entire website. So it’s um.. default. So, we’re going to close this here. Now, open. I mean go back here. And then, go to themify option now click on body. Now, we want to go, scroll down to body font. This one here and we want to select Roboto for this. So, type in R and then select Roboto. So the font automatically changes as you can see. Then, all we need to do is to click save and publish. And we can exit out of the customizer and.. There you go, so that looks great. And we’re going to move on to doing the testimonials row. So turn on the Themify builder again. Before I begin editing the next row, I actually want to add a little bit of more padding here. So just go to edit here. And for the styling, I just want to add 50 pixels to the bottom because I think it looks a little nicer. Yeah, that looks good. Now, for the next row we are going to go to the options. For the background colour, we’re going to change it to a light grey. For the font colour, I’m going to change it to black. I’m going to align everything to the centre. And also I want some padding on the top. The reason I want to change it to black is because we’re going to change the text here to h3 And that actually is um.. white.. um text. So, if I put the black font colour here it should override the font colour of white. So we’re going to put a text module into here. I’m going to head over here and copy the text. Just paste that in and we’re going to change this to h3 tag. Click on save. Okay. Now, we’re going to move on to the testimonial row. Now, before that I’m going to show you how to crop the image properly. So head over to Fotor again and open this image. DIY testimonial girl, So open that. Click on no, and click back on this um.. basic edit here. Okay, so we’re going to resize the image to about 800 pixels in width okay. Take note of the current percentage here. It’s 85%. If you increase it then, it’s going to become really big. So, just keep it small. And then we need to crop the image. So set that to 500 x 500. Now, we want to try and get um.. the face just in the middle. So click on apply. Now, before we’re going to save it, we’re going to enhance it a little bit with some effect so it looks nicer. So, click on effects here and then click on Lomo. And click on soft glow and apply that effect. Now, we’re going to save it. Make sure you save it as high quality cause you want your image of the persons face to be high quality other it looks really bad. So, save it to your computer . Now, head back to um.. your website. So you’ve got the images, now we need to go to the row options and we need to set the background colour to the same colour as above. So, f6f6 f6 there. And we’re going to add a little bit of padding. So 40 pixel padding on the top. Now, click on save. So make sure it’s the same colour as the top. We’re going divide it into 3 separate columns. So we’re going to put the images in each one. Now, what we need to do is just to add the image module into there. And drag it and drop it. We’re going to browse library to upload the image. So click on that and open. Click on insert file URL. And for the image appearance, I want to deselect rounded option and select circle option. I want to delete the default width and also the height. And for the styling, I want to select fade in effect. Now, I want to save it. Again you can also add a image link and image alt and caption. But I’m just going to leave all those and click on save. And we want to keep the settings for the rest of the photos, so as before we just duplicate it. So it’s so much quicker. And drag it into there, click on edit. We want to just upload the image of the next photo, so that’s going to be the guy and open that. Insert the file URL and click on save. Same one for the last image. Browse library, upload the files. And you want to upload testimonial girl number 2. Click on open. And click on insert file URL and save. So, that’s pretty much it. Now, we’re going to add the um.. text underneath the image. So add a text module. Um, go to our website here and we’re going to copy and paste the text so it’s easier. So, this is the first one that we want. We want to copy that and make sure you paste as plain text. We also want to add the button. So hit enter one time and click on button. The button text, we’re going change it to see Amy’s story. The button style will be small green flat. And the button link. So just any link you want in here. We’re going to click on insert. Now, we’re going to change the online retailer colour of that to a light grey. I think it was err.. this grey here. I just want to double check the code. So you can go to custom. Okay, so actually it is this grey down here. The really light grey So, the code for that is um six 9s’s. and click on okay. Now, we want to go to styling and go to align centre. Now, we want to add some padding for the top and padding for the bottom. Now, click on save. So, that looks good so far um… but I want to add a space in between the name and the text. So go back to edit and hit enter once there. And click on save and see how that looks. Okay, the space is a bit too big for some reason. Okay. Now, save. That looks good, so we’re just going to duplicate these modules and just um.. drag and drop the modules into there. And we’re going to edit the text. So, click on edit and go here. And then we’re going to copy the text from here. I’m just going to do this quickly now. Um.. you just change the URL basically – it’s really easy. Um, change the name here. Make sure the font here is changed to the light grey. Now, we’re going to press save and see how it looks. Okay, so hit on save. Now, do the same for the next one. So edit. Copy the text here and paste that in as plain text. Hit Enter once. Change this to, the name. So, Clare’s story. Change the name here. Click on save. And probably there’s some huge space here because of the formatting here. So don’t worry about that. Just edit that. And make sure you change the colour here as well. Click on save. Now, we’re gonna click on save and close. So, we’re nearly done here. It looks pretty good so far. Now, we’re going to edit the colour of the footer as you can see its white. But it’s meant to be a dark grey. So to change the colour of the footer. All we need to do is go to customize, then select Themify options. And click on, footer. So, we’re going to drag it down so we see what we’re editing. Now, the background colour we’re going to change it for the footer wrap which is the area here. Going to change it to a dark grey sort of. So enter in the code and it should change. Now as you can see, you can’t see the font here Um, we need to change the font colour to white. So, now you can see it but this is the link colour. So we need to change the footer link colour as well to white. So we can see it. You can edit these additional settings if you want, it’s totally up to you. So, we’re just going to save that and basically we’re done for this part. Now, I’m going show you how I’m going to edit the navigation ah.. section here. So, I’m going to teach you how to add the navigation menu. But before we do that, we’re going to add some pages so it actually shows up here. So, we need to go back to our dashboard. And click on pages to add new. So, the first page we’re going to add is the gallery page. Scroll down to the page options the Themify Custom Panel here. And then for the content width, select the 2nd one. For the theme appearance tab, scroll down and we want to change the header background to a transparent background. And after you’ve done that you just need to publish. And, now we can view the page to see what it looks like first. Okay, so that’s what we want. And we’re going to add in, all the other pages now. So you can actually click add new from here as well. So hover over the plus sign and select page. Now, I’m just going to quickly add in the rest of the pages. Such as the about page, and contact and services. Okay. Transparent, then publish. Add another one. It’s going to be the Contact page. Page options, 2nd one. Theme appearance, transparent background and publish. And the last page which is the services page and then I’m going show you how to edit the blog page. Services, transparent. Page options, to this one. Now, publish. For the blog page, it’s going to be a little bit different. So add new. Blog, for the sidebar option we want to select the 2nd one. So, we want a sidebar on the right hand side. You can have it on the left if you want. So, I’m going to select this one, the right hand side Content width, I’m going to keep it as default. And then for the theme appearance, I’m going to set it as a solid background. And change the colour to black. The reason we do this is because if we don’t do it then all this content here actually moves up here and it becomes part of the um.. header sort of. So, when you add a um.. solid background all the content moves down. Yeah, so just make sure you click on solid and add the black colour to it. You don’t need to do it if you have a sort of a, feature image here like rest of the pages. So, if you have a blog page and you sort of have a feature image then you can also just um set the settings here to transparent um.. like all the other pages. Okay. Now, all you need to do is publish. And we’re gonna visit the homepage, see what it looks like. There you go, so we’ve added these ones in. And now, we’re going to edit the navigation menu um.. for example the hover over colours and rearrange the order of the menu. So to edit the navigation menu, we need to go to customize. Now, on Themify options click that. And click on main navigation. So for the, this is the menu link colour. We want to set the font for it. So, I want to change it to size 16 and change it to Roboto. Make sure it’s that. And also edit the colour, so this is the colour. I want to change it to white. Now I want to scroll down to the menu link hover. So what that means is when you’re hovering over these menu items it will change colour. So, make sure you don’t edit the background colour. You only want to edit the font colour. So, I want to change it to 2fcf29. So which is sort of a green colour, as you can see. Now, scroll down a little bit and just copy this code here. And for the menu active link, you want to add it here as well. So paste that in, so when it’s actually active. For example, when you’re on the homepage it will show that it’s um.. on the homepage with the green colour. So make sure you put it in here, not the background colour. Cause if you put it in the background colour then it’s going to look something like this, I’ll show you. And it will look really ugly, okay? So you don’t want that. Make sure you put it into here. Now, we can save and publish. And exit the customizer. So, we’re going to hover over the dashboard menu and click on menus. Now, we’re going to edit the order of the menu and remove the home from the menu as well because we already have a link. Um, to our homepage using the logo. So I’m going to change, add in a menu name. So I’m just going to name it top and create menu. And basically just select the pages you want to be in the menu. So blog, services, contact, about, gallery and I’m going to leave the home. And then I’m going to add to menu. And for menu settings, I’m going to set it to auto add pages to here and theme locations to the main navigation. Then click on save menu. So, right now you want to edit the order of the menu. So how we do that, is just to drag and drop to wherever we want. So if you want the about to come first, then we do it like that. So, I’m just going to edit like this and if you want the services page to actually drop down from the about page. You can actually just drag it out a little bit. So, it’s actually just a sub item of about. So, for example. if you hover over about then you’ll see the blog page come out. But I don’t want that, so I just do that. And you can even do it, another layer of it so. You can play around with that, but just leave it as this. Now, we just save the menu. Now, I’m going to um.. go back to the visit site and see what it looks like. Okay, so that’s about done. And our homepage is pretty much 100% complete. This is probably the hardest part. And all the other parts Um, is pretty easy since you know how to edit the images and how to add padding and you know? It’s pretty easy. So, let’s head over and we’re going to start creating our about page. Okay, to edit the about page – we’re going to go to the dashboard. And click on pages, all pages. And then click on edit for the about. Then select themify builder and then we’re going to switch to the frontend. You can edit from the backend if you want. But we’re going to switch over to the front end so you can see what we’re doing. Okay, so for the first row module we’re going to add the background as you see here. I’m just going to open it up. So, we’re going to add this background image here. So, we go to options and we go to browse library, upload files and we’re going to upload the serenity. This image here and click on open, then insert the file URL once it’s loaded up. Okay, now we got to select the background mode to full cover then click on save at the bottom. Now, we’re going to add a text module. So, we’re going to go to here and copy it from here. So, we’re up to the about page row 1 – just click on that. And then copy this text here, paste it in as text. Now, we’re going to change this to the h5 tag. And also, align to centre. Make sure it’s in the middle and add some padding. So we’re going to set 300 to the top, 300 pixels and 250 pixels for the bottom. Click on save. Okay, as you can see the font is err.. not what we want it as yet. So we need to save here and close this editor. Now, we need go to customize – to edit the fonts. Click on typography, select default typography and edit heading 5. All we need to do is change the font to Roboto. Now, for the font weight – we’re going to change that to 500. And for the text transform, I’m going to change that to all uppercases. Now, click on appearance and change the font colour to white. Scroll down a little bit, um.. the font size to about 28. I think. 28. And I’m going to add a little bit of letter spacing So just 3 pixels of letter spacing, okay. Now, I’m going to save and publish. Then close the customizer. As you can see the text, is in the centre here. Like reality doesn’t go all the way across, so to edit that. We need to turn on the builder again. And go to options. Going change the row width to full width. And click on save. And there you go, save it and now I’m going to move onto the module 2. So, click on options. Now, for the row styling we want to add a little bit of padding. So set 40 pixels to the top, 40 pixels for the bottom. Scroll down, and click save. I’m going to add two columns so as you can see from this about page there’s two columns here, um the quote and an image. So, to do that we’re going to drop a text module into here. And I’m just going to copy and paste the text. Paste it into here. Now we’re going go to styling and we’re going to change the font size. The font family is already set to Roboto, um.. we set that earlier in the homepage for the body font. So we don’t need to touch that. So, all you need to do is change the font size to 20 pixels and then align it to the centre. And then add a little bit of padding. So, 80px to the top. And now click on save. Okay. Now, for the 2nd column we’re going to add an image. So drop an image module in here. Sorry. Now, browse the library, upload file and upload um.. this one for the about page. Just open that and click on insert file URL. Now, we’re going to remove the image appearance because I don’t want it rounded. You can leave it rounded if you want. And, also delete the width and height. Now, you can edit these if you want. But, I’m not going to edit that. I’m just going to save it. Okay, that looks good so far. Now, we’re going to drop another text module into here and we’re going to add the author of that quote. So, just copy that text from here. and paste as plain text. Change it to the h6 tag. You can align centre here if you want and then just click on the save. So that looks pretty good and pretty easy to do. Now I’m going to move onto module row 3. So for that, click on options. For the row styling, I want to change the background colour to a light grey. So f6f6f6. Now, I’m going to set some padding as well. So scroll down to padding. 40 pixels for the top, 40 for the bottom. Click on save. And I’m going to drop a text module into here and I’m just going to copy the text from here. And change this to h5 tag. Now, for the styling you can change the colour. I want to change the colour to a um.. a black colour but not too black. So I’m going to type in 231 f20 and then align it to the centre and then save it. Okay, so that looks good so far. Now, I’m going to drop another text module right underneath. And, just copy the text from here again. Copy that and basically just paste that in. Um, you might want to format it a little bit. So just hit enter, enter. That’s up to you. I want to make this bold. I also want to align everything to the centre. And we’ll save it to see what it looks like. Okay, so that looks pretty good. Now, I’m just going to add the row module number 4. So go to options. Set the background colour to fac423, so a orange colour. And make sure you got some padding, so make sure everything is nice and balanced. Now, click on save. Now, add in the text here. Why I do what I do. And, put in a text module. Paste that text in here. Change that to a h5 tag. And, align it to centre. I also want the font colour to be the same black as I did before. So, 231520. Now, click on save. Now, let’s add another text in here. So just copy this text here. Drop a text module into here. Paste as plain text. Now, just format it a little bit and then bold this part. Now, go to styling and set it to align centre. And then save. So that’s pretty good. Now, let’s move on to module 5. We’re going to the row styling again. Click on options, set the background colour to a light grey again. You don’t want to add too many colours otherwise it’s not professional. So keep it the, sort of two colours, um.. maximum. So, 40 on the top and 40 for the bottom. Click on save. And I want to divide it into two columns. After that drag a text module. Just copy the text from here and paste it in. Okay, now set this to the h5 tag as well. Go to styling, change the font the same one as before font colour. Now align centre and add 20 pixels padding for the top and 20 for the bottom. Click on save. So, that looks good. Now, we’re going to drop a image module into the 2nd row. Browse library, upload files and select the beach. So open and now insert file URL. So you can remove the settings here, remove the rounded settings. And also remove the width and height. If you want it to open up in a light box. I’m going to show you to do that. So, just copy the link here, control a or command a, I think. And then copy that, control c and then for image link just paste that same URL into here. So control v and paste that in here and then you can select open link in a light box. And, image alt – I’ll just type on in here. Click on save. Okay, so right now we’re going to add some text here. So scroll down here, and this is the text we want to copy just copy that. Now, drop a text module in here. and paste as plain text and format it a little bit. Just hit enter. Okay, that looks pretty good so far. So I’m going to align everything to the centre and hit save. Okay, so that looks not too bad. Now, we’re going to add another image below this image. So I can just duplicate that actually and click on edit. And basically browse library and upload another file. Um, this one. And click on insert file URL. So, we need to just copy this URL and paste it into here. So it’s the same one. So, you can change the image alt. Now, I’m going to add some padding as well. So 65 pixels padding for the top, now click on save. So that’s pretty much done. And click on save. And close. So there you go, so that’s about a whole page done in less than 15 mins. It’s pretty easy to do, so just follow the steps and um, you know – just add some padding and change the background colours but don’t add too many colours to it. Okay, so let’s go edit our gallery page – so click on gallery here. And then turn on the builder. For the row options, um we’re going to click on that. And then we’re going to upload a background image. So, browse library, upload files and select the clear lake image. Click on open, we’ve also got to scroll down here and just copy the text here. So copy that text, now insert file URL. Just click on save. Now, we’re going to drop a text module. And paste in that text, change it to h5 tag and also align it to the centre. And, add a little bit of padding to the top. So, 350 and 250 for the bottom. Click on save. There you go, okay let’s move on to row module 2. We’re just going to drop a text module into here and copy this text here. Stand often in the company of dreamers – they believe you can achieve impossible things. Now, copy that and paste as plain text. Hit enter, one time. Now, we’re going to set this one to a h3 tag. Styling, we are going to align it to the centre and add a little bit of padding as well. 65 for the top, 65 for the bottom and save. So, that looks good so far. Now, we’re going to show you how to add the parallax scrolling. So go to the row options for the 3rd row. Now browse library, we’re going to upload files – select the parallax city number 2 and click on open. Now, click on insert file URL. Scroll down to the bottom here. Save, now we’re going to add a text module but we’re not going to add any text. We’re just going to add some padding. So, it gives that space. So, 350 on the top and 350 on the bottom. Now click on save. So, as you can see it looks pretty good so far. Now, I don’t think I set it to parallax scrolling so go back to options and set the background mode to parallax scrolling. And click on save. Save here. And close this and we’ll see what it looks like so far. So that looks pretty good. Now, turn on the builder again and we’re going to move on to row module number 4. So copy that text here. Go scroll down here, now add a text module. Right click and paste as plain text. I want to change this to the h3 tag and add a little bit of padding. 65 for the top and 65 for bottom and save. So, I want to make sure to align it to the centre which we forgot to do. And also just add a space in the middle as well. So hit enter there and align it to the centre, save it and it should look good. Okay, so that looks pretty good. Now we’re going to add the next image. So go to options and browse library, upload files – this one is the DIY inner mountain. We’re actually going to edit it this one because it’s actually a really big um.. image. So we want to edit it before we paste it in because if I paste it in now it would look as good. So, I’m going to show you what I mean. So let’s just paste this one in now Open and insert the file URL, change it to parallax scrolling. Click on save. Now, let’s add the text module in here. Styling, 350 for the top, 350 for the bottom. And click on the save. So, I’m going to click on save and close here. So as you can see, for the parallax scrolling – cause the image is actually so um tall here, you don’t see the bottom of the valley. And it doesn’t look that good. You see too much of the sky up here which you don’t want. So to edit that, all we need to do is go to fotor.com again. Edit a photo and select the DIY inner mountain, click on open. Now, I want to crop the image to about 2000 in width but I want to reduce the size to about maybe 1000 – should be enough. So, we can actually see the bottom of the valley here. So, we just click on apply and then save it. Um, we can save it as normal. Save it as done and click on save. Head back to your editor. Turn it on. Scroll down here, now we need to go to options and let’s just remove that image and upload our new one. And click on open. Now, insert the file URL. Scroll down here and save. Save it. And, close that. So, as you can see it looks so much better like that. So you can see the bottom of the valley. Okay, so now let’s move on to the exciting part – we’re going to add the slider and also the animated background and all those things. So, turn on the builder scroll down and go to the row options. Set the row options um.. row width to full width and then scroll down to this part. The additional CSS class so you’re gonna type in here um.. make sure it’s all lower cases, cause it might not work if you do otherwise. So, animated-bg So, click on save. And it should show the colours as you can see here. It’s showing the colours now and it’s um..changing colours but we need to add to slider module now. So drop a slider module in here. Now we’re going to add in the quotes first. I’m going to show you what I mean. So, open in new tab. And when you scroll down you see the images here but the quotes also change as well. So we’re going to do that first. And to do that we need to change the display to text instead of images. Now, we’re going to edit the settings um..first before we add all the text in cause that’s easy. now for the slider options we need to set it to a 8 second scroll. Change the speed to slow speed and change a fade effect. Pause on hover, we’re going to select no for that, no for wrap, no for this one and also no for the arrow button. Now, all we need to do now is add in the text. So go back to here, scroll down and click on gallery slider. And then this is the text we want, okay. There’s I think 8 different quotes – so just copy that and paste as plain text. Hit enter once, for the actually quote we’re going to set that as a H3 tag. And for the author of that quote, we’re going to set that to h6. So, we’re going to add in all the other rows now and all the other text. So, I’m going to do that quickly. Okay, so I’ve added all those and um.. I’ve changed all the heading tags for all those. So, right now we need go to styling and make sure you align centre, so all of them will be in the centre. And add a little bit of padding. So 150 for the top and 100 for the bottom. and 100 for the bottom. Now, we’re going to click on save and see what that looks like. Okay, so that looks pretty good. And right now, we’re going to add the gallery slider. So, let’s drop a slider module right underneath. And for this one, we’re going to display the images. Scroll down, so before we add the images in we’re going to um..set the settings for the image width and image height we’re just going to leave it empty for now. I’ll show you um.. why and will probably need to edit it um later on. So for the slider options here, I want to set that to 3 pictures visible, auto scroll set to 5 seconds. I want to scroll through 3 at a time and the speed I want to set it to slow, the effect I want to change it to cross fade effect. So cross fade and I don’t want to pause it, so I’m just going to select no for all these. Now, let’s upload the images so I’m going to show you how I’m going to show how to do the first one and then quickly go through the rest of them. So, browse library, upload files and I’ve named them um.. all slider. So, it’s easy for you. There’s 13 different images to upload. So just go through them quickly. Insert file URL. And that’s all you need to do. And just add a new row and add in the images. Okay, so I’m pretty much done adding all those images in. Um.. You can also add a image link and title, and caption if you want. But I’m going to leave those empty. So, we’re going to click on save and see how looks so far. Okay. So, as you can see it’s not really even some of the images are small and some are little bit bigger. As you can see that little difference there and even a bigger difference here. So, we’re going to make sure the images are cropped properly so they’re all the same size. So that’s why we need to click on edit and then set the image width and image height to 650 width and height which is 400. So, that will make sure it’s cropped and they’re all the same size. So, I’m going to click on save. So, that should crop all the images perfectly. Okay, so that looks pretty good. Um.. I’m going to add a little bit of padding down here because um.. when people are scrolling down I want the full page um.. to be the animated background. I don’t want to see this footer area. So, go back to your row options. Or actually you can go to the slider here. So click edit here and then styling, just add 250 pixels for the bottom and then click on save. Now, just click on save and close. So, let’s have a look at what we’ve done. Scroll down, parallax scrolling really easy. We’ve added the animated text and I mean the um.. slider text and also the slider gallery. That looks really cool and the animated background. So, right now we’re going to edit the services page. So, just click on services. Okay, we’re going to turn on the themify builder. Now hover over and click on the row options. We’re going to upload the city image, so it’s the city black and white. Open. Insert into here. Now change it to full cover. Scroll down and save. Now, enter a black text module into here. Just add padding for the top and the bottom. So, go to the padding – 325, 325 for the bottom. Save. Now, we’re going to move on to the row module number 2. So we’re going to add the quote in. So, we’re going to copy the text from here. So, we’re up to the services page. Click on that. And just copy the text here, add a text module into here. Right click, paste as plain text. Hit enter, one time. Now, we’re going to set this as H3 tag and the author to H6 tag. Now, we’re going go styling and click on centre and add some padding to the top – 65px and 65 for the bottom, click on save. So, I’m going to hit enter – one here. Save. So just edited it so it looks a little bit better. Okay. Now, we’re going to add the feature row so go to the row options. Um.. for the background mode – I want to change it to full cover and the background colour a light grey. Then, I’m going to add some padding for the top and bottom as well. Click on save. So, right now I’m going to divide the.. into 3 columns. So, I’m going to drop the feature boxes in here. Find the feature module. Okay, there it is. So drop it into there. Now, I’m going to go back here and add the text. So, add this text here. Copy that, paste as plain text. Just delete this. So, set this as h5. This one should be paragraph. And make sure you change this to black font. Now, we’re going to scroll down a little bit – hit enter and we’re doing to add a button. So short codes, button. And for button text we’re going to click on view plans. For the button style, I’m going to put fa-dollar – which is the dollar icon. which is the dollar icon. And then large black outline. I’ll show you how to find the icons um.. after when I add this in. So, just add the link you want to link it to. Just any link you want. So, I’m just going to type in SEO plans as an example. Now, I’m going to hit on insert. Now, for the settings here – I’m going to change it to the third layout. So this one – third layout. And for the percentage for the circle I’m going to change it to 100, you can change it from anything from 0 to 100. And the pixels, I’m going to set 2. And the colour of this, I’m going to set it to 231 f20, which is a sort of err..black colour. A lighter black colour. And the size, I’m going to keep it as small. You can change it to medium or large. The icon, this is where we choose our icon and I’m going to so you can find all the different icons in here. And all you need to do, is um.. choose it and then it will automatically add it here. But the icon that I want is fa-cogs. So, this is how we add the icons. So we just add a fa in front, so this is for the button thing. So, fa and then a dash and then you look at the icon you want. So for example. You want the beer icon, so you would do fa-beer and then you would add your button style. That means you’ll have a beer icon in front of the view plans text. Now, for the colour – I’m going to set it white here. So just six f’s and for the background make sure it’s the same colour here. So just copy that colour code into here and paste as plain text. Now, you can also link the icon to something if you want to. But, we’re not going to do that. Now, all we need to do is save and we’ll see what it looks like. Okay, so that looks pretty good so far. As you can see there is too much space here because we might have copied some formatting from here. So, I’ll just edit that quickly. Just hit backspace once and save and it should look good. Okay, so that’s looking good now. So, now we’re going to add the other feature boxes so all we need to do is to duplicate it and then we edit the text inside so it’s much quicker. Since it retains the settings. So duplicate it two times. Okay, and then drag it across. Gonna edit the 2nd box, so click on edit. Now, we’re going to copy the text over. So, social media and just copy that over. Delete it, hit enter once and then paste it here. We’re going to hit enter one time. We’re going to change that to h5 tag and also make that err…black Now, we want to change four things. We want to change the the button style. So I want to change this fa-dollar to bars. So a different icon and we’ll change the URL, here. Now, we’ll also change the button text as well. I want to change that to more info. Now, I’m going to scroll down. And this is the last time I want to change. So, I want to change the icon here to users. And then we’ll click on save and see how that looks. Okay, so not too bad. So, I want to press backspace there and save it. Okay, so that looks pretty good so far. And then for the 3rd box, click on edit. And let’s paste the text in from here, Website design. Copy that. Delete the text here. Paste as plain text. Hit enter once. Change that to h5 tag and make sure that it’s black. I want to change the button style as well. So let’s change the button style to archive. And change the URL, to website design. And the button text to See Work. And there we’re going to change the icon to a desktop icon and now we’re going to save. And see how that looks. Okay, that’s pretty good. So just backspace one time there and save. So, as you can see that’s pretty quick. So you’ve added three different feature boxes within a few minutes. Now, we’re gonna edit the um.. the row options for here. So we’re going to add the video background. Click on options. And for the background type, I want to change that to a background video. We’re going to browse library, and upload a new file. It is called the video background in 15 seconds. So click on open. Um, just wait a few seconds for that to upload. So make sure the video file that you guys upload is not too big. Um, if it’s sort of bigger than I think 3 megabytes or something like that. Then I think you guys should should look up um.. how to add a content delivery network. Um, which I’ll create a video in the coming weeks. And it will show you how to speed up your website, using a content delivery network. So right now, just insert file URL. And because the background video won’t play on mobile devices. You’ll want to add a background image. So you can actually add a background image and screen shot the um.. video and then upload the background image um.. through here. Or, um.. you can just change the background colour which I’ll do for this video. So, I’m just going to change it to a black background. Now, we’re going to scroll down and click on save. Okay, it’s black now but um.. once we refresh the page it should start playing. But before that, we’re going to add a text module. So drag a text module in here and then scroll down and then add the text here. Just copy that and then paste as plain text again. Now, we want to set that to h3 tag. I just want to change this to a lower case. Okay. Now, what we need to do is we need to change the font colour. So make sure the colour is set to white and let’s align it to centre the text and also add some padding. So 325 for the top and 325 for the bottom and let’s click on save. Okay, so that’s look pretty good so far. So, I’m just going to click on save and close. And I’ll refresh the page. Okay, so I’m going to refresh the page and hopefully the video starts playing. Okay, just scroll down and as you can see the video is playing smoothly. If you find it’s not playing smoothly then you can um.. try to reduce the size of the file. That looks pretty nice. So, right now I’m going to go to the contact page and teach you how to build the contact page. So, just click on contact page. Okay, let’s turn on the Themify Builder. And, for the module row number 1 – let’s click on options. And upload a background image. We’re going to upload the contacts. That one there. And click on open. Now, insert file URL. Set the background mode to full cover and let’s set the overlay to black and set the opacity to around 70%. Um, you can set the hover overlay as well but I don’t think that is necessary. So, let’s just keep that as default. Now, click on save. Now, let’s drop a text module into here and let’s copy the text from here. Get in touch and just paste that in. Hit enter one time. And paste this one in as well. Just paste like that and then for this one, let’s set that to h2 tag. And keep this one as the paragraph tag but we want to change the font colour to white because the default for paragraph is actually black. So make sure you change it to white font. And then click on the styling tab and align the text to centre. And for the padding, let’s set it to around 300, for the top and 250 for the bottom. Now, let’s click on save. Okay, so that looks pretty good so far. Now, for the module row number 2 we’re going to go to options and set the background first. So, the background colour will be the light grey – f6f6f6. Now, we also want to add some padding. So, 100 pixels padding for the bottom. Now, scroll down and click on save. Okay, so right now I’m going to click on save. And close it. I’m going to the dashboard. And I want to copy the short code for the contact form. So all you need to do is hover over contact and click on contact forms. And copy this short code here. And go back to your contact page and to edit and turn on the builder. Switch to front end. Okay, now let’s divide the err.. row into two columns. So click on that and we’ll drag a text module into here. Let’s type in, Say Hello Ideas, feedback and suggestions. Spread the love. Okay, now hit enter one time and let’s place err paste the contact form short code in here. Paste as plain text. So for say hello, I’m going to change it to h3 tag and for this one I’m going to keep it as paragraph. Now, we’re going to head over to styling and let’s make sure to align everything to the centre and add some padding for the top. Click on save. Okay, that looks pretty good so far. But doesn’t look um perfect um.. I’m going to teach you how to edit the contact form towards the end of the video. If you can’t wait – you can skip there now. But let’s head over and um.. and edit this 2nd column first. So, I’m going to drag another text module into here. I’m just gonna type this in. Find me right here. Melbourne, Australia. Set this one to h3 tag, leave this one as um.. paragraph and let’s go to align centre. And some padding as well, so 100 pixels for the top and 20 pixels for the bottom. Now, I’m going to click on save. And let’s see how that looks. Okay, so that looks pretty good so far. Now, we’re going to drag a map module so just drag a map module into there. And, all you need to do is to add your address so I’m going to type in Melbourne, Australia. Click on save. Let’s see how that looks. Okay, so as you can see the map is pretty small – we need to edit the size of the map. So, we need to set the height to um.. 600. 600 pixels and then go to styling. I want to adding little bit of padding as well to the bottom. So 50 pixels padding to the bottom of the map and click on save. Okay. So, 600 pixels um.. it’s about um.. the size of the contact form. So, it’s all balanced and looks professional. So, let’s click on save and take a look. Close that. Okay, so that looks pretty good. And as I said before, I’m going to teach you how to edit the contact form the styling for the contact form a little bit later. Okay, so right now we’re going to head over to the blog page and I’ll teach you how to add the blog posts and also edit the blog page settings. So, as you can see – there’s already the sidebar. Um, if the sidebar is not showing make sure you go back to click on – just click on edit the page and I’ll show you where to edit it. And, page options please select the 2nd option here and then the side bar should be showing up. So, I’m going to head back to the page. Now, let’s turn on the builder. So, let’s find the post module and drag it into here. Now, we’re only going to edit a few things. For example the number of posts. I’m going to limit that to 5 posts for this blog page. And, also I want to display not all of the content but only a short paragraph of it. So select excerpt and scroll down. The hide post meta, um.. I want to hide the post meta. You can um, just leave it as default if you want.
But for this tutorial, I’m going to select yes. And there are a lot of options you can play around with. For example. hiding the post title or unlinking the post title hiding the post date and all those things. But, I’m just going to leave that. I’m just gonna save it now. As you can see, it looks pretty good so far. Now we go to, we gotta go to customize and edit the sidebar here. So, it looks like um.. I’m going to find the page. Open in new tab, so this sidebar looks like that. We need to edit it. So let’s go to here and click on customize. Okay, I’m going to save it and then close it first. Now, go to customize. Make sure you’re on the blog page um.. otherwise this widgets might not show up. So for the sidebar, click that and we can remove the widgets and add new widgets if you want. So, we’re going to remove the recent post. So click on that and remove that. Recent comment, we’re also going to remove that. Archives, remove that and also the meta. I’m also going to remove that as well. So, I’m going to click on add widgets. And scroll down, I’m going to select themify most commented. So click on that to add that widget in there. I’m going to rename it too most popular posts. Now, scroll down here to select display posts thumbnail. So, it’s that little thumbnail here. So, click on that and set the size to 120 to 70. So, that’s a good size I think. Now, we’re going to just save and publish that first. Okay, now I’m going to add another widget. So, just going to be text widget. So just click on text and just enter in email here. This is where we’re going to add in the email short code. So, It will be where your email opt in box will be. So, just click on save and publish. Okay, so we can re arrange everything in – in the order we like. So, all we need to is just to like drag it and it will rearrange itself. But, I’m going to leave it like that. I’m going to move the themify up here. I’m going to move the email module up there. To the very top. Okay, and for the search bar – I’m going to add a title. Search anything, with a smiley face. Now, we’re going to save and publish. And we can click the back button and close the customizer. Okay, so I’m going to show you how to add the new blog posts and also the feature image. So, let’s go back to the dashboard and click on posts. We want to delete this hello world post because it’s annoying. So, let’s just delete that click on trash and click on trash again and also delete permanently. Now, let’s add new. So, we want to enter the title. I’m just going to copy it straight from here. Just scroll down a little bit, okay. Just copy that title and paste it into here. Now, for the text make sure you just add it into um.. the text box here. We don’t need to add it into your themify builder. So make sure you add your text there. So, let’s just copy the sample text. And, paste it um.. in here as plain text again. Just do some styling to it. Okay, that looks about good. You can set the categories here. So, I want to add a new category. So click on add new and the category name will be website optimization. Just click on add new category and that should add. Okay, it ticks it automatically. And now, we can add some tags as well. So, I’m just going to write WordPress Plugins. This is just for organisation purposes and the tags are little bit for um.. search engine optimization and also to help the people to search anything they want And then they can search the tags, and it will allow them to find the posts. Okay, so let’s just add that in. You can also add a comma. You can add two tags at once, so WordPress Plugins and perhaps you can type in WP plugins. So that’s short for WordPress and then click on add. So it will add them both at the same time. So, now we want to just publish it first. And scroll down to the post options. we’re going to add a feature image but before we do that. I’m going to show you how to edit a feature image and sort of make it nicer. Because It’s important as um.. It might increase your click thru rate to your blog posts. If you not familiar with blogging or anything like that it’s important to have good conversions and I think having a good feature image will allow you to have um.. better conversions. So that’s why I think it’s a simple thing to do but um.. also important as well. So, let’s go to open and select the image. I think it was DIY Macbook and desk. So click on that and click on open. Click on that on the right hand side and no. So, let’s just resize it first. Let’s resize it to about emm.. try 800. Okay. Now, I want to crop it a little bit. So let’s just crop it to 785 times 380. Okay, so scroll down a little bit – pull it down and that looks about good. So click on apply, now we want to add some text to it. So click on text. and I think it was comiczone, zine, sorry. click on that and then add text. So, we want to add the text 7 top wordpress plugins reviewed & (demonstration) – okay. So, 7 top wordpress plugins reviewed + demo. Now, I’m going to make this a little bit bigger. Um, align centre first – so let’s just drag it to make it a little bit bigger. Now, we want to change the font. So you can just change it there to white. And, that looks about good. Let’s just try the one tap enhance – see if you can make it look a little bit better. Okay, so that looks great. Now, we want to just save it. Save it as normal, save it to your computer. Save it as Done, and save here. Now, let’s go to edit post and we’ll go to browse library, upload files and we’ll just add that file into here. Click on that, and open. Now, insert the image. Okay, so the image is added. Now, I want you to scroll down and for the hide post meta – I want to hide the tags um.. again this is personal preference. It’s up to you and you can edit these settings for a lot of thing and you can even change the feature image to a video URL. So, let’s just hide the tag and we should be good to go. So update. Now, let’s view that post and see what that looks like. Okay, so that looks pretty good. We’re going to update the fonts for these ones and also the sidebar after we add the 2nd err.. blog post in. So, let’s just go back and add new post. And for this one, scroll down and just add the title. Um, again this is just sample text so you can do whatever you want. And we’re just copy this here, paste that in like that. And then add a new category. So, I want to change that to how to’s and just add new category. And for the tags, I want to type in how to create a website. And also wordpress website. And then we’re going to click on add. Now, scroll down and we’re going to upload the image. So go to browse, and upload files, select files and select the blog and website screenshot and click on open. and click on open. Then, we’re going to insert the image and we want to hide the tag. Now, we’re going to publish and let’s see how that all looks. So, that looks pretty good. So, I’m going to check out the blog page and see how that looks. Okay, that looks pretty good. Now, we’re going to add the email short code um.. to the sidebar widget. So let’s go to the dashboard. Let’s hover over the monkey icon and select forms. And, you actually can choose um.. some different styles here from light theme, red theme, blue theme and dark theme. I might choose the green theme for this one, so just click on green theme. And we can just copy the short code here. So just copy that text here, we can also edit the um..text in here as well. So, if you can see the sample one which is ah.. join my private newsletter and get the ultimate guide to Ranking on Google. And also the button text is different as well. So what you can do is, let’s just copy this text here okay. And we need to enter it into the first um.. line here, which is label. So let’s just paste that text as plain text and that should be good. And then for the submit button, we can change the submit button sign up to something else. So, we can change that to get SEO guide now. Get SEO Guide Now, something like that. And then, make sure you’ve still go the short code. So just copy that again. And let’s click on save changes. Okay, so the settings are saved. I’m not going to go to in-depth with the Mailchimp plugin because I just want to show you how to add it in to your website as this could probably be another video. So, let’s copy – make sure you copy the short code and head back to the home page. We want to go to the blog post, cause we want to see it visually when we’re updating it. So, now click on – hover over the icon here and go to customize. Now, click on widgets and this one is your sidebar widget and the email here. So let’s just delete the title. Okay, now paste in the short code. So, paste as plain text and it should update itself in a few seconds. Okay, so it looks pretty good so far. Now, what we need to do is just to save an publish. And click on this arrow here and we’re going to edit the font now. The sidebar font and make sure everything is aligned in the centre etc. So, let’s go to the Themify Options and then select sidebar and the sidebar font. So, I’m going to change that to 14 pixels. So a little bit smaller and let’s make sure it’s ah.. Roboto as well. So click on Roboto, now set it to Ab so it’s not just all capitals. So, click that one. Now, going to scroll down a little bit and make sure it’s aligned to the centre so everything will be align in the centre. And, the sidebar link. So the links here, I want it to be black. So you can change it to whatever colour you want. So let’s just change that to black, now scroll down a little bit to sidebar link hover. So, when your hovering over this link here that’s the colour you choose. So let’s just type in d62b2b, which is sort of a red colour. So, after it updates you can see that it’s sort of a red colour. Okay, so that’s pretty good so far Now, drag it down a little bit and sidebar widget title. So we can change the um.. settings for that as well. So let’s just change it to 18 pixels and make sure that’s in Roboto. Scroll down a little bit, Roboto and then set it to Ab – so it’s not capitalized. Now, that’s already in the centre so that’s all good. Okay. Now, we just need to save and publish. And then exit out of the customizer. So, there you go. So the blog page has been created. And it looks pretty simple but also pretty nice as well. So we’re basically finished with our site but there are 3 things I want to teach you guys that is really useful. As you can see but you won’t know it yet, but you reduce the size. Um, these.. this.. heading 1 tag won’t fit in the mobile screen properly. And this one is a bit too big so I’m going to show you how to edit that, really quickly. So, let’s just maximise it. Now, go to customize. Now, go to here. Scroll back up and click on fully responsive err.. CSS. Now, all you need to do is to copy this code here. Just copy that and go to custom CSS and let’s just paste this code in as plain text. Okay, sorry. Make sure you copy this top part with it as well, the add media screen. So, copy that and paste that in right there. So, let’s just minimize it. Okay, as you can see when you minimize it – the h1 tag which is here shrinks down to fit the page properly and also the h3 tag here also shrinks down nicely, okay. So, that’s all you need to do. Keep the max width as 480 pixels width. So, what that means is – if it goes below 480 pixels. For example. it is now around 450 pixels – so that would mean that it tells this screen to… it tells the h1 tag to shrink. And this is the font size. So em, is just like the measurement. So, if I set it as 4 then it will be bigger. Just play around with the size. So, if you set it as 1 then it would be really small. I’m going to keep it as 3. And same thing with the h3. The size, you just change that. So 1.2, let’s just change that to 2 and it becomes bigger. So keep that as 1.2, now if you want to add a another one. So for example, your h5 tag is a bit too big. I think this one is a h2 tag or something. So let’s just copy here, copy that. And I’m going to hit enter once here. Cause this is the bracket, this last bracket and this bracket here is for everything inside it. So, I’m just going to paste that here and I think this one was h2 tag. So that one is a h2 tag, so if you want to change another tag so you just basically change the heading tags here. And it’s really easy, so I’m just going to leave the h2 as it is, okay. So, that should be good enough. Now, just click on save and publish. So, there is only 2 factors you need to worry about – the h tags and also the size. Em is just like a measurement. Pixel, um..px is sort of like a fixed size. Em sort of changes relative to the um.. screen size. So make sure it’s em. Now, secondly I’m going to show you how to edit the button hover. Okay. So, keep the customizer open I’m going to maximise the screen. So as you can see when you hover over the button, nothing happens. This only happens to the outline button styles, other styles sort of sort of light up a little bit but you can change those as well, okay. So, I was thinking whether or not to add this to the tutorial cause it would make the tutorial so long but it’s something I’d like to know so I just added it in. Um, you guys can watch it if you want. So, scroll down here. Let’s just paste in these two codes. So copy from there to here And copy that to your thing and let’s just paste this under here. Paste as plain text. So, split those so you can see those clearly. As you can see, you can’t see um.. any effect to this now, right? So we need to basically edit the location here and then we’ll be able to see the effect. So, I’m just going to save and publish now And close this. It’s important we close the customizer otherwise we can’t get the source code – proper source code. So, let’s right click and click on view page source If you’re a Mac user then I’m quite sure. I think you guys can check it out on Google – how to view your page source. But anyway, now we’re in the page source so we need to control find, control f sorry. And type in the title of the button which is begin journey. Now, as you can see – begin journey is here. And this is within the module text location – as you can see this part. So, the location is here – so just copy the location here. Copy that to your clip board, now turn on the customise and go to your CSS. Okay, so Custom CSS and all you need to change is this here – text and the digits here. So just select here and leave the hash tag, So right click and paste as plain text. Now, you should um.. see the button hover, okay. So, there’s only I think 1 factor, 2 factors, 3 factors, 4 factors you can change. So, the location factor, the name of the button – so this one is called white outline. So, let’s go to the page source and as you can see it’s a white outline. So, if it’s something else for example, black outline then you go back to here to change this white to black dot outline. And that’s all you need to change. And for the background, it’s the RBG err.. code. So, you can go to your color picker and choose a colour that you like. And then copy over the RBG, so 67, 115 and 232. So, I’m just going to add in some random numbers. Okay. So, 123. Maybe, 155 and 203. Okay. So that gives you a different colour, Um a nice bluish purple colour and you can change the um.. opacity. So, that’s 0.5 which equals 50%. So if you change it to 0.9, which equals 90% it will be a more darker colour, okay. So, let’s just keep that as. I’m just going to undo everything to keep it as green, okay. And you can change the colour of the text as well. So for example. It’s white now, okay. When you hover over it, it’s still white. So let’s just change it to black and you can see when you hover over it – it should be black text. Okay. So, that’s how you change the colour and again you can just get the hex code from here and paste in the hex code right into there, okay. So, ffffff. Now, let’s do one more example. This last example – find the location. So scroll down, this one is for get started, okay. If you have a different button, just search up the title of the button in the source code. So, search up get started. Okay, so this is within this err. text module. And the location is here, so just copy the location and basically just paste it in plain text. And you’ve got it there, so it’s all good. Now, click on save and publish. Okay, so let’s head on over to our contact page – we’re gonna edit the contact form styling. So, let’s scroll down here and copy the CSS code. So, copy it from here to the bottom. Copy that, and let’s just look at our form now. As you can see, it doesn’t look very nice. It doesn’t blend into our background or anything like that. So let’s just paste in the code, so right click – paste as plain text. And as you can see it looks so much better now. So the best way for me to teach you guys is actually to tell you guys to just play around with the settings. For example, the background colour – let’s just change that to black. Okay, so you’ll find out this is the background colour. So let’s just change it to normal again. And let’s just change the padding, then you’ll find out the padding is the space between here and there. So, let’s keep that as zero. And basically, you can change all these settings and play around with it. But the most important is err.. the button – so the button text colour is here You change it here. So, if you want to make it black – just um.. there you go. Um, I just want to keep it as green. And the button hover colour – um.. for some reason it doesn’t paste properly – the quotation marks there. So we need to edit these quotations marks ourselves. So delete these ones, delete both of them and add in two new quotation marks. And then you’ll see when you hover over here it will turn green, okay. And then basically you just change the RGB colours and also the text colour here, okay. So take an example, I’m just going to choose something random. 123, 555, 39 so it changes to a brown colour and this is the last setting, is the opacity. So 0.3 would mean it’s sort of transparent looking, okay. So, I just want to keep that as normal green and you can change the font colour here. So, that’s black so it should turn black. Okay, there you go. So, control z to undo that. And, that’s basically how you edit the contact form. Now, let’s save and publish. I said there was going to be three things I was going to teach you but I think there’s one more really cool thing that will really um.. make a site look professional. And that is the row anchors and I’m going to show you how to use that. So, let’s go to your dashboard. Click on appearance and select menus. On the left, there’s custom links – click on that. And for the URL, um.. just type in #testimonials. And copy the um.. text here – testimonials without the hash tag. So copy that, and then add the link text as um.. testimonials as well if you want. Okay, then add to menu. Then this going to appear in your top navigation, okay. So let’s just um.. edit the.. spelt it wrong okay. So copy that and save the menu. Now, let’s head over to our homepage. Scroll down to the testimonials part, okay. So, click on Themify builder and turn that on Now, I want to click on row options for here – what our clients are saying Now, scroll down and paste the testimonial text in here. So paste as plain text and in the row anchor and click on save. Now, click on save again and you can close that. Let’s scroll up and when you – I’m going to refresh it first. So when you click on testimonials it should automatically scroll down to that part okay. So wish me luck, okay – so that’s pretty cool. Okay. So you can add these for any page you want and just play around with it. it’s really cool! It’s exactly the same as the feature here – so when you go to here. When you click on anything, it will scroll to that part immediately so it saves everyone from trying to find it. So, for example – I’m going to click on why? And it will scroll right down there, so you can find all the instructions and the text that you need to add – so it saves you guys a lot of time. And it increases the user experience. So, I’m going quickly show how you can update your theme. There are three methods, I’m going to go through 2 of them. The third one is updating through your FTP, you’ll only need to use a FTP if you’ve actually added new files yourself. And, if you’ve done any customizations to the theme files which are in appearance and editor. So, if you’ve done any customizations to the theme files here um.. rather than using the option panels or the settings that’s I’ve gone through in the tutorial – then you’ll need to use the FTP. But, um.. if just followed my tutorial you should be fine using the two methods. It’s really easy, so as you can see – if there’s an update there will be a little notification up here. So, when that happens you go to your ultra theme and then you can click on transfer. And we’re going to export the theme settings. We’re going to export these because we want to have a backup in case anything goes wrong – then we can import these setting back here. But, generally it won’t delete the theme settings when we’re updating the theme. Let’s just click on export. Now, you can go to my website – so just go to here again and download theme. The latest one which I’ll always upload. So after you’ve downloaded that, then go back here and then click on appearance>themes So we need to delete the current theme, so to do that we need to activate this first before we can actually delete it. So, let’s activate a – any theme you can activate. Um, activate this one. And then click on ultra and then click on delete here. Click on okay to delete. And then all you need to do is click on add new. Upload theme, err.. choose file. So, find where your theme is and then basically just open that and install now. So that’s going to take a few seconds and after you’ve done that – then we’re going to activate it. So, once that’s finished then all you need to do is click on activat and then you’ve updated the theme And to check that – it will show you the version here. On the right hand side here, 1.04 – before we were at 1.02. So the 2nd method is probably the easiest but you’ll need to become a Themify Member. So if you go to Themify.me you’ll see this website here and to get the theme – you just go to pricing. And you can select 1 theme here for $49, which comes to about $4 a month. You get one year support and updates. So you can basically just if you get the membership all you need to do is you go to your Themify panel. And then you click on update now, so they tell you – you need to back it up. So, click on okay and all you need to do is enter in your login and your password. And then you login and then you automatically upgrade. So, I personally have the themify club membership which is $79 and it includes all the themes here but I reckon you don’t need it because the Ultra theme is so powerful you can literally build anything. But I think the best thing about becoming a member is actually getting the support. This is the forum, basically you just ask a question and the support guys will get back to you within a few hours. Sometimes, it’s quicker. There are a ton of questions which are already asked here. So, if you need something – you could probably search for it and then say you have the ultra theme. So, you just click on ultra and you can look through the problems that people have. It might be a similar problem – so your problem will be solved really quickly. And you can also go to the documentations section. So, when you go to the documentations they’ve got all this documentation here – so I think pretty much everything that you need. About the whole website, you can just click on it and read it and then add it to your site. So that’s pretty useful. But when I use the support, I just go to the support forums here and then I just start a new topic. So then I just enter the topic title here and I normally just use Jing and then capture whatever I need to fix and then I upload it. I capture a video as you can see, and then I talk about the problem, and then I finish it, and then I just share it via screen cast. So, I click on share via screen cast and it will upload to the screen cast. And then you automatically get a link. So, once you get the link. I just paste it in here and then I tell them to watch my problem, they’ll normally get back to me pretty quickly. So, I do this before I sleep. . I send in a topic and then I wake up and I get a solution. But again you don’t have to get a membership as I’ll always upload the newest theme here for as long as I can. But I think having the support really helps because sometimes you want to do something, you want to edit something and there’s a small problem so these guys can normally walk you through or provide you the appropriate CSS to fix or to add something that you want. I think it’s definitely worth it. Thank you guys for watching my tutorial and give yourselves a pat on the back for watching a 3 hour and building a beautiful website. Right now, we’re going to just err.. look through what we’ve created. It looks pretty nice – this is a video here. Scroll down, you’ve got your feature boxes, you’ve got your logos here, you’ve got your call to action, you’ve got your button hover colour and testimonial modules here. And also social icons, this one – just hit, it goes straight up. We’re going testimonials, click on that. Let’s go to our about page, we’ve got a nice image here and really simple, elegant about page. Click on the services, scroll down, you’ve got your feature modules and also a beautiful video background. Let’s go to our gallery page, we’ve got beautiful parallax scroll feature and an animated background with a gallery slider and also a text slider. Let’s go to our blog, um.. we’ve got a nice and simple blog. Looks really nice. Go to our contact page. We’ve got a really nice contact form that blends in with your theme and also a map. You can add your opening hours or contact details as well. I just wanted to thank you guys for watching to the very end of this tutorial and I really appreciate it so I’ve compiled a special bonus just for you guys. I’m not going to mention it anywhere else, It’s just going to be in this video right now, right here. So, if you go to hoganchua.com/bonus …BONUSH! haha. You should find three amazing bonuses there – the first one being, I’ve compiled over 15 different video backgrounds that you can use on your website right away. So you can just upload it and use it. Secondly, I’ve also compiled over 100 different images that you can upload onto your website and use. For example you can use it for your call to action or your contact page section. And thirdly, I’ve also compiled a ultimate website resources list. I’ve used these in the past and I found these really useful. So hopefully, you’ll find them useful as well. I hope I’ve achieved my mission of not only to teach you how to teach you how to build a website but really to turn your fears into excitement and show you what is possible and really inspire you to turn your dreams and visions into reality. Together, I think we’ll be able to move mountains and change the world for the better. I really think this video is the best on YouTube or the whole entire web (at the time obviously) so make sure to share it with anyone that you think would find it useful um..give it a like, leave a comment if you any questions and if you like it leave a review down below as well. And subscribe for more amazing tutorials, I really appreciate it and thank you guys again! There’s one last thing I want to tell you guys – for the next 3 week until the end of July 2015 you can email me at [email protected] with a link to your screen cast video. So you can upload a video of your problem that you’re having and I’ll try to get back to you as soon as possible. I am not a technical guy, so it’s a question about coding, CSS – I might not be able to answer that but If it’s anything related to the tutorial and the steps I’ll try my best. You can download Jing and also sign up for a free account on screen cast to upload the video, the link is down below – so you can check that out. Try not to tell anyone about theses bonuses, because I only can answer so many emails and you don’t want everyone using the same pictures. Good luck and I’ll leave you with some inspiring words from the man himself, Denzel Washington. Now, I’ve been blessed to make hundreds of millions of dollars in my life. I can’t take it with me. And neither can you. So it’s not how much you have, it’s what you do with what you have. And we all have different gifts, some money, some love, some patience, some ability to touch people but we all have it. Use it. Share it. That’s what counts. Not what you driving, not what you flying, not what kind of house you bought your mama. But buy your mama a house. (Laughter…..)

30 thoughts on “How to Make a Drag & Drop WordPress Website – ▼FOR BEGINNERS▼ EASY! 😀

  1. Hi Guys, Please watch my Latest 2018 WordPress Website Tutorial >>> https://goo.gl/y7FuoD

    Thank you 😀

  2. Hello Hogan.
    im fatul one of your subscriber from Indonesia , 😀
    i followed your tutorial since February and now i have own web site for my business.
    but just got some issues with themify theme and addons.
    i need to update my theme but i dont have the id to log in.
    coz it effect my site performance till now (i cannot see some addons in element module even i installed them twice).

    do you any solution for that?

    regards
    fatul

  3. Hey Hogan, I love your videos.
    Would you be able to do a tutorial on how to do image hover buttons for WordPress sites? I’m struggling to find any decent free plugins and wonder if you know of any.

  4. Hi Hogan, thanks for the great tuts! I'm having an issue where each time I save, instead of saving the body text I wrote for each section, instead it seems to copy and paste the same heading 2 text into every body of text. It isn't saving properly at all, the website looks like a complete mess and it won't update or display the correct text no matter how many times I re-write it and save it.

  5. Hi Hogan

    One doubt.I didnt understand how this website is diffirent from parallox video.what is special on this video that is not there in parallox video

    Thanks

  6. Hi Hogan,

    Sorry to bother you but my blog pages are not showing the comment fields at the bottom… maybe you've seen this before…. I've spent hours and can't fix it… please help! http://legacyfoodworks.com/wordpress/mole-poblano-secrets-revealed/

  7. Hello ! I have a question. Why not choose WordPress hosting ? What is the difference ? Because WordPress has its own plans and can provide you a domain , the price range seems similar and I don't understand the difference.

  8. Hi Hogan, I have an issue. On the mobile version of the website, the menu isn't responsive (and yes I tried using a plugin but now I just have two menus: one is responsive and the other scattered across the website). Is there a way to hide the navigation menu for mobile users while keeping it for desktop users?

  9. Look at this Fast, SEO Friendly WordPress Theme. Over 300 Niche Header Graphics, In Post Ads, Funnel Templates. Easy Setup And Great Support. Used On Over 200k Sites http://bit.ly/2I0yz4u

  10. I haven't been able to make a transparent header and is also not going in full width, it seems like a weird box and the menu options are always like close to the top of the browser, what do you suggest?

  11. NEED HELP!
    I built my website with this tutorial some time ago and would like to update my website now. Whenever I want to add a new textfield, it always inserts the text from the first textfield of my site. I write the text I actually want to have in there and as soon as I click "safe" it changes the text to the one I added in another textfield above.

  12. Hi Hogan, I am following your videos for some time know and have learned a lot. I am ready know to get the $139 Themify. I have one problem as soon as I press the HOGAN for the coupon I go to a website where can order what I want but when I click on HOGAN I am send to a page to order but then they ask the coupon and if I put HOGAN in they say it is wrong. Please help me.I will also get my hosting at Hostgator but I first want to get this themify fixed. My email is [email protected]

  13. Hello Hogan,
    I am using this version right now ULTRA 1.1.4, and while using feature module, when I duplicate the module and chnage the old content and try to save but it shows old content only. Please help

  14. Hello Hogan, I used earlier your free theme "Themify" and now i'm getting a notification to update the theme but when I press update it asks me to enter my themify user name and password which I don't have since it is a free theme published by you. so what to do now and how to update the theme?

  15. Hi Hogan, this tutorial is very informative. but it is hard for me to absorb all the information. I am looking for someone coach me to sell things online. Do you have any recommendation.

  16. Hi Hogan, in minute 56, how do i get the transparent header code? how do i copy paste that code? i went to your blog but i could not find that code.Could you please let me know about it. Thanks in advance!

  17. Hi Hogan, for the contact page, i inserted the map module but it did not work. It showed "this page couldn't load google map correctly", could you please help me regarding this? thank you so much.

  18. Hi Hogan, one question please. Is there any way to set the menu navigation in the middle of the hero image instead of in the right above? If there is any could you please let us know how to make it.Thank you much in advance.

Leave a Reply

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