WordPress Tutorial: How to Add a Widget

WordPress Tutorial: How to Add a Widget


Hi and welcome to WordPress.com. This video will show you how to add a widget
to your WordPress.com website or blog. To begin, launch the Customizer by clicking
on the tools icon in the bottom right corner, or, click on My Sites and Customize. Click on Widgets to view the widget areas
available on your theme. To add a Widget, select a widget area
and click on Add Widget. Scroll through the widgets available,
or use the search bar to find one quickly. Here we’re adding the Recent Posts widget. Use the default widget title, or, change it. Click on Visibility to use the conditional
drop-downs to control where and when your widget appears. For example, we’ll hide this widget
if the visitor is on the static front page. You can add as many widgets
as your theme allows. Click on the little triangle in the top right
corner to close the widget settings. Drag and drop your widgets to reorder
them within the widget area, or click on reorder to move them
to a different widget area. When you’re happy with your arrangement,
press save and publish to make it live. And that’s it. For more tips and tricks,
visit the WordPress.com support site.

WordPress Tutorial: How to Create a Page

WordPress Tutorial: How to Create a Page


Hi and welcome to WordPress.com. This video will show you
how to create a new page on your WordPress.com
website or blog. When logged in to your site, hover over
Sites and navigate down to Pages. Click on Add. A new page will open up. Type in a title, and add the text, links,
and media you want on your page. Click on the gear icon on the top right
to open up the page settings. Under Status, you can change the page
visibility, or password protect it. You can change the status and
the time stamp, which is the date and time of publication. Click on the time to change it. Some themes allow you to add tags
to your page to organize your content. Next, add a Featured Image. Choose whether or not your page
is a Child Page of an existing page, and what order it should appear
in the drop-down menu. Your theme may also provide you
with page templates that can alter the display of your page. Read up on your theme documentation
to find out more about the options available for your particular theme. You can control whether the sharing settings
and likes appear on your page. You can choose your sharing buttons
in the general Sharing settings of your site, under My Sites
and Settings. Under More Options, you can edit
the Slug, the custom url of your page, and add an optional excerpt,
which is a short description of what is on your page. You can set the location your page
was created, and lastly, control commenting and pingbacks
to that page on other sites. If you want to copy a page
you’ve already created, click on Select a page to copy. When you’re ready to see your work
in action, click on the eye icon to preview what your page looks like. Your page saves automatically
every few seconds, so you can create a page and decide to publish it later. To schedule a page to publish later,
click on the calendar icon next to Publish. If you’re ready to make it live,
click Publish. And that’s it! For more tips and tricks,
visit the WordPress.com support site.

Module 4: Running WordPress on Azure

Module 4: Running WordPress on Azure


If you’ve managed to set up your paid-for
subscription, then now we can start adding services. A lot of schools have websites.
Some of these may be custom developed, or some of them may actually
be hosted on WordPress. Now one of these services you can add to Azure is an app service. So if we go to the option for app services and then select Add. You can see again there are a lot, and what we’re gonna do is search for the word ‘WordPress’… and as you can see we have a number of options to choose from. We have a standard WordPress installation, or we have hardened WordPress if you actually
want to enhance the security. So what we’re going to do is select WordPress and then click on Create. We now need to add in a name for the app, and you can see that there’s a tick in the right-hand side, and that it is going to go
into our pay-as-you-go subscription. Again it will go into Resource Group, and
we have a name in there already that is selected the same as the app name. And
we’re going to leave that as it is. The Resource Group will hold all of the
services that are needed for the WordPress installation. The database provider is MySQL, and we just need to do some settings on the database. So in here it needs to have a server admin login name, and then we need to enter a password and then confirm that password. We also need to configure some settings for the type of database. So there are three options: Basic, Standard, or Premium. Again,
whichever one you select will have a cost associated with it. So we’re going
to go for the basic which is the least amount of cost. You can always change
this at a later date. So we click on OK twice, and then the
final setting we need to do is actually select where the MySQL database will be
served from. So we’re going to select West Europe… and then click on Create. What happens now in the background is Azure will create all the services are needed for that WordPress installation, so it will create this
SQL database and the actual web app. You will be able to go to the All Resources option and see all of those services. If you look at the top you can
see notifications where we can actually see that the deployment is in progress.
So we just need to wait now until that installation has completed. So we’re now back in the All Resources and you can see the three resources that are needed for our WordPress installation. So we have the web app, the database, and the service plan. So what we’re going to do is click on the web app, and as you can see, all of the data that we
need to, so the data in, data out, graphs, and if there has been any server errors.
You can see the URL, and we’re going to click on that and we can see that we
actually have a full URL so hableacademy.azurewebsites.net –
Now as this is a first installation it will take a while to load up, but what we will get is
the standard WordPress installation. So as you can see we can select our country, click on Continue, and then we can carry on with the configuration of WordPress as you would do for any normal WordPress installation.

网站搬家(一),WordPress博客从阿里云到腾讯云(最困难)。选服务器的一点坑,腾讯云备案建站。手动备份网站和数据库。域名注册与解析的区别,更改DNS服务器。Website moving

网站搬家(一),WordPress博客从阿里云到腾讯云(最困难)。选服务器的一点坑,腾讯云备案建站。手动备份网站和数据库。域名注册与解析的区别,更改DNS服务器。Website moving


Hi Hi, everybody This is a little trick here As I mentioned in my blog, the original aliyun server is due to expire The renewal fee is very, very expensive And then the double eleven didn’t take part The choice of a server for a blog Trispecies Or you’re going to continue to use the current server That’s a lot more expensive But you don’t have to move or something like that Or the second option is to participate in the aliyun double 12 event Continue to buy only a year’s worth of servers Cost 800 dollars And then wait for the next year’s double eleven to borrow another new user and buy another three years of service It’s going to cost 800 dollars That’s 1,000, six, only You need the inside of the aliyun to switch servers And then the third option is to buy the Tencent cloud server Because I’m a new user of Tencent cloud You can participate in very favorable activities Three years It’s only 1,500 dollars But you need to migrate Blog Suggest websites to refile and so on My last choice was to buy the Tencent cloud three year server, which cost 1,500 yuan If you’re interested in reading this article Some pits about buying cloud servers Let’s look at the situation where I moved My domain name is bought in the Ali cloud And then the DNS server is also used as the aliyun But not anymore Now I’ve changed it I was using a DNS server for aliyun And then my server is the Tencent cloud server, this one So my blog site is probably the most complicated I’m fine with that If you have a need to move I think this video should be able to solve your problem There’s a lot of things to think about moving around But I made an outline So the step process is pretty clear I think it’s a good step to do that, wait a minute I’m gon na use one of the other servers So first of all If you’re buying a local server So for example, I’m in Shanghai and the first step to buying a server is to put it on file First to submit the filing Because it takes time We can do other things in advance of the filing What’s interesting about this is that Even if I had a file in aliyun, the server switched from aliyun to Tencent cloud I’ll put it up again It’s important to make sure that you decide to buy a local server My blog was in the case of Ali cloud as well But now we have to file it Of course it’s called re-access But the whole process is really no different from the filing It took me almost ten days to do the whole thing Concrete And the process recommendation is to look at my blog It’s not shared yet But I’ve got the pictures here, and I’ve been there for two days I’m going to put some of these processes into a blog And I’m going to put it down here That’s the first step And then the second step is backup Make sure you backup your blog when you move to a blog. I’m gon na share my backup here I’m backing up the website and the database export back to the local So for example, this is the two files that are backed up by number 25 This is the zip file on the website This is the database file First, back up the database, there are two ways to back up the database We can go to the database through the panel and export it manually Let’s say I’m in the database now Find a database of your own blog I’m the one And I’m going to select here and export it And that’s what you have to back up the database Because we’re exporting it in this panel And the next time you import it, you’re gon na go into this panel And there’s another one that’s a little bit easier to choose here which is the method that I use Add a plan task to the plan task and back up the database And then add But I’ve got it here, and I’ve got this planning task and I’m going to do it And then you look at the logs December 29 has been backed up So I’m just going to do it manually And it has been successful Take a look at backup backup times December 29th So what we want is this file And then download it Either way you can do it What kind of export we choose That’s what you choose to import So let’s say I have this database file that I exported outside So I’m gon na import it when I import it This is the database file And then back up the website files and package the entire website Make sure you do one thing before packing Reduce the volume of the entire site as much as possible You can delete some plugins that you don’t want to use The second is to try to compress your images as much as possible My website is not compressed It was 400 + trillion So this is December 08, it’s 472 M December 25th It’s estimated to be over 550 trillion So whether it’s packaged or compressed It’s very hard to download But the image is compressed and it’s only 200 megabytes It’s a very relaxing process So I highly recommend that you compress the images, my images The compression plug-in is it, shared before Also developed by tinyPNG As for some of its specific uses You can see my blog Because I should have shared it before Here This article, and then the whole website selection, all of them And then compress and compress. the whole process It’s gon na take a couple of minutes Look at the configuration of your server, now it’s ready I only have 200 left after I’m compressing it So it’s pretty fast And then download it And our whole website is made up of these two parts, the website and the database This file contains some skeletons of the entire website, and the data is just filled in So you have these two files We’ve backed up the whole website And then you stick them together So that’s the backup Next is the DNS server that changes the domain name This step should be chosen It doesn’t matter if you don’t do it But given the record I’m still gon na make the DNS server for the domain name From aliyun to Tencent cloud, one step at a time, with the domain name associated with it Student: I think there are two that are the registrar of the domain name Where you buy it And then where they’re going to renew their fee, the registrar’s role Secondly One is the domain name parser, which is the domain name Mapping IP, and we’ll see, let’s look at registration Like what I’m doing here My domain name is bought in the Ali cloud So my registrar here is aliyun And then if I want to renew it It’s also in the Ali cloud But I want to add a parsing record It’s not in the aliyun Although I have two parsing records here But these two records are useless Because my DNS server is not aliyun And here we are No information about DNS servers to be queried That’s the difference between a registrar and a parser Of course there is no such thing as the parser, which is what I said. where do we add or modify the parsing record I still have to go to this DNS server And The DNS server’s modification address is related to the platform you register for domain name So that’s pretty clear My domain name is registered in Ali’s name So I’m gon na modify the DNS server, and that’s the same thing Come Ariyun change, click management And then you can go to this interface DNS changes to the DNS servers that you want Because I want to put all my analytics in the Tencent cloud So I’m going to change it to a DNS server for the Tencent cloud I’m gon na go over here and I’m gon na go in here and I need to fill in the Tencent cloud’s DNS server But we don’t know yet So go to Tencent’s cloud search domain Find the domain name management into the parse list So now I have a domain name that’s parsing, adding parsing By reason This is the name of the domain But it has been added So let me just add one Determine And then I’m going to parse, and I’m gon na show you the DNS server address of Tencent cloud We can just fill these two in here Let’s say I pick one So let me paste it in, and I can paste it And then you can confirm that it’s going to take anywhere from three hours to twenty hours And it says here It takes at least 72 hours to take effect globally But we can add Does not affect the current parsing record I’ve changed Tencent’s DNS to this side It doesn’t work And now I need to parse it over here Because when it works, the parsing comes into effect Our original parsing record, we won’t be able to parse it for a while So we can go ahead and add the original parsing record to this side Let’s say I have two parsing records here The host record is @, the access type is A record value It’s this IP Copy it in And make sure that Let’s add another one, and this will work I’m still gon na be able to access this IP in a seamless way This is the third step change the DNS server By reason If it’s just a website move or a blog migration It doesn’t matter if you don’t do it But we have a record in the country I don’t know, I don’t know Even after the success of Tencent’s cloud And then you replace that IP with Tencent’s IP in the aliyun Is Tencent able to recognize me as a domain name that has been put on record So I’m going to end up with this Change the DNS server to the Tencent cloud And there are other steps in the future One video is a little bit long So, this is a move away from the website The first video of the blog migration, the friends who are interested please continue to pay attention to the dragon skills, ok, bye bye

WordPress Tutorial: How to Create a Post

WordPress Tutorial: How to Create a Post


Hi and welcome to WordPress.com. This video will show you how to create
a new post on your WordPress.com website or blog. When logged in to your site, click on the icon
in the top right corner to launch a new post. If you are an author on multiple websites,
you’ll be prompted to choose the website you’d like to publish to. A new post will open up. Type in a title and add the text,
links, and media you want on your post. Click on the gear icon to see
the post settings available, which can vary depending on your theme. Under Status, you can change the post
visibility, or password protect it. You can change the status and the time
stamp, which is the date and time of publication. Click on the time to change it. Some themes allow you to feature
certain posts more prominently, by making them stick
to the front page. You can toggle this setting here. You can add categories and tags
to your post to organize your content, and add a featured image. You can control whether the sharing
buttons and likes appear on your post. You can choose your sharing buttons
in the general sharing settings of your site under My Sites, and Settings. Under More Options, you can edit the Slug,
the custom url of your post, and add an excerpt on your post,
which may appear on your home page, and when you share that post
on social media. You can set the location your post
was created, and lastly, control commenting and pingbacks
to that post on other sites. If you want to copy a post
you’ve already created, click on Select a post to copy. When you’re ready to see your work
in action, click on the eye icon to take a peek at your post. Your post saves automatically every
few seconds, so you can create a post and decide to publish it later
by clicking on the calendar icon on the top right. If you’re ready to make it live,
click Publish. And that’s it! For more tips and tricks,
visit the WordPress.com support site.

WordPress Tutorial: How to Display Your Instagram Feed on Your Website

WordPress Tutorial: How to Display Your Instagram Feed on Your Website


Hi and welcome to WordPress.com. This video will show you how to display
your latest Instagram photos on your website using the Instagram widget. Go to My Sites and click on Customize. Go to Widgets to see the widget areas
on your blog. Some themes have multiple widget areas,
such as the footer and sidebar. Select where you want your Instagram
widget to appear. Click Add Widget and search for
the Instagram widget. You’ll need to authorize the widget
to access your photos. You can only display images from
an Instagram account that you own, or have permissions to. Once you’ve authorized your account, edit the widget title displayed
above your images. You can also leave this blank, if you want. You can control the number of images
that will be displayed and the number of columns to display your images. The higher the number of columns,
the smaller the images will be displayed. Once you’re happy with your settings,
save, and you’re done. Reload your page to view your Instagram
widget in action. For more tips and tricks,
visit the WordPress.com support site.

Hide Any Item or Section on Your WordPress Website

Hide Any Item or Section on Your WordPress Website


Hey, y’all. Welcome to another WordPress Wednesday. My name is Kori Ashton in San Antonio, Texas. I’m gonna show you, today, how to hide anything on a WordPress website. Maybe you don’t like the sidebar or maybe there is a whole section, like your footer or any element, for that matter, on your WordPress website that you don’t want to necessarily remove permanently because, maybe you want to put it back there. But, for the sake of NOW, you need to hide it and not show it at all. I’m gonna show you how to do that. It’s just a little bit of nerd code. Stick with me. Here we go. I’ll give you an example, here. This is a brand new website that we just custom built. I’m gonna scroll down and let’s say that there is this team section down here and for the sake of now, you’ve got a big turnover going on and you want to hide this whole team section. How would we do that? Eventually, we’ll want to use it again, right? So what I want you to do is just right mouse click in this space and say Inspect Element. I’m using Firefox but you can use any browser that you want, though. You’re gonna inspect the element. In this particular section, the author that coded this theme (our team here that custom coded this) called this section “Team Container”, right? You see as we hover over it, it highlights parts behind this box. So, section “Team Container”. Don’t freak out because I know this is nerd code; but, all we have to do is go over here to the style sheet and tell the style sheet to display , colon, “none”. That’s all we’re doing. Basically what we’re doing is we’re telling the browser “Don’t show this section”. We’re gonna hide this section for now. Check this out you guys. It’s totally hidden. Not removed, in case we ever need to use it again; but, it’s totally hidden. I’m gonna give you another quick example and I’m gonna go into the style sheet to permanently make this thing effective. Truthfully, if I just did a quick Refresh the section is actually still there. What I’m doing inside the Inspect Element is trying to find what the name of that container or that dev class (basically the box that the author coded) I’m trying to find out what they named it so I can hide it. So, let me show you how to do that. Right over here, let’s say in this website we want to hide the entire side bar. I’m gonna right mouse click, I’m gonna inspect element and I’m gonna view this and come down here and see that it’s sidebar…no, this is the section right here. Sidebar, sidebar right…So, I’m gonna come up here sidebar, sidebar right and say “display none” and I’m gonna make sure that it’s hidden. Excellent. So this right here is the class that I need to go affect. I’m gonna copy that onto my clipboard and we’re going into the dashboard. We’re gonna jump into our customize section and basically what you’re looking for is a custom css box. That’s right. We’re gonna scroll down here on this particular theme and go to additional css and all we have to do is paste that in there and do a curly bracket and say “display none” and we’re gonna save and publish. Now, when I go back and click refresh it will actually stay totally gone. How cool is that you guys? I have to give a shout out to Nick and one of the best reviews I’ve had in quite a while. It was super sweet. Thanks, you guys, for the encouragement. Bye, y’all.

How to Start a WordPress Blog – The Most Complete Guide for 2019! (NEW!!!)

How to Start a WordPress Blog – The Most Complete Guide for 2019! (NEW!!!)


In this video I’m gonna show you how to start a blog the right way A few years ago I started my blog because I heard you can actually make money with a blog So I bought a domain name and I got hosting and stored WordPress, which is the best blogging platform But then I realized I didn’t really know what to do. How was I supposed to turn this into this? Right. I didn’t know how I could actually get the same result that the profession was actually had and I played around with it for weeks. Then I was still confused So I thought I’d needs to hire someone so I did I had someone for five hundred dollars The result actually got back was pretty similar to what I actually had and then I realized you know WordPress is still the best blogging platform, but I followed incomplete processes and I used bad templates so in this video I want to actually show you guys the right way the complete process step-by-step So that maybe this video can actually help you get your blog up and running today So whether or not if you’re a beginner You’re never started a blog before or maybe you’ve installed WordPress and you’re a little bit confused about what to do next Or maybe you want to upgrade your WordPress blog because you feel that it’s not flexible enough for you. Then this video is perfect So I’m going to jump into the my computer and actually show you around and show you what we’re gonna be building today So on the left hand side is the blog that I’m gonna show you how to build But you can actually create any sort of blog that you like Okay So so on the right hand side is one of the top food books in the world with about 4 million visits per month So what if you want to change to something like hers? All right so you could actually go to edit page and that’s going to take you to the back of the page and You can change the page appearance so here we’ve got different header designs that you can choose from and This one is the one of the most popular ones and you can select it click on update and Then go back and view your page and then essentially you have the same layout header layout that she has but you probably need to change the logo which is really easy to do you might need to remove that which I’ll show you how do that and If you want to have the same blog layout that she has then we can do that really easily as well So you can go and turn on the Builder So for example, she doesn’t have the hero image so we can actually delete that she doesn’t have this subscribe on the top so we can delete that and Essentially her post layout is just one post like that So you can double click this and you can change the post layout here to any design that you like For example, which is something similar to hers. You can also change it back and then you can actually change the post content layout too Boxed which I think is a really cool option as well for your blog but we’re gonna click on done and If you want to actually change your blog layout to something like nomadic, Matt Which is one of the top travel balls in the world and then you can easily do that, too If we actually undo everything then you’ll notice that the layout is pretty much the same as his like for example He’s got the hero image Text here and also button with the subscribe for weekly newsletters here and also latest from the blog here It’s not exactly the same but you can create very similar layouts to some of the top blogs in the world Okay, so if we actually scroll down here you’ll actually notice that if we go back here, you can actually change the width of the sidebar to easily just by dragging and Extending it like that. Okay, you can also change it to the other side if that’s what you want Okay, and then you can put it back Here, you’ve also got all these different type of modules which you can add in Anywhere on your website and blog. Okay, so you can also create a shop as well So on pneumatic Matt’s blog, he uses ebooks to actually monetize and make money. So What you could do is you can also create a shop as well Which I will make a 15 20 minute video to show you how to do that After I create this video which is going to be really cool so you can create, you know, ebooks or you know Sell your t-shirts and merchandise or you might have coaching and if like that you can sell that as well on your blog Okay, which is really cool You can also create a Amazon affiliate website where you might have ads Like that, or you could add a Google Adsense ad I’ll show you how to add ads anywhere on your website Okay, and I’ll show you how to add in a normal blog post with social shares Essentially everything that you need to know to start a blog. I’m gonna be showing you in this video Okay, for example, the Instagram feeds you can also add a email Signup form here. Okay, and Yeah, I think that’s pretty much it. Okay So if you’re ready, then I’m ready and I’m gonna show you an overview of what we need to actually get started Okay. So basically what we need to get started to create your blog is the first thing you need is a domain name so domain name is basically your blog address people actually type that in the search bar to get to your blog and hosting is where You’re gonna be able to store all your images and your content basically all your blog files So people can access that 24/7 if you’ve actually got that then you can skip ahead Okay. The second thing we’ll need to do is install WordPress. So WordPress is a content management system Basically, it’s the best blogging platform out there and it’s what I use and a lot of the top blogs use WordPress the third thing We’ll need to do is install the theme So just before I showed you the theme which is the drag-and-drop builder Which is going to allow you to create any blog layout that you want Okay, then the fourth step is I’ll be showing you how to build your blog step-by-step So now I’m gonna go through the cost involved so a domain name normally cost around I think twelve dollars every single year and your hosting cost anywhere between Five to ten dollars every month depending on which package you choose. So let’s just do ten dollars per month Installing WordPress that is a free content management system. The theme is free as well But you do have the option to get support and updates which I know a lot of people like because you need extra help Especially if you’re helping, you know other clients building their blog or the ecommerce store or their website Which is really helpful. Okay and starting the blog is is free. Okay, so this is a free tutorial for you guys and To begin basically you’ll need around I think 20 dollars to start today I think I’ll have a discount for you. So it might be fifteen dollars or something like that. Okay So the first thing that we’re going to do is get our domain and hosting and for that we need to go to hostgator.com Alright, so let’s open up a browser. And what you want to do is type in HRSD G80 or are calm so hostgator and then click on enter So that’s gonna take you to Hostgator and Hostgator is the place where I host all my websites so what we’re gonna do is click on web hosting which is the most basic package and Here you’ll also get three different plans So for the business plan, normally that’s a little bit too much for what you need to get started So we’re going to focus our attention on the hatchling plan and the baby plan the main difference. Is that with the hatchling plan? You’re only able to host your blog com with the baby plan You can host your blog calm your friends blog your dad’s blog. And anyone else’s blog So if you know that you’ll be creating more blogs for other people Then that might be the best option for you to start off with now the hatchling plan is what we’re gonna select because we’re gonna be just creating one blog here and We can always upgrade later on. Okay, so we’re gonna click on buy now Here you’ll need to enter in your blog’s domain name. So for example your blog one, two, three com Okay, and then click on the outside to see if it’s available. If it is then you’re all good to go You can also select other variations as well, but I normally like to select com We’re gonna scroll down here here is your domain privacy protection, which I do recommend So what that does is it will actually keep your details. For example your phone number and email Away from the public. So it will reduce your email spam and things like that We’re gonna scroll down here for the package type. We’re gonna select hatchling plan Okay, and with the billing cycle the longer that you actually select the more that you’ll actually save Okay, so you can go month-to-month or you can go to 12 months or even longer to save a little bit more money Okay, so we’re gonna select one month for this video here. You’ll need to enter in a username and Also a security pin scroll down Here we’ll need to actually fill in our billing information and also credit card and PayPal details Scroll down and here you’ll see the additional services. So by default you’ll get a SSL certificate So what that’s going to do is you’ll have the secure icon on the top left here Okay, and this is really important because normally if you don’t have it, then it might say not secure Okay, so here we’re gonna actually deselect site lock monitoring. Okay, because you can actually protect your website by downloading some plugins later on and Also site backup. You can also follow a tutorial on my channel for that. Okay, we’re gonna scroll down here and Here you’ll need to enter a coupon code. So we’re gonna type in H Oh gan C hua and click on validate So that’s going to give you a bigger discount So for example, as you can see here, the domain name is now six dollars and the hatchling plan is about 767 okay So the total comes to around fourteen dollars, okay to get started if you have actually selected domain privacy It might be around twenty eight dollars or twenty nine dollars. Okay, then you’ll need to scroll down and You need to read the Terms of Service. Click that and then click on checkout now So after you’ve purchased your domain and hosting this is the email that you’ll get You get a control panel URL. So this is where we’re going to install WordPress You’ll also get your username and password to log in so you can click on The cPanel URL enter in your username and password from before and then click on login the next step that you want to do is you want to click on build a new WordPress website if you don’t see anything like That then you need to scroll down to quick install and it’s basically the same thing so we’re gonna click on build a new WordPress website and Here you’ll need to select the domain that you’ve just purchased. So for example your blog one through three and Here you want to make sure you keep this empty. Okay, and then click on next here You’ll need to enter in a blog title. So I’m just gonna call it vlog and Enter in a username. So this is a username for your WordPress login Also your name last name and also a contact email. So make sure this is the correct email and The next you’ll need to click on you’ve agreed to the Terms of Service and then you’ll need to click on install So that’s going to take maybe a few seconds to install So you should get it installation has completed Now what you want to do is first thing you want to do is copy your password to your clipboard. Okay, and Sometimes if you’ve just purchased the domain like for example, if you actually go to that domain right now Right, it might not be available yet. Okay, because what’s happening is Hostgator is setting it up So sometimes you might need to wait, you know 15 20 minutes for them to set it up on the back end Worst case scenario, you know two hours or so and then he can come back Alright, so as you can see my one is up right now So what you can actually do is click on admin login, or you can actually type in here forward slash WP dash Admin, and then click on enter and then that should take you to the WordPress dashboard Login area here you enter in your user name and also paste in the password that you’ve got before Okay, if you’ve got that password then you can also Go back to email and they’ll would have sent you a email with your username and password click on login All right. So this is your WordPress dashboard and a lot of stuff might pop up It might be a little bit overwhelming but all of this we can pretty much is closed. So we’re gonna close everything first and Do a little bit of housekeeping. Okay and configure the optimal settings. So let’s just close all these Okay, and if we actually visit our blog now Then this is what its gonna look like It’s very plain and it doesn’t look like anything that we’re gonna build, right? so what we’re gonna do is go back to our dashboard here and Let’s actually hover over users and click on all users Here is where you can actually add in more users so for example, you might have other people to write blog posts, you might have a Person to help you with your blog then you can create a new user here and set the role alright so right now we’re gonna actually change the password to something that we can remember so scroll right down to the very bottom and click on generate password I’ll click on hide and type in your new password confirm that and Update profile. Now. The next thing that you want to do is you want to hover over settings and you want to click on permalinks? So here you want to make sure that your website URL structure is correct, right? So what you want to do is select post name and what that does is whenever you are Entering a new post title or a page that page title will be in your URL. So this is good for SEO purposes Okay, and make sure you select that and Save Changes now The next thing you want to do is you want to click on plugins. So plugins are basically add-ons that you can add to your blog to add additional functionality and by default They would have installed some default plugins. Okay, so what we’re gonna do select all plugins and Deactivate them first. Okay, and you can add these plugins back But I just feel like this is too many things on our blog and it’s gonna be really confusing Okay, so so I’m actually gonna delete that as well. Okay, select all and then click on delete Apply, okay All right, now the next thing that we want to do is hover over appearance and click on themes and We’re gonna add in a new theme so this is the default theme 2017 so you need to click on add new So here there are thousands of different themes that you can actually choose from but below this description I’ve actually included the theme that I use and that I recommend because you can build any layout that you like most of these themes they have a default sort of look and it’s sort of hard to actually Arrange it to the way you like it. So I don’t think it’s the best long-term option So make sure to download that okay and once you actually download that then it should look something like this Lima 5 – ultra zip Okay, and I’ve actually also compiled the images for you so that you can sort of follow along with the video Okay, so you will also download the images for the blog the zip file as well Okay, and sometimes for people who are using Safari? Safari might automatically unzip the themify ultra Okay, and what you need to do is you need to right-click and compress it back into the zip file. Okay? so we need to go back here and upload theme choose file and then You want to upload themify ultra zip? click on open install now That’s gonna take a few moments to upload Okay, so you need to activate the theme and Skins and demos will pop up we’re gonna close that on the top, right? So click on that now if you actually visit the site and then you’ll see what it sort of looks like now so what I’m going to show you now is how to add in your pages and configure the menu and Also change the layout to the layout that we want. All right. So let’s go back to the dashboard section and Hover over pages and then you can actually click on all pages or you can add new. I’m gonna click on all pages Here you’ll have some sample pages I’m gonna select all and move them to your trash and then I’m gonna click on trash and Then I’m gonna select all and delete them permanently Okay, as you can see it says this theme requires the following plug-in we can dismiss that Now to add a new pages click on add new The first page that you want to add is your home page, so type in home and then on the right click on publish Again make sure the page is published before you click on add new again. We’re gonna add a new page This is gonna be our about page Click on publish So here you can add as many pages as you want to your blog So we’re gonna click on add new and we’re gonna add in a specific blog page Publish and Then we’re gonna click on add new again and Type in ‘contact publish Okay, so what we’re gonna do is click on visit site So as you can see the pages have been added and if you actually click on home Then that’s going to take you to the home page, right? But what we want to do is we actually want to set it in just as our blog com, right? So, how do we do that we go to customize So that’s going to take you to themify options here and You want to click on home page settings? ok, and Here you want to set a static page and for your home page? You want to select your home page here, right and then click on publish? Now we’re going to move back Ok here. You’ll see the mobile menu show up, right? So what you can actually do is you can actually zoom out of your browser. Okay? normally on the settings area So right now we’re gonna set in a navigational menu, right? We want to order them the right way. So click on menus and Click on create new menu the menu name is going to be top nav for top navigation Okay for your mini location? You want to set it to the main navigation area, which is the top if you want to create a footer navigation Then you have to select food and navigation and your menu will show down here. Okay, so select main aviation click on next and Here you want to add items? Okay. So what I want to add is I want to add in my about page okay the blog page and The contact page, right? I’m not gonna add in home because most of the time when people click on the logo Over here on the right it will take them to the home page. Alright now if you want to create a drop-down menu For example, you want the blog to drop down from about then you just click on it and drag it Okay, and put it under about okay? And what’s gonna happen is when people hover over about then blog is gonna sort of drop out okay, so I’m gonna put it back and you can select this option here if When you actually create new pages, then you’ll be automatically added to the top navigation. Okay. So for me, I’ll just put that in okay, and then click on publish and then we can close that and Your top navigation menu is actually set in okay So now we’re gonna do is actually configure the theme appearance. Okay, you can do that by clicking on the dashboard and Go to themify ultra themify settings and Then click on theme settings Click on theme appearance. So what I normally like to do is I normally open the blog in a new window Okay, so open that in a new tab. So if we look at the head of design now, this is the default one Okay, so I want to actually select maybe the header horizontal or the header top bar. Okay. So like a really thin header Save it Now if you actually click on the page here and Then you notice that the header design will have changed Okay, so you can select different header designs here But that’s why I prefer either header block or header horizontal or the header top bar. Okay Those are the really nice ones and if you look down here, these are the options For the display. So what I want to do is I want to remove the tagline the RSS feed The search bar as well. Okay, so to do that we can click on here and Then you can click on exclude site tagline Exclude the search exclude the RSS Save and We can refresh that page Now we want to set the default page layout So as you can see, you’ve got a title there and you’ve got this sidebar here We want to sort of have a blank canvas so we can actually build whatever we want So we need to go back here and click on default layouts. All right, so that is a page so we want to click on the default page layout and For the sidebar option you want to select no sidebar and you? Want to hide the title of the pages and you want to disable the page comments save Come back here refresh Awesome Congratulations, we have a blank canvas to work with now. This next part is going to be super important So it’s important to pay attention, right? But before we do, I’m gonna go over a quick recap of what we’ve actually done and What’s coming up next? so we’ve got our domain name and hosting and we’ve set up WordPress and also the theme now we’re ready to build the structure or the layout of the blog so your domain name and hosting is basically like getting your address and your land for your house and Setting up WordPress and the theme is basically getting the land ready to build Okay So now we’ve got a blank canvas to actually start building the layout The next part is gonna be really important because I’m gonna show you how to lay it out properly Otherwise like a house if you actually don’t put the right foundations and don’t build the right structure It’s gonna collapse now the same thing for your blog it’s really important to get the layout right know how to use the Builder because I feel like when I first started You know building a blog I didn’t know these things and you know I want to share with you my mistakes so that you don’t make the same mistakes and a lot of Tutorials whether it be text or video. I feel like they don’t show you the right process of doing things So this is why I want to share with you the right process and probably the best process That you can actually get a great result with right So if we actually turn on the Builder right now Then this is actually going to give us some really cool options to build so if you see right now in the middle, you’ll see that there is a Row, okay. This is called a row and these orange boxes is what we call columns Okay, if we actually hover over the left you can change as many columns as you want Okay So like four columns five columns six columns, like one with a sidebar But the cool thing about it is you can actually arrange the columns like that So as you can see, you can pull and change the columns, so you’re not really restricted to the columns either All right. Now when you hover over the left hand side here, when you press the green icon. This is gonna pop up okay, you can click the lock icon and that locks it in right and This is all the different modules which you can basically just drag and drop in So let’s say for example, we drag in a text module we put that into there We could say Start a blog okay, and Then you would set that to heading 1 then you’ve got your text Okay you click on done and Then let’s say you want to add an image then you can put an image in You can browse library and upload an image if you want to add a button You can put a button in like that and you can add button text and also a link to wherever page you want. Okay? But right now I’m going to show you how to build it out properly. Okay, so I’m gonna delete everything and start over again What we’re gonna be doing is we’re gonna be building this layout you see here Okay, we’ve got a hero image some text and a button So this is really good because if people actually come to your blog then they know what it’s about straightaway and then I scroll down They can subscribe for your newsletters and then they can read your blog posts and things like that Okay Obviously can change the layout later but I think what’s best now is to actually follow the tutorial and Then later on you can sort of arrange it to the way you like Alright, so how we’re gonna do this is we’re gonna go and grab a hero image first So one of the best websites that I like is called unsplash.com Now here you can actually use all these images for free on your blog whether it be for personal purposes or commercial purposes without crediting the people who have taken the photos Okay So you can browse here and look for the photos but a quick tip is that you want to choose a photo where you can actually put text over and It doesn’t actually cover the subject of the image Okay, so if you actually scroll down here, then I’ll show you a good example and a bad example So scrolling down here So as you can see this image here, it’s really easy to put a text over here Right because the detail of that image on the back is not that much but the problem with this image It’s sort of like in a in a portrait rather than a landscape because what we want is to put a landscape image in So you want to look for a landscape image something like this will be pretty good because you can lay the text over easily Something like this. If you actually lay the text in the middle, then you’re gonna cover this girl here, which isn’t that great, right? So if you actually look for an image Maybe like this Then what you could do is because the people on the right hand side you could put the text on the left hand side so choosing an image is really important because You know, it’s basically on your blog. It’s basically your images and your text and that just makes up the visual elements, right? So spend some time to actually look through the images that you like or you could use your own images But I’m also going to show you how to crop them as well Okay, so let’s say you like this image here Then you would download that onto your computer and save it into a folder then what we’re going to be doing is going to a website called photo comm and editing the size of the image you want to edit the size of the image before you upload it because Sometimes the image is too big and that will make your blog load slowly and that’s not very good So we need to click on edit Let’s close that Okay here we’ll click on open and open from your computer so I’ve also included the images that you can actually Crop as well. So this one here here are full-size We’re going to open Okay, you can also put in your own images as well Click on skip tutorials as you can see this image is four thousand times two thousand six hundred and sixty-six This is very very big and it’s gonna take a long time for your blog to load so we’re gonna click on resize and what we’re gonna do is change it to about about 1800 okay and make sure the lock icon is selected So the height is automatically adjusted when you change the width then click on apply Alright and then we’re gonna click on crop, okay, and then you can actually change it to maybe 1800 times about a thousand might be pretty good and then you sort of just zoom in like that Okay, and then you can arrange it to where you want. Okay, so I’m gonna try and put the text in the middle So I think something like that is okay. Okay, I can put the text arrow the buttons here and things like that Okay, so sort of arrange it to Where you think is the best to put the text or you can put the text here on the left as well, right? And then click on apply Okay right now you’ll need to click on save and We’re gonna save it as normal quality for now. So you can click on download and Then save it into your folder here. Okay, and click on save so I’ve already saved it in the folder So I’m gonna cancel that and go back So if you actually have your own image then make sure it’s at least I’d say 1600 x 900 you don’t want to be too small either. Otherwise, it’s gonna stretch too much and look really low-quality on your blog So what we’re gonna do is add the background image in. Okay, so we’re gonna add it to the row So the purple color there is the row so you can click on options And what you can do is you can hold this and you can drag it to the right-hand side Okay, it’s gonna click I’m gonna close the module pot. Okay for the row width I sort of wanted it to go all the way across. Okay, as you can see here, it goes all the way across If you don’t want it to go all the way across you don’t have to select it. That is optional So let’s go back here. I’m gonna want to go all the way across row height. I’m going to leave it as default click on styling background and For the background image we want to click on browse library Don’t click on upload because if you do then it’s going to sort of automatically crop it and it’s not gonna be good Right. So let’s click on browse library and then click on select files and then I’m gonna upload the image which are cropped already here. Oh cropped Okay, so let’s click on insert file URL and that’s gonna add your image there Okay, but you can’t really see it because we need to actually add some spacing So the first thing you’ll need to do is to change the background mode to full cover You can also change it to parallax scrolling or zoom scrolling, which is really cool And you can also add in a video if you want But what I recommend is uploading that video to YouTube first because if it’s uploaded to YouTube then YouTube is actually going to compress the file size and It’s gonna load really fast on your website. All right, so we’re gonna scroll down To padding. So padding is another word for spacing. So click on that and click On this icon here. And what we want to do is add maybe something like 15% Okay, change it to 15% to the top and also to the bottom Like that okay to stretch out that image a little bit I might add maybe a little bit more maybe let’s try 18 18 percent okay, cuz we’re good also gonna be adding in some text. So it’s gonna stretch it out further So I’m gonna keep it as 18 for now and then you can change it depending all your image size as well So let’s click on done. If you actually hover over here the green icon, we’re gonna drop in a text module and Gonna add in some text so I might type in start a blog So on the left, you can barely see it though. We’re gonna change it to a heading one Okay. So heading one what I recommend is actually just having one heading one Font per page. Okay. So this is for SEO purposes or search engine optimization And I actually do have a video on SEO on my channel as well Which I highly recommend you check out after watching this video. All right, but we’re gonna leave it as heading 1 for now. Okay, and What we could do now is just click on done for now and what if you want to add in another text, okay? You can add in another text from dropping in one here or you could actually hover over the pencil icon and then click on duplicate alright, so that’s gonna add another text module and you can double click it and Then you can change it to maybe learn. Let’s say oops learn how to create a blog Step-by-step, something like that So we want to change that back to paragraph. Okay, and If you go to styling here, you can change the font. Okay, so the font color so I’m going to change it to white I’m also going to change the font size to maybe 22 Okay, and you can also text align it for this specific module as well. But let’s just click on done for now Okay. So what we’re gonna do is one actually align the text into the middle so we can actually do is you can actually click On the row options here or you can actually double click the background which will take you to the right options for the entire row here Okay, so you can click on styling click on font and you can align the text in the center So anything inside this row it’s gonna be aligned into the center if we actually dragged this module down to a new row It’s not gonna be aligned into the center anymore. Okay, because only within this row is gonna be aligned in the center Okay, and I’m also gonna change the font color for the entire row. So I’m gonna change it to white For the entire row, right? So this is also the heading one tag okay, so to change it you can actually go to The text module by double clicking it straight away from here. So double click Okay styling heading heading one and then you can change the font family here Let’s just change it to open sans which is the default font that we’re using right now. And what I recommend is just keeping everything open sans for now and Don’t worry too much about the the styling the colors the font sizes and things like that Right now because if you do then you’re sort of gonna get confused and a little bit overwhelmed I will actually go through it towards the end of the video and show you how to customize The colors and fonts and everything for the entire website, okay I’ll also show you a really cool tool which will allow you to actually check, you know What fonts the top blogs in the world are using what colors they’re using and I’ll show you how to edit it really nicely okay, so if we actually scroll down here, what we want to do is change the font size to 80 and You can also change the font weight to about 600 like yeah I think that was good click on done and then let’s drop in a button module Just like that and you can change the size of a button here to small large Okay, you got the button shape different sizes and also the button Colors the background colors. Okay, and then you can scroll down here the button text we’re gonna type in begin journey, or you can link it to maybe a coaching page and services page or your contact page and Let’s say you want to link it to your back page. Alright, so if you actually hover over a back page right click Open link in a new tab You can copy the URL and paste It into here and if someone clicks on it, they’ll link. They’ll be linked to this page. Okay, you can also change the button colors Okay, I’m gonna keep it as black I think that looks pretty good you can also click on here and add an icon Okay If you want to change the button colors to something more specific you can go to styling Button link and change the colors here. Okay, but we’re gonna leave it for now. Click on done So what you can also do with the Builder is if you don’t want to see the layout a little bit more clearer Then hover over here and you can change the zoom icon Okay, that’s gonna allow you to sort of drag and drop the items wherever you like really easy Okay, and you can also click on preview just sort of see what the page looks like in without the builder actually on So click on that again. Okay, and then let’s just click on save and close Okay, so what you might notice is a little white space on the top here above your hero image now to remove that you need to click on edit page You want to scroll down a little bit to themify custom panel click on page options and then For your content with select full-width. Alright, and then click on update and Then once that is done click on View page and Then the gap is gone, right? Okay. I think that’s really cool Now if you actually turn on the Builder and let’s say we want to build our blog layout like this, right so go back here What you could do is you can hover over the next rows Columns. Okay, so we want to change it to something like this Here you have one main column and a sidebar here and let’s say if you actually drop in a post module Then what you’re going to notice is you don’t have any posts up yet So what I’m going to show you now is actually how to add in your blog post So then I’ll come back here and then I’ll show you how to Arrange it to different layouts and add in your sidebar and things like that really quickly. So click on done. Let’s just click on Close for now. We’re not gonna save it Okay, so we’re gonna go back to our dashboard area so hover over here and click on dashboard So adding a blog post is fairly simple All you need to do is hover over here on post and then you can click on all post So by default, you’ll have a hello world post. We’re going to trash it and We’re gonna click on trash here and delete it permanently from our blog Okay, and then we’re gonna click on add new and Here is where you put in the title of your blog post and here is where you type in your post, right? So I’m gonna grab some lorem ipsum text here. Okay and copy that and I’ll just paste that into here okay, and I’m gonna set in a title. So put in the title up here and What you can actually do is you can click on the toolbar here toggle toolbar Okay, and that option here will actually enable you to change the color you can also Indent some text like this. Okay, so you could maybe you might be a quote or something You can bold it or it might be something important. You could also add in some quotes like that. Okay, which is really cool okay, and You can basically just edit it like a normal word editor if you actually want to add a link so for example, you want to link to the lorem ipsum website you copy the URL and You would select the text. You wanna link? Okay, and then click on this insert link icon and paste in the URL if it’s an external links on you point outside of your website, you’ll click on link options and Open it in a new tab. Alright, if it’s something on your own blog then I would deselect it Alright, click on update now to add an image. What you could do is just click on add media and You can upload files from your computer So I’ve already uploaded some images from the folder that I have included in the description Okay So, for example, I want to add this girl here. Then I’ve actually cropped it to about a thousand one hundred times seven hundred It’s not as important for the images within your blog post What is important is make sure to set the size to I think at least probably at least a thousand pixels wide? insert into post and Then add in a category, so this might be about travel okay, and then add new you might add the location of You know where you travel to as a tag? So add that in So setting in the featured image you need to click on this Okay, and if you want to use the same girl What I recommend is to actually crop all your featured image to the same sizes, right? so one thousand one hundred times seven hundred I’ll use that across the board. Okay, so everything is consistent and if you want to actually Create like really cool featured images not like maybe like a image like this but like maybe something more graphical then you can use a Sun line software I think called canva comm and you could create really cool Graphics for your blog or anything that you need? Okay, that’s a really good website to use. So set that in and I think that’s it. Okay. So if you want to add in a video, then you can go to youtube find your favorite video copy and paste in the video like that and It should load up within a few seconds. Okay like that Okay, which is really cool. And I think that is it so you can click on publish Okay, and here you can actually, you know click on the permalink open in a new tab to view it Okay, and it should load up Okay, so this is your blog post which I’ll show you how to edit it a bit more later on Okay, so if you actually didn’t open a new tab, you might see this white bar here Sometimes it might happen then on what you can do is just click on your logo again And that will take you to your home page and the bar will show up and you’ll need to go back to your dashboard Okay, so I’m gonna add in another blog post. So I’m gonna click on add new and I’ll show you quickly Again, sir, you copy the text. So you put in the blog post What I recommend is writing a blog post on Google Docs Rather like rather than on here because sometimes you might not save and things like that it’s better to do it on Google Docs and then pay into here right and Let’s say you put in a title again Okay here you can add an image ad in your categories. This one might be able to say food a new category this one might be laksa okay ad set, you know featured image and upload files select files and This one here open Set featured image Okay, so what’s really cool is in when you actually scroll down to the themify custom panel You can actually change the post layout specifically for each post Right, so you can actually change it from the default to this one here like a little bit different, right? You can also change it with or without a sidebar and things like that as well So you have full control of what your blog posts look like for each individual post So what I’m gonna do now is add in a few more blog post because I need to add in a few more So I can actually show you how to display it properly on your home page Alright, so you can add in a few more as well. I’ve got all the images for you that you can add Okay, so I had it in about four more blog posts. You can add as many blog posts as you need So what we’re gonna do now is go to our home page and I’ll show you how to display it on your pages so you can turn on the Builder and What I like to do is I might actually zoom out a little bit to 75% so you can see more of this screen sort of thing Okay, hover over here the purple icon and then select the one with the sidebar Okay, and then hover over the green icon and we’re gonna drop in the post module into there. Alright and Here you’ll see the post layout. Okay, so this is the grid for post layout I’m gonna select the grid – I think that looks pretty good. Alright, or if it’s like the Single post list. Okay, that’s pretty good as well. I’m gonna select grid two and we’re gonna scroll down you can also select by categories only so as you can see Sometimes we might not actually show up yet So you can actually change it by selecting the category numbers, which I’ll show you where you can find it in about a minute or so, so We’re gonna scroll down here for the default post content layout. I normally just leave it as default But another one that is good. I think it’s stacking by default anyway But if you actually select boxed, I think that looks really cool as well. Okay? alright so the post filter will basically mean that the categories will be up here and If someone actually clicks on that then it’ll only display that specific category Alright, so personally, I don’t really like that for the postman masonary keep that as default the limits this is the number of blog posts to show so sometimes you might have like 40 blog post and Here you can actually limit it So whatever you want to display for example 4 or if I limit it to 6, then it’s gonna display 6 blog post like that Ok and Then we can scroll down. You can order it by descending or ascending With the dates or whatever it is here Scroll down here. This is the display options. Normally I keep it as excerpt if you actually select content It’s going to display all the content. So normally I don’t really recommend that because it’s gonna be sort of too long Ok, either excerpt or again select none, so there might be no text at all Ok, you can also hide the image change the image size here you can hide the post title as Well as maybe hiding the post date because you might not want to show that they can hide it You can also hide the post meta which is this the name and also the categories and tags by selecting guests So you might want to clean up sort of look for your blog. Then you could hide that like that. Right really simple really nice And yeah, I think that’s pretty much it. So if actually scroll back up, I’m gonna select the Boxed option, I think that looks pretty cool like that Ok, and then I’m going to click on done So if we a sidebar on the right hand side You can hover over here and you can drop in the widget eyes module Alright and for the widget eyes area you want to select sidebar? Alright so this is going to show you the default sidebar And right now I’m going to show you how to actually edit what’s in that sidebar so you don’t need like some of these You know site admin and things like that, which is not necessary. Okay. You want to make it like look really good, right? So that’s what I’m going to show you and yeah, so we’re gonna click on done what you want to do first is you might want to add some spacing here because it’s like way too close to the Hero image on the top and if you preview that it’s not gonna look very great. Right? We’re gonna add some spacing there So we’re gonna hover over the purple icon and you can click on styling It’s the same as options, but it takes you straight there. Okay, and you can click on padding and Then we’re gonna add 5% to the top and 5% to the bottom just for some spacing. Okay, click on done And I think that looks pretty good. And we’re gonna go to edit the widget section. We’re gonna click on save Close Go to the blog and you can click on widgets directly here or you can go to the dashboard and Navigate there by hovering on appearance and including your widgets here Here we have the sidebar widget and we’ve got all the available widgets which we can drag in and it will display So what I normally do is I open another tab so I can see Visually, what’s happening? Okay. So here is the search bar here is the recent post and if you refer back here This is the search the recent post. So what I want to do is I want to remove the metal. So delete that I Want to remove the archives as well? and also the recent comments delete that recent post delete that and I might leave these search there on top that I might add a title like maybe I might do find a post It’s really up to you if you want to have that search bar there or not we’re gonna have a image maybe so you can add in a Picture of yourself like a little profile image so you can add image Upload files select files so I’m gonna select this image here and upload and I’m going to set it to full size add two widget Okay, that is cool click on save I Might add a little about Me section up here. So about me Hi Maybe my name is Lisa. I’m gonna copy it from my blog here so copy that and just Paste it it okay and save Okay, so the next bit if the social links will need to add that in later so I’m gonna scroll down here I’m gonna add in the popular post so to add in the popular post you can scroll down to the Themify, I think featured post here. Okay, so click on it and drag it below the image and Then you can change the title. So I’m going to change it to popular Post Okay, you can set the categories. You can also set in a thumbnail as well. So I’m not gonna sit in a thumbnail, but that’s up to you and For the order by you can do it by date and Limit the number of post. So what gotta do is just click on save And to actually select the popular post what I might do is you might Change the category to popular and then select, you know, maybe the popular category or something like that, right? so what we could do is click on done and If you actually refresh the page, then you can see what the changes we’ve actually Implemented so you got the find a post about me. You got the picture You got the popular post and you’ve got the category, okay? So here you’ll also have a email opt-in and to do that. We’ll first need to actually Download a plug-in okay before we can actually add that in So right now what I’m going to show you is how to add in and configure some plugins so gonna go back to here our dashboard area and You want to click on plugins? So plugins add extra functionality to our website so it’s sort of like we’ve built our home now and also the structure of plugins is like You know your microwave your fridge, you know, your your computer and stuff like that It adds extra functionality so you can add a lot of different plugins for different purposes So these are the plugins that I recommend but you could add in You know different plugins for different things like booking you might add a forum a lot of different things Okay, so I’m gonna search for the first one might be Instagram, okay, so we’re going to add in an Instagram feed plug-in So this is gonna display your Instagram feed on your page install now Activate and I’m gonna click on add new We’re gonna search for MailChimp, so MailChimp is basically a Email service provider so you actually helps you collect Emails and then you can actually send out promotional emails or things like that Okay, so we’re gonna install this plug-in and it’s gonna help us integrate the MailChimp with our WordPress website So click on install now So this is this one is by Barry code, okay activate Click on add new we’re gonna add in something called match share Okay, so this plug-in will help us add social media buttons on our blog post and so now Activate Okay, so right now it’s taking us here don’t worry about it go back to your plugins and We’re gonna add a final one. This one is going to be contact form 7 Say search for contact form and We’re gonna install contact form 7. This one is really good as well But this one’s just very lightweight and I like just how easy it is to actually just set up okay, we’re gonna click on install now and then We’re going to activate the plugin So here I’m just gonna click on I understand and do not show this message again Okay. So the first plugin we’re gonna activate is the mass share right? So click on mass share and should take you here Okay And the next thing that you probably want to do is you want to click on networks and you can put in your facebook URL so I’m gonna grab the facebook URL and Also, I’m gonna grab the Twitter URL as well so I’m gonna grab the facebook URL okay copy that and I’m gonna paste it into here and Also the Twitter username or my Twitter username is up here in the URL copy that paste that in click on save Click on visual So here you can change the visuals of the button. Okay, so I’m gonna leave everything as default for now Alright and then go to position Okay, so you want the social buttons to show on your blog post? Okay, and You can display it on the top or the bottom or both or manually. So let’s open a let’s say a blog post And you’ll see right now it displays on the top Okay, you can also display it on the bottom of the blog post like that and gonna Save Changes And then you can refresh it And then scroll down and then it’s on the bottom like that, okay I personally like it on the bottom, but it’s really up to you how you want to display it and I think that is pretty much it for that plug-in so make sure to save the changes now the next plug-in that I’ll show you how to configure is The male chimp. Okay, so What we want to do is you probably want to go – mouch imp. Okay, so type in MailChimp Okay. So this is a free email marketing software that you can actually use today so you can click on the first result here and You can sign up for free. Okay, so it’s free I think for Up to I think a thousand people or two thousand subscribers. Sorry Okay, so free for over up to two thousand subscribers, so it’s perfect to sign up and you don’t need a credit card I don’t think so. Okay. So what we’re gonna do is I’m going to log into my account first and Then I’m gonna click on login Okay, so normally when you actually log in here and you probably won’t have a list created so we’re gonna create a list first so click on list and You want to create a new list? So this list will actually store your subscribers so click on that and Then click on create list So your list name might be your blog name sir, okay blog name and your email address Okay, sir, for example it’s best to actually have a your domain name email address because I think Some email providers might block your gmail address and things like that So it’s best to create like something like, you know, hello at Hogan shore comm and other tutorial on my channel for that Okay, send from maybe your name and Go down, so this is a reminder of you know how people actually signed up so you visited my fashion Vlog. Alright and here is you’ll put in your contact information. So I personally have bought a PA box But I think that’s up to you. It’s best to Put in a address, maybe perhaps from a lawyer accountant or someone if you don’t want to put in your own Okay, and here enable double opt-in. So what that basically means is if someone signs up for your Email list then they’ll need to actually confirm it in the email Okay So you can enable it or disable it that’s up to you and you can enable these settings and then click on save Okay, so I already created a list. So you’ll need to click on save and then once you’ve done that you can go back here to MailChimp and then click on MailChimp here and we sort of need to connect the plug-in and also the MailChimp account right? So we need to get the API key so make sure you’re logged in here and then you can click get your API key and That should take you to the section of You know where your API key is located so scroll down here and this is your API key copy to your clipboard Paste and save so that should be connected and then you can actually Renew the MailChimp list if it doesn’t show up here, you’ve got your list, right? So what we could do now is click on form. So we’re gonna create the first form for your website. Okay? so for the form title, I might do like For my home page, so on page email Opt-in something like that and you’re gonna select the list that you just created on MailChimp. I’m gonna select that one and Add new form Alright now once you’ve actually done that then you’ll actually get a shortcode so this is a shortcode which you can copy to your clipboard and you can paste it anywhere on your website and This form will basically show up right before I want to copy the shortcode. I want to edit the form, right? So I don’t really like the email address in front like that because I don’t think it’s really necessary Because it’s already in here as the placeholder. So I want to delete that label all right, so I want to delete the label just like that and Then you’re pretty much good to go. I guess so here. You can also add in a full name as well Okay. So for example, if you click on the full name, then you can put in place holed up full name and You can select it. Is it required or not and then add to form? okay, that’s gonna add a full name field to the email opt-in, but I’m just gonna leave it simple just like that and Then you can also click on messages to configure, you know The the successfully subscribed messages the settings here as well. Okay, I’m gonna select no for the double opt-in and For the appearance just keep it as is like that and save So what you can actually do is copy the shortcode then we’re gonna go to our home page Okay, and I want to first show you how to add one in on the top here Okay, because I think it’s really good to have a email opt-in on the top. Just like a nomadic Matt hasn’t okay I’ll show you how to do this one. So what you can do is turn on the Builder and What you can do is hover over the green icon here select a box module and put it in to a just an empty empty row and paste in the Shortcode, okay, click on enter and Maybe do you like? sign up for our weekly News Letters Something like that I’m gonna change this to heading to and go to styling font and I’m gonna align it into the center like that. Okay, and then I’m gonna click on done Okay. So here what you could do is you could zoom out of the screen and Let’s say I want to move it up to the top section up there So what you could do is you can take the whole row. So click on the Purple thing and sort of just pull it up there and sort of wiggle it up and scroll up Okay, and then and then put it there like that. Okay, so what you could do is if you want the gray border to go all the way across then you’ll need to go to options and Change the row width to full width, okay? Click on done and then you’ve got your newsletter signup box on the top like that Right, which I think is pretty cool and then you can save it To add it to your sidebar section then you sort of need to do it a little bit differently, but I think this is a really good way to Do it right. So you click on save and Click on close We’re going to go back to the dashboard area and what you want to do is go to themify and you want to go to Build it layout parts. Okay, so we want to build a layout pot so I’m gonna click on add new and This new layout part is we’re gonna call it ebook signup, okay, and then I’m gonna click on publish and then I’m gonna click on ‘theme if I build up and I’m gonna click on the front end here. So I’m going to edit the sign up box on the front end Okay, so the same thing so we’re gonna drop in a box module Like that so this one might be Free Ebook Let’s a free book something like that change it to heading to okay, and Below that I’m gonna add a media. So I’m going to add a ebook. So upload files select files Then I’m gonna upload this one here. It’s a PNG which means it’s transparent and Then it’s like full size insert into post Okay after you put that image then what you want to do is click on enter and then You want to paste in the shortcode the mail chimp shortcode? Below that okay, something like that. And what you want to do is click on styling and what you could do is Go to the font and align it into the middle just like that okay, and Then you can go to box well change and add a little shadow to it Okay alright, so once it’s done click on done and we can click on save and Then we can close it Alright, so we’re gonna actually go back to the home page so that the top bar doesn’t actually show up for some reason So we’re gonna go back to our home page just by typing in in on the search. I mean on the Google bar there Go to your dashboard section Then what you want to do is is you want to go to widgets and Then you’ll need to scroll down to themify layout parts, okay and Drag that widget and let’s say put it under categories okay, and the layout part we want to display is the e-book sign up and then click on done and Let’s visit our website Scroll down and Then you’ll have an really cool ebook sign up there on The right-hand side. Okay, so it’s also gonna display on your blog post as well. So if you click into that Okay, which is really cool So now we’ll want to do is we want to go back to the dashboard and I’ll show you how to configure your Instagram feed so you want to click on Instagram feed here and You want to connect your Instagram account just by clicking on that Okay, and that’s connected then what you can do is just click on the Save Changes and Click on the second tab customize Here you can select the number of photos you want to display So for example, if you actually want to display it on the bottom here, you might select ten pictures in One two three four five columns. Okay, if you want to display it on your sidebar section Then I would display it as two columns. Alright, so let’s select Let’s say 10 post number of columns five Padding is essentially the spacing. Okay, if you don’t want spacing between the images select the zero, I’m gonna keep it as default We’re gonna scroll down to the header. I’m gonna deselect header and disa like this Okay, scroll down to the load more button I’m gonna deselect it, but this is optional and I only just want a follow button okay, so show the follow button take background color I’m gonna select two two two six twos like a really dark grey and Also, the button text color will be white Okay, and then text will be follow on Instagram scroll down save it and Then we’re gonna actually click on display your feed So we’re going to just copy this shortcode copy and We’re gonna visit the website in a new tab Here we’re gonna turn on the Builder Scroll down here. You can drop in a text module. So let’s drop it on the bottom Paste in the feed done Then it should display okay after when you’ve saved it so save it and Close it Okay, I think that looks pretty good so Now I’m gonna show you how to add in a contact form. So I’m gonna click on the contact page and Here we’re gonna add the contact form shortcode. Okay, so we’re gonna go back to the backend and We want to get the contact form shortcode. So click on contact forms here and Here is your contact form so you can copy this shortcode what you might want to do is click on edit first and Here you can actually edit the Contact form here to add in different fields and things like that. Okay, make sure the mail is set to your mail and Sometimes you might need to Check your spam folder and make sure you’ve actually checked it not as spam okay, and you can change the messages and also configure some of the additional settings right and then click on save Come back here turn on the build up and I’m gonna set the columns to Something like this. Okay, so we’re gonna drop the form into the middle Paste it in so I might do like Get in touch Change it to a heading one If you have any Questions make sure to Drop me a message I’ll get back to you within 24 hours and Then paste in your shortcode and then it will display your contact form Okay, and then click on done? So that’s pretty pretty much a very simple contact form and you can add in different elements and things like that if you want to as well, okay, we’re gonna I’m done and then close it and That is pretty much all the plugins that we’re gonna add in right now next I’m gonna show you how to configure the blog page layout and then also the about page and I’m gonna show you something really cool Hopefully you guys don’t hate me for it But I’ll show you guys in about a few minutes. Okay, so we’re gonna go to our blog page and What we’re gonna do is turn on the Builder Okay, so you can pretty much create any layout. I generally just select the standard blog layout and I just put in the post module and I think I want to select the list post layout which shows it like that Okay, and then to add in the sidebar? I will click on done for here first and I will drop in the widget eyes module on the right hand side and Then select sidebar alright and then click on done and Then there you have it. Okay So we’re gonna click on save here and then we’re going to move to our about page So I’m gonna close the builder Okay, so if you actually click on the about page what we can actually do is turn on the Builder and Something really cool is that you can actually go to rows right and here There’s actually pre-built rows Okay The reason why I didn’t want to show you Straight up at the very start is because if you actually put in let’s say a row Okay, you add that in You’re not really sure how to actually, you know Find the right images and edit the text and edit the layout and things like that Okay, if I put it in like that then you know, you’re not gonna learn Basically how to do the settings of it and you’re gonna get more overwhelmed more confused, right? So you can actually use this destroy layout now because you’ve actually learnt the skills and What you learned is sort of how to actually create a website as well See, I’m not sure if you have noticed like sometimes I just mess up, you know blog and then website But they’re basically essentially the same thing You’ve got your blog post and things like that, but now you actually know how to create a website so one of the ways that you can actually make money from your blog is You can actually use the skills that you learned here and you can actually sell it as a service to maybe your friends your friends friends, or you could go to like marketplaces like You know fiber comm so you actually make money by selling these services Like a lot of people who actually follow my tutorials have actually become You know web developers without learning how to code and helping other people build websites So, you know if that’s what you want to do, then that’s what you can do as well to make money from your blog, right? so for example We can even drop this one here like drop this layout down here as well Let’s try and put that in see if it works. Okay, put it in there And Then you’ve got a really cool layout, right? And what you could do is you can click on the buttons right and then you can link the link Here the button link to your blog page Okay, link it to your contact page link it to you know You might have a services page link it to your about page and things like that Okay so you can use these templates and what you can also do is you can actually hover over here and click on load layout and You can actually import complete layouts, right? So for example For the about page, let’s just select this one. I really like Okay, this one is the profile one and then replace existing layout and Here you can replace your image replace the images beside that and Replace the text if you don’t want certain areas, you can zoom out and you can delete the entire rows. Okay? So for example, if we scroll down I sort of probably don’t want this section here. You can delete it Okay Like that or you could just create a really simple About page we just drop in. Hey And some text. Okay, so I’m gonna leave you to it for your about page and then click on save and Then let’s click on close. So what I want to show you now is how to add advertisements on your website like for example You might want to add Amazon ads on your website on your blog on your sidebar section or you might want to add Google Adsense on your website So I want to show you how you can add ads and actually monetize your blog Okay, so I’m actually going to log into my Amazon account to show you how much money I make from Amazon affiliates. So What we’re gonna do is search up Amazon Associates click on the first result And if you actually don’t have an account now then make sure to join now for free So I’m actually gonna log in to my account okay, so sign in and You’ll see that it’s not very much money at all. But you can actually make money because I actually don’t actively promote it Okay, so as you can see it actually earns 1/16 cents but over time like if you actually go to I think reports and My balance is about $90 okay over the years But I actually just promote it on my blog as on the resources page Scrolling down and I just promote these books which I really really like, okay So this is not the best way to promote it the best way to promote it is to create Review sites like the wire cutter. Okay. So the wire cutter is an Amazon affiliate website and I think there might be Affiliates of other programs as well. Not only Amazon So as you can see when you buy through links on our website We may earn a affiliate Commission and they do Reviews so reviews about you know microwaves headphones You know products under five hundred dollars now these websites are really good because you know If you’re ranking for these terms people are actually ready to buy they just want to make that final decision Whether or not to buy or not And then if they actually click the link and by then you’re actually going to make a commission So the wire cutter which was started in 2011 it got acquired by the New York for 30 million in 2016. So That’s about 6 million per year. I’m not saying that you’re gonna make that amount of money But it is a possible way that you can actually generate affiliate income from your blog, okay So what are you going to remember is you’ve actually learnt the skills of how to create layout of the blog you can actually create this layout really easily and I’m gonna show you how you can add like You know ads on the side of your sidebar section But what you should remember is that you don’t need to Worry too much about the layout you need to worry about the quality of the content and also the search engine optimization okay, so to create and Banner, what you’ll need to do is go to the product linking and then click on banners So I’m not gonna you know, create a whole video about you know Amazon affiliates what I want to show you is how you can actually add, you know advertisements on your website I think there are other videos which cover this topic a lot more in depth and They could probably walk you through it’s a lot easier than I can write. So we’re gonna click on Amazon echo as an example and Here you’ll have the banners, okay, so as you can see I’ve got the adblock on so I’m gonna pause it for Now and refresh the page Okay, so let’s say I want this ad right I want this ad on The bottom of my blog post and you can actually select any ad that you have here. So I’m gonna select this one here I’m gonna copy the code so copy that the iframe code and then we’re gonna go back to our Website and blog here into the back end section okay of your dashboard And what I want to do is you want to go to themify settings? and then what you want to do is click on content and click on see hook locations So this is what it is. Okay, so you can actually add the ad Anywhere on your blog so you can add it on top the header section here You can add it’s on your blog posts. So if you actually click into the blog post and then scroll down What I want to do is I want to put it just before the comment section. Okay? I don’t want to actually put it in the post end cuz what’s gonna happen. It’s gonna actually show on my home page So I don’t want my ad, you know everywhere. I just sort of wanted, you know at the end here okay, so to do that as an example, we can just click on add item and You can select the location so I want to set it as Comment before and then paste in the code Okay, pasting the code and then you can also set in conditions like for example You might not want it to display on certain pages then you can use it. Okay, we’re gonna click on save and Then we’re gonna go and visit site and I’m going to disable adblock for now. So it pause on this side and then let’s say if I click into this blog post Scroll down and Then it’s gonna show up here I get on each of the purpose if I go back to the other blog post then you’ll see that it is added as well Okay, awesome, so you can also add it into your sidebar section if you want to as well What I want to do is I’m just gonna add it to let’s say the blog page, right? I don’t want to add it to my homepage because I don’t want too many ads and you can just turn on the Builder So what you want to do is you want to click on a banner ad something like this? Okay, so for this I’m gonna select the json’ okay copy it and then Go to here Let’s drop in a text module like just below here click on the text tab up here and then paste in the code Select done save it and then close it And Then you’ve got the ad on your blog page Okay, the reason why I don’t want to add into the sidebar widget area is because you don’t want to add too many You know the verse mints on your on your blog because I don’t know. I just feel like it looks too spammy okay, unless you you have a Lot of content on your blog and stuff like that. Okay So what I’m gonna show you now is how to configure the footer section. How do you remove this? How do you add in your social media links? And things like that. So let’s go to your dashboard area and I’ve opened up all my social media accounts or Make sure to do that as well what we want to do is go to themify settings and You want to click on social links? Okay, so Here you can add your Twitter profile URLs Facebook URLs And I’ll do just that right now. So I’m gonna copy it over and paste in my Twitter I’m gonna paste it in my Facebook. I Don’t have a Google+ I do actually but I’m not gonna paste it in we’ve got a YouTube accounts paste that in Pinterest I don’t have one I’m gonna add link as you can see Instagram is not here. So what you can do is type in Instagram Okay, or any other sort of profile which is not included here and then you can add your profile link and copy it paste It in. Okay, and what you want to do is add an icon so insert icon and You’ve different icons here. You can click on brand or you can type in Instagram Okay, and then click on Instagram? For the icon color and background. I’m gonna leave it all as default for now and Then click on save okay So to actually display it on your page you need to go to appearance and then click on widgets and You need to scroll down and look for the themify social widget Thing here click on it and sort of drag it and we bill it up. Alright here you can actually put it into your sidebar section if you want to as well and I’m gonna open the link in a new window. Okay and save if you actually want to put it into the footer section Then you’ll need to drop it into the footer social widget section. Alright, so we’re gonna grab it again and Drop it into here. Okay, open the link in a new tab click on save and done and let’s visit our Website, alright, so the scroll down you’ve got the social links here Scroll down in further you have the social links down here, right? I’m gonna show you how to remove this So to do that we can go to dashboard Go to themify ultra themify settings and You want to go to heat theme settings and Click on footer text and Here you want to hide the footer text too and then it will actually disappear. So click on save And There you go. Okay, so that’s really awesome Now what I’m gonna show you is how to make your website mobile responsive, so if you actually try to You know make it into a mobile screen Then it should be pretty much very responsive already depending on the layout. They actually chose I guess so for example if we actually Resize it back You can actually click on the mobile responsive options here. So if you click into that it’s gonna change into the mobile display So you can actually set a specific Layout for mobile devices if you want to you can also set in a specific font Size for mobile devices as well. So let’s say for example, if you double-click the text module here start a blog click on styling click on a heading heading one font, you’ll see the font size is 8 correct, so we can actually change that to maybe let’s say 60 so a little bit smaller. Okay, so it’s gonna fit better on mobile devices all right, if you actually click on done and then if you actually go back to the desktop display and double click that text module again styling Heading you’ll see that the font size is actually 80 All right, so it actually changes you can actually click on the button here as well so you can set it specific for each Device, all right, so you can also do a visibility option as well so let’s say for example, you might not want to show the sign up theme for mobile screen then what you can actually do is you can actually hover over here and click on the options click on visibility and you can hide it for Mobile screens, I guess so fraught on mobile. He actually won’t show up. I guess so specific times You might not want to display too much content on mobile screens because it’s gonna make people scroll down too much All right. So this is really useful as well. And then we’re gonna click on done and then save and Then close All right So now what I’m gonna show you is how to customize the fonts the colors of your website To make sure that everything matches and it has a professional finish. I’m actually going to show you What fonts other people use and colors and sort of make it the blog that you want? all right, and this is gonna be really awesome really fun and Let’s get started So before we actually begin, I’m actually not a you know trained designer or anything like that everything I learned is just Self-taught and I feel like there’s no specific way that you have to do things you can be a little bit creative and there are no rules but you sort of want to if you’re a beginner you sort of want to have a little guideline of actually how to make sure that the design is consistent throughout your whole entire website so basically This part of the video will actually go through that and show you Sort of where you can actual change the colors and things like that All right. So I think the best way to do it is to look at, you know, one of the most popular and The biggest companies in the world like for example Apple again and look at their design All right, if you actually scroll through the website and on a website That’s basically just to two visual elements and that is basically the text and the images, right? So we’re gonna look at the text first. Okay, so this is a design guide that I have on our website I’ll probably put it the link in the description. Okay? so the first thing that you want to do is Choose a font family and what I recommend is just sticking to one font family if you’re just beginning out Beginning to build your blog. Okay, because if you actually go to let’s say Apple and This is a Chrome extension I downloaded it’s called what font and if you actually click on it on the top right here When you actually hover over the text, it will tell you what fonts they they use So Apple actually uses just one font family. Okay. So SF Pro, I think that stands for San Francisco Pro Okay, so if you scroll through the website They just use one font family and a lot of beginners think you need to use a lot of fonts But you don’t so what happens is they use one font family, but they use sort of Different font weights like a little bit bolder a little bit thinner a little bit bolder InDesign Okay, and that’s how they separate each of the text like that Okay, so down here also The same page is smaller and thinner and just a little bit lighter in color and that’s how they make it really nice I guess so you just need one font family. So The current font that we’re actually using on our blog is open sans. That’s the default font okay, you can just stick to that if you want to or You can actually choose something else So there is two different typefaces ago. The first typeface is sans serif and the second typefaces serif the main difference Is that the sans serif typeface it doesn’t have you know curves on the edges It’s quite plain and the strokes are even with okay, so it gives a really modern and just a very clean look, okay? If you to look on Apple’s website, they use a sans-serif typeface. Okay. It’s very clean It doesn’t have any curves on the edge Okay, and all the strokes are even and if you go to Tesla They also use a sans-serif typeface very clean and very modern design Okay Here Sarah it sort of gives a more sort of traditional and elegant look, right So this one here the blog that I built here is using sans-serif and I feel that you know, it suits probably more Towards fashion I’d say and some other blogs can use it as well Okay, so here are some examples if you want to check it out It’s also good for long reading because the curves sort of guides the high a little bit Okay, here are some recommended google fonts that you can actually choose to you know Start off with for your blog if you’re sort of unsure, so To edit the font. What we’re gonna do is go to our blog right? We’re going to click on the customize option here and We’re gonna start editing the text on the page, so here is the theme of our options. I’m gonna click on advanced and I’m gonna make the screen a little bit bigger for us right now Okay, so to actually edit the top part of the website here okay is This is actually your header section. Okay, so you click on header and the header wrap is the background color. So What I recommend is sticking to a neutral color either a white or a grey. Okay. The reason for that is because Imagine your your header section is like a white t-shirt, right? So if you’re actually wearing a white t-shirt, it’s actually really easy to you know Wear whatever color pants you’re wearing like you might be wearing, you know jeans you might be wearing black pants, you know blue pants But if you actually change the background color here to like a, you know a random color. Let’s say You know like a orange e orange e color then you can see that it’s gonna be sort of harder to match with the image below that okay the reason to That is because if you’re wearing a you know, orange t-shirt, it’s gonna be hard to match The colors unless you are really good at fashion. Unless you are really good at design Okay, so it’s gonna take some time to find the right images and you know, if you’re a designer then you know Go ahead. You can do whatever you like, but this is just a quick tip Okay, so you can either put it as a sort of a dark gray a neutral color like that It gives sort of a clean and modern Look, or you can just keep it as white which I’m just gonna leave it as why okay So we’re gonna – that and here this is your navigation menu so you can click on the main navigation and This is your link. So you can actually change your link color Okay, so by default, it’s a really dark gray. But when you actually hover over that that is a a red Okay so you can keep that red or If you actually look at an example from Tesla when you hover over the links It gives a slight effect like a slight effect that you know that it’s a button Okay, if you go to Apple, it’s the same effect. It goes a little bit like gray. All right So what I recommend as a good sort of formula is I actually go to a website called 0 to 255 okay, and Whatever base color that I’m using here. Let’s say for example, the base color is Let’s set the base color 2 2 2 2 Like that? Okay. So like a dark gray. I think that’s already that color. Anyway, okay. So let’s just take the base color Take the base color and we’re gonna put it into here put the color into here and end the color Right, we’re gonna scroll down and I’m gonna choose either two shades darker or maybe two shades lighter Okay, I might choose. Let’s say three shades lighter because you might not actually see the difference when you hover over it so let’s just pick that and You want to go to menu link hover and then paste it into here? Okay, so When you actually hover over that it gives a very very very slight effect You might actually need to actually go a little bit even lighter than that. So maybe Maybe four or five shades lighter so you can actually see that effect Okay, so whatever base color you put in as a link color then you should choose a you know Three shades lighter or four shades lighter depending on the color. Okay, so it gives it a nice hover effect You can actually pick you know red if that’s what you want as well. So the same thing for your button as well So if you actually go to the button later on then for your hover color Then you’d put in this color as well. And then you would just keep it very consistent throughout the entire website. Okay? so right now we’re going to minimize that and The menu active link is if you actually click on the about page Okay, so as you can see it shows up as red Okay, so that is a menu active link color and you can change that as well – maybe The same here just like that. Okay, I Think that looks not too bad and then you’ll need a menu active link hover. I’m gonna change this to two to Two something like that Okay, so a very very slight effect but it just keeps everything like very Professional all right, and then click on publish for now You can also edit the drop-down link container and also links if you do have a drop-down container, okay? I’m going to minimize these for now You mize that Okay, so if we actually go back to our home page Then you’ll notice that I said just to pick one font So if you actually click on body here and click on body font, let’s say you choose a fonts, which is cold I think the one that I used was Laura Okay, click on that that’s gonna change the font for the entire website from from the header down To the footer section like that. Okay, and I think it actually looks not too bad pretty good okay, or you can change it to you know, the recommended fonts that I have on my web sign guide or another option is that you can actually Hover over let’s say go to Tesla Turn on the what font you can actually hover over it and let’s say they use Gotham, okay. So what you do is you go to google and type in similar Google font to Gotham Okay, so this one might be look at the ten alternatives Okay, I’m not sure if this is actually a Google font though. So I think once the rat is definitely a Google font Okay, so that’s very similar to what? Tesla uses right so you can actually check you know Which blogs are using what fun and then you can do similar google fonts to that font. Alright So this one let’s just change it to let’s see if you have it. I cain’t monster rat and that Changes like that Okay, it looks very modern right now Okay, so it changes the entire feel of the website so you probably want to change the font weight to normal Something like that Okay, I think that looks pretty good as well if you want a more One in front, but personally I like the Laura font Okay, so click into body link and This is a link in the body section so you can actually change the color here So let’s say for example, I’m gonna change it to maybe just a dark grey then it’s gonna change like that Okay, and then for your body link hover, then you might change it to the same hover color that you set before Okay, so when people actually hover that hover over that then they’ll know that it’s a link Okay, and if you actually click on the headings here you can actually change the heading fonts universally Okay, so as you can see this font here is still open sans This is the same font that we actually set in before for that specific module Okay, so if you actually set in a specific font for a specific Individual model module. It’s gonna retain that Font styling. Okay, so We’ve set in the body font. It’s actually affected all the areas which you’ve actually didn’t set the font for right So we’re gonna click on forms now forms is actually forms like this Okay, so you’re gonna set the styling here. So what I like to do is for the form fields I actually want to add in a solid border here and I want to add in a very very light to gray okay, because it’s a little bit too dark so I’m gonna change it to maybe three e’s and then click on outside here and Then add maybe a one pixel or maybe two pixel like that Okay, so as you can see the color has changed. Okay, I think it just looks a lot better a lot cleaner Okay, and for your form buttons, then I will change it to the same Color again. I’m gonna keep it very neutral color. So for example the background color. I’m gonna set it to Two to two, okay, I’m not sure why that hasn’t published it. I’m just gonna click on publish and the form button hover I’m gonna set it to the four four four Okay like that and then Make sure that I publish it Okay, so I’m pretty sure it’s gonna change after I close it so we’re gonna click on sticky header Sticky header is the sticky header up there like that. Okay, you can actually change that color as well But I actually like that white you can change the sticky wrap header color. Okay? We’re gonna scroll down to the site logo and tagline So if you actually have a logo click on logo, if you don’t have a logo yet, then you can actually go to fiverr.com you can actually get a logo for five dollars and Then you could ask it to be designed for you and what you want to ask them for is a PNG file That’s a transparent file. And then you wanna click on logo image and you want to upload that image Here you can actually control the size because sometimes the image might be really big Then you might want to change the size here to maybe 128 I believe okay and test it out Alright, so I don’t have a logo yet. So I’m just gonna keep that logo. I’m gonna change maybe the front way to a little bit bolder like that Okay, you can also change the position of the logo here the main navigation I showed you before the mobile menu is the You can edit the styling for the mobile menu as well. So For example, we can change the panel color. Okay to any color that you want. I’m just gonna keep it as is for The menu link and keep it as is for the menu link hover. I’m gonna change it to the hover color that I set Okay Cuz my my base color is the two to two right so I’m gonna add in a very light a lighter version of it, right? You can also change the menu icon which is here. Okay, if you have a dark background you might need to change it to a A white or something like that, right so gonna minimize that here you can actually change the post titles So for example, if you click on post you can edit the post title here okay, but I’m just gonna leave it as Default. Okay. So the post title hover. I might try to change the color of that to four four four Okay, so it doesn’t show up here yet, I think that might be a Grid to post title. I think it’s gonna leave it as is for now You can also change the post date and everything like that here Everything about the post you can edit it here for the sidebar. You can edit the sidebar as well Okay can edit the font and the link on the sidebar section here but it’s actually only edits the Actual sidebar on the actual blog post this is actually a widget eyes module. So you need to edit the color there Alright for the footer section. You can actually scroll down and you can change the Footer wrap color. Okay, which is the background and also the link color as well I’m just gonna keep it as default as I think that looks pretty good The color style that I’ve chosen from our website is pretty neutral colored and it sort of suits any type of blog Alright, if you want something like a let’s say a food blog then he can keep it quite neutral But you can add you know instead you could add the the orange link colors And you know for your buttons, it could be orange. You could add little accent colors to make it sort of look nice but also nice and simple as well, like if you’re just beginning try to keep the design nice and simple and Then you can use this tool. You can check out you know other Websites side by side and then you can compare it. Okay. That’s the best way to actually Rearrange the layout is to actually have let’s say your website side by side and Then you actually look at the layout that’s let’s say pneumatic matt has and then you can actually change the Columns and arrange the layout exactly like how you would want it, okay Okay, and I think that is pretty much it. I think the last thing that we want to add is a fab icon So this is a little icon here. We’re gonna close the customizer and We can actually go to the dashboard area Click on themify ultra themify settings Your custom fab icon click on upload and Then I’m gonna upload a fav icon. Okay has to be a PNG file and the size of it I believe is 32 times 32 pixels and you can actually request a favicon from the guys who actually do your logo ok And then click on save okay? So what you’ll notice is if you actually got your domain from Hostgator you’ll see not secured Okay to actually have the secure icon if you’ve bought the SSL from Hostgator go to plugins ok, and the next thing you want to do is click on add new and You want to type in here really? Simple SSL and Then we’re going to install now this one here Click on activate and Here click on go ahead and activate SSL Ok, what’s gonna do is actually going to take you And log out of your blog. Ok, if let’s say if you click on visit site, it’s gonna log you out of your blog All right, so it’s logged out and you need to log in again by typing in /w p admin And Then it should show up as secure So you notice that it doesn’t have that green icon Then what you might want to do is try to re upload your images that you upload it So delete them from your website first and then re-upload them and then it should be fine. Ok, so save it and then close it and hopefully It’s gonna show up the green icon like that Alright so my name is Hogan and Basically, hopefully you have really enjoyed this tutorial It’s taken me over a month to create So if you actually really like it then make sure to leave a thumbs up and let me know in the comments down below How long did it actually take you to? Build and follow this 2 hour long tutorial and I’ll also have the SHOP video and additional videos Down below in the description. So make sure to check that out

Securing WordPress Content with Passwords

Securing WordPress Content with Passwords


[SLURP]
Hello and welcome to Southwest Cyberport’s WP Coffee Break,
WordPress answers in the time it takes to have a cup of
coffee. Today we’re going to learn how to password
protect content on your WordPress site. There are many reasons you
might want to do this, and we will just look at a couple of them
today. If you have a situation we didn’t cover here, just ask in
the comments and we may do a followup video. So what information might you want to protect
on your WordPress site? The two most common answers are Private
documents, and digital files you want to sell. Today we’ll focus
on private documents. This might be a directory of members of your
club or organization, business plans, or even a family newsletter. From the WordPress perspective, this information
breaks down into two types: information presented in a page
or post, and files that are uploaded. Usually your information will
be a combination of both of these types. They each have to be
addressed within your site. We’ll start with pages and posts. WordPress makes it very easy to password protect
a page or post. We’ll add a page for Club Newsletters. The
process is the same as adding any page in WordPress. The only thing
we do differently is click the Visibility setting over here on
the sidebar. Click the Edit link to get options. You can either add
a password or select Private. If it’s Private, then the page will
only be visible to you, while logged in to the site, not to any
other site users. While that makes your data perfectly safe,
it’s also perfectly useless! What we want to do is set a password
on this page. Now anybody who wants to access it will need to
know this password. Any time you add access restrictions to your
site, you need to test it. It can be a little tricky because once
you have accessed the page, you don’t have to give the password
when you visit it a second time. That makes it hard to tell sometimes
if things are working like they should, or if you have accidentally
removed the password protection for a page. One good way to handle this is with what Chrome
calls an Incognito Window. This is a new browser window which
doesn’t have any of the cookies, history, or passwords that would
be available to your normal browser windows. Safari and Firefox
call these Private browsing windows, and they are the same thing.
They let you very conveniently visit the site as though you
were a member of the public. After you test you can close that
incognito window and open another when you want to test again.
Each time you open a new one, it will have no knowledge of the other
sessions. I’ll visit the site in my incognito window,
visit the Club Newsletters page, which I’ve added to the site menu, and
it wants me to enter the password. If I enter the wrong one, it
won’t let me in. When I finally enter the correct password, I get
to see the page. This next point is subtle but very important.
We have password-protected this page, so you need to know the password
to see this information. However, the PDFs we have linked here are
in the WordPress media library on our site. Anybody who has the URL
which links to one of these PDF files can download them, without
going through this protected Page. WordPress is organized this way for good reason.
Allowing direct access to the files in the media library is
many times faster than if WordPress had to play gatekeeper for every
image file needed to construct a page view. However, it has this
side effect, this trap that a lot of people fall into, where it seems
like you have password-protected some information, but later
you find that your private files have been indexed by Google
because they got exposed in some way. What we need is a way to store these private
uploads in a separate area, not in the usual Media Library, where
they can’t be accessed by just anyone who knows the URL. And then
we need a gatekeeper to allow access to those files only under
the right conditions. There are several plugins available to solve
this problem. We’re going show how to do it with one particular
plugin, called Download Monitor. This plugin is free, has good ratings,
and has some paid add-ons available if you need more advanced
features. After we install and activate the plugin,
there is a new “Downloads” item on the dashboard sidebar. When we click
it, we see there is a link we need to Follow to do some first-time
setup. Here you create some pages that Download Monitor needs.
If you don’t plan on selling digital files you don’t need to
create the cart and checkout page, but everybody should create
the “No Access” page. Before we add downloads, I’m going to tweak
the “permalinks” setting on my site. I’ve found that settings which
include “index.php” in the URL don’t work well with certain types
of plugins (like Download Monitor), so I will set mine to “post name”.
If you already have permalink set to something you like, just
try it and see if it works OK. Now, to get started, we’ll add a download.
To be honest I found this page a little bit confusing since it
looks so much like the screen for editing WordPress Posts. In most
cases, you can ignore a lot of what is here. We just need to work
on three things here: The Title, uploading the file, and setting
the visibility. Start by giving it a descriptive title (so
that you can find it easily later), then click the “Add File” button.
One note here, the “browse for file” button browses your
WordPress directory on the server, not your computer. That could
be useful in some cases, but usually you just want to click “Upload
File”, which takes you to the media library. Click “Upload Files”,
select a file from your computer, and then hit “Insert the URL”. Next we’ll change the “visibility” setting,
which defaults to “Public”. Click the Edit link to get options.
This is just like the visibility setting for a page, which we
saw earlier. We’ll set a password here and now anybody who wants
to download this file will need to know the password. Now hit Publish, and we are done adding this
download. While I add a couple more downloads here,
I should just mention that while it looks like we’re uploading files
into the Media Library, the Download Monitor plugin is actually
redirecting these uploads into a separate directory. That directory
is not available from the web, so somebody who knows the link
can’t get to it without going through the Download Monitor plugin
and entering the password. Now we have the file on the site, and it’s
protected by a password. The next step is to add a link to the file
on a WordPress page. Earlier we added a page for Club Newsletters.
Let’s go back to that page, and add links to a few PDFs that
we have uploaded. This plugin has integrations with both the
new Gutenberg block editor and the Classic editor. The method
looks different for each of them so I’m going to show how to add download
links with each one in turn. First we’ll use the classic editor. We place the cursor where we want the next
link to go, then click the “Insert Download” button above the editor
controls. It shows us a list of the files we have uploaded, we
select the one we want, then click Insert Shortcode. When this page
is displayed to the user, the shortcode, this text inside square
brackets, will be replaced with a link to the download file. Now I’m going to click Publish to save these
changes, then go back to the list of Pages, and edit this same page
again, but this time with the new block editor. First I’ll enter the text I want to precede
the link. When I press enter, it starts a new block. Now I scroll
through the list of block types, and find The one for inserting
a download. Instead of inserting the shortcode text, it adds a
download button, but it says we need to select a download. Remember
that in the block editor, the right-hand sidebar always has
controls for the block you have selected. If we look over there now,
we see this pull-down menu and can select the file we want to attach
to this button. Click update to save our changes, then we
can view this page and see how it looks. We’ve added the Club Newsletters page to the
menu so we can get to it easily. I have to enter the password to
view the page. Then when I click any of these PDF links, I have
to enter the password for that PDF. I used a different password
for this Page and for the download files. If you were to use the
same password for both, you would only have to enter it one time.
Any further files which have the same password will be served up without
having to enter it again. It’s up you which approach makes
the most sense for your site. Here’s a little shortcut that can save you
some time if you have a lot of downloads. You can have the plugin
generate the list of downloads for you so you don’t have to add
them to a page one-by-one. Let’s go back to our Club Newsletters page.
We’ll delete these links that we added before and replace them
all with one shortcode, called ‘[downloads]’ (note the “s” on downloads).
Now save this and view the page, and we see the plugin has
taken care of listing them out for us. You can add things to the
[downloads] short-code to control things like which files to include,
how to order them, etc. Check the documentation on the Download
Monitor web site for those details. I hope this basic introduction to protecting
private data on a WordPress site has been helpful. There are
a few related topics we didn’t cover here. For example, you can
use the “member” checkbox to make a download available to anybody who
has logged in to the site. There is also ecommerce support, so
you can tie a download to a Paypal payment button, and there are
several paid extensions available to give you more functionality like
requiring the user to fill out a form before downloading
a file. This has been a WP Coffee Break from Southwest
Cyberport, a cutting-edge WordPress hosting provider in
the heart of the American Southwest. If you need fast, secure and friendly WordPress
hosting, head over to swcp.com/coffee to check us out. If you have any questions or suggestions for
future video topics, leave a message in the comments. Thanks for
watching, and don’t forget to like and subscribe!