hey, everybody. i'm josh jackson from wpsculptor.com.thank you so much for joining me today. in this video, i'm going to show you step bystep how to create a really nice professional-looking website with wordpress using a free themecalled origami. i'm also going to show you several different online tools that are availablefor free that will really enhance the professional appearance of your website. if you like thevideo, please feel free to participate on youtube by subscribing to my channel, likingthe video, favoriting the video and sharing the video. those things really help me outso i really appreciate that. let's just jump right into it.okay so this is the exact same website. i'm going to show you how to create step by stepwithout skipping anything. first thing i'm
going to do is show you how to set up a domainname and hosting with a company called hostgator.com. it's a wonderful company and i highly recommendthem. the domain name that i've got here is actually what's called a subdomain becausethe domain name that i have that i own is quickwebsitecreation.com. since i didn't wantto have to buy a new domain name every time i make a new video, i'm using nature.quickwebsitecreation.com.you'll learn how to get your own domain name, a normal domain name like wpsculptor.com forexample. then i'm going to show you how to install wordpress on your hosting accountand we're going to install the origami theme that we're using here by a company calledsiteorigin. it is a free theme. i'm going to show you how to create this logohere with an amazing online logo-creating
and graphic-creating application called ipiccy.i'm going to show you how i came up with this blue, brown and light brown color scheme.there's a wonderful resource that's available for people like me that would rather relyon somebody else's expertise to come up with their colors than choose them on their ownbut you can do either way on that. then of course, we'll be able to create this texturedbackground. this is another resource that's available online for free where you can choosepatterns and make them whatever color you want which is an amazing, amazing tool becauseit adds a whole another degree of professionalism to your site. i'm going to show you how toset up this navigation menu with the drop down here like that.then on our homepage, we're going to have
a slide show. as you can see here, we've gotthree slides. you can have as many as you want or as few as you want. they will transitionautomatically or when i click and you can specify how long you want each slide to appearfor before it transitions into the next one. you can have a slide caption and then i couldclick on anyone of these slides and be taken to whatever page i want. this is an optionalfeature which slideshow, you don't have to have it that way. i can click on this pagefor example, to be taken to my blog page right here. this is my blog. then i'm going to showyou how to set up a call to action section like this. i'm going to show you how to addimages, add text and then make links through text. this is a link to one of the photo resourceswe're going to be using. this is the link
to their website. i'm going to show you howto do that with any text. i'm going to show you how to get all of theseimages from a free site and you don't even have to have their permission. you don't evenhave to provide an attribution to use their work. it's completely free to use for everyone,commercial or personal projects, it doesn't matter. that same applies to these icons here.it's from the same resource. i'm going to show you how to get these icons and add thistext with the title and icon. i'm going to show you how to add this buttons. these buttonslead to these individual pages. then i'm going to show you how to setup your footer widgets,just like this. these are called widgets. i'm going to talk about what widgets are andhow you can use them. what's really amazing
about this origami theme and the other themesfrom siteorigin.com is that they have what's called the page builder plugin. that enabledme to create whatever layout i wanted to. the personal preference that i chose, layoutthat i chose, i've got one row with one column so my slideshow is full width. my call toaction is full width and this section is full width. then i decided i wanted to have threedifferent sections here. i have one row that's got three different columns. you're goingto be able to create whatever layout you would like to have. if you're not using the origamitheme, you can still download the page builder plugin and use it on the theme that you'reusing. another really amazing feature of this wordpress theme that we're going to be using,the origami theme is that it is a responsive
theme. that means that on mobile devices,it will resize very, very nicely just like this. your menu will still work just fine.your slide show is going to look good. your call to action is going to look great. yourpictures, your text, everything is going to resize very, very nicely which is a very handytool to have, very handy feature these days. i'm going to show you how to setup an aboutpage with an image here. i'm going to show you how to resize these images. we're goingto download them all at the same size, same high quality size, much larger than this andi'm going to show you about a free online application to resize these images, text,create bullet list like this and then we're going to add a contact form. this is justsomething we'll download. one of the great
things about wordpress is that you can haveas many different functionality. the sky is the limit with your functionality becausethere's so many different plugins available and many are free to use. all the ones we'regoing to be using are free. users can fill out this contact form, click on send and thena copy of this form will be sent to the email address that you provide so you don't haveto give your email out if you don't want to. then we'll set up our image gallery page withanother plugin that's free. this is really cool. it creates these thumbnailsfor you and then you can click and this nice slide box appears. you can transition andsee the different images, just like that. click on the x to exit out of that . thenwe're going to learn how to embed youtube
videos. this is just a very simple way toadd some html code to your website. then of course, we're going to be setting up a blogso that you can have a featured image and then your blog title and then an excerpt fromyour blog post. we just got two blog posts here. this is another one here with a featuredimage in the blog title. then you're also going to learn all about comments and wheni click on blog post 2 to be taken to the actual blog post page. you'll have the abilityto provide a place for your users to have leave comments. this is optional. you don'thave to have this but i'm going to show you how to specify whichever way you want to dothat. you're going to learn all about comment settings. then you're going to learn aboutblog categories which this is a blog categories
widget here so that your blog post will beorganize. all of that you're going to learn step by step without skipping anything sothat everybody including absolute beginners could be able to easily follow along.the first thing we're going to do is setup our hosting account and our domain name athostgator.com. go ahead and go to hostgator.com. now, i highly recommend hostgator. their customerservice is outstanding. their pricing is excellent. they're just a great company to be with. goahead and click on web hosting at the top left. now, you have three different optionshere, the hatching plan and the baby plan are very similar except that the hatchingplan, you can only have one domain hosted on that account. of course, it's going tobe a little bit cheaper now. the baby plan
is a little bit more expensive but you canhost as many different domains as you'd like on that one hosting account. then the businessplan has this free private security feature and this free toll number. most, we'll probablydon't need that. i generally recommend the baby plan.we're going to go ahead and click on order now. all right. the first thing we need todo is register for a new domain name if you don't already have a domain name. if you alreadyhave a domain name with another company like godaddy.com for example, you could check thisbox here and then hostgator will send special instructions for setting up your domain nameand linking it to you hosting account. we're going to pretend like we don't have the domainnames so we're going to need to get one. now,
it's only $12.95 for a domain name throughhostgator and that's going to cover you for a whole year. that's a pretty minimal startupcost. what you would do is you need to enter the domain that you'd like here in this boxand then you have the option to do .com, .net, .org, .info, and .biz. we're going to do .com.now, i already have a domain name that i'm going to use for this video tutorial and thatis quickwebsitecreation.com. i'm actually going to use a subdomain. i'm going to callit nature.quickwebsitecreation.com, just so that i don't have to buy a new domain nameevery time i make a new video. in your case, you're going to want to get a domain name.one that is available is the naturalphenomena.com. what's going to happen is if the domain nameis available, it's going to give you this
congratulations message and you could justproceed. then you could decide if you wanted to purchase the .net, .org or those otherextensions but normally, all you need is the one. then you could just continue but if yougot the message that said that the domain was not available, you just need to try tosomething different maybe try .net or .org or just get creative with it. it may takea few tries. obviously, it can't be something that's already taken like hostgator.com ormy website, wpsculptor.com. those two are not available so just keep trying.then once you get something you like, scroll on down and for the package type just makesure that your purchasing the package that you want. again, i recommend the baby plan.then the billing cycle, if you purchased 36
months all at once, you would actually geta better deal but you would have to buy those 36 months upfront. i like to just do monthto month. it's a little bit easier to get started that way. obviously, it's a much smallercost. we'll just do that for now. then you're going to want to put in a username and a securitypin. just to make sure that you read the specification requirements there and are meeting those.then scroll down and put in your billing information. now, it's really important to provide a validemail of course. hostgator is going to send you some really important information andyou're going to want to definitely have that so that you can access you account.then for your payment information, you can pay with the credit card or you can also paywith paypal. just select which option you
want, put in your information there. thenscroll down under hosting add-ons. by default, the top three add-ons are checked. i'm justgoing to go ahead and unchecked those. you can always add these features later. we wantto get started as cheaply as possible so we're just going to leave it that way for now. now,scroll down to the coupon code section. now, this coupon code snappy is the default couponcode. that gives you 20% off your hosting order. i've actually got a couple of differentcoupon codes that will give you more of a discount than that. not only will they giveyou more of a discount, if you use them they're going to help support me and help supportmy youtube channel, and help me keep these videos going. i really appreciate that inadvance.
the first one and the most popular code thati have is the one that gets you your first month of web hosting for just one cent. thatis wpsculptor1cent, just like that. then if we validated that code, you'll see that righthere, the baby plan for one month is only 1 cent. then our domain order for the domainregistration is $12.95 and that's for a whole year. our total would only be $12.96 and that'sgoing to cover the first month. now, after your first month is up then you'll just bebilled the $9.95 a month for your hosting account. now, for people that are going topurchase multiple months at a time, for example, 6 months or 12 months or even 3 years at atime, i would recommend using the wpsculptor25 coupon code and you'll get 25% off your hostingorder. you'll actually save more money than
you would with the wpsculptor1cent code. mostpeople like to do it this way. we'll just continue and scroll on down andyou're going to check that you've read and agreed to the terms in conditions of use andthen click on create account. all right, after you create your account give hostgator a fewminutes to set that up and then you're just going to go and check your email. all right,after a few minutes, go ahead and check your email and you should have an email that lookslike something like this, sales@hostgator.com. go ahead and click on that. open it up andthis has your information to access your cpanel which is very important. that's how we'regoing to actually install wordpress onto our hosting account. you have a link to your billing,a link to your control panel. you'll have
a username that you gave. you'll have thepassword is actually something that's generated automatically by hostgator. that's very importantobviously, i've changed my password but you're going to need this password access to yourcpanel. go ahead and click on this link that's next to your control panel.you're going to log in with the username and the password that they gave you again. i'vechanged mine but your password is going to be right here so you would just copy and pastethat into the password spot here. then click on log in. all right and this is what yourcpanel looks like. what we're going to do here is scroll on down towards the bottomunderneath software/services and click on quick install. okay and you will have thislong list here on the right. all these things,
reason i have this on my account is becausei've got all kinds of different subdomains and domain links to my account with differentwordpress installations on them. yours should be empty here. you're just going to go aheadand click on wordpress on the left here. you're going to click on continue. then here you'lljust leave this at the default setting. it should be your domain, .com or .net or whateverthe extension is. you'll just leave that as is but my case, since i want this to be installedon this subdomain that i've created which is nature.quickwebsitecreation.com. i'm goingto select that but again you would just use the default. leave this box blank and thengo ahead and type in an email address. give your website a title. this is not thatimportant. you can always change this later.
i'm going to call it the natural phenomenaand then give yourself a username and your first and your last name. then you're goingto click on install now. okay and after that's done installing, you're going to need to giveyour website a couple of hours. that's usually how long it takes to do what's called propagatingand get itself set up. in the meantime, you actually won't be able to access your websitebut just give it a couple of hours and check back and your website should be available.you will need this username that you just specified and this password that was automaticallygenerated. this is different from the one hostgator gave you. this is actually yourwordpress password. you will need to copy that and save that because we will log into the backend of our wordpress website with
that password. let's give it a couple of hoursand then we'll check back. all right, after a couple of hours, you'regoing to check back and open in a new tab and type in your domain name. i'm going totype in nature.quickwebsitecreation.com because that is my domain name. once you get somethinglike this that means your website is now available. this is what the basic brand new wordpressinstallation looks like. okay, obviously we're going to change this up entirely. let's goback to that other tab and we're going to copy this password that it gave us. then,i'm going to go back here and i'm going to type in my domain name and /wp-admin. thisis going to take us to our login screen so that we can log in and access the backendof our website. log in using the username
that it gave you or that you selected foryourself. then paste in that password. of course, we will change that password thatwe can actually remember it. click on log in. all right and this is whatthe backend of your wordpress installation looks like. just to point out a couple ofthings here. this little link up here on the top left, first this gray bar is called adminbar. this link in the top left that has the name of your website when you click on it,if you're in the backend, it'll take you to the front end of your site. then if you clickon it when you're in the front end, it'll take you back to the backend. then also ifyou wanted to log out, you would hover over here on the far right and just click on thislog out button. that would take you out of
the backend and this gray admin bar woulddisappear. okay, the first thing we're going to do now that we're in our backend is deactivatewhat's called a cash plugin. it's a great plugin but we want to deactivate it becausesome of you might have trouble seeing the changes that you make to your website rightaway. now, this is a good plugin. i say that becauseit really can speed up your website for your users but while you're doing all your developmenton it, i recommend disabling it. we're actually just going to delete it because we can alwaysinstall that back later. we're going to plugins and click on install plugins. all right, thenunder wp super cash, click on deactivate and then now, you'll get this delete option underneathwp super cash, click on delete. click on yes
delete these files and data. again, we canalways reinstall this plugin. the next thing we're going to do is change our password tosomething that we can actually remember so let's go hover over users here on the left.click on all users and then hover over your name or your username and click on edit. thenyou're going to scroll down and right here where it says new password, you're just goingto type in the password that you would like to use.then repeat the new password lots below it. it'll tell you if they match or not. thenclick on update profile. all right now, our password's changed. next time, you log inthrough the backend of your website, you'll use the new password that you've created withthat same username. now, let's change right
here when we view our front end, just clickon that, i want you to notice that we have the site title and mine, it is the naturalphenomena. we have this tagline. this is called a tagline. it says just another word for asite. that's where all your fresh wordpress installations are going to put. we're justgoing to go and take care of that. go back to your backend here and go to settingsand then you're going to go to general and right there, next to tagline, you can justname this whatever you want. just something that describes your website. we're going tocall this ... i'm just going to say admiring natural beauty. then i'm going to scroll downand click on save changes. all right, now that we've taken care of some of our housekeepingthings, let's talk about one of the amazing
things about wordpress and that is that thereare thousands of free themes available that you can use to change the look and feel ofyour website. now, there's also a lot of paid themes but out of the many, many differentfree themes, there are some amazing themes. the one we're going to use is called origami.to install this origami theme, we're going to go to appearance. hover over appearanceon the left and then click on themes. okay and we want to click on install themesbecause that's what we want to do. then you're going to search for origami, just type inorigami and click on search. it's going to be this first one here that pulls up. you'rejust going to click on install now and we're going to click on activate. one of the awesomethings about origami is that it just has all
these different customization options so thatwe can just add an awesome background, custom background to it. we'll be able to add ourlogos, stuff like that. it's really great. once you've activated the theme, i just wantto point out by going to appearance and then click on premium upgrade. we are going tobe using the free version of origami but i just want to point out that you can purchasethe premium version and you can get access to email support. you can get this reallynice responsive menu. you'll get a different menu that shows up on mobile devices thatlooks really nice and neat. you can read about some of the different things.you can remove the attribution link so that powered by wordpress and then it has the nameof the theme company that designed origami,
you can remove that. you can add social sharingto your blog posts, different stuff like that, continuous updates to the theme, all of thatcan be purchased here. they recommend paying $15.00 for the premium version. i think it'sa fair price which i certainly agree with that but you can even pay more than that oryou can even name your own price, just pay whatever you think it's worth. i just wantto point that out there. that's a great way to support this theme company because theydid do an outstanding job with this theme. all right. let's go up and click on this buttonhere to view the frontend of our site. as you can see, right away, we got a completelydifferent look to our site with the origami theme installed. i'm going to show you howto change all of this completely. first thing
we'll do is take this off. this is a searchwidget that it is in our header. i'm going to go over widgets and discuss what thoseare. these are actually widgets by default. wordpress puts in these widgets in a new wordpressinstallation. we're going to add our own throughout this tutorial. let's go back and adjust someof the theme settings before we really get going here. click here to go back to the backendof your site. then you're going to go hover over appearance and click on theme settingsand we don't need to change anything here under display. i'm going to go ahead and uncheckuse origami gallery and this is because we're going to have several different plugins thatgive us the slider. we also want to be able to have photo galleries.we will uncheck that because we're going to
do that on our own. then to get rid of thatheader search icon, uncheck that there and click on save settings. i just want to pointout, we can remove the footer attribution link and that's with the premium version iwent over earlier. you can have these comment options, the response of menu options. nowthe menu will work on mobile devices without the premium version. the premium version justmakes it look really nice and fancy. let's go back and i just want to show you that thatheader search icon is no longer there so just because we didn't check it. let's go aheadand go back to the backend and the first thing we're going to do to get started is createour very first page which is going to be our about page.to create a page with wordpress, you're going
to hover over pages and click on add new.then you're going to want to give this page a title, we'll just call it about. here iwant to point out. we've got what's called the visual editor. this is basically thisfunction is a lot like a word processor. you can click on this icon here when you hoverover it. it says show/hide kitchen sink. that's going to display all different formattingoptions. you could type out text, highlight text, change the font, font color there, centerit, make it go to the left, to the right, stuff like that. now, what's really cool aboutwordpress is that if you use the visual editor which we will primarily be using that. itwill actually write the html code for you. if you clicked on this text tab, this is thetext editor. this is where you would paste
in html code or actually even write your ownhtml code if you know html. i'll show you later how the visual editorwrites this code for us. now, the page builder, this is something that most wordpress themeswon't have. in fact, only the themes that siteorigin.com which is the same company thatdid origami, only those themes will have this page builder plugin installed by default butyou can always install that as the plugin separately if you're not using origami oranother siteorigin theme. this plugin is basically a really wonderful way to create custom layouts.we're going to go over that when we create our homepage later on. let's go back to thevisual editor and the first thing i want to do is add an image to our about page.to do that, we would go click on this add
media and go through the process but firstwe need to actually go ahead and get all of our images. in a new tab, i'm going to openup and go to a wonderful website called pixabay.com. what's awesome about this website is thatthere are so many extremely professional images as you can see right from the beginning here.all of the images and icons available on pixabay are completely free to use and you don't evenhave to leave an attribution to the person that created the image which is amazing becauseyou can use these images on personal projects, commercial projects and they are absolutelyfree. you don't have to get permission. to find all the images on this mock website thati'm walking you through how to create. i just went through explore and i clicked on thiseditor's choice tab. i just went through and
i just picked out a handful or maybe a coupleof handfuls of different images. just to show you what i did on page 3, i thinkthere's an image that i selected. let's go to page 3 there. this image right here, iwanted to use this one. i clicked on it and then right here, if you clicked on the imagethere, you can download it and you have all these different size options. now, i alwaysdownload the 1280 by whatever number it is there because that means it's at least 1200pixels wide. in this case 1280 pixels wide and that's a really large image and very rarelywill you need to have an image any larger than that. now, you can always resize yourimages and make them smaller without losing quality but if you try to make your imagestoo much bigger than the original file, you
will start to lose quality and it can getpixilated or blurry. that's just not good. i always recommend plan it safe in gettingthe large image. this 1280 is [plainly 00:27:35] large. what i did was i click down this downloadand then if you don't have an account with pixabay which is free. i do have an accountbut if you don't have an account, you might have to type in a captcha with the randomletters and numbers just so they know you're not a robot trying to download their images.then i would just save the file to my hard drive. i'm going to go and get all the imagesthat i'm going to use. i'm going to organize them in different folders and then i'll beright back. all right now, i've got all my images downloaded and just so you know, iput them in different folders so it'd be easier
for me to know which images i need to useto show you different things. i've named all the folders ending in hq which stands forhigh quality. all of the images in these folders are the original 1280 pixel wide image. theyare very large and i can make them smaller if i need to. all right. let's go back toour about page page editing screen. actually, before we add this first image, i want toresize that. to resize images and make them smaller, we're going to use a program. a freeonline application, we're going to open it up in a new tab and it is called pixlr.com.that's pixlr [ph].com. go ahead and go there and just click on the pixlr editor.we are going to open the image from our computer. i'm going to click on that. then i'm goingto find the image that i need that i've downloaded
from pixabay. it's going to be page images,hq and i'm going to use this lighting image here. as you can see here, the dimension,it is 1280 by 817 pixels. i'm going to open that and this is the actual image. now, iwant to point out that we are viewing this image currently at 96% because that's whatit says here on the bottom left. if we change that to 100, it'll actually be a little bittoo big for my screen. if i drag, you can see this is the actual size of the originalimage. we don't want it to be anywhere near that big on our about page. i'm going to resizeit and to do that, all you do is go to image and click on image size, and make sure youleave this constrain proportions box check. all we have to do and i'm going to make this300 pixels wide because that box is check,
it's going to automatically change the heightfor me and keep this image proportionate. then i'm going to click on okay. now, youcan see here i'm viewing this at 100%. this is the final size of that image. i'm goingto save this as a different file. i'm going to go file and save. i'm going to name thisabout page image. jpeg is good and quality level of 80 is good for the web. that's perfect.i'm going to click on okay and then now, i'm going to create a new folder and i'm goingto call this page images just without the hq and then i'm going to save this as aboutpage image in my new folder. click on save. then we're going to go back to the page editor.the about page, click on add media and then we're going to upload the file and then we'regoing to click on select files. we're going
to find this file on our hard drive and it'sgoing to be in that new folder there. if i click that once, you'll see that thisimage is the 300 pixel by 191 pixel image. i'm going to click on open and that's goingto upload it there. we want this to be the full size so we're going to keep that at fullsize link to and currently by default has media file. this would basically, if you clickedon the image on our website, it would open a new window or a new tab that would openup the image. we don't want this to link to anywhere. we don't even want it to be applicableso we're going to say none. now, we could say custom url and then we could copy andpaste the url, http://google.com for example or any page on our side or anywhere on theweb. we're going to leave this to none. we're
going to change alignment to left becausei want this image to be on the left side of the screen and i want my text to be to theright of the image. my text will wrap around the image to the right of it. we'll keep thatthere. now, you want to give a good title, a goodcaption, a good all text and a good description that kind of describes your image. this isgoing to be for search engine optimization, google and yahoo and bing, they can't lookat your images and know what they're about. they have to have some sort of text that describesthe image. that's a good practice for the purpose of time, i'm not going to worry aboutthat throughout this video but so you know that. then we're going to click on insertinto page. all right, that's going to put
the image there and as you can see, my text... let me type in some text here. that's going to be to the right of the image. now,i've already got this typed out and i don't want you to watch me do this so i'm goingto just paste this in here. i'm going to click on enter. i want to makea bullet list so these are going to be my different list out of them. i copy those oneat a time and the paste them in and then highlight them. actually, i can do and highlight themand make a bullet list all at the same time. i'm just going to hit enter, copy it to thisone. paste it in there. enter again. copy this one, paste. copy that, paste that. onemore, paste that in. now, i can select all of these by clicking holding and draggingup to the top there. then i can click this
bullet icon and it's going to make a bulletlist out of those. all right. just one more thing i want to point, if you wanted to highlightcertain text for example. if i wanted to highlight origami and make that word a link to anotherwebpage on my site or anywhere else in the web, i could highlight the text and then clickon this link icon. then i could give it a url, http://www.google.com like i used earlieror we could just make it a shortcut and link to other pagers on our site since we don'thave anything else created. since we don't want to link to anywhere anyway,i'll just hit cancel. if you did link somewhere and you wanted to remove that link, you couldclick on this broken link icon but we're just going to publish the page. let's go over hereand click on this box that says view page.
that's going to take us to the frontend ofour site and to this particular page. this is what it looks like. we've got our titleof the page here, centered at the top. we got our image on the left and then we've gotour text on the right with our bullet list here. now, a couple of things i want to pointout. first of all, this about page is automatically added to the menu. now, not all themes willdo that. i'm going to show you how to set up a custom menu and do it the proper waylater on. after we create the rest of our pages and then also this comment box doesn'thave to be there. i'm going to show you how to get rid of that.let me point out a shortcut to get back to the page editing screen for whatever pageyou're viewing in the front end. just go up
to the admin bar and click on this edit pagetab there and then it'll take you back to your backend to page editor for the aboutpage. first thing i want to show you is that the text editor, we click on that. now wehave all this html code and that's because the text editor wrote out the html code thatwas designed in our visual editor. the other thing, wordpress by default allows you topost comments. you can disable that setting in the general settings so that all the newblog post and the new pages that you create will have the feature disabled by defaultwhich i'll show you how to do but you can also disable that individually on individualpost pages or regular pages like this. to do that, click on screen options here.we'll just check discussion and then we'll
click screen options again to minimize thatand you'll see this discussion box now appeared and allow comments, just check. i could simplyuncheck that box and then update the page. then go back and view the page and you'llsee that we no longer have the comment section there. let's go back to the backend and todisable that on all our new posts and pages by default, go to settings and then clickon discussion. we'll discuss advance discussion comment features later on when we talk aboutblog post and blog settings. for now, let's just uncheck allow people to post commentson new articles. uncheck that, scroll down and click on save changes. now, every timewe create a new blog post or a new page, the comments will be disabled by default. youcould of course, override that by going back
to the individual page editor and then checkingor unchecking allow comments. okay, let's go ahead and create our otherpages. to do that, we'll go to pages. add new and let's create what's going to be ourhomepage and we're going to call it "welcome to natural phenomena." we're just going topublish. of course, we'll set all our content up later for all of these pages. you can alsocreate a new page by going to add new here. let's do that and we'll create our contactpage and we'll just call this "contact us" and then publish. we'll be using a plug infor this page later on. then we'll add new. we're going to create the page that's goingto eventually become our blog page and we'll just call it "blog," publish. then we'll addour image galley page. call it "image gallery,"
publish that. then our video page, add new,call it "video" and then publish that. all right. before we set up our menu, i justwant you to see this. go to pages, hover over pages or if it's already selected click onall pages and this will pull up a list of all your pages. you could click on each ofthese to get taken to the page editor for that particularly page. to delete a page,we're going to delete what's called the sample page. by default, comes with a sample pageand a sample blog post. to delete this sample page, hover over it. you can click on trashand this removes it from the list. it's actually still out there in this trash folder. we didrestore it from there but we'll just leave it the way it is for now. all right now, beforewe create our navigation menu, let's go ahead
and view the front end of our site by clickinghere. i want to point again, like i mentioned earlier that by default most were wordpressthemes will automatically add the pages that you create to your primary navigation menuwhich in most cases is going to be this top navigation here.of course, since we deleted the sample page that's no longer showing up but all of theother pages that we've are. now, the best way to do this and set this menu up is todo it the traditional way even though it does add pages automatically, you want to havea lot more control and control what pages they're going to show up on your menu, wherethey're going to show up, what they're going to be called. we're going to create our menuby going back to our backend. we're going
to go to appearance and then go down and clickon menus. all right, so right now, the menu 1, this is the menu that's created by defaultfor us by the origami theme. like i said it has all the pages to it. we're going to createa new menu so go up here and click on create a new menu. we're going to call this top navigationand then go over and click on create menu. okay, now we need to add pages to our menu.i'm going to go ahead and select all the pages because we eventually are going to want allof those pages on our menu. just check all of those and then click on add to menu. allright, now, we need to specify and tell the origami theme that we want this menu to beour primary menu. that means we want it to be our primary top menu so go ahead and clickon that box. then click on save menu. okay,
now, all of these pages are added to our site.now, let's go ahead and view our site. you'll see they're all still there. now, let's goback and to rearrange our menu items, all you have to do is click, hold and drag. justlike this. i click on the video tab and then i can rearrange it by doing this. i'm justgoing to rearrange these on my welcome page to be at the top. that's going to by my homepage.i'm going to rename that here in a minute and then i'm going to do my about page.after that, we'll do our contact page after about. then we'll do our blog. then we'llour image gallery and video page. we will be creating a dropdown menu for our imagegallery and video page in just a minute but let's go ahead and save that. now, if we goback and look at the site again, you'll see
that the menu items are rearranged. let'sgo back. to change the title of your menu, by default it takes on the title of the page.to change the title, for example, i want welcome the natural phenomena to be called home inthe menu. i'm going to click on this little arrow. right here, i'm just going to doubleclick to select all of the text. i'm just going to rename that home. then i just canminimize that. when i save the menu, you can see there it changed the home. if we viewour site again, it is now called home. okay, that's really a simple way to do that.now, let's go back and to create a drop down menu. i want image gallery and video to beunderneath a tab called media. since we don't have a page called media, we could use a pageif we had a page called media, we could use
that page but since we don't have a page,a really cool way to do that, we're going to click on this arrow next to links and firstwe're going to put in the link text. this is just going to be called media. this isjust whatever text you want to show up as on your menu. then for the urls, since wedon't have a page for this media tab or since we don't even want it to be clickable, wedon't want people to be able to click on it and go to a page, another page on our siteor another page anywhere on the internet. we're just going to put in the pound symbolwhich is shift and number 3 on your keyboard. go ahead and click on add the menu. what thatdoes is it's just telling it that there is no url for it by using the pound symbol.now, i want this media tab to be after my
blog tab. i'm going to move it up there. becareful by the way that you're not making it go over like that unless you want it tobe a dropdown. the way we do the drop down is doing just that. for our image gallery,we want it to be a drop down underneath media so i'm going to click, hold and just dragthat over just like that. i'm going to do the exact same thing to video. now, both ofthis will be children elements or child elements of the media tab. when i save the menu andview our website, now, you'll see, of course, we have our home and all of our other pages.when you hover over media, you now have the image gallery page and the video page as dropdown menu items there. let's go back and if you want to remove any of these form yourmenu, all you would have to do is click on
the arrow next to the menu item you want toremove and just click on this remove tab. also you can have as many different menuscreated as you'd like to but just be sure and specify on the one that you want yourprimary menu. make sure that you have this checked for that particular menu. let's justgo and save. it's always good to save just in case. let's view our site again. all right.you'll notice also that the homepage which is different from the homepage we've createdhere. when we click on home here, this takes us to the page that we want to be our homepage.by default, if you go back and clicking on the logo or the title of your site here inthe top left corner, it will take you back to what's set as the homepage. by default,wordpress uses the blog page as the homepage.
this is the sample blog post that will deletelater on in the video. i just want to show real quick how to set up this top page thatwe've created that we want to be our homepage as the actual homepage.let's go back to the backend and you're going to go to settings and then you're going togo reading. click on reading. right here, like i said, the default wordpress settingis the front page is going to display your latest post. that's the blog post which happensto be our sample post currently. we want this to be static page. we've got a homepage thatwe want it to specifically show. we're going to check this little area and then we needto specify the front page that we want it which is going to be the page that we've createdcalled welcome to natural phenomena. that's
the one that we've called home in our menu.then the post page is going to be page that we've created that we want to eventually showour latest blog post. we have that as blog. it can be whatever you want it to be. it'sjust pretty traditional to call the blog a blog. that's what i've done there and nowif we save the change, and now when we view the front end of our site, the homepage, themain page is now this welcome to natural phenomena page.now, of course, we haven't created any content yet but we will do that later in the video.all right now, we're going to add our contact form to our contact page. first, let's takea look at our contact us page by clicking on that in the menu. obviously, it's blankbut we're actually going to install a plugin
that will put a contact form on this pagefor us. of course, we'll have to specify what page we want that to be on but to do that,go back to your backend and then you're going to go plugins and click on add new. we'regoing to search for a plugin called contact form 7. then click on search plugins. it shouldbe the top one here. you're going to click on install now and click on okay. then you'regoing to click on activate plugin. all right, now we have this contact tab appearing hereon the left. go ahead and click on this contact tab.by default, contact form plugin automatically creates a contact form so click on contactform one. you'll see that you'll have a place for the person's name, a place for the person'semail, for the subject of their message and
for their actual message. by default, thisis going to send a copy of that contact form to the email address that you provided whenyou set up your wordpress site. you could change that right here. you could change thatto whatever email you want this copy of this contact forms that are submitted sent to.then you would want to click on this save button. we're just going to leave that theway it is. now, this right here, this is called a short code. a lot of wordpress plugins useshort codes and basically what that does is if you copy the short code and then you cannow paste it anywhere on a blog post or a page that you've created. we're going to pagethis short code on our contact us page so that the contact form here will appear onthat page.
now, we copy that code. go back to pages allpages and click on contact us to open up the contact page page editor. when you use shortcodes, it's my personal preference to switch to the text editor even though these shortcodes are not actually html. i just find that using the text editor is the best practice.paste it in there and then click on update to update the contact page. now, if we viewour contact page, you'll see that we now have the contact form. users could fill this outand submit it here by clicking on the send button. that will send a copy of this formto that email address. just till you see if we go back to your homepage and then we clickon our contact us page menu that is definitely showing up on the correct page. all right,now that we've got our contact form put in
place. we're going to add our image galleryto our image gallery page. if we click on our image gallery page, it'scurrently blank so let's go back to our backend of our wordpress site. we're going to plugins.we're going to add new. click on add new and this time we're going to search for a plugincalled nextgen gallery and nextgen is one word. just type that in and click on searchplugins. one thing i forgot to mention about the contact form plugin, you can see the reviewshere on the right for all the plugins. four stars is generally an excellent rating andespecially when you click on details next to any given plugin on this page. you couldsee how many times this plugin is downloaded. this has been downloaded nearly 8.5 milliontimes which is excellent for it to get four
stars and be downloaded that much in the contactform plugin had similar ratings. let's go and click on install now and clickon okay. then you're going to click on activate plugin. okay. now we have this gallery tabappearing here on the left. to add an image gallery, hover over the gallery tab and clickon add gallery/images. here it says create a new gallery, that's what we want and thennext to that. we need to give our gallery names. let's call this image gallery 1 andthen we need to add the files. the image files that we want to this gallery so i'm goingto click on add files. i got all of these files of course, off pixabay and these areall the original high quality 1280 pixel wide images. i'm not going to resize any of thisin pixlr because the nextgen gallery is actually
going to resize these images for us and createthumbnails for us which is a really handy feature that that plugin provides.i'm going to open up the gallery images, high quality and i'm going to slick all of themby clicking on this top one once, holding shift on my keyboard and clicking in thisbottom one. then i'm going to click on open. okay and then now, we need to click on startupload. all right and now we could go over here and click on this managed gallery's tab.it's going to show the gallery that we just created. the image gallery 1 or whatever youcalled it. click on that and right here, you can put in the title. you can change the titleof the images and give a description text for searching an optimization purposes. we'renot going to worry about for the sake of time.
then also you could rearrange the order thatthese images show up in your gallery by clicking on sort gallery here. then you could clickhold and drag and drop this into the place that you want just like that. we're not goingto worry about that but if you did want to do that, be sure and click on this updateshort order so that it would save that. now, to add this gallery to our page thatwe've created called image galleries or image gallery, we want to go to pages, all pagesand then open the image gallery page. okay, now we're going to go back to the visual editor.you'll notice that we have a new icon here when you hover over it on the far right, itsays nextgen gallery. to put a nextgen gallery in our page, we're going to click on thatlittle icon. the first thing you do is specify
how you want this gallery to display. youcan play around with these different options. i'm just going to use the default thumbnailsetting. click here, what you would like to display? click on that. we want it to be agallery. now, next to galleries where there's a blank text there. you click on that andyou'll see a list of all the galleries you've created and since we don't have one, the imagegallery 1 is showing up so click on that. then if you click on customize the displaysettings, you could override the thumbnail settings by clicking yes and then specifyinghow big or small you wanted these thumbnails to be. we're just going to leave that at thedefault setting for now. just say no. right here sort or exclude images, you can resortthese images from these page as well. we're
just going to keep that in the order thatthey were uploaded and i'm going to click on save. this is my gallery here now. if ican click on this, i can get back to these editing options. i just want to point thatout. we're not going to worry about that. then i'm going to update the page. now, ifwe view our site and then hover over media and click on our image gallery page, you'llsee that we have this really nice looking thumbnail image gallery. when you click onthese, it's going to open up this really nice looking light box and you can scroll throughand view all of the images that you added. just like that.of course, you can go back and to get out of that, you can hit escape or hit this xthere. then this right shows slide show. you
can click on that and it will show these imagesin a slide show. i'm going to show you how to get rid of that and that's just a defaultsetting but it's very easy to get rid of. we're just going to go back and go back toedit this page. we're going to click on our gallery and go back to customized the displacedsettings. right here show slide show link where it's checked yes by default. we're goingto say no. we're going to click on save and then we're going to update the page. now,if we view the page, you'll see that that show us a slide show is no longer showingup there. one thing i do want to point out is you can have other text on that page orother images. you can create a normal page and just have that image gallery showing upat any given part of that page by clicking
on the image gallery icon and inserting itwhere you like to put in on that page. just so you know that but we'll just leave it likeit is for now. the next thing we're going to do is add ouryoutube video to our video page. to do that we're going to go to youtube and i'm justgoing to search for yellowstone national park. i'm going to grab this video here. i'm goingto click on the video to open up the youtube video. i'm just going to click on that deposit.to embed a youtube video onto your wordpress page, you're going to click on share and thenclick on embed. by default, it should have this html code selected for you so go aheadand copy that code. we're going to go back to our video page and then click on edit pagebe taken to the video editing page. we're
going to switch to the text editor becausewe are going to be pasting in some html codes so go ahead and paste that in there. thenclick on update. all right and let's view the front end ofour wordpress site. then if we hover over media and click on our video page, you'llsee that we have this youtube video showing up which is like that. it's really that simpleto add youtube videos to your site there. now, we're going to get in to some of thefun stuff when it comes to creating a website where we create our logo and choose our colorscheme and create our background. now, one thing is great about the origami theme isthat you have a white background and then you have this really light gray for the navigationmenu. then that same light gray for the footer
area. that makes it really easy to find acompatible color scheme. now, you could come up with a color scheme on your own. a lotof people do that but i like to use a website called colourlovers.com and colour is spelledcolour [ph]. go ahead and go to colourlovers.com. this website just basically has all kindsof color palettes that graphic designers and people that really know what they're doinghave created and you can use the same color palettes that they're using. what i did heresince my website is a nature theme. i just searched for nature and took a little bitof time, i had to browse through i think the one that like was on page 3. you can justlook through this. the one i like is this one called marlin. i'm going to click on marlinto open up this. i really like this bluish
green here and i really like this brown. i'mgoing to use those three shades for my logo and then i'm going to use a shade similarto this for my texture background that we're going to create after we create our logo.now, when we create our logo, we're going to need what's called a hex code for the colorsthat we want. a hex code is basically a six-digit combination of letters and numbers that correspondsto an exact shade of a color. to get the hex code, you're going to have to scroll all theway down here at the bottom before the comment section. right here. you'll see that there'sa hex code for each one of these colors. for the blue screen that i want, i would justcopy that code there and for the brown one i want, i'll copy that. let's keep this pageopen so we can have access to those hex codes.
in another tab, i'm going to open online application.we're going to use called ipiccy.com [ph]. this is also a free online application that'sgreat for making logos. go ahead and click on start editing. whenyou hover over this, it says create a new blend, click on that icon. you're going toneed to specify the width and the height. now, i would not recommend going any widerthan 300 pixels wide because with the mobile responsive site, when our site is used onmobile devices for example, you don't want your logo to be cut off. if it's too wide,the rest of your site is going to be the right width but your logo is still going to be toowide. i wouldn't go any wider than 300 pixels wide. we'll just do 150 pixels tall. clickon create. all right. then the first thing
we'll do is create our text. click on thistext icon and you can click over here hold and drag that into place. then we're goingto type the first word which is going to be natural.i'm going to make this 60, make the size 60. then i'm going to come down here before ipick my color, i'm going to select the font that i want to use. i'm going to use a fontcalled daniel. then to change the color, just click on this color. it should be a blackbox there, click on that and then we're going to grab the hex code for our blue screen shade.copy that. just double click on that, select it and copy it. come in here and paste thatin there just like that. all right and then you can of course, click and hold and dragthat into place as you want. we're just going
to center it towards the top there. now, forour other words, since we want it to be a different font size and a different color,we're going to create another text later by clicking on this text icon again.just click, hold and drag that under there for now. this is going to be the word phenomena.i want this to be 52 for the size. i'm going to select that. type in 52 tab or 52 and hitenter. drag that over so it's centered. it's like the same font, the daniel font here.there's lots of cool fonts that you can play around with with ipiccy. i'm going to go backand grab the shade for the brown that i want to use. double click, just like that. copyit. click on that. just paste that in there. all right. now, what i did to get out of thatwas just to click anywhere in this area here.
now, we can select these layers individuallyand move them around. i want to move that one up just a little bit. just click, holdand drag that up. just release it there. i'm going to move natural just a little bit.all right. now, we're going to crop this image and we're going to remove this white background.first, we're going to remove the white background by clicking on this i icon next to backgroundhere. now, that's going to make this a transparent logo which is great. now, we'll still of coursehave to save this as a transparent file which will save it as png file but to do that, firstlet's go ahead and crop it. we're going to say done. we're going to crop the pictureby choosing the crop tool here. then we're going to come over here and just drag thatover and as long as all of your text is visible
within the area that you're going to crop,you should be fine. get that the way you want it.it's okay if you have a little bit of space on the sides or above or beneath it. whenyou get it the way you want it, go back and click apply. all right, that looks prettygood. now, we're going to save this by clicking on the save icon here. we don't want it tohave any sort of background because we're going to use this in our header which hasa white background and we're also going to use it our footer that has a light gray background.we want it to blend in with whatever background it's put on. we're going to save it as a pngand click on save photo. i'm just going to save this as origami logo. now, that's savedto your hard drive. go back to your website
and go back to the backend of your wordpresswebsite. you're going to go to appearance and then go all the way down to header. clickon header and we're going to click on browse. you're going to find that logo that you savedto your hard drive. find that file and select it. click on open and then you're going toclick on upload. you could crop it here. we don't want to. we've already done that sowe're going to click on skip cropping, publish image as is. then we're going to click onsave changes. all right if we view the front end of our website, you'll now see that wehave our logo showing up there. all right now that we've got our logo created, let'sgo ahead and create our background image. for that we're going to use a really amazingtool brought to you by siteorigin which is
the same company that designed the origamitheme. we're going to go in a different tab. we're going to open up siteorigin.com.we're going to scroll down to the bottom, under useful tools, click on the backgroundimage generator. this tool is absolutely incredible. you have tons of different patterns providedby subtlepatterns.com. it's a great website. with this tool, you can use those patternsand you can make them whatever color you want them to be. we're going to grab this lightertan color here. we're going to start out with the text code so i'm going to copy that andgo back to the background image generator and paste that in place here. we'll startwith that and i'll take a second load. you'll see that it changes to color and with thevideo quality, i'm not sure if you can see
that. if i increase the pattern intensitywith that load, you should be able to see now that there's a textured background there.we're going to actually use a pattern. you have all these patterns you can play aroundwith. i'm going to use one towards the bottom here. text2res2, i'm going to click on thatand i'm going to add some noise to that. increase the intensity just a little bit more there.when you increase the pattern intensity, it actually darkens the shade. i'm going to clickon this and i'm going to lighten this up just a little bit. you can choose any color thatyou want here if you don't have the hex code. you can darken and lighten here. since that'salready as light as it'll go, i'm going to down a little bit. try something like that.that looks pretty good. once you get the pattern
that you want, click on download. then onething i do want to point out here, before we upload this image to our website. if iright click, i'm using firefox and depending on what browser you're using you may or maynot be able to do this but if i right click here and click on view background image, that'scontrol and click if you're using a mac. then click view background image, it'll pull upthe actual image that i just downloaded and as you can see at the top, this is a 500 pixelby 500 pixel square image. this is the entire pattern, the entire background that we'regoing to be using and all of these patterns are what's called repeatable patterns.that means that they will repeat seamlessly this way horizontally and then also seamlesslyvertically. it'll look like one pattern and
they're designed that way which is a reallyamazing feature because you don't have to have a really large background image and youdon't have to worry about some screens not showing part of your image or different thingslike that. different screen sizes might affect it otherwise but since we're using a repeatablepattern, this is going to work perfectly. i'm going to go back and i'm going to go backto the backend of my wordpress website. to upload that image, that pattern that we justdownloaded, i'm going to go to appearance and i'm going to click on background. thenwe're going to scroll down and it's actually already got a really subtle pattern in placethere by default. we're going to add the one we just downloaded.scroll down and click on browse next to select
image. then find that pattern on your harddrive. let me click on open and then select upload. all right. then scroll down. i justwant to go over the display options. the position, set that to left and then repeat, like i wassaying we want to repeat horizontally and vertically so we're going to just select tilesso that it will repeat both ways. then the attachment you can choose scroll or fix andeither one of these will work fine but i happen to like the look of the fix background image.i'm going to select fix and you can just experiment with either one of those and then click onsave changes. if we go back and view the front end of our wordpress website, you'll see thatwe now have this really nice looking background pattern.all right. now let's talk about widgets and
widget areas. as i pointed earlier, thesehere are widgets and by default wordpress is going to add these six widgets to yourwordpress site. you got to search widget, a recent post widget which is going to showyour latest blog post, recent blog comments and of course, we're showing the sample blogpost and the sample blog comments and then we've got blog archives is a default widgetthat's added, blog categories and then the site metadata. you could use this to actuallylogout and log in to your site. we will just stick with our admin bar. we're going to getrid of a lot of these and add our own widgets. first of all, let's go back and take a lookat our available widgets and discuss exactly what widgets are. go back to the backend ofour wordpress site. we're going to go to appearance
and click on widgets. these are our availablewidgets and by default, wordpress comes with many of these. now different themes and differentplugins will also add available widgets for you. for example, we've added the nextgengallery plugins so we have these nextgen widgets they're showing up now that we could use inour widget areas if we'd like to. also the origami theme comes with these site originwidgets which we'll be using some of these when we create our homepage. now, basicallywhat widgets do is they allow you to add additional features and additional functionality to widgetareas on your website. now, a widget area as shown over here on theright, we've got the footer widget area. a widget area is basically part of your themewhere you can drag and drop these widgets
in place. now, most themes are going to comewith at least one side bar widget area. now, the origami theme does not come with sidebar widget area, it comes with one footer widget area. the reason that they did thiswas because it comes with the page builder plugin that we're going to be using when wecreate our home page. what the page builder plugin will allow us to do is it will allowus to create widget areas anywhere that we would like to on any given page. we couldhave a sidebar. we could have two sidebars. we could have three columns. we could havefour columns. we could have as many rows and columns as we want in all of those areas willbe widget areas. it's an amazing plugin that siteorigin developed.for now, with the widget area that we have
by default, the footer widget area, i'm justgoing to show you how we use these widgets. these you just click hold and drag. if wewanted to remove all of these and you can click down and some of these will have differentoptions and i'll let you experiment with different widgets to see what they do. we're just goingto remove all of these for now and to do that, you're going to click, hold and drag backin here and release. that's going to remove the widget from our widget area. if we hada custom widget that we've made some custom settings that we wanted to keep, we coulddrag it in to our inactive widget section and that way, as you can read, it will keeptheir settings. we're just going to remove all these because these are default widgetsanyways. just like that.
now, i'm going to come in and i'm going toadd the widgets that i want to have on my footer. i'm going to do, let's see, categories,to show my blog categories. i could give this a title but i'm just going to ...well actually,let's call this blog categories. instead of saying categories, it'll say blog categories.later in the video, when we add our blog posts and add our blog categories, those new categorieswill appear there. click save there. click that area to minimize that. i'm going to addthe pages widget and this is going to show a list of all the pages on my site. i don'tneed to fill out anything there. basically, this will allow people to navigate to differentpages on my site from the footer so i'll have navigation and menu bar and also in my footer.then i'm going to add a search widget. this
basically will just allow people to easilysearch my website for different content. then i want to add my logo. i want to put thatin the far right. what i could do to do that is i could use a text widget. i could dragthat in and then in could put either right in or paste in the html code but i'm goingto actually download a plugin called black studio tinymce. basically what that's goingto allow me do is have a visual editor just like when we create our pages, we have thevisual editor. i'm going to have a visual editor that allows me to work with widgets.to get that plugin, i'm going to go to plugins, add new, and i'm going to search for blackstudio tinymce. then this top one here, that's what i want. i'm going to click on installnow. click on okay.
then i'm going to activate the plugin. now,if we go back to appearance and click on widgets, you'll see that we have this black studiowidget now showing up. i'm going to remove this text widget, click, holding, and dragging,and then releasing that over here. then i'm going to replace that with the black studiowidget. all right, as you can see we have a visual editor and i'm going to click inhere and add media. i'm just going to grab the logo that i've already uploaded to mywebsite right there. first of all, we want this to be full size and all the rest of the... well we don't want this to link anywhere so we're going to say link to none. actually,let's link this to our homepage. we'll do a custom url and just type in your domainname, http:// and then your domain name. in
my case, it's going to be nature.quickwebsitecreation.com.then i'm going to click on insert into post and then i'm going to click on save. all rightso that's saved. minimize that there. basically with the way that origami put ourwidget area is designed is however many widgets you have in your footer area, they're goingto take up an equally proportionate amount of space. we have four widgets. they're goingto take out 25% of the width of the footer. we're going to go back and view the frontend of our site now. now, we have our four widget areas there. one thing i do want topoint out, obviously are logo and our footer is quite a bit smaller than the logo in ourheader. it's the same image file but with the origami theme by default, what it doesis that it actually resizes that for us so
that it's taking up no more than 25% of thespace allotted to it. now, if you're using a different theme that did not automatically,you would want to go back to your black studio widget. let's refresh t hat so that my blackstudio widget showing up there. there we go and then you would click on the image, pullup this icon, click on that icon and then you could resize these image here by doingone of these options. just a quick way to do that then you would want to update that.we're not going to worry about that and of course, you could also resize your logo filein pixlr if you needed to and then save that as the png, just some different options there.then just to show that that logo and the footer is linking to your homepage, if we go to adifferent page, just to go our empty galley
page. if we click on our logo on our footer,it's going to take us back to the homepage just like that. all right. now, that you knowabout widgets and widget areas. we're going to set up our homepage and of course, as i'vementioned origami comes with the page builder plugin. this is going to allow us to createcustom layouts and custom widget areas wherever we want. this is really revolutionary to havefunctionality because you do have a lot of flexibility with your website layout and youdon't have to know any code to do it. this is a really cool thing that we're going tobe using. if you're using a different wordpress theme,you can always go to plugins, add new and search for the page builder plugin. it shouldwork with whatever theme you're using. let's
just go ahead and we're going to go and sincewe're already in our homepage here. we can click on edit page and this is going to takeus back to the page editor for our homepage. we're going to switch to the page buildertab there. then right here, we need to update to the latest version of page builder. we'regoing to click the update link. then we're going to activate plugin. now, we've got themost latest version of the page builder plugin activated. we must go back to our homepagepages, all pages. click on our homepage. okay, switch back over to the page builder tab.all right. by default, it already has our first row in and if we want to delete this,we could just click on this minus symbol there. if we're starting from scratch, we would adda row by clicking on this middle icon here
with three different columns. click on thatand this is going to add a row. here we can specify how many columns we want this roadto contain. i just want this first row to have only one column and then i'm going toclick on add and that's just what we had originally before we deleted that. now, the reason i'mdoing my first row with only one column is because i want to have a slide show on myhomepage that's at the top of the first row and i want to take up the full width of thepage. then beneath that i want to have a full width call to action section. beneath thati want to have a full width section where we're going to have an image and text. now,i need to add another row beneath this one so i'm going to click on this again.this time, i want this row to have three columns
because i'm going to have three differentsections with an icon, a text area and a button that showcase three different pages or threedifferent areas of my site. each one of these is a widget area just like we had our footerwidget area. you can click on this to add widgets to them. now, to add a widget to oneof these widgetized areas, you would just click on the area you want to add the widgetto. that'll turn blue and then you'll click on this add icon there. then you have allthese different widgets to choose from. now, that we've updated our page builder plugin,we have all these different ... they say pb, all these different pb widgets that are available.now, the first thing we want to do though is add our slideshow.to do that, we're going to need to add another
plugin to our site. let's go ahead and exitout of this. we're going to have to recreate this layout anyway since we haven't addedany content to it yet. let's just not worry about updating this page. we're going to goto appearance and then we're going to click on or actually plugins rather. click on addnew. you're going to search for a plugin called meta slider. click on search plugins. clickon install now under meta slider and okay. then click on activate plugin. all right.now, we have this new meta slider icon here, this new tab here so go ahead and click onthis. this is where we would create our first slideshow but first we need to crop our imagesdown for our slide show. i'm going to in a new tab. i'm going to openup pixlr again. i'm going to click on picture
editor. then i'm going to open the first imagethat i'm going to use for my first slide from my hard drive. this is one that i got frompixabay. this is a full width 1280 pixel wide image. i've got it in my slide images hq folderand as you can see its 1280 pixels wide by 960 pixels tall. i'm going to click on openand i have found that the best width for a slide image on pixlr full width slide imageis 902 pixels. i'll show you later on how i came up with that and how you can figurethat out on your own if you needed to. then also just because i like the way it looks,i think 400 pixels are a pretty good height for this. we're going to crop our 1280 pixelwide image down to 902 pixel image. to do that, we're going to make sure the crop toolis selected that this far left tool. it should
be selected by default. we're going to changethe constraint to output size. we want it to 902 pixels wide. change the width to 902and then we are just going to want this to be 400 pixels tall.then i want to view this a little bit, i want to zoom out a little bit so i can see thefull image. i'm going to zoom out to 60%. i'm going to click, hold and drag up here.as long as in the gray area, and you click, hold and drag, it should start at the topcorner. i'm going to drag this all the way over and then i'm going to release. this isgoing to give me at 902 by 400 area to work with. i can drag that where i want it. i'mgoing to put it right there. then i'm going to hit enter. that's going to crop that downand resize it so that it's 902 by 400. if
i view this at 100%, this is the actual sizeof my first slide. i'm going to file, save. i'm going to save this as slide 1. i'm goingto make it a jpeg and quality of 80 is fine. i'm going to say okay. i'm going to createa new folder here called slide images. great. then save that.then i'm going to do the exact same thing to my other two slides. okay, now i've gotthree all of my slide show images crop down to 902 by 400 pixels. i'm going to add thoseto my slide shows so i'm going to go back to my wordpress backend. again, just to gethere, i just went to meta slider lite. we're going to click on this plus symbol next tocreate your first slideshow. then we're going to give it a name. we're going to click herewhere it says new slider, select that text
and call it slide show 1. just hit tab andthen we're going to come down and click on this add slide button there. we're going toupload files just like that and then click on select files. then find your crop slideimages on your hard drive and then i'm going to click on that first one, hold down shift.click on that third one just like all of those and then click open. it's going to uploadall three of those. i'm not going to worry about these settingsexcept that i'm going to make sure this is full size. don't worry about these other settings.we're going to override those anyway. click on add a slider. all right so now we haveour three slide images and to rearrange these you could click, hold and drag these in placeand release them. we're going to keep that
in the same order that i had them originally.now, you have the option to give your slides a caption. i'm going to say view the blogand then on this one, i'm going to say view the video page. on this one i'm going to sayview the image gallery. all right and then if you want you can have your slides actuallylinked to another page on your side or anywhere on the internet and this is optional but we'regoing to add a link to each one of these pages, the blog page, the video page and the imagegallery page. to do that, i'm going to open a new tab. i'mgoing to go to my website and for the blog page, i'm going to click on blog and theni'm just going to select this to get the url, copy that. go back to my slider and pastethat in. i'll do that for the video page and
the image gallery page. copy that and pastethat in there. i'll do the same for my image gallery. copy the url and paste that in there.before we save this slide, i'm just going to change this to nivo slider. you can experimentwith these different options here. they're just going to give you different looks. ijust personally like the look of the nivo slider. i'm going to select that and theni'm going to change the size to the exact same size that we chose for our slides, 902width and 400 in height. before i show you why i chose the 902 pixel width, i'm goingto save this and you can click on save and preview. that'll pull up a preview of whatyour slideshow look like when it's put on a page. you can see their transitions andwe can click here to change the different
slides. we can also use the arrows or we'lldo it automatically. i'm just going to click out of there to exit.i like the fade effect. i like the way the slideshow looks but you can mess with thosesettings and then also i like ... it's 3,000 milliseconds is 3 seconds so each slide willappear for three seconds. you can change these things here. we're just going to leave themto the default. now, that we've got that saved. we'll first going to add that to our homepage.let's go back to pages and click on all pages. click on our homepage, welcome to naturalphenomena. we'll switch back to the page builder and again, we'll have to recreate our layoutssince we never added any content to it. we'll start with our first row and we're going toadd a widget because now, we're going to have
a meta slider widget. let's see right heremeta slider, so click on meta slider. then we just need to select the slideshow fromthis list and since it's the only one we've created. that should be the only one showingup there. click on done. now, we're going to update the page.okay, now we're going to view the page by clicking on this icon here, the top left.you'll see we have our slideshow added to our website, to our homepage. just like that.you'll notice that it's got the captions for each one and if i clicked on any of them,it's going to take me to the url that we put in so for this one, the image gallery, wheni click on that, it's going to take me to the image gallery page so very handy. i canclick here to get back to my homepage. all
right and now, i want to show you why i knewthat this needed to be 902 pixels wide. we're going to go back to our backend and clickon meta slider light. it's going to pull up the slideshow by default since it is the onlyone we've created. the way i knew this, if we change this width, let's just do 890 pixels,just a little bit shorter. then let's click save or a little bit smaller of a distanceand width. then we're going to view the site. you'll see that our footer ends here but thatleaves a little bit of distance for the slide show. over here, it's flush with the footeras you can see the edge there right there. it's just a few pixels shy so it's basicallytrial and error, guess and check. to go back and i did that and i eventually came up with902 pixels being the perfect width. when we
save that, exit out of that and then viewour site again. you'll see that it will be flush with edge of the footer just like that.all right, now we're going to go and add our call to action underneath our slideshow onour homepage. let's click on this edit page tab there to be taken through our page editorfor the home page. we're going to be using the same widget area, the same row. we'rejust going to add this call to action widget underneath our slider.we're going to click on this add widget icon. then i'm going to select the call to actionwidget and notice i'm using the call to action page builder widget, not the siteorigin callto action. i just have preference there. you can experiment with either one but i'm goingto use the call to action page builder widget.
i'm going t click on that and that's goingto automatically add it under my meta slider since we have that widget area selected. i'mgoing to give it a title. i'm going to call this check out the video page so let me type that in there. then my subtitleis going to be you're going to learn how to embed youtube videos on to your website. thenmy button text is going to be check it out and then my button url, i'm going to go andopen up my video page. copy the url there. go back and paste that in. then i'm goingto use the simple dark dash style because i just like the way that looks. i want thisto stand out. it's going to have a dark background. my button, i'm going to use simple slate andi just really like the color of that so i'm going to click done.just so you know, i could rearrange these
by click, holding and dragging and movingthat above the meta slider if i wanted to but i wanted to be below it. i'm going toclick keep it there. then i'm going to click on update. now, when i view my website andscroll down, you'll see that i have this nice call to action area here and then put thatbackground in and i chose the slate color for my button. when i click on this, it'sgoing to take me to my video page because that's the url we put in place there. now,one thing i want to point out about the call to action page builder widget, if your textis too long, unfortunately it will show up behind the button. it won't look right ifyour text is longer than from the far end to the button. as long as your text isn'ttoo long, this is a really good way to draw
attention to certain pages.all right now, that we've got our call to action in place, we're going to add an imageand a text area underneath it. let's go back to our page editor for the homepage by clickingthis edit page button. the way we're going to add this image and text is we're goingto use the black studio widget again. we'll just go and since it's going to be on thesame row, and we want it to be full width, we're just going to click on this add widgeticon. then we're going to click on black studio tinymce and this is going to pull up the visualeditor. now, first we need to resize our image pixlr so i'm just going to go back to thepixlr tab and open up my high quality full size image that i'm going to use. it's goingto be this picture right here. this is 1280
pixels wide. i'm going to resize this down.i'm not going to crop it since i want it to have the same ration of width and height.i'm just going to change or i'm not even going to worry about crop tool. i'm just going togo image size and keep that constrained proportions box checked and change the width to 250 pixelsand that's going to automatically adjust the height. i'm going to say okay.i'm going to go to file, save. save that as homepage image. click on okay. i'm going tosave that into this folder. all right. i'm going to go back to my wordpress site andthe title that i'm going to give this is welcome to this mock site and then i'm going to add my image first byclicking add media. i'm going to upload the file that i just resized. click on selectfiles. find the image on your hard drive.
click on open. you'll see this is the 250pixel wide image that i just resized. click on open and then you can fill out your title,alt, and descriptive text. i'm going to align this image to the left. i don't want it tolink to anything. i'm going to change that to link to none. i do want it to be the fullsize 250 pixel wide image. i'm going to say insert into page. then i can put text here.i'm just going to copy this text that i've got and paste that in, just like that.then i want this pixabay text, i'm going to double click that to select that word. i'mgoing to make that a link. i'm just going to type in http://www.pixabay.com. i'll justgive it a title so pixabay and click on add link and then i'm just going to click on done.then i'm going to update the page. all right
and now, if i view the front end of my wordpresswebsite and scroll down underneath my call to action, we have this full width image withour title and our text. when i click on pixabay, it's going to take me to the pixabay website.all right and now the last thing we're going to do with our homepage is at our three differentareas that are going to showcase some of the sections of our website.let's go back to our page editor. the first thing i need to do is add a new row and i'mgoing to make the row with three columns. i'm going to click on add row here and i'mgoing to type in three and then i'm going to click on add. that's going to give me treedifferent widget areas on that same row. i want to point out there by default, they'reall spaced equally. they're all taking up
one third of the space. now, i could clickand hold and drag over just like that to resize these. i can do that with any of the differentrows or i mean any of the different columns. we're just going to leave that. well, theeasiest way to do this, we're just going to delete it. add it again so that it's equalagain. click on add. before i get started here, i want to go aheadand get the three icons that i'm going to use for these three sections and to do that,i'm going to go back in a new tab and go back to pixabay. since i'm going to have a contactform section and image gallery section and a blog section, the way i search for theseicons for the contact form, i search for email icon. i got this one here that i'm going touse and then for the image gallery, i searched
for photo icon and got this one here thati'm going to use. then for the blog section, i searched for reading icon and got this onehere. fortunately, these are all designed by the same person on pixabay.they're really coherent with each other. the way i downloaded all of these, i'm just goingto click on it. just like we did with our images originally, you would just click andi'm going to use the smallest file available and this is a square image, 150 by 150 pixels.the reason i'm choosing the smallest in this case is because i'm actually going to makethese quite a bit smaller than that even with pixlr. of course, you do want the png becauseyou want these corners to be transparent so they'll blend in with your site whatever backgroundcolor it is. i just downloaded all three of
those and i'm going to do that real quickbefore i go into pixlr so i'll be right back. now, that i've got those three icons downloadedat 150 by 150 pixels and they are png files. i'm going to back to pixlr and i'm going toopen this up and resize them. to do that of course, just go to image, image size, andi'm going to change this to 50 so it'll be 50 by 50 now. click okay. then i'm going tosave that as contact icon. i do want to be the png as you see there. we'll take on thatfile type by default since it was originally a png file. i'm going to make a new foldericons and save that there. i'm going to do the exact same thing to the other two icons.okay, now that my icons are all resized at 50 by 50 pixels, i'm going to go back to thebackend of my wordpress site and i'm going
to update this page just to make sure thatit's updated. because before i add my icon and text widgets in place here and these widgetareas, i need to add the icons to my media library so to do that, i'm going to mediaand i'm going to click on add new. now, basically we've been adding our imagesusing the visual editor and that has actually been adding them to our media library. that'sjust one way to do it. this is another way to do it. if you're not adding the imageswith a visual editor, you can do it this way so go to the media and new and click on selectfiles and i'm going to open up my icons folder and these are the 50 by 50 icons. i'm goingto select all of those. all of those icons and click on open. okay, so now those areuploaded to my media library. i'm going to
go back to pages, all pages. open up the homepage and then i'm going to click on this widget area here. that's going to turn that a darkerblue and then i'm going to click on add widget. i am going to be using a siteorigin icon andtext right here, siteorigin icon and text so i'm going to click on that. i'm going togive it a headline. it's just going to be contact us and then the text, i'll just pastethis in here. then for the url, i need open up my site andopen up my contact page. copy and paste that url in place. select that, copy it, go back,paste that in there. then the icon since i have already added this to my media library,i can click here and i can choose the media library file that i want and that's goingto be the contact icon. then i can just click
done and update the page. all right and now,if we view our site, you'll see that we have this icon with our title and our texture.now, one thing, actually a couple of things i want to point out here. the icon is tooclose to the text or rather the text is too close to the icon. that will do that by default.now, i've got a little trick using some html code that will allow us to have some spacein there. then also another thing i want to point is that we don't have our button yet.that's because the icon and text widget doesn't have a button so we're going to need to addthat. let's go back to our page editor for the homepage.first of all, let's hover over this widget and click on edit. right here next to contacton the far left, the html code for a space
is the ensemble and then . we're goingto say done and then update that. if we go back to the frontend of our site and scrolldown, you'll see that we have one space. now, i'm going to add two more spaces so that it'sflushed with my paragraph there. we will just copy and paste that code in there a few moretimes. hover over that, click on edit and i'm just going to select that code and pasteit in there. we have it in there three times in total. i'm going to say done and then i'mgoing to add another widget in the same widget area. click on add and i'm going to add apage builder button right there, button pb. click on that and the text that i want thisto be is just contact us and i'm going to go back and grab this url again.by the way, you did not have to put that in
when we put it in for the icon text widgetsince it didn't do anything. you wouldn't have to do that. i just wanted to demonstrate.put that in there and then we're going to align the button to the right of our widgetarea. i'm going to use that same simple slate color for the button color that we used earlier.i'm going to say done. then i'm going to update the page. now, when i view the front end ofmy website, you'll see that my spacing looks really good and now we have a button thatlinks to our contact page. we click on that, it takes us straight to it. let's go back.click on the edit page icon to be taken to our homepage editor. we're going to duplicatethese since we're going use the same widgets in this section and this section and we'lljust change the content of them, we can click
on this duplicate and then that'll duplicateit. then duplicate for the button. then we'rejust going to drag these over here. drag that button over here. just let go and then we'llclick, hold and drag to rearrange that. then we'll duplicate this one, drag that over thereand duplicate the button again. drag that over here and then rearrange those. for thisone, i'm going to just hover over it. click on edit and i'm going to change contact usto image gallery. i'm going to select that, delete it. i'm going to choose this text.copy that and paste that in here. then i'm just going to remove this url completely sincewe don't need that. then i'm going to select my image gallery icon right there. then clickon done. then for the button, i need to go
and grab the url from my image gallery soi'm going to media image gallery. i should copy this here.hover over button. click on edit and the button text is going to be view the image gallery.then i'm going to delete this and paste in the other url. i'll want it to align right.i want it to be simple slate. i don't want it to open in a new window. i don't know whythat's check there so i'm going to say done. i'm going to make this one is not openingin a new one. okay that's good. all right. now, let's work with our final area here.click on edit. this one's going to say read the blog. i'm going to change this text. pastethat in there. just remove this url and then select my blog icon. click on done and theni'm going to edit the button and say read
the blog. then i'm going to go and get myblog url. copy that. paste that in place, uncheck this box and click on done. now, wheni update the page, assuming we did everything correctly, when i view the homepage all ofmy sections should be showing up. scroll down and there you go.just like that. it's perfect. one thing i do want to point out is if you have quitea bit more text in one section than you do in another and it takes up more lines. itwill push this button down so i just kind of typed in just the right amount of textto get these to all have the same amount of lines so that these buttons were lining upevenly but in my opinion, even they don't align perfectly evenly because you've gotmore text in one of your sections than another,
i think it still looks good. all right nowwe're going to go over our blog settings. let's go ahead and go back to the backendof our wordpress site and go to settings and reading. all right now, we're already made some adjustments withthis page but now, i want to explain exactly what we did and why we did it. first of all,front page displays by default, it was set to your latest posts which means that by defaultthe homepage of your website would display your latest blog post.now, we change that to display a static page and basically what a static page is it's justa normal page. all of the pages that we've created so far are considered static pages.we told wordpress that we wanted our homepage. in other words, our front page to displaya static page and then we selected that static
page as our welcome to natural phenomena pagebecause that's the one we wanted to be our front page. then since we no longer had ourfront page displaying our latest posts, we have the option to select which page we wantedto be our post page. the post page is synonymous with our blog page. we chose for our blogto be our post page. our page that we've created called blog. i know that kind of tricky buthere in a moment, when we create some blog post, i think you'll understand a little better.as of now, when we go to our blog page, just opened up our new or our front page, whenwe click on this blog menu item, we have the sample blog post that's showing up.this is the excerpt from the post if we click on it will actually open up the actual blogpost page where you have the sample comment
and where you have the option through yourusers to post their comments. now, we've already gone over the comment options and i'll justgive you a refresher on how to allow comments or disallow comments but first let's removethis sample post and create our own blog post and we'll go back to the backend of our wordpresssite. instead of going to pages, now, we're going to go to post. then we're going to clickon all posts and that's going to show the only post we have which is a sample post.we're going to hover over that and click on trash just like we did to delete our samplepage. all right. now, we're going to add our new blog post by going to posts, add new.we are going to call this blog post 1. i'm going to just copy this text in, might aswell switch the visual editor. we'll call
this blog post 1.then i'm going to paste in that text there and this visual editor works the exact sameway for blog post as it did when we were using it to create our pages. you could add images,the same way everything works the exact same way. you could even use the page builder.then we need to give our blog post a category so to do that, we're going to click on addnew category. we're going to call this sunset. i'm going to click on add new category. now,if i had multiple blog post that i wanted to put in the same category, all of the categoriesthat you create will appear for every blog post and you can check or uncheck as manyas you'd like. we're going to just keep that at sunset for now. the reason i'm callingit sunset is because i'm going to choose my
featured image. i'm going to go down and clickon set featured image. then i'm going to upload a file and i'm going to go select files.this is one of the original high quality images that i downloaded. i've got it in this folderblog post images hq. i'm going to click on this one here. this is my sunset picture.as you can see it's the 1280 pixel image. i'm going to click on open and then i'll uploadand then you could fill in your information there if you'd like to. click on set featuredimage. okay and then now, when we publish the page and go back to our blog page andrefresh it, this is going to be replaced with our first blog post. you'll see the featuredimages showing up there and you have our text and you have the category right here is sunset.then now since we don't have a blog post in
the uncategorized category anymore since wedeleted the sample post. we now have the sunset category showing up there. if had multipleblogs within that category, i could click on this category here and it would show alist of all the blog post that fit that category. one thing i want to point out about the featureimage is that origami automatically resizes your image if it's too large which in ourcase, we were using the high quality 1280 pixel wide image. we know that since our slideshowimages are taken up the full width and are 902 pixels wide, we know their max width is902 pixels. origami will resize that larger image and make it to fill up the full widththat it could possibly fill, just like you see here. now, if you were using an imagethat was smaller than the 902 pixels maximum
size then it would show up at whatever sizethat image was. it would show up smaller and it wouldn't take up the full width. now, let'sgo back and add our second blog post. let's go back to the backend of our wordpress site.go to posts, add new, click on that. we're just going to call this blog post 2.then i've got some text here. we'll copy in. just like that. paste it in there. we're goingto create a new category for this one and this one's going to be winter storm. i'm goingto click on add category. then automatically checks that box there. then i'm going to uploadmy featured image by clicking set featured image. i'm going to upload file. click onselect files and use the winter image here. this is also a full sized image. click onopen. fill out your information here. click
on set featured imaged. all right before wepublish this, i'm going to allow comments on this particular post. to do that, justagain, screen options to drop down all these options. click on discussion, that's goingto pull up this discussion box. then we can click screen options again and minimize that.then i'm going to select allow comments. now, when i publish the page i can view mywebsite and i can go to my blog. you'll see that we have our blog post 2 featured image,and our title, and our excerpt showing up above blog post 1 because blog post 2 is themost recent blog post. at the bottom, we now have both of our blog categories because thosewill be automatically added to our categories widget. all right and then to access, if youremember, we enabled discussion on this blog
post 2 so to get to that, you would clickon the title and it's going to pull up the full post. it's showing that full amount oftext in the blog page where we've got an excerpt from both of our blog post as it is on theactual blog post page where we are now. if you have a lot of text then all of thattext would show up here and you would have an excerpt that would be a little bit lesstext showing up on the main blog page but anyway, here is the comment fields. sincewe had that enabled, now, i'm going to log out and show you what your comment field wouldlook like to your users that don't have a log in information. now, that i'm logged out,i can scroll down. they'll be a sport for your name, email, website and then of courseyour comment. now, when a user first posts
a comment, it actually won't show up. it won'tshow up because and this is to prevent spam. there's a wordpress setting, i'm going togo log in to my wordpress site again by going to my domain, /wp-admin. all right. if wego to settings and then discussion, by default wordpress has, let's see, this requirementcheck right there. comment author must have a previously approved comment.the reason they do is to prevent spam because you'll get all kinds of spam comments if youdon't manage them. when a new user posts a comment that will appear right here in thissection, it'll have a numeral there that indicates how many comments you have. then from this,you could approve the comment. once you approve the comment from that user, that user willbe able to post comments again. that's just
a great feature that i definitely recommendkeeping as your default. all right. well that wraps it up. if you like the video, pleaseremember to show your support by subscribing to my channel, liking the video on youtube,favoriting the video on the youtube and sharing the video on youtube with other people thatmaybe interested in building a website. i really, really appreciate that. i will seeyou next time.