How to Make a Drag & Drop WordPress Website 2019 – BEGINNERS!

How to Make a Drag & Drop WordPress Website 2019 – BEGINNERS!


Hey guys my name is Hogan and in this tutorial I’ll be showing you how to create this amazing WordPress website using a drag-and-drop builder. So what that means for you is you’ll be able to easily recreate the layouts of popular websites such as Apple, Tesla, Google Virtually any website that you see online without any code. So anyone can do it This isn’t a 10 minute tutorial because I wanted to show you everything step-by-step And if I make a 10 minute tutorial you’re not gonna be able to create a good looking website that people are actually interested in. And if you create a website like this then people are just gonna click off your website and never going to come back and Basically, there’s no point of having a website in the first place. So this is why it’s two hours long I’m gonna show you everything step by step but within a few hours you’ll have your own website up and running So I’ll be going through things such as getting your website online Showing you where to get the best free images Showing you all the tools that I used to build the website, most of them will be free. I’ll also show you how to use the Builder itself, so you don’t get overwhelmed with building the website yourself. I’ll show you how to Ensure that you design a really nice website Even if you’ve never designed anything before in your life, and I think that is probably the most important part I’m also going to show you some really cool stuff in a second. So this is perfect for people who are building their first website This is perfect for people who have installed WordPress, but you just don’t know where to begin It’s also good for freelancers, small business owners, or even if you just want to make a website for fun. Then this is just awesome So basically I’m going to give you a website tour to show you guys what we’re gonna be building today all right, so basically in the website tutorial I’ll be showing you how to add in text and images and things like that But I really wanted to make it special, so I’m gonna show you how to create this typewriter effect Not many websites have it, but it’s gonna really make you stand out from competition Scrolling down here. I’m gonna show how to add this featured section as well as showing you how to add in beautiful gradients which really make your website fresh and just modern and it’s just really cool I’ll also show you some really cool stuff such as this particle effect. It has a nice little touch It’s really easy to do but I’ll show you anyway and next I’ll be showing you how to add in the blog section. The blog section is actually really important because You’re able to create free content that people are actively searching for so You’ll be attracting like highly targeted traffic to your website Then you’ll be able to sell whatever you want to sell to them. A lot of people are focusing on social media Facebook ads and things like that but in reality you know if you’re scrolling through Facebook you want to look at your friend’s wedding pictures or what they did on the weekend You don’t really want to click on an ad. But with blogging people are actually looking for that information So they’re in the right mindset. So that’s definitely a really important thing for your website Now the next thing I’ll show you how to do is adding in this drill parallax effect So as you can see that’s super cool. Not many websites. Have it, but it’s really gonna make you stand out and you can tell an interesting story about your product and service with the dual parallax effect Then I’ll be showing you how to add in videos and galleries and all that stuff I’ll show you how to add in the footer section with your social media and after that I’ll show you how to create a simple about page by importing the layouts So I’m gonna show you some really cool features of this builder this is me, and I’ll be showing you how to do all that alright and if we click on the services, then I’m also going to show you how to Import pre-created layouts and also pre-created rows. building This is gonna really speed up the process of website But I didn’t want to just import a layout theme because most of the time when people import stuff They don’t know how to actually arrange it properly, and you’re just gonna end up Procrastinating and never getting your website done. So I’ll be showing you that as well but after I show you how to actually use the important features. Then I’ll show you how to add a blog page I’ll show you how to configure this widget section where you can display virtually anything that you want and of course I’ll show you how to make a contact page which includes a contact form so people can submit a message and also a map. So some of you might be small businesses and you want to display where you’re located and stuff like that. This website is also mobile responsive so it fits on any device on mobile tablet, on computer or anything like that and Yeah, that’s pretty much it . What I do want to point out is if you have any troubles make sure to drop a comment down below, I try to reply to all of them and if you have something more personal You can also send me an email at [email protected] and I can help you guys out Without much further ado I’m gonna start with the overview of what we actually need to get started So I’m just gonna start with the overview of what we need to create our website So the first thing that you’ll need is a domain name and basically a domain name is your web address Google’s domain name is google.com. Your one will just be your name or your business name .com the second thing that you’ll need is a Hosting Account. So Hosting is where you’re gonna store your website files such as the images and also, the text or whatever file you want to store in it So people can access that 24/7 all around the world Now the third thing that you’ll need is to install WordPress So WordPress is a content management system and it’s used by around 30% of the websites on the web I use it for my website and it basically allows you to create a website without needing to know how to code Then we’re gonna install a theme. So basically a theme is the drag-and-drop builder and Also, the theme will allow us to customize our website however we want The fourth thing is then we’re going to create our website. So the domain name is gonna cost around $15.00/year But I have a coupon code which is going to cost you $5.99 a year Then for your hosting. That’s normally around $10.00 a month, but with the coupon code it will be around $8.00 or so. WordPress is actually a free thing that you can actually download Also, the theme is free. But you do have the option to get support for a fee and then the creation of the website is free as well. So to get started with a website It’s not gonna cost you thousands or even a few hundred dollars. It’s only going to cost you $14.00 But it’s going to take you a few hours to create But I really think it’s worth it because you could be spending that on something else So what we’re gonna do now is we’re gonna get the domain name and hosting at the same place So open up your web browser and then type in Hostgator So h-o-s-t-g-a-t-o-r. com and then click on enter So Hostgator is where I get my domain names from and also where I host my websites So I’ve been with them for about seven or eight years now And they’ve been really good. A really good thing about them Is they have the live chat support And they also have a 45 day money-back guarantee if you have any problems And they also have an uptime guarantee as well. So with a lot of free hosting companies, sometimes if you host a website there it might not be up all the time because there’s just too many free accounts and then they don’t allocate enough resources to your website And if a lot of people go to your website Then it’s gonna crash your website, and you definitely don’t want that for your business So it’s really important to get a good paid hosting for your websites So what I want you to do is click on web hosting here. As you can see there’s a few different options But for beginners web hosting is what we need to get started with So basically there’s three different plans: the Business plan, the Baby plan and, also the Hatchling plan So the business plan is probably a bit too much for what you need at the moment, and it’s a little bit more expensive So the difference between the hatchling and the baby is that the baby has unlimited domains. So what that means is you’re able to host your domain name, your mom’s domain name your friend’s domain name, and maybe if you have a client then you can have your clients domain name all hosted in one place for the same price So with the hatchling plan you’re only able to host one domain So for most people I’m you’re gonna pick the single domain because you most likely going to start with one website and if you actually need to host unlimited domains then you can upgrade later on or you might have some clients and You might go for the baby plan, but I’m just gonna click on the hatchling plan and then click on buy now So if you have not got a domain name yet Then you’ll need to enter a domain name here and if you’re the owqner of the domain, then you need to click here.So you might have bought a domain from GoDaddy or Namecheap then you’ll need to enter the domain name here And then follow along with the tutorial But if you want a new domain name, then click here on the tab And then you’ll need to figure out what you want to name your website. So for example, we might go create your dream website and then click on the outside here Basically that will see if that is available. If it’s got a green tick then that means it’s available and you can select that. If it goes red that means someone else has already registered that domain name and you might need to come up with a different variation of that domain name So I normally go for the .com because that is just the most common and what people normally type in But you might go for a .org or a .co. It really depends on you. So if you scroll down here I’ve got the domain privacy protection and basically what that means is if we uncheck that Then if you select that then it will actually show up as Hostgator.com or something like that so it’s gonna hide your name your address Your email address and things like that So if you’re a brick-and-mortar business and you’re displaying your email and your address and everything on your website anyway Then you probably don’t need it, but if you want to keep anonymous then I would recommend you select the domain privacy I’m just gonna keep it unchecked because this is just an example but if you do want to get it then I recommend you to get it now because you can’t really add it on later on as that information will be released into the WhoIs database Okay, so scroll down here And if we look at the billing cycle Click on that and you can choose months to month or you can choose a longer term normally with the longer term you’re going to get a bigger discount So if you go for longer you’re gonna save a lot more money But it really depends on you know your preferences and what you’re comfortable with So I’m just gonna go month to month for this example and here you just need to enter in a username And you just enter a security pin. If you scroll down here You’ll need to enter in your billing information so make sure you got your right Email here and also you need to fill out this section here with your credit card details or PayPal if you’re paying by your Paypal Scroll down here once you filled that in Now we’ve got the additional services. So you want to uncheck these because you can add these later on and If you actually want to backup your website I actually have a free tutorial on showing you how to back it up for free. And you can also create a professional email address using your domain name in the cPanel itself, so I’ll make a video on that as well And if you scroll down here, then you’ll need to enter in a coupon code so you can enter in bonus code, and then click on validate and That will basically give you a bigger discount. So that is my coupon code And if you use that then I’m gonna get a small commission which helps me create these free tutorials for you guys. So if we scroll down here And we just check if everything’s correct. So we’ve got a domain name We’ve got the hatchling plan for month to month, and the total is about $13.66 so if you have got the domain privacy sometimes it might actually If you scroll back up, sometimes you might actually add this back on But it’s not so it’s alright. So scroll down here And then what you need to do is just click on I’ve read and agreed to the terms of service And then you’ll need to click on the checkout now, so that is gonna check out And then you’ll either need to pay by Paypal or you get a congratulation page I’ve already got an account with Hostgator so I don’t want to really create another one. Now what we need to do is go to our email and This is where we actually log into the cPanel to install WordPress So Hostgator is going to send you an email with your account information which basically looks something like this. So what you’ll need to do is click on the control panel URL and Basically you’ll need to copy over your username and copy over your password so you can actually log into your control panel So once you have done that click on login So to install WordPress you can click on build a new WordPress website Or you can scroll down to the software section and click on quick install So sometimes the layout of this section might change, but try to look for quick install and then you should be ok. So we’re gonna click on build a new WordPress website That is gonna take us to this section here where we can install WordPress on our website So click on the domain. So select a domain Normally for most of you guys will just have one, so I’m gonna select this one here Leave this part empty, click on next so for the blog title. It might be a business name or your name So for example I might just type in logo, we can change that any time For the admin user, so this is will be your login username first name, last name, and also a valid email address Once that is done. Make sure that email is right click on here to accept the Terms of Service and then click on install So WordPress is going to install on to your new domain Okay, so that’s taking a few seconds And it should say installation is complete. So once that is complete then you’ll have the installation details here So what I generally like to do first before I do anything is copy the password to my clipboard first So once you have done that You know your username is Hogan Chua. I mean you know whatever username that you’ve put in and then you can click on log in So once you have click on log in Then this will take you to the WordPress Login page. So sometimes if you’ve just bought your domain and hosting it might not have propagated yet and basically what that means is HostGator hasn’t set that up on the backend yet and sometimes it may take you know 15 or 20 minutes Worst case scenario, probably a few hours if it still hasn’t started working yet, and then you can contact the HostGator live chat support So put in your username and then paste in the password that you have just copied and then you can click on login Alright so before I even talk about the dashboard area, make sure to bookmark this page So this is your login URL. If you copy that URL and let’s open a new window and if you actually paste in that URL Then that’s going to take you to the login page Here all you need to type in is WP-admin and that will take you to this page so do that first Alright, so this is the WordPress dashboard it’s got a lot of stuff, but we can pretty much clear a lot of the things. So let’s just clear that for now and Close that, dismiss this part. I’m going to show you how to Set up your WordPress, so we’re gonna close all these Close all these Just like that. So it looks a little bit less overwhelming now So what we’re gonna do first is we’re going to change our passwords. So if you hover over users here You can click on all users Now basically this section here you can actually add in a new user. So for example if you have a a writer or something for your blog then you can create a new user for them And they can log in and they can add in blog post or edit the page and things like that So this is your user We’re gonna click on edit and we’re going to change the password. So scroll down To the very bottom to account management, new password, click on generate password and I’m gonna click on hide and then I’m gonna set in a new password Okay, so confirm use of the weak password. Hopefully you can come up with something stronger And then click on Update Profile I’m just gonna close. That’s and I’m gonna update that Alright, so next what we’re gonna do is we’re going to change the permalink structure, so if you hover over settings click on permalinks Alright, so what this basically means is We want to change this to post name Whenever you’re adding in a blog post or you’re adding a new page it will come with a title So you want that title to actually show up on the URL So you don’t want something like p=123 People don’t know what that page is talking about and it’s just not good for Search engines and your Google rankings. So you want to make sure to change that to post name and then click on Save Changes After that then you can click on plugins So plugins are basically like applications that enhance the functionality of your WordPress website.So on your mobile phone you’ve got apps such as social media, dating apps, gaming apps Productivity and everything like that Plugins are basically the same thing but for your WordPress website so it comes pre-installed with some stuff So what I like to do is just to deactivate everything to get everyone on the same page Alright, so we don’t really need all these so what I’m gonna is just Select it again, and then delete it. Click on apply and ok Once that is done what we’re gonna do next is install the theme and install the required plugins for the tutorial So to install the theme what we need to do is hover over appearance and then click on themes So this is the default theme, which is currently installed onto WordPress So if you actually hover over the icon here at the house icon, and then right-click to visit the website Then you should see your website looks something like this So this is a default WordPress theme. It doesn’t really have much customizability. So you can’t really customize and you don’t have that drag-and-drop builder So what we’re gonna. Do is go back to our website here, and then click on add new So there are a bunch of free themes here but the theme that I use and the theme that I highly recommend Is the ultra theme by Themify because it’s got the drag-and-drop builder and you can pretty much create any website that you want So we’re gonna click on upload theme Okay, so once you have done that then we need to download the theme So if you look below this video in the description you might need to click on show more You need to download the theme So click on that and download that to your computer And then you’ll need to download the images and also the plugins as well onto the computer so you can follow along with the tutorial So after when you’ve done that then you should get two files basically so one of them is called Themify_Ultra.zip and the other one will be Images and Plugins Sometimes Safari might actually automatically unzip it so it might look like a folder like this So you don’t want this to be in a folder What you want to do is right-click and compress that back into the .zip file Because we want to upload the .zip Now for the images and plugins we actually want to unzip it. So if you’re using Mac You can just double click it on Windows. I’m not sure you might need to download some software for that to unzip I’m not 100% sure. So if you click into the folder Then we’ve got all the images in there, and we’ve also got the required plugin to follow along with the tutorial so if we go back to our website now We need to actually click on choose file We need to select Themify_Ultra.zip so make sure this is.zip. Click on Open Install now. So it’s got the progress bar on the bottom left so if you actually Go to www.hoganchua.com so this is my website I’ve also got a FAQ desk, so if you have any questions sometimes I might have put the answer onto my FAQ page so if you click on the FAQ section Then these are the frequently asked questions now Basically if you go to theme installation So if you have any troubles you might need to refer to here. So for example if we click on here Sometimes they might say the file size has exceeded The theme might be too big because your host has actually limited the amount that you can actually upload onto your WordPress website You either need to actually contact your host to increase the upload limit or you can go to my FAQ page and click on the upload file exceeds Basically follow this video to upload the theme via your cPanel section So for most of you guys, it should be all good and ready to go Then you need to click on the activate and that will activate the new theme Okay, that’s going to pop up with skins and demos. We don’t want any of that so we’re gonna click on the X icon here basically if we actually refresh our website, then you should see the appearance has changed Okay, so what we’re gonna do now is we’re going to go back to our dashboard area and we’re gonna install the plugins. So click on plugins then click on add new Then click on upload plug-in, choose file and then We need to click on the images and plugins folder so we’re gonna look for the builder_typewriter.zip. So look for that file, click on open then click on install now activate that plugin Now the next plug-in that we’re going to install is the contact form plug-in. We’re going to click on add new Then we’re going to search for plugins, so we’re gonna type in Contact Form 7 That should load up within a few seconds. And we want to install the contact form 7 by Takayuki and then Install Now Then click on activate If you want to add different plugins for example you might want to add some booking plugins for your website to accept appointments and stuff like that you can try and search up for example booking then there are a range of free and paid plugins here. Most of them are freemium so It’ll be free, but if you want some more Pro features then you have to pay or you can actually go to Google And then you can type in best booking plug-ins for WordPress and normally they’ll have like a website where it ranks them And then you can check out which one suits you and whatnot So that is pretty much it. Now what we’re going to do is add in your pages We’re going to hover over pages, and then you’re gonna click on all pages so we’re going to do first is we’re going to delete the sample page, so we’re going to trash that and then we’re also going to Go to the trash can here and then delete that permanently So to add a new page all we need to do is to click on add new The first page that we’re going to be adding is the home page So we just enter in a title here called home, and then click on publish It’s going to click on that again. Make sure that it says that it has been published here And then click on add new again The next page we’re gonna add is about Then I’m gonna click on publish Do it again. Make sure it says that it has been published otherwise it won’t publish properly So we’re gonna add in the services, blog, and contact form really quickly So we’re gonna do Services. You can add pretty much any page or however many pages that you need later on And new again Blog page Publish And then click on add new and we’re gonna add in a contact page So to check all your pages I added and properly click on all pages again on the side and it should have home, about, blog contact, and services. So let’s view our website now You should see the pages listed up here what we’re gonna do is sort of arrange the menu so what we need to do is click on customize You’ll be directed to the themify options so we want to click on the back icon here the first thing that we want to do is click on the home page settings Then you want to select a static page So as you can see the pages have disappeared It’s gone into the mobile menu mode So what you can actually do is if you’re on Mac then click on command and then – It’ll basically zoom out of your screen. If you’re on Windows then you can click on the Windows key And then click on – and that will zoom out and + to zoom in again So what we want to do is we want to make sure the home page here is set to just the domain URL. So for the home page, select home and Then we want to click on publish. So what that basically means is let’s just close that for now Now if we actually click on the home page Then what that does is that will actually make that home page set to the actual just default domain name itself. So if you click on about Then that will have about there, but if you click on home, then it doesn’t have that extra extension there So what I’m going to do is arrange the menu properly, so let’s click back to customize Click on back here Click on menus, and then we’re going to create a new menu.So click on that the menu name We’re going to set in top nav for top navigation For the menu location you want to set main navigation Which is the top up here. If you select footer navigation it will be on the bottom click on next Alright, so we’ve set that in. Now we want to add in the pages so click on add items We want to add in the about page services, blog and contacts. So we’re not going to add in the home page.The reason for that is because In most cases when people click on the logo it will automatically direct them to the home page anyway So it’s not really required. So to rearrange them all you really need to do is to Click on it And then drag it and sort of put it below whatever and it will rearrange As you can see there. So if you want actually create a drop down menu What that means is if I actually drag the services Sort of put it under about, which is I think called indenting. Like that Then when you actually hover over the about page, then it’ll drop down your services so you can also do that for the blog as well. So for example you can put it under services again Then what will happen is if you hover about hover over services and then blog will pop up. So let’s just put that back and then click on publish Then we’re gonna close the customize. And the next part, I’m going to show you the Themify settings Rearranging the default layouts of the pages and adding in your social media for the bottom section here Let’s go back to our dashboard And then we want to edit the Themify settings. So scroll down on the left here, click on Themify settings So this is basically where you edit all your theme settings. If we click on the general tab This is the favicon and basically what the favicon is is the logo for your tabs To upload a favicon, what you want to do is click on upload Basically you can upload the favicon which is in the images folder, which you should have downloaded earlier before and The size of the favicon is 32 x 32 pixels, and it should be a .png file which basically means it’s a transparent file. So click on open and that will basically upload here So if you want to get a favicon or a logo as well then what I recommend you to go to is www.fiverr.com. So this is sort of like a freelancing website where you can get logos and graphics and all sorts of things starting from $5.00. So for example if you click on – I mean type in logo design and then click on search Scroll down and there are hundreds of People who design logos. A lot of them are starting from $5.00. Some of them a little bit more expensive so let’s click into one of those ones and You’ll need to just log in with your Google or Facebook account or you need to Sign up . So I’ll leave the link down in the description You can get a logo and then you can also ask for a favicon. The favicon is probably the same as your logo but without the text. If we scroll down here to the very bottom to Google Fonts you want to click on show all Google fonts. So that basically shows more fonts. You can choose from click on save then you want to click on the default layouts tab What you want to do is we want to actually open our website up in another window So hover over the house icon, and then right-click and open in a new tab. I’m just gonna close the Fiverr one This is our website. Now. Okay, so if we scroll down here. This is a page now if you click on here You will need to scroll down to the very bottom to the default page layout section here So for the page sidebar option we want to select no sidebar. So for example this is the sidebar, we want to select no sidebar You want to also hide the title on all the pages so select yes And you also want to disable all the comments and then click on save So once that is saved, then you can refresh that page you should see the Title and also the sidebar disappear. So you got a blank canvas to actually design your website on So let’s clear back here, and then click on theme settings So scroll back to the top section, scroll down to theme appearance So here we can change the header design and the footer design and things like that. So for the header design Currently it’s this default one here. It’s quite large, the area. You don’t want this huge area here You want to make it sort of like a thin and minimal header because then people don’t have to scroll down to your actual content of your website. So click back here The one that I like is the header top bar, you might go for the header horizontal. It’s pretty similar this one is just a thinner design, so I’m gonna select that one and Then I’m gonna scroll down here and what I want to do is I want to remove this icon here This is the RSS and also the search icon You might want to keep that and I also want to remove the site tagline. So go back here And I’m gonna exclude the site tagline, exclude search, exclude RSS Scroll down to the footer design so here Is your footer section you can also choose how you want your footer to look. So I want to remove the site logo in the footer that is pretty much it, so I’m gonna leave everything else as default and then what we’re gonna do is scroll down to here and Then I want to hide powered by WordPress and Themify themes and things like that. So that one is the footer text 2. So I want to click on to hide that Then we’re gonna click on save Alright if we refresh the page then you should see the header design will change to the simple one and Also the powered by WordPress and Themify themes will be gone. So that is looking great. Now what we’re gonna do is we’re gonna add in the social links. So we’re gonna click on the social links here I’m just gonna quickly open up all my social URLs Okay, so what we need to do is paste in our Twitter links. So what we need to do is click on here And let’s copy our URL and then just paste it into here same with the Facebook page So make sure you follow my page. That’s where I post updates so go back here paste that into there. That’s my URL. And scroll down So for example if you don’t have Google+, you can leave that empty and it won’t show up. So for YouTube, you want to paste in your YouTube channel URL. Copy that and then Paste that into here Pinterest. I don’t have Pinterest But let’s for example you have Instagram and as you can see is nowhere to be seen. Click on add link Type in a title. So for example Instagram. For your link we’re gonna go and copy the Instagram profile URL then paste into here. Make sure you select an icon so insert icon Then we’re going to search for the Instagram icon so type in Instagram Okay, and then click on Instagram and then click on save So that has basically saved in all links But we want it to display in the footer section. So to do that we need to actually go to hover over appearance and then click on widgets. So widgets are basically sort of different sections on your website and You can add all these widgets into All these different sections where you can put it in. What we’re going to do is we’re going to look for the Themify Social links widget here. So click on it and drag it up Like that and we’re gonna put it into the footer social widget area Alright, so because these are external links They’re linking to an external link for example www.Twitter.com. What I normally do is I open link in a new window. And for the icon size I’m gonna keep it medium and then save So if we refresh our page Then those social links are gonna show up in the footer social widget section which is down here Okay, so if you want to put it into, for example, the header area Then you might need to click on it and drag it into the social widget section here I don’t really recommend that because I think that when people are on your website you’re supposed to sell whatever you want to sell or Collect the emails rather than direct them to your social profiles So what we’re gonna do next is we’re going to be styling our navigation menu and also the footer area Adding in the logos and things like that. So, it’s Hogan here and before I actually show you how to build the website I want to give you some design tips that you can actually use to ensure a professional finish of your website and to make sure that it looks really good so In my previous tutorials, maybe two three years ago I didn’t really go through this with you guys And I think the result that people got wasn’t very good. So like building a website is one thing but designing is another thing so think of a website sort of like a house you don’t really design the house and build it at the same time. You sort of have the architect to design it first And then you pass it to the developer who actually builds that house So I know that I have the design ready for you guys, and you can follow exactly step by step But you’ll probably be changing the colors and the layouts the fonts and everything to sort of suit your business so Like with these tips you can actually use them, and you’ll make better decisions quicker So you won’t like procrastinate. Sometimes you might be like “oh I don’t know which color to choose, which font to use” and then you choose a random one and It sort of ends up a mess So I’m not really a professional So if you’re a professional then you might be able to skip this video or skip this section But I think it’s really good for beginners, so there’s no right and wrong by the way So you can tweak it however you like. These are just 10 tips which I think will really help So the first thing is to just choose one main color So you don’t need to use too many colors. Like you can just use neutral colors or shades for your website Just like Apple does and have really good images, and you can have a really good website But what you can do is you can go to a color meanings website and pick a color that really represents your business So for example I’m choosing the dark gray Or you could say almost black Because I’m not building a specific business. A law firm might go with like navy blue or dark blue But since I’m building like a demo website, which is not specific, I want to appear simple clean and modern That’s why I went with the like neutral shade kind of look like Apple. So I can go to a website called Flat UI Colors and choose a color. I’ll put the link up in this screen. So the second tip is to choose an accent color So the accent color is the color that you can use to bring attention to certain areas. For example, buttons, Call-to-action areas and anywhere that you want to direct people’s eye, or attention. So I picked one for that one as well The one that I picked was the pink or fuschia because I think it really gives like a fresh vibe and it really stands out Tip #3 is to use a lot of neutral colors or shades on your website So if you don’t know which color or which main color, or should I use this accent color here or there just Stick with like a light gray or a dark grey like. For your icons, for example, if you want to separate different sections You can use like a light gray background to separate different sections on your website And it’ll look really good. So a really good example to check out is www.zero.com They have a really nicely laid out homepage that you can actually take a lot of inspiration from Tip # 4 is to use shades of the main color or the accent color for your website. So for example If you’re like using a button and that button is a pink color, you don’t want that pink color Once you hover over it to change the completely different color you can use shades of that main color to give that nice hover effect, and it will keep things really consistent Also sort of like sometimes you need to separate different elements of your website You can’t use blue and then maybe the exact same blue again if you choose maybe a lighter shade of that blue or a darker shade It’ll still match really well and keep everything consistent It’s sort of like if you’re wearing maybe like white t-shirt and blue jeans with the belt You might go with like a navy blue And it’ll still look really nice. Tip # 5 is to use neutral colors for your header and footer sections The reason why I recommend that is because probably most people don’t have professional images done And if you choose like a colored header for example Like a blue. You need to match it really well with the image below that and if you’re finding images online It’s gonna take longer to find images which is suitable and matches really well. A lot of websites actually use like a light background header Or a dark background header and for the footer section they use like a light grey they keep it nice and subtle and everything matches really well And it’s just really easy to match. So think of it as wearing like a white t-shirt You can wear any colored jeans with it and it’ll still look really nice.Tip # 6 is to just use one font So you don’t need many fonts for your website to look nice Apple just uses one. And you can also use a Chrome extension called WhatFont to actually inspect what font people actually using for their websites. So there’s basically two different typefaces. One is called the serif typeface the other one is called the sans serif typeface The difference is the serif typeface as you can see with the characters They have like edges on the ends of the characters and also these strokes are thick and thin With the sans serif typeface the edges are plain and also the strokes are even width So the sans serif typeface appears a lot simpler and modern and most websites use it. The serif typeface it appears more elegant and gives a more traditional handcrafted feel to it. So it depends on what business you’re in but most websites use the sans-serif typeface. For example: Google Tesla, Uber, and even on your your phone. and also on your computer. The typeface they use is sans serif. So what I recommend is probably use the sans serif And I’ll put up the most recommended Google Fonts that you can actually start off using and just choose one of them.Tip # 7 is to take direct inspiration from other websites that you really like. So you can open up a few tabs that you really like and copy the layout exactly. You can just change the images, change the text, and then tweak it to what you like later because that ensures like a really good layout Lot of people just sort of like build it as they go and doesn’t look very good. Tip # 8 is to use the body font size between 16 to 18 pixels. It depends on the type of fonts So you might need to adjust it slightly But don’t have a too big or too small and I think that size is perfect But with your headlines and sub headlines that can be any size But sort of have like a hierarchy between them like the headline should be bigger The sub headline should be a little bit smaller, and then you have your body Your body text most likely wouldn’t be bold either. If it’s like bold for a huge paragraph Then it’s gonna look kind of weird. So you can bold certain areas of course to highlight certain things But make sure to just keep it really consistent. Tip # 9 is the line length. So for example You don’t want like paragraphs going from one side of the screen to the other side because people are gonna be reading from this side to that side and it’s gonna be harder to read so to break it down to somewhere in between there. The website is sort of like in landscape mode. You want to keep it between 45 to about 90 characters in in width and that provides a really good reading experience. Tip # 10 is to make sure you separate your content So you can separate content with just white space and that makes things really appear simple. You can also use divider lines You can also use background colors like neutral colors And you can also use images and icons to separate different sections of your website you sort of want to keep everything like bite-sized chunks So people can easily scan through your website and read it. You don’t want to have huge blocks of text that just go down and across Okay, you want to break things up and to make it easily readable,. And the last tip which is tip # 11 we’re going over, But you can use gradients. So use gradients to put on top of images To make the text pop out more because you want to make sure everything is readable And you can also use gradients If you might find an image that you really like. You can put a gradient color on top of it to keep your color scheme in sync to make sure everything on your website is nice and consistent with that color scheme. You can drop a gradient color on top of it Okay, so that is pretty much it for the tips. I’m gonna jump back into the screen and Continue building the website, but you can also download the PDF cheat sheet which can print out as well So we’re going to customize the header section which is up here and the footer section to do that you can click on the customize That will automatically take you to Themify options. If you click on back then this is where it takes you. So click on Themify options and click on Advanced Options So it’s gonna give you more options so you can edit all sorts of areas on your website Alright, so once that is loaded up then this is your header section and footer. So what we’re gonna do is click on header and the background here, we’re gonna change that so we’re gonna click on the header wrap As I said before I recommend sticking to neutral colors for your header and footer sections because it’s easier to match with any image especially if you’re not taking your own images because it’s gonna take a while to find images that match. If you actually put in maybe if your main color was blue So what we’re gonna do here is I’m gonna set in the color code, and it’s gonna be Six 2s so like a dark gray You can also choose white which is basically six Fs and I’ll put the hex code up so you can follow along if you actually want to choose a light header So once that is done, then you need to scroll down here Here you can actually edit the header font colors and header link colors here, so every link up here is a header link But this is the logo and here is actually also the main navigation links as well So we’re not going to edit this section here right now So I’m gonna minimize that. Then the next section that we’re gonna edit is the logo so click on site logo and tagline, site logo So here you can set in the logo title and you can also set in the size as well as the font So I’m gonna set in Roboto. So that is my main font that I’m gonna be using For this entire tutorial on this demo website So if you set in Roboto, as you can see the changes, then you can set in the front way it should be bold Alright, and we’re gonna set in the color to be white just like that Alright, so if you don’t have a logo then just put in a site title and choose a nice font which is easily readable. If you do have a logo image, you can click on logo image and for example Go to Fiverrr and then just search for logo design You can have a look here, browse through, and you can basically filter it I think some are $5.00, some are a little bit expensive as you can see. But if you click onto that Then get a logo. Done. You don’t have to design your own because this is gonna take a long time and I have the link down below as well so if you do have a logo click on the plus icon and click on upload files, select files I have also included the logo that you can actually upload as a demo in the images and plugins folder which you should have downloaded earlier So this is the one that you have here, and as you can see it’s a .png file so that means it’s transparent so it’s 250 pixels in width, so across, and 64 in height. You can basically use sort of any size similar to that because you can actually scale it down using the customizer so I’m gonna click on open Then insert the image and as you can see it pops up like that I’m only going to edit the height So I’m going to change the height to 32 And it will basically resize it proportionately. So leave this one blank, just change that to 32 That fits in really well Next, click on site logo position. So as you can see there’s a little bit more space up here So we want to move it up a little bit. Click on relative, and then you can click on, maybe, 4 pixels on the bottom, and as you can see it moves it up. Just like that click on publish to save and then we can actually just close that section and let’s edit this section here. So this section is the main navigation so these are all links. So click on menu link and We’re going to set the color to white if your background is white then you’ll need to set it to 222222 (6 2s) which I’ll put up, and then scroll down menu link hover. As you can see it’s red right now What we want to change it to is a little bit of light grey so it gives a nice subtle Effect. So for example when you’re hover over Apple’s links, it gives a nice grey subtle effect, so you know that it’s a link. We’re gonna go back here and what I like to do generally is I like to go to a website called www.0to255.com and then click on enter a color Now the color that I’ve set in for the link is FFFF I think that’s a little bit too much. Okay, click on enter color Then I like to choose one, two, three four, five shades darker Go back here And then make sure to not put it into the background color because that says the background. You want to set it into color paste that in there So let’s say when you’re hovering over that it gives it like a really subtle gray effect So people know it’s a link All right, and the menu active link. What that basically means is if you actually click on the about page The active link color is red right now So what I want to change it to is a sort of a darker gray. So a menu active link Let’s go back to 0 to 255 I’m not gonna set it to this color code here because it’s a little bit too light You can’t really tell. So I’m gonna go maybe five, four shades darker Click on that and Then put it into there Okay, six A’s and then that is the active link color All right, so when we hover over the active link hover color. That’s gonna be…..I’m gonna set that to white Just like that Alright, and if you actually have a drop-down menu, then you can set in the drop-down container color The links and the hover right here alright, so click on publish Now we’re gonna do is set in the mobile menu. So click on the styling robot icon down here and Click on- let’s close off all that for a second Okay, so click on mobile menu So this is the menu icon and we’re gonna change the color to white All right, so it’s more visible Then what I want to change is maybe the mobile menu link maybe to a 222. Something like that For the mobile menu link hover, I’m pretty sure you can’t really hover over on mobile, but I might set that in anyway. So I’m gonna set that to be maybe We’re gonna put it in here. Enter your color Just like that And then we’re gonna go five shades lighter. So one, two, three, four, five and copy that to the clipboard Paste that into here. So let’s say when they hover over that then it gives us a nice subtle effect Okay, so that is pretty much done. Now, we’re gonna close that and we’re gonna edit the footer section Alright, so click on footer here, and then click on footer wrap. What we’re gonna do is change it to a light gray. Just like Apple’s footer, which looks really nice if you look at Apple’s footer It’s also a neutral color. If we go back here There I’m gonna change it to F6F6F6 As you can see, it doesn’t change but this is basically the color that you have changed it to So don’t worry. Just change it to that for now and then we can change the footer font color. So anything here which is not a link, that is the color that we’re going to change. So click on footer font We’re going to change that to 222 just like that and minimize that one Then go to the footer link. So this is the footer link, same with the social icons. They’re all links We’re also going to change that to the dark grey as well Also going to change the hover over color. So the footer link hover and we’re gonna change that to maybe one, two, three, four, five shades Paste that into there and let’s say when you hover over that, it’s like a really subtle gray effect as well Alright, so I think that is pretty much it. We’re going to publish now Now before we actually go anywhere. We’re gonna actually click on the body Okay, so this changes the body fonts But it actually also changes the font for the header sections and the footer sections So we’re gonna click on body fonts. So the font that I’m going to be using is Roboto so it’s a sans-serif typeface which is a nice modern clean typeface, as you can see. So what we can do now is click on the desktop and, as you can see, it’s changed at and it looks really nice, but a little bit too thin so we’re going to change the font width to normal I think that looks pretty good to me You’re going to basically set in whatever font that you have chosen Basically just choose one font That’s what I recommend if you’re a beginner and you can also use the WhatFont Google Chrome Extension to check out what fonts, for example Apple is actually using. So this is the WhatFont thing Then you can browse over it and see what font they actually using if you want something similar What you can do is go to google and type in similar Google fonts to SF Pro display, and then Google will tell you and then you can try and choose one from here. But generally, Roboto Lato Open Sans, those ones are really good for you to start off using so publish Close, I think we’re ready to start building the homepage So we’re going to be building out the homepage This is the longer section but also the most important part of the tutorial we’re going to be working with images and text and showing you how to design a professional-looking website while learning the important features of the Builder so the first thing we need to do is get a image. So if you don’t have images which are done by a professional which I highly recommend because that way all the images look the same like for example the lighting and the The tone of the website looks the same and you can also get more unique images Images that you don’t find on the web but the next best option is Unsplash. Basically you’ve got thousands of images, which are really high-quality and pretty nice as well And you can use it for personal and commercial purposes without needing to credit people So the next thing that you need to do once you’re here is look for a really good image That you can actually put text over. So for example if you go to Apple They’ve got the main subject here and text up here. It’s really clear. Upwork’s website they got the person here, and then they’ve got text on the left. Google Drive, text in the middle and everything else around it. So when you’re looking for an image this one will be a really nice one Because you can put text on the left-hand side If you scroll down, I’ll show you something that’s not as good I don’t think this one is good because if you put text over it, there’s a little bit too much detail in that image there Unless you put like a really dark gradient over it which covers most of that image, and then the text will pop out, but I think will ruin the image, sort of Scrolling down here. Something like this is pretty nice because you can put text on the left something like this is really nice And then basically once you’ve found a nice one, for example. Let’s go down a little bit further Alright, so for example, let’s say you pick this image here Then all you need to do is click here to download and you can save that onto your computer It’s really high quality, so I’m gonna show you how to crop it next So I’ve already put that image that I’m gonna crop into the images folder which you should have downloaded so now what you need to do is go to www.Fotor.com. So this is a free Image Editing software that you can use online so you don’t need Photoshop or anything like that So what you need to do is click on edit I’m going to close that and click on open up here. Open from your computer Now in that folder, you’ll see hero image to crop So select that, click on open, and that will load up here So we’re gonna skip all the tutorials ’cause I’ll show you how to do it. So I’ve got the image here It’s quite large. If we put a really large image onto your website It’s gonna take a long time to load and sometimes you might not know But you might have a really small image as well, and that will make things like really low-quality blurry and it’ll just look really ugly and ruin your website. So what we’re gonna do now is click on resize and I want to set the size here but before we do make sure to actually click on that lock icon, so it’s locked up like that. So when you’ve change the number here 1,800, then it automatically changes the type to 1200. And then click on apply Once you’ve clicked on apply it should change down here scroll back, up click on crop And then set 1800 here again Then set in 1000 for the height. So you can select where you want to put it So I want to put it somewhere there. I’m basically gonna put the text in the middle like that Then I’m gonna just click on apply. So what I noticed is actually before you save you sort of want to drag that to the edge of the image to ensure that when you save, this is 1800 and this is 1000. And then click on save You can save it as normal or you can save it as high But you’ll need to log in to your Facebook account if you want to save it as high So once you’ve done that, you can click on download Save it as hero image into the folder and then click on save So what I’m gonna do is close that first. What I like to do is refresh the page All right, and then click on turn on builder So we’re going to hover over here and we’re gonna click on the row options. So click on that little pencil icon For the row width, you want everything to go from this side to that side So you can actually set full width row container and that we should move across there If you set the full width content, this is the content’s sort of line here and it’ll move all the way across. So I might set that in alright. And then go to styling Then click on background and you can set an image, gradient, video or a slider For a video, what I recommend is actually putting in a YouTube video. So upload your video to YouTube first so when it actually loads on someone’s website it loads from YouTube servers rather than your own hosting account YouTube servers are much faster. So click on image Image here, and then click on browse library Don’t click on the upload. If you click on the upload then what happens is WordPress will actually crop that image And it’ll be low quality. So browse library, upload files, select files select the hero image Click on open Insert file background mode, either select full cover or resume scrolling Parallax scrolling isn’t as responsive on mobile devices so I only use it on maybe not for the hero image But rather for images which are below that. So I’m going to select zoom scrolling for this which is also really nice effect Then what I want to do is you can actually drag this thing around and If you actually drag it, and then you drag it to the right hand side Okay, you’ll see this purple thing come up And then just let it go and that will pop up onto the right hand side like that Okay, you can also put it back like that But I’m gonna put it back here. So we’re gonna do is click on padding I want to add some spacing to stretch that image. So we’re gonna deselect, apply to all We’re gonna set in 17.5% To the top and do the same for the bottom 17.5 To the bottom just like that So we’re gonna be putting some text in there, so don’t worry. It’s going to stretch out further So once I’ve done that then we can click on done So what we’re gonna do is remove this white spacing here. To do that, we can actually click on save first click on edit in the back end That will take you to the back end section Scroll down to the Themify custom panel Click on page options. And for the content width, select full width so it goes all the way across Then once you’ve done that click on update Wait for that to update. And then click on View page or this link here That should remove it. So we’re gonna turn on the Builder again Then we’re going to hover over here So these are all the different modules that you can drag and move in and you can actually click on the lock icon so that keeps that thing there, otherwise it’s gonna retract back Put that back. And let’s drag a text module into there So let’s add some content So I’m gonna type in coming soon So type in content which is relevant to your image and also to your business. Don’t just randomly type in anything We’re gonna set in heading 1 here As you can see, that changes. You can also click on the toggle toolbar for more options then what I want to do is I want to go to the styling tab Here you can actually change the colors and stuff. So click on fonts. I want to change that to white so it’s visible Okay just click on that. So make sure it stays there Then for the text align, you want to align everything to the middle Just like that. And then what I want to do is I want to remove some of that spacing here below that text So we’re gonna go to margin Deselect a margin, apply to all three, and we’re gonna minus 3% just like that. So it minuses some of that space below the text module. So when we put in the text after then it’s not gonna be so far apart So we’re gonna click on done Now once you have done that, then we’re gonna drop in a typewriter module So make sure to have install that plug-in which I have showed you earlier Drop that into there so for the before texts we’re gonna type in Create A Then for the after text I’m gonna set in Website. For the typewriter text here, I’m gonna set in visually stunning So we’re going to click on styling here. And for the fonts. I’m gonna change the font to white Make sure to click that so it stays there So once when you’ve done that then you can go to typewriter click on the background So this is what it actually highlights as I want to change the background color to the fuchsia color which is my accent color that I’ve selected So you can select whichever accent color that you have put in or you can just follow along. So the color code is FC72F0 It’s something like that and I think that looks pretty good Then for the font color, I think we can just set that to white as well Then we’re going to click on done Okay, so if you notice, I haven’t set it to the middle yet because I want to show you something What we’re gonna do next is we’re going to add in a button first alright. So drag in the button module So you can change the different sizes like a small button, large button I’m just go to a normal and I’m gonna go squared Maybe something like that. And then for the button text, so I’m gonna change it to Begin now So for the link here, what that basically means is when people click on that, it will link to whichever URL is set in So for example, if I copy over this URL. Let’s open a new tab and paste that in I want to link that to my services page so I click on services. I copy the URL Then I just paste that in here.So anytime someone clicks on it, it will link to my services page. So normally I keep that in the same window because it is on the same domain. If it’s to like an external links, for example I’m linking to Apple’s website, then I probably open in a new tab So keep the color the same, you can also insert an icon But I don’t think that’s necessary. Let’s go to Styling Let’s go to the button link.So we’re gonna set in the button background color and the link color So the background color, I’m gonna set in as just white Okay, so that’s a neutral color Most of the time it’s really nice to just use a black or a white background button It’s just really easy to match but sometimes you can use your accent color as well Depending on the back around itself here . So for the background hover, We want to give a nice little effect when you actually hover over the button So for example if you go to Google Drive. If you actually hover over the button here, it goes darker Okay, here it goes darker and a lot of websites either go darker or lighter For this example, we’re gonna go darker. So for the background hover what we’re gonna do is go to 0 to 255 So it’s 0 to 255 Then enter in a color. We’re gonna set in the white color It’s going to be 6 Fs. Sometimes if it’s the same then you can just type in 3, click on enter color So we’re gonna select maybe 1,2, 3, 4, 5. Let’s try that and go back here Paste that in there. It might be a little bit too dark for the link. So for example we’re gonna set in 222, which is the dark grey The link hover, I’m just gonna keep it as the same Okay, and then we’re gonna go to the border. So I don’t want any border. I’m gonna select none As you can see, it shrinks Done Save it and what we’re gonna do is move everything in the middle. So we’re gonna click on options here, click on styling Click on font and you can text align it to the middle. So what that does is everything within this row, it’s gonna move it into the middle. So click on done. So for example, if you move this thing down here Because it’s not in that row then it’s going to just stay the default position. But if you actually click on the undo When it’s in here, then you’ll go into the middle. So this is really cool functions, the undo and redo function Let’s click on save and let’s set in the heading 1 fonts universally, so we’re gonna close this Let’s go to customize Let’s click on the headings, click on heading 1, and I’m gonna set in maybe 95 pixels, something like that. And make sure that is the Roboto font For the font width, I might set in normal Maybe 500, a little bit bolder. I think that’s pretty cool click on publish Okay So as you can see while we here, if you actually scroll down, you’ll see that the header It’s the sticky header, and it turns white So since we’ve done this heading section we’re gonna minimize it. So we’re going to go to the sticky header, this sticky header wrap For the background color, I’m gonna set it to the same color that I set in for the the main header wrap Just like that So if you scroll down then it stays that same color But what we’re gonna do is I’m gonna make it a little bit transparent Something like that. I think just looks much nicer Maybe 75% opacity and then click on publish Close it And I think the website looks pretty good at the moment Okay, so it might be a little bit too dark So you might want to change that button hover to a little bit lighter, but I think that’s okay I’ll change that later. Now what I want to show you is I want to show you how to set in a transparent header We want to change the transparent header not for the entire website because sometimes if you actually like – let’s go to the blog page You might not have a hero image for your blog page Or your blog posts. So what that means is if you don’t have it, then if you have a white text Then you won’t be able to see the links So what we do is change it for individual pages. So click on the edit page for the home page Scroll down to Themify custom panel Page appearance, scroll down Background type here, set it to transparent. You can also set the text color if you need to And then click on update so once you have done that then you can go back to the Home page. So click on View page That looks pretty good except, as you can see now, the links are not as visible So if you actually go to Google Drive, and if you look at this image here, they sort of added a overlay gradient on top of that image so to make the text here pop out a little bit more So what we can actually do is do that the same thing. So go back to your website, turn on the Builder So this is really useful because a lot of times you’ll be adding text on top of images and sometimes this is not visible and you need to make it more visible so click on the row options click on styling and then click on the row overlay. So if you actually set in a – if you set that into black it looks like that Set it down like that. Then it changes the the whole image and because that image is really nice You don’t want to really ruin the whole entire image You just want to change it to the top, like make a little bit dark on the top So to do that you just set in a gradient . So what we’re gonna do is drag this second button here, drag it to about 25% And then I’m gonna drag the opacity down to 0. Like that So it’s a little bit too dark there so click on the first button thing then we want to Drag that opacity down to maybe let’s say 50% and then you can click on done Save it Close it and that makes it pop a little bit more. That looks really nice and that makes the logo pop as well So now we’re gonna do is I’m also going to show you how to actually move the text So for example sometimes you might have,your main subject here, you want to move it to the left so to do that just turn the Builder For example, for the options here, go to styling Fonts. You can just align it to the left like that All right, and what you can actually do is you don’t have to click on done You can actually switch to this module straightaway. So you actually just click on here and that will switch directly and it will automatically save styling, font align it to the left. And if you actually want to go back to the row I think let’s click on done first We want to add a little bit of spacing on the left. So what we can do is go to row options styling padding Maybe on the left hand side we want to add 5% or You know maybe 10% or something like that So that is how you can actually move it To the left hand side while having the subject on the right hand side so you can play around with that and then click on done All right, so I’m gonna actually undo that and then click on save So what I want to do now is show you some other features of the builder really quickly Because I think it’s really cool. So if you click on the 50% thing That basically zooms out of your page and what you can do when you do that is easily move elements around on your website So sometimes you might need to drag certain things down to the bottom and It’s like kind of hard to drag because it’s just so far I need to scroll. So you need to set it to 50% and it makes things smaller, easier to move So you can also use the preview function that turns off the Builder to see what it looks like So it’s a lot quicker than clicking on save and closing This is the basically the mobile responsive styling which I’ll show you later This is the undo and redo which is really cool And you can also export this page as a zip file to import on another website which has Themify installed you can also load and save layouts which I’ll be going through later You can also duplicate the page, you can also click on help, which will take you to the Themify documentation So that goes through like everything in detail like each of the Builder functions and thing like that So if we go back to here Then what I want to show you is this function here Click on save as revisions. So for example if you’ve finished the home page here image type in hero, click on Ok. So if you make a mistake then you can actually click on here and load revision That will take you back to the settings that you have saved for this time frame here. It’s not gonna restore the header and logos and things like that It’s only gonna restore the layout for the page So we’re gonna close that and save Another cool function is the animation function. So if you double click on the module here, click on animation Let’s set in maybe a fading animation Basically you’re gonna set a zero delay. Let’s click on the next one here Animation, let’s set in a fade in as well. We’re gonna sit in a 0.5. delay also the button animation Fade in, 1 second delay, done. Save it Let’s close it and you can see how the animation comes in and that looks really nice So the next section is we’re going to be building out the services section with the featured module, which is really cool as well Let’s turn on our builder again Scroll down to the second row. What we’re gonna do is we’re gonna drop in a text module I’m gonna type in what we do So you can type in services or whatever you want. Highlight the text We’re going to set this one to the heading 2 tag And we’re going to go to styling and we’re going to go to the fonts. We’re gonna align that text into the middle Just like that and then click on done Then what we need to do is maybe drop a featured module and drop it below that title For the feature title, I might put in free tutorials And then for the content here, I’m gonna go grab some Lorem ipsum. Maybe let’s drag that one there Then paste that in, just a random text. You can change the layout of it And you can also change the circle thing So I’m gonna delete that circle thing, delete the stroke and delete the color as well Scroll down, you can change the size I’m gonna set it to medium, which looks good. And then for the icon here, you can click on the insert icon The one that I’m going to look for is maybe a video player one Okay, YouTube play. I think that suits it well. For the color I’m gonna set it in as a gray, so a neutral color If you don’t know what color to choose go for a neutral color always That ensures everything is nice and professional Don’t just choose any random color because that will be kind of weird even though that kind of looks good But like if you pick a random color, and then everything’s random then it’s gonna look all over the place so Best is to go neutral. So I’m going to go for D4D Just like that. You can also link it. So for example You might have another page which talks a little bit more in-depth about free tutorials You can put the link there and when people click on it, it will link to that page Alright, and you can also select a image as well. You can upload your own icons if you do like try to go to Google Images and find an icon I recommend finding the same sort of set of icons Otherwise it’s gonna look really weird. Or you can go to Fiverr and get some professional ones done If you actually set in a link here, what I do want to point out is it’s going to actually let’s say copy that for a sec and pop that into there If we go to done and save it Close it Then you’ll see that the link color changes to red. So we’re gonna turn that on Again, double click on that you can go to styling and then go to link Then you can change that color of the text back to maybe I think 4D4D. Something like that So it’s a little bit more subtle and it looks better alright. So we’re going to actually delete that link and then click on done Now all we got to do is create three more So I’ll hover over the featured module and you can select this one with three columns You can select four columns if you have four different ones. I only have three so we’re gonna select three Then we’re gonna duplicate it two times so duplicate duplicate Then drag it and then pop it over. Just like that. Okay, so all you need to do is to double click this one here change the title so let’s say drag and drop drag and drop builder Then I might change the icon here to FA Cubes because I already know what I want and then click on done Click on this one change this one to maybe free support So again if you have any issues, you can email me [email protected] Then we can scroll down here FA users click on done That is pretty much it. So what we need to do is add some spacing to the top here and the bottom If you go to www.xero.com.au. Look at the website And they have spacing everywhere. It makes things look really nice, clean, and simple Everything is laid out really nicely. So this is a really good website to take inspiration from when you’re actually creating a layout as well So we’re gonna go back here and go to the row options. Styling, padding deselect apply to all. We’re gonna add 5% to the top 5% to the bottom, so that’s normally what I add in I think I might have added in the wrong one, just let me check Okay, so I put them into two different rows . So what I’m gonna do is drag it below that and put it below there So now that is all into one row. Before, it went into the third row. So we’re gonna click on the row options Styling and then we’re gonna go to Padding Just like that. 5% here, 5% there click on done save Let’s close it I think that is pretty good to go So the only thing I want to change is the h2 tag I believe that is not the Roboto font that we want. So we can go to customize Then wait for that to load Click on the headings tag Heading 2 fonts. I want to change that to Roboto Okay, so it keeps everything consistent. I’m gonna change that to normal. I think that’s pretty good and publish and close. So the next part that I’m going to be showing you how to do is the gradients and also adding in that really cool particle effect Gradients are really good to separate content, and it also adds this cool and fresh vibe to your website as well And it’s good to add on top of images If you want to make the text pop or if you want to sort of keep that color scheme of your website and that image that you’re using if you add a gradient Which is maybe similar to your main color, then it blends everything in really nicely So make sure to turn on your builder, and then we’re ready to add in our gradient. So this is the third row Scroll down and click on the options here, and then click on styling So if you click on the background here, you can add a gradient that way, or you can also add in a gradient using a row overlay. So the difference is if you actually set in the background gradient Then you can’t add a background image and then have a gradients on top of that anymore So if you want to sort of have an image as the background And then you want to have a gradient on top of that image, then you got to set in the background type image here,and then have the gradient here because we’re going to be adding the particle effect later We want to not add the overlay otherwise it’s gonna cover the particle effect So we’re gonna set the background type to gradients for the background section So when we’re choosing the color of the gradients, I like to look at the colors we’ve actually used for the website You can pretty much eyeball the color or you can download a tool which I think it’s called Colorzilla It’s also a Chrome extension, and then you can select it, and then you can use it to pick color from the page I think you have to turn off the builder first, and then you select the section of that image that you want, and then it will show you the color all Another really good resource is going to www.uigradients.com Over here, you can click on show all gradients Let’s say we have this image here, which is sort of like a greenish blue. Then you can go here and maybe you can click on the green and you can find a gradient which sort of matches with that color because if we actually select maybe like a red one It doesn’t really match with the color of this background And it’s gonna look kind of weird. So that is why we want to match the colors And it’s gonna make your website look really good. So you can select this and let’s say you picked rainbow blue You can click the color code here We get twice so it’s copied, and then you can click on the first thing here and then paste in that color code just like that, and then go back to UI gradients, click in the second color code. Double click it Then click on the second one And paste that in okay. So it looks something like that It doesn’t look as good so you can actually just adjust it a little bit. I actually know which color code I want to be using so I’m gonna type in 4 C D B 7 C Then this one here is going to be 38AHF2 Something like that. And then I want to change the rotation so to 125 degrees and click on enter Then what I want to do is add some spacing. So for example want to add some padding let’s add maybe 10% to the top and 10% to the bottom Something like that. I think that color is okay. I mean you can tweak it a little bit let’s maybe make it a little bit lighter or something like that Little bit darker Okay, I think that might look good, and you can also switch it around like that Change it like that. You can also set in radial Okay, I’m gonna keep it linear. I think that might be a little bit too green. So I might click on that Let’s make that a little bit less green Okay, and then click on done So what I’m gonna show you now is how to add in a testimonial slider. So click on the + icon and then look for testimonial slider and drop that in So testimonials are important for your websites to add in social proof So if you don’t have any testimonials, get some testimonials from the customers because I think that’s really important in people actually buying whatever you have to offer So for the testimonial title I’m actually going to delete that For the content, I’m gonna grab maybe some lorem ipsum paste it into there I might add in some quotation marks. Like that. We’re gonna drop in an image. So click on browse library upload files select files and I have a image there And you can add that in So I’m gonna click over here because I’ve already uploaded that And the size that I’ve set it to be is about 300×338 so anywhere between that is fine That is about 41 kilobytes, so it’s not really big. It won’t take long to load insert file URL Ok so that image is probably a little bit too big We’re gonna scroll down and you can change the person’s name, position and whichever company ABC Anchor Something like that. You can also add in a company website Because this is a testimonial slider you can also add in additional row so you can add in another person’s testimonial and things like that. I’m just going to delete that for now Scrolling down I want to change the image width to about 150 You can probably just leave the height because it’s going to scale down proportionally and then you can Play around with the slider display options here Because it’s a slider you can change the speed and the effects and basically everything here, and then it will actually appear So you can play around with those settings So what I do want to change is going to styling, font, and changing the font color to white Okay, so that looks not too bad. We’re gonna go back to the testimonial slider and let’s add in a testimonial title So I’m gonna set an amazing support. Something like that I think that looks pretty good. If you want to, you can also delete that if you want to Something like that And then you can actually use this section here John Smith and then you can put a italic. I think that looks pretty good. John Smith, maybe he’s from Canada I think that looks pretty good, actually So we’re going to click on done That is pretty good. So now we’re gonna show you is adding a particle effect I know you probably don’t you want to add it over here But I’m gonna show you how to do it in case you want to learn how to do it It’s really easy and it’s really cool. So what we want to do is go to Google and type in maybe Themify Particle Effect. Click on enter and click into the first result here Scroll down here, scroll down to this yellow section, copy everything here to your clipboard, copy that Okay, we’re gonna save the Builder and exit out of that first We’re going to hover over logo and click into the dashboard area Then we’re going to go through Themify ltra, Themify Settings Scroll down to the header code Then we’re going to paste in that code into the header code area. And then click on save Once that is done go back to visit site Turn on the Builder Scroll down to the section here and then click on options Now for the additional CSS class, all you want to do is we want to actually add Particles-js so i’m just gonna copy this Paste it into here. Just like that Then click on done We’re gonna save it Close it and hopefully that particle effect will show up after you refresh it Okay, so I think that looks pretty cool you might want to add it to your hero image if, for example, you might be like a tech company or something like that and I think that’s really useful to know So the next part, I’m gonna show you how to add in your blog post and how to add in Your featured blog post on your home page So blog posts are really important because you’re able to actually create free content that people are actively searching on Google. So for example, if you want to learn how to get a six-pack like how to get a six-pack Thousands of people search this key phrase every single day So if you’re ranking on page one, for example, if you click into this post here thousands of people click into here to read this blog post So that gets you traffic and once you get traffic Then you can sell pretty much anything that you want like you can have affiliate links You can get people to sign up to your newsletter You can get people to you know buy whatever you have in your shop Blogging is a really good way to actually build Authority for your website And it actually rank you forother keywords related for your website as well So if you want to learn a little bit more about blogging then I recommend going to Smart Blogger And if you want to learn about SEO and traffic you can go to www.neilpatel.com. You can scroll down here to the blog He has a lot of really good blog posts onabout generating traffic conversions, s social media, and things like that And also a good one is www.backlinko.com and you can click on the blog here as well So I’m just going to show you how to add that blog post in WordPress and add it on to your home page So to add a blog post we need to hover over the section here, click on the dashboard Then we’re gonna click on posts Okay, so by default you should see a hello world post. We’re gonna actually trash that. So trash that Then I want to go into the trash and delete that permanently. So let’s click on trash delete permanently Then we’re gonna add in a new post so click on add new up here So we’re gonna set in a blog post title So for example I might type in Let Go and Chase your Dreams So this here is your text editor, and I’m gonna paste in some lorem ipsum texts, so let’s just copy some of that Ctrl+C and paste it into there. Just like that Alright, so to add a link It’s really easy. So for example, you want to link it somewhere this text then highlight it and then click on this icon here And then you can paste in the URL that you want to link it to. Normally I click on link options. For example, if I want to link it to lorem ipsum I’ll copy the URL, paste it into here. Because it’s an external link I’m going to link it to open up in a new tab. You can also link it to existing content on your website Normally it shows up here. Or you can search for it as well. So click on add link Once you’ve done that then that will create that link. So to add an image, it’s really simple as well You can click on add media upload files, select files I’ve also got a blog post image that you can actually add in. So we’re going to add in this one here, post image 1 Open and then insert that into the post To add a video. So as you can see, that’s not very high-quality. I’m actually gonna go back and edit that For that size, I’m gonna select full size Update. That looks much better To add in a video, lets click enter and make some space. So for example, we’re gonna upload a video. Just copy the URL Then go back here and paste it in just like that. So wait for about one second And it will load up and that is all good All right, so the next thing that you want to do is you want to set in a category. So click on add new category So for example, this might be a lifestyle category or fashion category or anything like that Add new category. Make sure that is selected Tags, for example, this blog post might be talking about going to India so your tag might be India This might be talking about chasing your dreams, so one of them might be Chasing dreams, and then click on add So we’re going to set in a featured image as well. So click on set featured image and click on upload files select files So we want to upload this featured image 1 and click on open So the file size that I have cropped it to is about 1000 x 667 pixels and the size is about 129 kilobytes So I’ve basically cropped all my images on photo before uploading that way It’s a lot simpler and all the sizes are the same So that’ whenever you’re displaying it on your home page, then it’s all gonna align up properly So if you click on this one as well. This one is also the same size For your blog post, you don’t really have to have the same size images but around this size is pretty good But for your featured image, I recommend having all of them the same size and then set in featured image I think that is pretty much it. You can also change the Post options. So for example, the post layout for each specific blog post settings Or you can set that in the Themify Settings default post layouts, which I’ll show you in a sec. So once you’ve done that click on publish Wait for that to actually update. So it will actually show up post published. Click on View Post This is what your blog post actually looks like right now Okay, so what I’m gonna do is I’m gonna add in another two posts and then show you how to add it to display on your home page So you can also hover over new and then click on post Right now. I’m just going to quickly add it in You can add in your own place as well Okay, so that was my last blog post and you can actually click on all post to view that and to make sure that your posts have been set in So what we’re going to do now is go to our home page. So going to visit our home page and we’re gonna turn on the Builder Then we’re going to scroll down to this section here. We’re going to drop in maybe a text module We’re going to put in maybe Our Latest Set that to heading 1 or maybe not heading 1. Heading 2, sorry, and go to styling Click on font Align it into the center Click on done. Then what we’re gonna do is drop in a post module. So drop that below the title Then what you want to do is you can change the post layout So what I’m gonna do is because I have three posts I’m gonna choose grid 3. So you can play around with the settings, but this is what I recommend for your home page. So scrolling down, you can set it by specific categories and things like that Post content, you can change it Anything you like. Overlay, you can actually click on the preview, and you can do something like that Change it to Polaroid click on the preview That Is pretty cool as well. It really depends on how you want to display it What I’m gonna do is set it as default For the post filter, this is the post filter. I’m gonna select no Also for the post gutter is the spacing in between. I’m going to leave it as default. The number of posts I’m going to display as 3, limit it Then scroll down So you can play around with each of the settings here. You can display excerpt, or you can display none Or you can also display all that content.So I’m just going to display like a little short summary You can hide the images, change the sizes, hide the post date hide the post meta Which is the author and the category and the tags and things like that. You can hide that if you want to I think that is pretty much it. If we go to Styling here So you have the option to style the module title, the post title, and everything like that So if we click on done Then I think that is pretty much it.So what we’re gonna di is add some spacing on the top And add some spacing to the bottom. So click on padding, deselect that 5% to the top, 5% to the bottom click on done I think that looks pretty good. So you can save it Close it and see how that looks first. Just go down That looks pretty good So let’s say if we click into one of the blog posts You can see that the link is actually red What we’re gonna do is actually change the body link color right now Okay, so we’re going to go to customize So the link color that we’re going to be choosing is a blue. So blue is actually a really good color You’ll see it on most websites, actually It’s really good because people are able to easily distinguish the blue color and the text around it so they know it’s a link. Most people actually don’t know but 8% of men are colorblind and 0.5% of women are colorblind and the most common deficiency is red and green So it makes it easily readable by people who are colorblind, and it just looks good anyway But if your main color might be red I mean you can still use it, but if you can choose blue then choose blue.So click on body here and click on body link So the color code we’re going to put in is 2DA0E3 Click on Enter So that changes. So what gonna do now is change the body link hover. So I’m going to copy this color code here to my clipboard. Go to 0 to 255. Enter in a Color Enter color and I’m gonna select maybe two shades darker. I guess it gives a slight effect so if you look on Tesla They go lighter because I think the red they’ve chosen is quite dark already. If it goes darker, then it’s just too dark So we’re gonna go blue, a darker blue. Paste that in there So when people hover over that, then it should go darker I think that is pretty nice. You might want to go three shades It’s really up to you. So I might change that. Actually, let’s go three shades and then click on publish Okay, and then close that Let’s go to our home page, and I want to show you something as well So people have been asking how to actually add a read more here.So to do that you need to go to the dashboard Hover over Themify Ultra, Themify Settings Go to default layouts Then go to default archive post layout Scroll down to the more text, and you can click on display more link in the excerpt mode as well. So select that and You can type in maybe read more or more, whatever you want Let’s click on save Hopefully if we visit our website here It will actually show up just like that That is it So what can I show you now is I’m going to show you how to do the dual parallax effect, which is really cool You’re going to stand out from the competition. You can tell an interesting story or use it for whatever purpose you want. So for the dual parallax effect We’re gonna have to get two images. The first image is for the foreground so Try to get maybe like a laptop or a book or something that you can easily cut out from So with like sort of like a square You don’t want a mountain or something like that Sometimes it’s really hard to cut out, but you can. It just takes a long time scrolling down Like maybe this one might be a really good one because you can easily cut it out You might even choose a book or something like that. This one is also really good as well So I’ve already chosen the foreground image which is a laptop and then what you need to do is go to Pixlr.com So P-I-X-L-R.com and then scroll down To the Pixlr editor, so it’s very similar to Photoshop It’s free and it’s online so anyone can access it So once you’re here, then click on open image from computer So you should have downloaded a laptop image from your computer But if you haven’t then I’ve included it in the actual folder. So click on foreground to crop on Pixlr Open that up What you need to do is we’ll need to click on the lasso tool here So if your image is not very zoomed in then you probably want to zoom in a little bit more.So maybe let’s go 30% Like that and move it up Okay, so it’s a little bit easier to cut out or see. So click on the lasso tool And then click on the polygonal lasso tool So what we’re going to do is cut out the background image of the laptop So we need to just point our cursor there And then click it one time and then basically it will show that line and then drag it across Then click it again, and then let go, and then click it one more time One more there, and then make sure to join it up exactly where it started Okay, and then it should make that selection So once you make that selection then over on the right hand side here you need to Double click on the lock. So that unlocks the layer And it should show up as layer 0. Once that is showing up as layer 0 then you need to click on the delete button So that deletes the background and it makes it transparent What we’re going to do now is we need to change the image size because it’s quite big and it’s going to take a long time to load. So click on image, image size The size that I’m going to change the image to is about 1600 in width and it automatically changed your height. So I’m just going to leave it as 1067 and then click on OK So your image is ready to export. What we’re gonna do is click on File. Save And we want to make sure to save it as the PNG format, which is the full quality And then click on OK Then save it as maybe laptop cropped I’ve already saved it and I save it again So once that is done, then look for a image for your background For example you might use maybe something like a mountain or you might use your face It really depends on what you want to show and what story you want to tell So download the image and save it onto your computer And then you can go to photo and then you can edit the size of it down to maybe 1600 X 900 or 1600 X 1000. Something similar to the size that you’ve exported here Cause you’re gonna be showing that background behind this laptop image here Sf you’re good at Photoshop, then what you can do is actually Get that image, and this is the original image. Actually I cut it out the original image.The original image is Let’s go back a little bit it’s something like that. Basically, Icut it out, cropped it out because I don’t need this area here because the area is actually covered by this section here We can make the image a smaller file size if we do that in Photoshop, and then we just paste it in like that It’s just white space here because it’s not needed and then you can save it And then you can go back to your website now So we’re gonna scroll down we’re gonna insert the dual parallax here. Turn on the Builder We need to click on the options, and then we might set in the full content with. Go to styling Background. And we’re going to set in the background image so click on browse library Make sure to upload that file from your computer So if you click on select files, I will have that flower file there for you to actually upload as well So you can click on open and upload I’ve already uploaded before So here it is and this is the file size about 1600 x 900 in height 141 kilobytes so not that big, which is really good. So insert file URL For the background mode, I’m going to select a parallax scrolling Then what we’re gonna do is just hit undone So now we’re gonna set in the foreground. So if you actually hover over here on the left You’ll see this styling paintbrush icon . So click on that That is for the column styling so you’re able to set in a background for the column So this is where we’re setting now laptop image. So click on background Then browse library, upload that laptop we have cropped and saved.it has to be a .png Make sure that when you save here, It shows the checkered box. Go back here and then insert file URL Okay, so you can see that image there, that laptop, slightly But we need to stretch that image a little bit more.So the first thing you’ll need to do is change it to full cover For the background mode and then for the padding we want to deselect that. I want to hit about 25% adding to the top, and we want to do the same for the bottom Okay, so that looks pretty good we’re gonna click on done Alright awesome.So what we’re going to do is add a little bit of text and a button so click on the plus icon drag in a text module Try to put it in the middle like that. It should show up that blue line and then drop it Okay, so we’re gonna type in be different So I’m going to show you how to arrange it the text on the right hand side I showed you before but I’ll show you again, so we’re gonna set that to heading 2 Then for the styling what I’m gonna do is we’re going to click on styling tab, font. We’re going to align it to the right For the padding, because I don’t want it to be so close to the end of the screen, we want to set in maybe 5% padding to the right hand side so it gives a little bit space I think something like that looks good And then we’re going to get this button and duplicate it So what we’re gonna do is hover over here. Click on 50% so it zooms out. So it’s easy to move So we’ve got that button there, and we’re just gonna click on it and drag it down to this bottom section Drag it below be different Double click on that and what we’re gonna do is actually change that color to our accent color so it matches well with our background flower image Also, because the background is white you don’t want to leave it as a white background so either go for a dark colored button background color or use your accent color. So what we’re gonna do is we’re gonna actually scroll back up and get that color code that we used here Let’s double click on that and that will actually open up the typewriter module go to styling and then click on typewriter click on background Then what we need to do is click on that color code and then scroll back down To here, the button, and double click on that button So it automatically saves the other module, so it’s a lot quicker to sort of edit your website So what we’re gonna do now is go to styling Button link, because we’re editing the button link, and we’re changing the background color so we want to edit that from white to that fuschia or that pink color and The background hover, what we’re gonna do is we’re gonna go to 0 to 255 Okay, so you can enter a color her. I’ve already entered it in paste that in Make sure to delete that hash. Enter in the color And then we’re gonna do maybe two shades darker, or you can go to shades lighter, but I think darker might be a better option So click on that color code and Then what we’re gonna do is we’re gonna go back to our website Paste that in and then click on the link. We want to change that link color from that dark gray to a white Change the color hover to white as well What we’re gonna do is we’re going to click on the general tab and we’re gonna arrange it to the right hand side as well So text align to the right Padding, we’re gonna add 5% as well, which is the same and then 5% to the right and click on done I think we can save it and Let’s close it and then give that a little preview Okay, so I think that looks pretty good. You might want to reduce some spacing there That’s up to you, but I’ll show you quickly. So turn the Builder and I think what we’re gonna do is double-click on that styling and then click on margin Then deselect that and then try to maybe put in minus 1% Well, maybe let’s go 2% Okay, I think 2 % is good. So the difference between margin and padding is Let me show you an example. So padding is inside the actual box so if you see that invisible line box Padding is inside that box So margin is actually outside that box. So I’ve added the padding for the hero image So that’s the inside spacing. So what it’ll actually do is if I want to change the outside padding Then I click on the options styling and then if I deselect that and let’s go maybe 20% to the top, that edits the spacing for outside that invisible box So that is the difference so if you ever want to sort of reduce the spacing between the text module and the other module then you can use minus margin to the bottom or to the top Okay, so we’re going to click on save and close The next section I’m going to show you how to add In a video background as well as using the video module and showing you how to add in a gallery where we can actually showcase your work and things like that So I noticed something while I was scrolling down. So as you can see there’s white space here when you’re scrolling down and we don’t want that. So we’re gonna quickly fix that before we move on. So turn on the Builder and Then just click on the row options here Go to styling, background Make sure the background mode is set to parallax, but the background attachment, change that to fixed Okay, so once you’ve done that then you can click on done and the white space will not appear anymore And it still looks just as good or if not better Save it and close it So there’s basically two ways of adding in a video. The first way is adding it as a video background So you can go to the row options styling, background, click on video and then go to YouTube. Make sure to upload your video to YouTube first so it loads faster because it loads on YouTube servers rather than your own paste in the URL here Then click on the outside, and then it should show up So make sure to disable the audio. You can also disable the looping which is the replay Make sure to set in a background image because on mobile it doesn’t display the video it will display the background image that you upload through here What you can do is add in some padding Like 20 to the top and 20% to the bottom And then you could add in text, you could add buttons, and anything that you want to show here So you can use it as a like sort of hero video for your homepage as well So the other way is to use a video module so what I’m gonna do is click on done first and then I’m gonna delete that for now Then drag in a video module and put it in there just like that Okay, so all you need to do is paste in that same video URL, and it will pop up Okay, so if you click on done You can actually arrange it in two columns. You can have your video here. You could have some text here explaining what the video is about or you can do sort of like a cinema effect So I’m going to show you how to do that really quickly. So click on this one here To display it as just one column, and then we’re gonna click on options styling Then we’re gonna click on maybe padding, so we’re gonna set some padding first, some spacing, deselect I’m gonna do 5% to the top This one. I’m gonna do 3% to the bottom Okay, once that is done, we’re gonna do a background color So for example we’re gonna go something dark. Let’s try 222 Something like that or maybe a little bit lighter really depends.So I might go to 222 for now, and then click on row overlay Then for the overlay hover, we’re gonna actually set in a darker color So we’re gonna do it about just 100% black just like that Okay, so when we actually hover over it,It goes darker. It’s like what I’ve done Save it and Then close it Okay, and then we’re gonna scroll down to the section with the video So right now, when you’re not hovering over it It’s sort of like a really dark grey, but when people hover over to watch the video that you have here then it goes dark around it. So it creates sort of like a cinema effects which is cool Another thing to note is if you upload your own video You only have one video Then you should take into consideration the thumbnail that you’re gonna use for the video So I picked this video because it has this greenish blue background which blends in with the rest of my website, my gradient area, and also my hero image So it’s something to think about as well with your design. So we’re gonna turn on the Builder Then I’m gonna show you quickly how to use the gallery module. So click on the plus icon drop in a gallery module pretty similar So I think that automatically popped up, but if it didn’t then it shows this thing here So we need to click on insert gallery Upload files, select files. I’ve also included Six gallery images which you can actually upload and I’ve cropped them beforehand on photo So I’ve already uploaded them as you can see, and the size that I cropped it to is about 1,000 X 666. So it’s important that you crop them all to the same size so it lines properly when you put it onto your homepage So we’re gonna select these six images Then add to gallery Update gallery, and then it should show up like that Okay, so you can play around with the settings here. For example setting it to columns of three So you can play around with the image appearance as well but I don’t think that’s necessary, so we’re gonna click on done and You can add in a gallery title there if you want to with a text module So we’re going to delete that for now. And you can also add in image modules as well Drop in an image module here You can upload your image, and then you can click on done, and then you can also arrange it into three different columns if you want to display your Images like that. So the next thing that I’m going to show you is, I’m going to delete this first, is to show you how to make sure that everything is fully responsive on mobile devices. So as you can see this text here, doesn’t look very good. Okay, if you scroll down to this section here This text sort of overlays the laptop and it’s not as visible, so I’m gonna show you how to actually fix that as well So to edit the heading one text for mobile devices, we’re going to click on customize Make sure you’re at Themify options. Click on the Advanced tab, and then you can click on headings here. So on the bottom here, you actually got the styling. For tablet landscape for the portrait and also for mobile So if you actually click on the heading 1 font now, it says 95. If you click on the tablet for landscape Then you can actually change it for each specific device size. So what I like to use for Tablet is use 5 and set it to 5 EM. EM basically means it scales down proportional to the size I mean to the screen size and then click on the tablet for portrait, and then I might set in 4 or 4.5. I think 4 looks okay, and then click on the mobile I’m going to change this to about 3.5. I think that looks okay. So you can adjust it depending on what results you actually get. So we’re gonna scroll down here to the bottom Okay, so actually on mobile devices, this thing is actually a lot closer to the screen so we can actually change the heading to font here. But if we actually change the heading to font here Then for example, let’s say we change it to 1.5 EM or let’s change, let’s say 1 EM for mobile devices. What that changes is also changes the heading 2 that we’ve been using for this section here And we don’t really want to do that because that would be too small and it needs to be a little bit bigger So I’m not gonna change that here at all. We’re gonna publish this first Close it We’re going to change it for that specific module itself, so we’re gonna turn on the Builder Scroll right down to the bottom Double-click it Go to styling. So this is the heading 2 tag. Go to styling, click on the heading We want to click on the mobile styling here, so it’s gonna change that to that. And then click on heading 2 fonts, and then you want to change it to maybe 1.5 EM for the heading 2. So what that does is only editing for this specific module only. It’s not gonna edit the size that you see here Okay, click on done Let’s save it And then give it a close. So once that is done, go to www.responsinator.com. Put in your URL We’re gonna go and hopefully that looks a lot better Okay, that looks pretty good. Just going down, that size stays the same Scroll down to the bottom So it made it a little bit smaller, and I think it looks pretty good right now So what you want to do maybe is you want to let’s say you don’t want to have this section here Because I don’t know you might have a huge block of text and you don’t want people to scroll down to the very bottom as it can take a long time Okay, so you might want to remove certain sections. So you can turn the Builder and to do that, it’s quite easy Each row or each module has these three little dots and you can hover over it and you can set the visibility So you can offer a hover over here, set the visibility. So let’s say you want to remove this entire section Click on visibility, and you can hide it on mobile and tablet as well if you want to and then click on done Okay, so on tablet, it’s not going to show up on mobile. It’s gonna not show up as well Okay, for desktop, it will show on desktop So that is a way that you can play around with the layout of your pages So click on done and click on save. The next section, I’m gonna show you how to Import layouts for your back page because I don’t want to show you how to build everything You know 80% of the things now I’m just gonna show you some really cool things. So let’s click on the about page Turn on the Builder and then we’re going to do is hover over here, import from file, click on OK Select upload and then browse to the about page to import the zip file Okay, so this should be your images and plug-in folder, which you have downloaded earlier We’ve got open That will essentially just load up your layout which are pre-created for you And you can just edit the images. So for example you can just click on the row options here and go to styling background and upload browse library and upload your own image. So keep everything the same click on done You can double click on this section here to change the text You can also double click on the image here to change your image and double-click this section to change your About Me So click on done If you actually double click the icon section then you can actually put in your email So instead of [email protected] Put in your email and as you can see it has mail to and then the colon So what that does is people can click on it, and then it will open up the default email browser with the actual email In the to send name thing. So we’re gonna scroll down This one is called me. So T, L, and then colon, and then I have the phone number there So you can do that as well. So people click on it on maybe their mobile device It’ll automatically put that number into their call screen same with the Facebook You can change the label as well, and you can change your Facebook profile URL Okay, so it’s really simple you can also change the colors of each of the icons, and then you can click on done So one thing I want to show you is if you actually hover over here on the left. So you can change the number of columns But we can do is actually change the column alignment So right now, it’s the first option. If you click on the second option notice what happens here Okay, so it basically aligns the text and icons in the middle. So for example if you change it to that Hold on, change it to that one. It’ll move down. And then if you change it back to that one, it goes up So we want to keep it in the middle So that is pretty much it. If we actually save it and you can play around with all the different types of modules here We’re gonna close that and give that a little preview first So as you can see, there’s a little spacing up here to close that gap. Click on edit page Then what you want to do is scroll down to Themify custom panel Page options tab. And for the content, we’ll select full-width click on update Then click on view page Okay, so that is done. So the next section, I’m actually going to show you how to import pre-created layouts which are created by Themify themselves, and this is also really cool as well because I’ll show you how to Import pre created rows, which you can mix and match to create your own custom layout So we’re on the services page. We’re gonna click on turn on builder Then what we’re gonna do is hover over here, this layout icon, and then we’re gonna click on load layout So these are all pre-designed by Themify And you can select one of these. I didn’t want to show you how to just import a layout I might make a quicker tutorial Maybe like a 30 minute or a 60 minute tutorial To show those of you who want to just get a website up and running as quick as possible But I think learning the skills to do it is much more important because if you actually just import a random layout home You won’t really know what to do. So let’s just take this for example, Corporate Page 2 and we’re gonna select it and click on append existing Hopefully it will pop up Okay, so it pops up like that and have your layout there. We’re gonna set it to 50% so you can see what’s going on So for each of the sections, you can just remove it. If you don’t need it, so for example You don’t need to spot, just delete it scroll back up and double click to edit the page So really simple, pretty much the same. As any other module that you have edited before What else you can do is you can scroll down to the bottom here hover over the row and click on the plus icon You can also click on the rows here Okay, click on that again. So what you can actually do is import different rows which are pre-created as well So as you can see you might want to import, maybe, this hero banner image drop that into here Then you can basically mix and match your different rows and create your layout like that So you can also access rows by clicking on rows on this section here as well So that is really easy to do. Now the next part that I’m gonna show you is we’re gonna edit the blog page So we’re about 15 minutes away from finishing so hang in there If you liked the video so far, make sure to give it a thumbs up and share it with your friends It really helps me out to create more videos like this Okay, so we’re gonna close on that and then we’re gonna click on to the blog page So I’m going to show you how to display your blog post and also at the sidebar section So we need to turn on the Builder first, and we need to separate the columns into two columns Something like this. So select that one and then what we want to do is drag in a post module, drop it into there For the post layout, I’m gonna select the list post. So scrolling down We’re going to disable the post filter. Normally, there’s a filter thing up here I’m gonna select no and I’m gonna limit to five posts, that really depends on you And you can order it by dates, descending or ascending. and other things here as well For the display, I normally like to display it an excerpt I think I keep everything else as default but you can play around with the settings and everything here Scrolling down here Normally, there might be a page navigation thing. So for example, if you have ten posts And you’ve only set it to display five posts, then it might have the first page And then you might have # 2 which is the second page. So I actually want to show that so I can select No, so I don’t want to hide it Then you can go to styling. You can also edit each individual elements of the blog post. For example the post title The post meta section here, you can also edit the post date, the fonts, and things like that Okay, so I’m going to leave everything as defaults and then click on done. The next thing I’m going to do is go over here and drop in the widgetize module into the right-hand side For the widgetize area, we’re gonna select the sidebar Click on done. So by default it looks something like this Okay, so I’m going to show you how to actually edit the widget section right now So I’m just gonna click on save and I’m gonna close it right now Okay, so let’s hover over the dashboard icon and right-click and open in a new tab That’s going to open up your widget section and you can actually go to appearance widgets as well So what we’re going to do is we’re going to remove the meta The archived, recent comments. So it’s really simple So click on here, the down arrow. Delete it Archive, delete it The meta, delete it. So these are the available widgets Which you can drag in and basically it will show up once you put it in.So let’s take for example if we want to maybe Let’s drag in an image widget So you might have an image of yourself. You can add image, let’s say we add that one in then we can click on save We can also add a text widget, so I might add that maybe above that Let’s say, about me “Hi, I’m Hogan” Something like that. If we can save You can also drop in the Themify social links below that Okay, open link in a new window we can save Then refresh your blog page, and then it should edit just like that Okay, so it’s really simple to configure your widgets using one of these things here. Now what we’re going to do is I’m going to show you how to actually Center everything, change the date, and show you how to center this section as well. So click on turn on builder You can double click the post module. Click on styling, font And then you can click on text align to the center and everything will go into the middle click on done double click this section styling click on font a Align everything in the center, done So some people don’t really like the appearance of that circle thing so we’re going to change it to an inline text Let’s save it and close it let’s go back to our dashboard area Go to Themify Ultra, Themify Settings I’m gonna close that page. Let’s click on default layouts. So for the default archive post layout, scroll down to hide post date, and then display post date as inline text instead of that circle style Same thing. Scroll down to default single post Display as inline text, save it. Now, let’s navigate back to our blog page Scroll in like that. Then it should show up something like that So as you can see that post date is not really centered. I’ll show you how to fix that in a second Let’s click into here. Now, this is your blog post and I also want to change the Link hover color. Everything else looks okay I’ll show you how to edit the button color later on So what we’re going to do is we’ve got to go to the customize section Then what you can actually do is make sure to select the Advanced Options and then scroll to post So this is the post date. So scroll down to post date Let’s align that into the center like that.This is the post title hover So let’s close the post date first post title hover What I’m gonna dois change it to the same blue So we can actually click on body click on the body link hover This is the same blue that we’ve set in here So I’m going to copy it straight from here to my clipboard and then paste it in So that ensures everything is consistent. Paste it into the color section Just like that. So when you hover over, it should be blue Okay, looking great. Click on publish. As you can see, the sidebar here is aligned in to the left hand side You can actually change that as well . So you can look for sidebar So you can click on sidebar font, and you can set it to a line into the center just like that So close that and publish it The next section that I’m going to show you is how to edit the contact page, add in a contact form As well as a map So we’re on the contact page, and I’ve turned on the Builder already. What we’re gonna do is set in a hero image first really quickly.We’re going to go to options, and then we’re gonna go full with content, styling Background and background image. We’re going to browse library, upload files, select files, and the image that I want to upload is the contact hero open that then insert file URL For the background mode, I’m gonna select, maybe just the full cover Then for the background position, I’m gonna leave it as is The background attachment, I’m gonna set it as fixed, maybe And then what we’re gonna do is click on padding Let’s add some padding so 15% to the top 15 to the bottom as well And then I’m going to add text in the middle. So we’re gonna click on done And we’re gonna remove these spacing on the top first so edit in back-end We’re going to scroll down to the Themify custom panel. Click on the page options. For the content width select full width update Once that has updated, we’re going to go back to the contact form by clicking viewing page So that is done. Now, we’re going to do is turn the Builder again, and we’re gonna set in some text So we’re just gonna drop in a text module And I’m just gonna put in contacts heading 1 Go to styling Fonts, align it to the center first, and change the font color to white so it’s more visible Then click on done. Okay, so obviously you can add a sub-headline as well, but I’m just gonna leave it as that So what gonna do is on the second row we’re gonna separate the columns into two So one side is for the contact form, the other is for the map Okay, so if you actually scroll here there is no contact form module that you can drop in So what we need to do is actually just save it first and close it We need to go to our dashboard section. So click into your dashboard Then make sure you have actually installed the plug-in which is the contact form 7 plugin And then you can click on the contact here so click on that And then by default they’ll have contact form 1 set up already. So you want to click on edit Then here you can click on the mail tab and make sure you’ve set in your email here. So for example We’re going to set in [email protected] So all the messages will be forwarded to this email here Then we’re going to click on the form here. You can also edit it as well You can edit the text and you can also click on the documentation and FAQ to learn how to actually configure to whatever you need. But we’re gonna leave it as that and we’re gonna save. Once that is done Then this is a shortcode. You can actually paste this shortcode anywhere on your page or your post or even the text widget and the contact form will actually show up So you don’t need any code, you just need this shortcode So copy that to your clipboard, and we’re gonna head back to our contact page Click on contact and we’re gonna turn the Builder again To add in that shortcode we need to drop in a text module so drop it into here Paste that in and then within a few seconds it will actually load up, just like that You’ve got your contact form, nice and simple. Click on done The next thing we’re going to do is add a map. So you can look for a map module here and drag it So for example I’m in Melbourne,Australia. You can type in your address as well You can also set in the zoom, you can also set in the height. I might change the height to about 500 pixels so it’s a little bit bigger Let’s change that to 5. That looks pretty good, and you can also play around with the settings here so we’re gonna click on done Then what we’re gonna do is we’re actually going to click on save first and close it, and you’ll notice that the map hasn’t showed up yet. ’cause we need to actually add in the Google API And I’m gonna show you exactly how to do that And then we’re gonna come back and add some spacing up there and add some spacing down here And change the button color So let’s click on the dashboard Then you want to click on hover over Themify Ultra, Themify settings Then scroll down to Google map and click on the Google map So for your Google map key You’ll need to have a API here. So make sure to login to your Google or Gmail Account first and then once you just click on the generate API then automatically log you in to your Google developer account. So by default you should have one Then what you’re gonna do is follow these steps. So go to the Google API console Wait for that to load and then we’re gonna do is maybe create a new project. Click on continue That might take a little while So once that is done, then you click on what credentials I need Basically here is your API. So you’re gonna copy that API and then all you need to do is click on done So once you have that API you can go back to the Themify ultra here and paste it in let’s click on save Hopefully if we go back to visit our website, go back to our contact page. Hopefully that map will actually show up so click on contact Scroll down and here is your map. So we’re going to turn the Builder and style our page a little bit. Click on options let’s click on the styling here, and let’s add some padding to the top and bottom 5% to the top, 5% to the bottom What we’re gonna do is click on done The next thing that we’re gonna do is we’re gonna hover over here on the left Then click on this middle one for the column alignment, so it’s going to line the map with our form That is pretty much it.Save it. Let’s edit the button form color, so close it We need to go to our customize section Then this is a contact form so we can click on forms here. So click on forms This is the form button. So you can click on the form button and you can change the color of the background So let’s change it to a dark grey Which is our main color that we used for our website and also our header wrap area Once that is set in, you can also set in the hover color. So the form button hover color click on that You can go to the 0 to 255 Enter in a color to, 222. Enter in the color And you can go two shades darker or two shades lighter. So I might go two shades darker perhaps For the background color, paste that in And then that is pretty good to go. So you can click on publish When you hover over that, it should go darker. Close it And I think that looks pretty good and pretty good to go. Now if we actually go to the blog and the blog post You’ll see that the contacts- I mean the comment section, the button will change as well Okay, so it matches really nicely with the whole entire theme Now what I want to show you is to just finish off the websites. As you can see, the footer there’s this sort of like slide border there around it. It doesn’t look really nice There’s also a slight border on the header as well, So I’m actually going to show you how to fix that. So go to customize Scroll down and click on Custom CSS So if you’re a developer, or you know CSS, you can add CSS here. So you can type in Hash Footer Wrap. And then you want to do the squiggly brackets. I’m not sure what those are called So what what you need to do is click on shift, and then you need to click on the square bracket, the left one And then you’ll need to hit enter Then we want to type in border then colon none If you actually scroll down, you’ll see that the border has been removed and then what you want to do is semicolon and then That is done. So for the header, you need to Hash Header Wrap and then the squiggly brackets. Enter border, colon, none semicolon and done And then click on publish Click on close Okay, so that little border is removed I’m not sure if you can see it or not, probably not, but for the footer you can see that really clearly. It looks really nice and clean now That is pretty much it for the video So thank you guys so much for following the video. If you liked it, and you found it helpful Then make sure to give it a thumbs up and subscribe for more videos Let me know if you have any questions in the comment section down below. If it’s more private, You can send it to [email protected]

100 thoughts on “How to Make a Drag & Drop WordPress Website 2019 – BEGINNERS!

  1. Thank you Hogan ! Been waiting for this one ! Thanks for all the correspondence and support via your support email . Loving the world of themify and WordPress !

    Please keep making videos !

    Regards

  2. Hey Hogan,

    Can you please create a tutorial for use of Buddypress with Themify Ultra theme? I'm sure there would be many users who would wish start a community website using Themify Ultra but not sure how to go about it.

  3. Hey, Hogan! I have a question – Can I connect this website that we would create here (I would like mine to be a blog) and make it eCommerce as well? Or I will need a new second domain for the eCommerce website that you're building in one of your videos? 🙂

  4. When adding a page mine does not look like that. How do I convert mine to have that same add page format? Anyone know 😩

  5. Thank you so much Hogan! I got so many compliments for my website 🙂 With your tutorial, it looks really sleek and modern.

    But a friend of mine pointed out that the mailto-link in the icon on my about-page is not working. I cleared history, cookies and cache but nothing changes, just an empty tab opens up. It's the same in all browsers and devices. Any ideas? Unfortunately, I know nothing about coding 🙁

    It's this page:
    https://www.senshicoaching.com/about/me/

  6. Hi Hogan, great tutorial! I have a problem- my themify settings are not showing, blank space. I install and make the theme active twice, but still same. Any idea?

  7. Hi Hogan. Question. I loaded woocommerce into the Ultra site I created. When I did this the format for my shop page shows what should be the blog content pages (eg. archives, recent posts, etc.). The blog content page doesn't show these items. When I try turn on the builder in the shop page it just keeps thinking. The builder never turns on. Any suggestions? Thanks for your help.

  8. Hi hogan, thanks for all the great videos as well as the replies. I'm facing another issue, when creating a new row, and going to styling, i'm trying to adjust the margin, top, bottom and left work fine, but for some reason the right margin is not responding no matter what value i put in. My website link: polaroei.com (currently all the rows are full width but would like to adjust them) thanks in advance!

  9. By FAR the BEST wp tutorial I've ever seen! Thank you so much for providing not only this video but the themes and tools. THIS is why people will do business with you OVER and OVER again. WELL DONE!!!

  10. Hi Hogan, i started creating my website using your tutorial. Thanks a lot! Though I'm having 2 issues:
    1. Cannot make the header trasparent. Followed your instructions step by step, but the header remains white, it doesnt become transparent on my home page.
    2. The view of my Posts area at the backend is different from what you show in the video. It consists of blocks and not standard WP text field. Is there any way how I can change it? Standard WF form is more convenient when working on SEO with SEO Yoast plugin. The blocks unfortnately don't even show the text, unless you open editor for every specific block.. I've tried to work in Misrosoft Edge and Chrome, same in both browsers

  11. Having another weird issue. The typewriter module won't center. The button and Heading text both do, but typewriter stays stuck to left margin.

  12. Hello Hogan, I have enjoyed your tutorial. My website looks so much better now. My only problem at the moment is that it is not showing my tagline. https://gallivantingsouls.com/ Also, I had several posts before I changed to this theme. Is there an easy way to convert those posts? Thank you!

  13. http://prntscr.com/n1c3ou

    hello why can't i install themify-ultra.zip theme? help please 🙂 I need a theme that has drag and drop options, because i'm having trouble with normal theme setups

  14. Hi Hogan! I've loved your videos and I'm creating my website right now, however I'm wondering whether I can create a page within my website, ie Course, and when they click on it they can buy my videos. I'll need a cart and credit card info, kind of like shopify I guess. Can I imprint this into my one page with in my website?

  15. A very in-depth tutorial, well done the only thing I worry about is load time, isn't having too many elements going to reduce load time on your home page? which could result in loss of visitor up time, as I am sure you are aware of the load to stay ratio. If a webpage takes 15 or more seconds to load a visitor is more likely to hit the back button and go elsewhere.

    So, I guess what I am asking is, is this theme responsive with a lot of elements added to it?

  16. Sorry, also I already have a blog and use the Optomize press theme, I am just wondering if it would be easy to change over to this kind of layout and keep all of blog posts and opt-in forms etc.

  17. Can I completely reset a Theme, because I think I have done anything wrong. I follow the instructions but can´t see my headlines for example the about me, portfolio etc. If I want change the Menu Link Color it says #222222 but nothing change and its only a white header with Logo in it and no about me etc. Do you have an idea what I can do else?

  18. This Platform >>>yt.businesshub.pro is a business-in-a-box type platform that offers a multitude of marketing tools for you to build an online business.

  19. Hi.

    Amazing videos, and with VERY GOOD content Quality.

    Question…
    I got a message to Update my Themify Ultra version 2.2.9 and when I try , it asks for a license key…
    I can't update?

    Regards, and keep the Good work

  20. Hi Hogan, first I want to thank you for this tutorial. It makes the life of so many people much easier. But I still have a little problem.

  21. Even after setting the homepage individually to full with there's still a empty (background) space between my hero image and the header. I've tried since hours but can't figure this out.

  22. Hi I'm wondering if you know about this. Every time I go into edit post or to add new post, the Save Draft or Save button has disappeared. I have to go to preview and then back to the post to check if it has saved my work. Do you know how I can get the Save Draft button back?

  23. Hi Hogan, great video and tutorial. I wonder if you or anyone can help? don't seem to be able to link my pages to the homepage. Thanks in advance.

  24. thank you thumbs upped and shared 2, 3 friends also i sent you a facebook msg becasue i have a question plz reply to it or must i ask here ??? becasue it wasnt under FAQ

  25. Hogan, great tutorial especially some an absolute beginner like me. However I ran into two problems for which I couldn't find an answer in your FAQ. 1. I added a logo name and logo image but when I visit my website after saving, the logo does not show up only the name. 2. After inserting the first image you go to the backend to eliminate the white section above the image in the Themify Custom Panel by changing content width to fullwidth. After updating however I still have that white section between the image and black top of the page with the logo name. The white section does show 'Home' in the top left corner. Any idea what I might do wrong? Raimund

  26. Great Job as Usual!! love your tutorials.
    Someone actually forgot to mention you for the hard work: https://www.youtube.com/watch?v=j77Yfn56RTY 🤦🏼‍♂️🤦🏼‍♂️🤦🏼‍♂️🤦🏼‍♂️🤦🏼‍♂️🤦🏼‍♂️

  27. A very Well done Once Again…Please help, is there any plugin you can recommend that will grab the user's location automatically when he or she buys cause i want to use their location to deivery locally…like Whatsapp MyLocation, then ill be able to drive their Location not address inputted

  28. Fantastic tutorial… Have a question. Is it possible to make sticky header transfer from standard header a litle bit more smooth? Like smooth animation…

  29. I purchased the Themify Ultra Lifetime package last year, used it on my first WP site. I am now making
    a new website for a different domain and I can not figure out how to get the Themify to work
    on the website. I am sure it is something really simple but I must be missing something.
    Help, please. Anybody know the answer, it would really help. I am also going thru HostGator for the hosting.
    Thank you for any help I can get!!!!

  30. Love this! Used it a year ago to build my website and haven't had any issues! Recently, I've launched a podcast and would like to add it to the website via RSS feed (I have the podcast hosted through Anchor). I imagine I can duplicate the blog function and add each new show as a new post, but how do I add another blog to the same Themify site?

  31. Hello Hogan! In your website demo you have an other footer, more complex. I dont`t know how to make that footer! 🙁

  32. Hi, I used themify ultra (downloaded from your link) to build my website. I cannot update WordPress and some other plugins because I cannot update themify without a licence. I noticed that others have had similar issues and have posted on your other videos. Will I now have to purchase a themify membership?

  33. Hi Hogan, thank you for your videos. I have been learning from you for the past couple of years and have done numerous websites for clients since. Question: What do you think about the Divi Builder by Elegant Themes? I've heard good things and bad things about it, and the same with Themify. I found that from time to time Themify has some bugs in it and it can get really frustrating trying to work with it. So, I'm just wondering if you've tried other WordPress drag and drop builders and what your thoughts are on the other popular ones like Divi and Beaver Builder, etc.

  34. Hello Hogan, once again, thank you for your videos. You are very helpful. Since I watch more than one of your videos, I try to remember in which videos (which minutes?) that you talked about the 'famous' line that is there at header and footer section. Please take a look at the printscreen and I am sure you will know what I mean (ha ha) : https://prnt.sc/ntnkl4 I would like to know how to remove that for both section please. Thanks.

  35. Amazing tutorial so far.. However I ran into a problem on the step of adding hero image. I successfully added an image, added padding and saved. Then clicked "edit in backend" and clicked the Page options and there selected "Full Width" from Content width. Saved and went back to my page to see if the white spaced disappeared but for some reason my whole Hero image disappeared… Anything i did wrong? Or how can i fix this? Thanks in advance

  36. On my hero front page are the words "add heading", I can't get rid of it. Also when I try to decrease the margin on the text block "Coaching Supremacy" it decreases the hero column rather than the text block. Can you help?

  37. Hi Hogan, can i have the link or the license key for your Themify theme for me to get the latest version? Thanks in advance!

  38. Thanks for this kind of amazing video. Its really very helpful. I would be ever grateful if you could make a tutorial on how to make a blood donate website, where donor will register and people search them With blood group and specific location.

    Thank you

  39. hello hogan! how can i create a flipbox efect like this https://mayhighfilms.com/team.php using this theme

  40. Hogan, I can't tell you how many times I've tried to use this video to create my website. For some reason, everytime I use it, things look okay, then I open it back up and nothing looks like how your video shows it. I'm going on one year trying to get this completed and each time ends in complete frustration. I build the menu as you explain, and it looks great, but the next time I log on the menu looks like it's in mobile mode. I didn't touch or change a thing, and there it is condensed at the top right corner and not a menu… what the flip is going on????

  41. Hello Hogan why my post back-end page are not same like yours as it always show themify builder.. not a normal wp post editing page.. did u have any idea?

  42. Hi Hogan, first of all thank you for helping us out ! appreciate it! One thing… At minute 31.08 It won't let me upload the favicon , any idea why? You think I need to update to the latest version of Themify? it asks me for the licence key and username.. Cheers!

  43. Hello Hogan, thank you for your nice informative videos. I have a question about themify. Can I make a subscribe-site with themify? Is there any plug in for this subscribe-function? So I will that the visitors have a decision, that they pay and subscribe for special topics of my site.

  44. Everything is perfect just the mobile website. Whenever I change something in the mobile outlay it also changes in the desktop one help

  45. Hi, I am having trouble removing the white space under the header section. I have followed exactly what you have done starting from 1:05:00 (by selecting full content width) but it stays the same..have been trying to figure this out for hours but still couldn't get it right….

  46. Hy all! I cant write text in the text module and the feature module. Only to the Module Title 😐 What is the problem? 🙄

  47. Hogan, in my blog I'm going to have to define some terms. Is there a way I can just have the definition pop-up when they mouse over the word? I'm pretty sure I've seen it on other websites, just would like to know if you knew of how to do this… Thanks!

  48. Hogan – Help 😉 I think I have a hybrid of drag and drop and e-commerce themify shoppe theme on my wordpress website. I followed both your drag and drop and e-commerce building tutorials. I think they are conflicting. now running together. Can you suggest anything to get me back on track? I'm selling watches and accessories and want an inspirational e-commerce website with cool media options and a blog. Thank you my friend!

  49. I have a question about ultra theme. Following your tutorial, I'we made my site in 2016. It worked well for 2 years, but then I had to update the theme because it wasn't working any more. I payed for a year membership, two month ago it expired. Again, I have problems in managing my site. You say that you have permission to share the theme for free. I tried to download and activate it and I can't. Can you explain, is it supposed to be free only for some time, or is there a way to download new version for free and activate it on existing web site?
    Thank you for your answer and thank you so much for your tutorials! They'we made me my own web designer without any previous knowledge about web design 🙂

  50. Hello Hogan… I'm finally making progress with the themify builder! thanks alot for your tutorials.
    I'm having difficulty with the header, long after i progressed past it. it isn't spread across the width of the page anymore. for some reason it shrunk to the centre of the page and i cant remember how to stretch it to full page width like it was. can you help?

  51. I have themify shop and ultra but it shows themify shop is the one that is active. I see themify Shoppe in my sidebar control panel and woocommerce and the Builder plugins 😮

  52. Hi Hogan, I want to rebuild my website with your genius video-tutorial. Is it possible to have a non-scrolling homepage and just a photoslideshow with the header and footer and going from there to the other sections? It would just be a more visually interesting remake of my old website (www.a3aan.be)

  53. Hi Hogan! I'm having a problem with the white space between the full-width image on the background and the header wrap. I made it full-width on the page options on the backend but the white space is still there. My themify is the newest one and is a little different than the one you're using here. I think I clicked something by accident when I was first trying to find where to put the background image on the home page and it's stuck with that space. Any thoughts? The website is for our group that's opposing a concrete plant going in near our homes so this isn't crucial, it just bugs me. https://noneighborhoodconcreteplant.com

  54. Hogan if you own an active domain and site and want to rebuild what happens to your site if I use the active domain name, and site while rebuilding?

  55. Awesome video love your work Hogan, these have helped me massively! I can't seem to find the video you did on the creation of the secondary menu bar though?

  56. Cannot login. getting this message: Error Details
    Installation directory is not empty. Please install to an empty location. What next?

  57. not moving forward. this is what i'm getting: Error Details

    Installation directory is not empty. Please install to an empty location

  58. Hogan, this Hostgator is crap! I've done as they said, website is dead, moved it from SiteGround big frikking mistake!

  59. Thank you Hogan, you are great! I do have one question, why can we use Themify free when I see they charge on their website for that same builder?

  60. Thanks Hogan. I just built a site (first time on wordpress), and this was super helpful. The one thing I am stuck with however, is a broken mobile menu. The dropdown arrows are about 10x larger than the menu items and are not aligned. The whole mobile menu is being pushed down quite a bit, with the large dropdown arrows displaying over the top of each other below the menu items. I've searched your faq as well as google for days trying to find a fix for this to no avail. Any insight as to what I could do to re-align the mobile menu arrows would be super appreciated.

  61. Love the tip to use Chrome Extension "WhatFont".This will save so much time for everybody trying to figure out what font to use on their website.

Leave a Reply

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