Placeholder Image

字幕表 動画を再生する

  • If you wanna build a super professional website, watch this video, and I’ll show

  • you how step by step.

  • What’s up everyone? It’s Jameson from NYC Tech Club and in this video, I’m gonna

  • show how to create this website step by step. And you don’t need to know any type of coding

  • or programming or whatsoever. It's just gonna be a bunch of drag and drop, and copy and

  • paste. And by the end of the video youre going to be a WordPress expert. And as you

  • can see, this website is just beautiful. It’s simple yet stunning and just super professional.

  • What I tried to do was incorporate a lot of the design aspects of leading businesses such

  • as Apple. and Spotify. and Square. all of which are multi-billion dollar businesses.

  • that have spent millions of dollars on web design research.

  • So what I created was something with a great user experience, something that creates an

  • amazing first impression and something that you can be really, really proud of. I wanted

  • to build something that not only represents you, but represents your brand. And I really

  • think that we were able to accomplish that with this website. And the best part about

  • this web tutorial is it’s gonna save you thousands of dollars building out this website

  • yourself. So if youre a freelancer, a blogger, an artist, a small to medium size business

  • or just someone just wants to build a super professional, super beautiful, mobile-friendly

  • and responsive website, then keep watching this video because I’m gonna show you how

  • to create this website step by step. But first, I wanna give you a tour of exactly what were

  • gonna build right now.

  • Okay, so this is the homepage that we're gonna be creating today. I’m gonna show you how

  • to create this full width image slider right here. Well also put in a transparent header

  • menu right at the top, and I’ll show you how to create a custom logo right here. On

  • each of our slider images, were gonna have a headline, a subheadline and a Call to Action

  • button. And the reason why were gonna do this is because all of the leading business

  • websites also do this.

  • So if I go to Apple, you can see right here there’s the headline, a subheadline and

  • a Call to Action. And the same with Spotify, they have their full width image right here

  • with a headline, a subheadline and some Call to Action buttons right here. And what we

  • wanna do is incorporate the best of the best and put it on our website. So that’s what

  • were gonna do right here.

  • So if I click on this button right here, it’s gonna bring me down to the next section that

  • we're gonna build. So the next section we're gonna create is the "Services" section right

  • here and what you can do here is highlight what you and your business is all about. So

  • you can add as many or as few products and services as you want, and I’ll show you

  • how to add these custom icons right here. Once were done with this section, were

  • gonna create a Call to Action section right here. And what well have is two buttons

  • that will go to different pages on our website. So I’ll show you how to create multiple

  • pages and link them to these buttons. And once were done with this section, were

  • gonna create a recent Blog Post section that looks just like this, and then well create

  • another Call to Action right down here with another button that really just funnels your

  • visitors wherever you want them to go on your website. And right down here in the footer,

  • well have Social Media Buttons. Well have our website name down here and if I click

  • on this button, it will bring us right back to the top. And we can actually customize

  • any of the colors on our website. So I’ll show you how to do that. And again this website

  • is responsive, so it works on any computer or laptop, any mobile device. It will just

  • resize on its own so you don’t have to worry about that. So now, let me just quickly show

  • you what the other pages that were gonna make look like.

  • So this is the About page that were going to make, and I’ll show you how to put in

  • titles at the top of your pages like this. And well insert an image right here just

  • so that you know how to do that, and then well put in a little description right

  • here about your business. And then well put in an embedded video right here. And what

  • we could have done if we really wanted to was put this video full width so that you

  • don’t have any white space right here. But I kind of like it with the white space just

  • because it makes it look like a framed image. So if you really wanted to, you can push play

  • right here and actually watch this video play right here. And underneath this video, were

  • gonna put in some facts or statistics about your business right here. And then well

  • have another Call to Action right here, and then right below that on every one of your

  • pages youll see this footer right here. So now let me show you another page that were

  • going to create.

  • So the next page that we're gonna create is this Employee's page and you can add as many

  • or as few employees as you want. And we can also add a Call to Action right down here.

  • So what’s really cool is if you hover over any of these images, you get additional details

  • about your employee along with their social media accounts right here. And we can link

  • the name to additional pages if we want to, so that your visitors can get additional details

  • about the employee. Once we create this page, were gonna move on and create an image

  • gallery or portfolio page. So if you have any images or projects that

  • you wanna put into a portfolio, then youre going to love this page because what were

  • gonna create is this image gallery right here that your visitors can actually click on each

  • individual image and then get a pop up of that image. And they can actually go through

  • a slider to see every one of these images. And once we create this page, were going

  • to create our Success Stories page or Testimonials page next.

  • So this is the Success Stories page or Testimonials page and what this page is gonna do is give

  • you a bunch of social proof. So what were gonna do right at the top is add some videos

  • right here. So if you have any video testimonials you can embed them right here, and if you

  • don’t have any videos, we can add images or texts or anything else we wanna write here.

  • And right below that, well add some testimonials right here with the image of the person that’s

  • giving the testimonial, their name and then maybe their title or what company theyre

  • from right here. And then right below that, well add some logos of our current and

  • past clients right here. And then well put in a Call to Action right here and then

  • our footer right here. So once we create this page, were going to create our Blog page

  • next.

  • Now were gonna create a very simple, but elegant and professional Blog post page just

  • like this. And what youll see is well have a featured image for each of our blog

  • post with a title, the date that the blog post was written and also a little excerpt

  • right here. And if any of your visitors click on one of these blog posts, this is what the

  • blog post will actually look like. So this is a single blog post page right here. And

  • right below, we also have a section for your visitors to leave a comment if they want.

  • And youll notice on the right hand side, we have this right side bar. So I’m gonna

  • show you how to customize this and put in a Facebook Like box, your Twitter feed right

  • here, and then recent blog post right here with thumbnails. So once we create our Blog

  • Post page and some blog post, were gonna create one additional page.

  • So the last page that were gonna create is this Contact Us page right here so that

  • your visitors can get in touch with you. So well put in some contact information right

  • here and well embed a map right below if you have a real location and then well

  • put in this Contact Us form right here that your visitors can fill out and it will send

  • a message right to your inbox.

  • So pretty much, this is the website that were going to be building today. So if you wanna

  • build a website that incorporates a lot of the design aspects of multibillion-dollar

  • companies and you really, really like what you see, then follow this tutorial and youre

  • going to build an amazing website. So if youre ready then I’m ready. Let’s get started.

  • The first thing that you have to do is register a domain like this, and then we have to get

  • hosting service. And hosting allows you to run your website and store all the content

  • on your website. So I recommend that you go to hostgator.com for both your domain and

  • your hosting service. So right here, type in www.hostgator.com and click "Enter."

  • So I recommend hostgator.com because theyre fast, reliable, cheap and they have great

  • customer service. So all I want you to do is click on this button right here that says,

  • "Get Started Now!” On this next page, we can just scroll down and you can see the three

  • different hosting plans available. There is the Hatchling Plan, the Baby Plan and the

  • Business Plan. The Business Plan is a little too expensive and probably more than what

  • we need, so I’m going to focus our attention on the Hatchling Plan and the Baby Plan. So

  • the Hatchling Plan is if you plan on building one website and one website only, and the

  • Baby Plan is if you plan on building more than one website and you wanna host them on

  • this account, then the Baby Plan is probably the right one to choose. I personally use

  • the Baby Plan, so I’m just going to select "Sign Up Now!"

  • Okay. So on this next page, we have to fill out some information to register our domain

  • and get hosting service. So on step number 1, it saysChoose a Domain.” So what

  • I want you to do is type in a domain that you wanna register right here. So I'm gonna

  • type in howtowebby.com and pushEnter.” If you get this green check mark, and it says

  • Added" right here that means your domain is available and we can just move to step

  • number 2.

  • So step number 2 is actually where you choose your hosting plan. So in this drop down right

  • here, remember were choosing between the Hatchling Plan and the Baby Plan. In the Hatchling

  • Plan is if you plan on building one website and one website only, and the Baby Plan is

  • if you plan on building multiple websites and you wanna host them on this account. So

  • I’m gonna select the Baby Plan right here, and then I’m gonna choose my billing cycle.

  • So what I recommend is either the 6 or 12-month billing cycle just to give yourself enough

  • time to know whether or not you wanna run a website or not. So I’m gonna choose 6

  • months right here. And then all you have to do is create a username and a security pin.

  • And then we can move on to step number 3.

  • So step number 3 is where youre going to enter your billing information. And I’ve

  • already done this, so I’m not gonna do it with you. But if you need to, go ahead and

  • pause this video and fill out all this information and then just pushPlaywhen youre

  • ready. Otherwise, were gonna move on to step number 4.

  • So step number 4 is adding additional services and by default hostgator actually selects

  • all of these for us. What we wanna do is unselect them because these are just extra cost that

  • we don’t need right now, and we can always add these later. So make sure you uncheck

  • all of these and then let’s move on to step number 5.

  • And so step number 5 is entering a coupon code. And by default HostGator puts in this

  • snappy code right here. And what I recommend is you change this to n-y-c-tech-3-0 and click

  • "Validate" right here. And youll see the discount actually increase right here, because

  • this coupon code n-y-c-tech-30 gives you a 30% discount code instead of the 20% the HostGator

  • gives you. So once you put this coupon code in right here, go ahead and scroll down and

  • click “I have agreed to the terms.” And then just click this button right here that

  • saysCheck Out Now!”

  • Once youve signed up for hosting and registered your domain, I want you to go to your inbox,

  • and youll see this email right here from hostgator.com that’s titledYour Account

  • Info.” I want you to click and open that and youll see a bunch of links right here

  • and the one that we wanna focus on is this one that saysYour Control Panel.” I

  • want you to click on that link right here and then youll get this pop up that allows

  • you to login to your cPanel.

  • And inside our cPanel is where were going to install WordPress and also create our email

  • address. So if you need your username and your password, go back to you email and right

  • here, this is where your username is and this is where your password is. So go ahead and

  • copy those and paste them into these two sections right here and then just clickLog in.”

  • Once youre logged in, all we have to do is scroll down to this section right here

  • that saysSoftware and Services.” And what were gonna do is install WordPress.

  • So you might have to wait a few minutes for GoDaddy and Hostgator to connect but if you

  • don’t, go ahead and just click this button right here that saysQuick Install.”

  • Now all we have to do is come down to this section right here that saysPopular Installs

  • and click on "WordPress." And then well get this pop up right here and all we have

  • to do is click on this button that saysInstall WordPress.”

  • And now we just have to fill out some information. So right here, go ahead and choose your domain

  • that you want to install WordPress on and then put in your email address, a blog title

  • that you can actually modify later and then an admin username. So I’m gonna put in admin

  • right here and then I just put in my first and my last name right here. And then I’ll

  • scroll down to this green button and just clickInstall WordPress.”

  • Once you've installed WordPress, you should see this message right here that saysYour

  • install is complete!” And right over here if you click on this arrow, you can see this

  • information that allows you to login to your WordPress Dashboard. And you can write all

  • of this down if you want or you can go to your email inbox and youll see this email

  • right here that saysInstall Complete.” And if you click and open that, you also have

  • all of your information right here to login to your WordPress Dashboard. So before we

  • actually login to our Dashboard, let me show you what our website looks like right now.

  • So if I open up a new tab and I go to my website, this is what the website is going to look

  • like after you install WordPress: super simple and really plain. But we haven’t installed

  • the theme yet. So we haven’t started customizing and making our website look like this. But

  • were gonna do that right now. So what I want you to do is either go back to the Install

  • page or your email inbox. And then click on this link right here that saysAdmin URL.”

  • And were gonna login to our WordPress Dashboard right now.

  • On the WordPress Login page, what you have to do is put in your username and your password.

  • So if you need to, go ahead and go back to your inbox and go to your email with your

  • login information. And right here is your username and right here is your password.

  • Go ahead and copy and paste those two into these two sections right here. And once youre

  • ready, go ahead and click this button that saysLog in.”

  • Once were logged in, this is the WordPress Dashboard. And this is where were gonna

  • do all of our customization and add new blog posts, upload images and videos, create new

  • pages and approve and reply the comments and all that good stuff. But the first thing that

  • we have to do in order to customize and build our website is install the theme for this

  • WordPress website. So go to Appearance and click onThemes.”

  • Once youre on the Themes page, what I want you to do is go to this button right here

  • that saysWordPress.org Themesand click on that. And the theme that were gonna

  • be using is called theSydneytheme.” So right here where it saysSearch Themes

  • I want you type in Sydney, S-Y-D-N-E-Y. And then it should pop up right here and what

  • I want you to do is clickInstall.” And then on this next page, just click this link

  • right here that saysActivate.” And once were back on the Themes Page, you can see

  • right here the Sydney theme is the active theme. So what I wanna do is actually show

  • you what our website looks like right now. So if I open up a new tab, you can see that

  • the site looks a little bit better, but still nothing as great as what were gonna make

  • it look like in a little bit.

  • So go back to your Dashboard if youre not already on it. And the next thing were

  • gonna do is install some plugins that are recommended to us. And plugins really just

  • make our life a lot easier. Theyre like tools to really help us build our website.

  • So right here where it saysBegin installing plugins” I want you to click on this link

  • right here. Now on this next page, I want you to check this box right here next to plugin

  • and then click on this drop-down right here and clickInstall.” And then click this

  • button that saysApply.”

  • And once we get to this page that saysEverything has been installed successfully,” I want

  • you to click on this link right here that saysReturn to Required Plugins installer.”

  • And now we have to activate these plugins. So again click on this box right here and

  • then go to the drop-down and click on "Activate" and then click "Apply." Once the plugins are

  • activated, well get this message right here. And what I wanna do right now is actually

  • install the other plugins that were gonna need for this web tutorial. So right here

  • where it saysPlugins” I want you to hover over that and clickAdd New.”

  • On the Add Plugins page, what were gonna do is search for some plugins right here and

  • then click inInstalland activate them. So in order to know which plugins were

  • going to install, I want you to click on the link in the YouTube description to the NYC

  • Tech Club homepage and go to the text tutorial or you can go to nyctechclub.com and click

  • on this link right here to the web tutorial and it will bring you this website right here

  • or this webpage. And what this is, is just all the instructions to the video tutorial

  • that were going through right now. And what I want you to do is go down to step number

  • 8 where it saysDownload Plugins.” And what were gonna do is install and activate

  • all of these plugins right here. So what you can do is just highlight this and then just

  • copy it and then just go to the search bar right here and paste it in and then just click

  • Enterand then we can search for it.

  • And then well see it right here and all we have to do is clickInstalland then

  • well just clickActivateright here. And then well see this message right here

  • that saysPlugin activated.” And now I wanna install another plugin, so right here

  • clickAdd New.” And then were gonna go back to the website and were going to

  • copy the next plugin that we need. So Contact Form 7 and then go back to the Dashboard right

  • here and paste that in and clickEnterand search for it. And then right here this

  • Contact Form 7, all were gonna do is clickInstall Now.” And then again well

  • clickActivate Pluginright here and once again well get this message right

  • here that saysPlugin has been activatedand before we actually add another plugin,

  • I do wanna show you that all of your plugins that youre installing and activating are

  • listed right here. So if you ever wanna deactivate or delete any of these, you can do that right

  • here as well, okay? So let’s add another plugin. So right here click onAdd New.”

  • And now let’s go back to the NYC Tech Club website and highlight theEasy Facebook

  • Likebox and copy that. And then were gonna paste it into the search box right here

  • and search for that. And then the plugin we want is this one right here by Sajid Javed

  • and so well clickInstall Now.” And then well clickActivateonce again.

  • And now were gonna add another plugin. So right here clickAdd Newand what

  • were gonna do is go back to the NYC Tech Club website and if you wanna go to this section

  • yourself and go a little bit faster, you can totally do that. I just wanna make sure you

  • download the right plugins, so that’s why I'm gonna do it with you. So right here highlight

  • this next plugin and copy that.

  • And then just go back to the Dashboard and paste it in right here and let’s search

  • for this one. And the plugin that we want is this one right here, so go ahead and click

  • Install Now.” And once again well clickActivateand we have two more

  • plugins to go. So this should be pretty familiar to you. Right now were gonna clickAdd

  • Newonce again and then go back to the NYC Tech Club website and right here were

  • going to highlightSite Origin Widget Bundleand copy that. And then were gonna paste

  • it into this search bar right here and search for that. And then well see the plugin

  • right here, so clickInstall Nowand then well clickActivateright here.

  • And now let’s clickAdd Newonce again and go back to the NYC Tech Club website and

  • highlight this last plugin that we need and copy that. And then well paste it into

  • this search bar right here and search for that. And we wanna install this first plugin

  • right here, so go ahead and clickInstall Now.” And once again, let’s clickActivate

  • Pluginright here.

  • Okay, so once weve installed and activated all the plugins that we need for this WordPress

  • tutorial, I want you to go back to the NYC Tech Club website. And scroll down to step

  • number 9 right here. What I want you to do is download this zip file and what’s gonna

  • be inside this zip file includes the images, the logo and some additional files that we

  • need to really customize our website. So even though you might have your own images and

  • your own logo, I want you to download this anyways just so you can get the files that

  • we need to customize this WordPress website. So right here just right click and then just

  • clickDownload File.”

  • Once youve downloaded this zip file, I want you to go to the folder where you saved

  • it. And in my Downloads folder, here it is right here, and what I want you to do is double

  • click it. And this is gonna unzip the file and well get this folder right here. And

  • if we open it up, you can see all the contents right here. And what were gonna do next

  • is actually import the theme settings. So right down here where it saysSydney-settings.xml

  • were gonna import this into our WordPress website. So I want you to go back to your

  • Dashboard and right down here where it saysTypes” I want you to hover over that

  • and then click onImport/Export.”

  • And then on this page, all we have to do is come down here toImport Types Data File

  • and push this button right here that saysChoose File.” And then were gonna

  • go to the folder that we just unzipped and all were gonna do is select the fileSydney-settings.xml

  • and choose that. And then click this button right here that saysImport File.”

  • And then on this next page, just scroll all the way down to the bottom and push this button

  • that saysImport.” And once everything has been imported, you should see these messages

  • right here that sayGroups or Fieldshave been added. And then on the left hand

  • side over here, you should see additional links for clients, projects, testimonials,

  • employees and services. And were actually going to be using these to build up our website.

  • So the next thing I want you to do is actually add one additional plugin. So go toPlugins

  • and clickAdd New.” Once youre on the Add Plugins page, just come back to the

  • search bar right here and type inLightbox Plus Colorbox.” And what this is going to

  • be for is for our image gallery. So once you type that in, go ahead and pushEnter.”

  • And the plugin that we want is this one right here on the left by Dan Zaponne. So go ahead

  • and clickInstall Now.” And again we can just clickActivateright here.

  • And back on the Plugins page right here you should see the Lightbox plugin down here.

  • And if you have that, then were good to go and we can move on to the next step. And

  • so the next step is going to be uploading the images and the logo that we downloaded

  • from the NYC Tech Club file. So go toMediaright up here on the left and then click on

  • Add New.” And I’m gonna show you how to upload images.

  • On this Upload New Media page, what I’m gonna do is actually show you how to upload

  • all the images and the logo that we downloaded in the zip file. If you wanna use your own

  • images and your own logo, you can upload those as well or you can actually upload everything

  • one at a time as we go through this website tutorial. So it’s really up to you. I’m

  • just gonna show you how to upload everything all at once. So right here I wanna select

  • this button that saysSelect Files.” And then I wanna go to my folder that has

  • all of my content. And all I’m gonna do is highlight everything, all the images, and

  • then just clickChooseright here. Once weve uploaded everything, youll see

  • them all listed over here and we can actually go to our Media Library. So on the left side

  • right here under Media, we can click onLibraryand see all of our images that weve uploaded.

  • And right here you can actually click on any of these images and edit them. So if I click

  • on the first image right here, I get this pop up right here. And what I can do is click

  • on this button that saysEdit Image.” And then well come to this page right here

  • and you can actually edit the size or you can crop the image if you wanted to. And all

  • you have to do is click on these buttons up here and then pushSaveright here.

  • But I’m just gonna close out of this.

  • So this is how you upload images and you can actually upload them one at a time by clicking

  • on this button right here. And I’ll show you how to upload images and other types of

  • media one at a time as we go through building our post and pages. But the next thing that

  • we have to do is create our Homepage. So what I want you to do is go to pages right here

  • and clickAdd New.” Were gonna create two new pages.

  • The first page that were gonna create is the Homepage and then were gonna create

  • a second page that’s gonna be our Blog post page. So right here I want you to put in a

  • title. I’m gonna type in Homepage and then what I want you to do is come down here to

  • page attributes and where it saysTemplateright here. Go into the drop-down and select

  • "Front Page" and then clickPublishright here.

  • And once this page is published all I want you to do is click on this button right here

  • to add a new page. What were gonna do is create the Blog post page. Okay, so let’s

  • title this new page ourBlogpage. So right here type in Blog and we don’t need

  • to change any of the page attributes for this page. All we need to do is push this button

  • right here that saysPublish.” So I’m just gonna push this and once our page is

  • published, now we just need to set the Homepage and the Blog page. So what I want you to do

  • is come down on left hand side to Appearance and then click onCustomize.”

  • So on this page right here, on the left hand side youll see a bunch of different tabs.

  • And were gonna go through all of these to customize our settings and also customize

  • our website. But the first thing that I want you to do is come down here to Static Front

  • Page and click and expand that. And you can scroll down right here and youll this section

  • that saysFront page displays.” I want you to click the bullet right here that says

  • “A static pageand then youll get this drop-down right here. And where it says

  • Front Pageclick in the drop-down and select Homepage and then for Post page, click

  • in the drop-down and select Blog right here and then just clickSave" and "Publish."

  • And once that saved, we can actually see the changes right here as we make them. This is

  • pretty much like a Visual Editor page right here. But if we wanna see the change that

  • we actually made, we can go to the tab that has our old website open. And right here if

  • you remember we have all this white space down here when we installed the theme. So

  • if I actually refresh this right now, it should actually update and all we should see is the

  • slider image right here. And then we have another page that has all of our Blog Posts

  • if we go to that, but right now we don’t have a header menu link right here to actually

  • go to that page. So I’ll show you that a little bit later.

  • The next thing that were gonna do in this web tutorial is create the slider image right

  • here and were gonna modify or change the slider images. So let’s do that right now.

  • Let’s go back to our Dashboard and go back to this Customize page right here. And what

  • were gonna do is scroll up to the top and click onHeader" area right here.

  • Once youre in the Header area, I want you to come down to the Header type right here

  • and click and expand that. And make sure this bullet is selected right here where it says

  • Full screen sliderand then right down here where it saysSite header type

  • I want you to selectNo headerright here. And once we do that, were gonna scroll

  • down to this section right here where it saysHeader Sliderand click on that. In

  • the Header Slider area, you can actually change the slider speed and also the text speed in

  • your slider images right here. Were gonna leave it at the default 4000 milliseconds

  • and if you really want to you can change this yourself. But if not were gonna just move

  • down to this next section that saysFirst Slide.” And what we wanna do is actually

  • change this first slider image. So what you can do is push this button right here that

  • saysRemoveor just click this button that saysChange Image.” So what I’m

  • gonna do is click this button right here. and what well get is our Media Library.

  • And since we already uploaded all of our images, theyll show up right here. If you wanna

  • upload a new image, all you have to do is click on this tab right here that saysUpload

  • Files.” And then you can actually click this button right here that saysSelect

  • Filesand then you find the image that you want and then upload it that way. But

  • since we have everything already uploaded, I’m gonna click on "Media Library" right

  • here and just select the slider image that I want and just choose image right here. And

  • then youll see it actually refresh right here. So now what I wanna do is actually modify

  • the text for the first image slider. So right here where it saysWelcome to Sydney

  • I’m gonna change this to "Create And Inspire." And then I wanna change the subheadline from

  • "Feel Free to Look Around" to "Endless Possibilities." So I’ll type that in right here and you

  • can see it actually update right here. And well modify the text for the button or

  • the Call to Action in a little bit.

  • The next thing I wanna do is change the second image slider. And you can add up to five different

  • images here. So I’m just gonna add 2 and what we wanna do is actually change this one

  • right here. So we can click againRemove or Change Imageright here and then we

  • get to our Media Library. And what I wanna do is select this image for my image slider

  • and just clickChoose Imageright here. And I’m gonna leave the Headline "Ready

  • to begin your journey" but right here on the sub-headline, I’m gonna sayFind out

  • what were all about.” And then we can just scroll down. If you wanna put in any

  • more images, go ahead and upload them here and also the text; otherwise just come down

  • to bottom and come down to the section that says Call to Action button.

  • And what were gonna do right here is change the text to "Learn More." And then if you

  • wanna put in a URL to redirect people to another page once they click on this Call to Action

  • button, you can paste that in right here; otherwise, just leave it as is and all it

  • will do is if people clicked on this, it will go down to the next section which is theServices"

  • section. So what I want you to do is clickSaveright here. And then were gonna

  • move on to this next section that is theHeader Image.”

  • Were not actually going to modify the Header Image, but I do wanna show this section in

  • case you wanted to replace this image or put a new image that shows up on all of your pages

  • right at the top with your header menu. What were gonna do in this website tutorial

  • is actually create custom titles with our own images for each of our pages. So were

  • not going to actually modify this section. So if you want you can just leave this section

  • as is and we can just scroll down to this next section right here that saysMenu

  • stylesand click on that.

  • On the Menu style tab, were actually not gonna change any of these options right here.

  • But I do wanna talk about them just in case you wanna change your own menu settings. So

  • if we go to the demo website, you can see right here, this is the transparent Header

  • Menu right at the top. And if we scroll down the page, you can see that the Header Menu

  • actually follows you down the page. And that’s because theStickyoption is chosen.

  • If you don’t want the Header Menu to actually follow you down the page, you wanna choose

  • theStaticoption, so it stays at the top of the Homepage and the rest of the website.

  • So if we go to the Customize page again, you can see right here the Sticky option is chosen

  • and then we can come down to the Menu Style right here and you see that theInline

  • option is chosen. And what that means is the Site title right here and the navigation bar

  • are going to be on the same line. If we wanna see what it looks like when we center it,

  • we can click on this button right here and then you can see that this is what it looks

  • like if it’s centered. Youll have your Site title or Logo right here on top and then

  • youll have your navigation bar right here below it. So were just gonna use In line

  • for this website, but you can choose whatever options you want. And when youre ready,

  • just clickSave" and "Publishright here. And then just click the "Back" button.

  • Once were back on this page right here, I’m going to make some changes to our settings

  • and our layout. And what I’m gonna do is make some suggestions that you can follow

  • or you can actually modify any of these settings and layouts however you want. So the first

  • thing that I wanna do is come down toFontsright here and click on that. In theFonts

  • Settingsection I wanna just scroll down all the way to the bottom to the last section

  • which is theBody font size.” And what I wanna do is change this from 14 to 16.

  • And once I do that, I just wanna come down to this next section which is "Colors" and

  • click on that. In the Colors section, what were gonna do is actually just modify the

  • primary color and the menu background color. And you can modify all these other ones if

  • you want, but these are the only two that were gonna be modifying. So if you see

  • right now on our website, the red is a little is off red. And what we wanna do is actually

  • make it a little bit brighter. So if I go to the demo website, you can see right here

  • this red looks a little bit brighter. And if we scroll down, you can see that the menu

  • actually changes to the same color that were gonna put in for the Primary color. And by

  • default the menu color is black. And you can leave that black if you want. I just like

  • to match it up with the primary color and youll see that the primary color shows

  • up throughout the website. So in these little sections right here, you can see if we hover

  • over anything, the primary color actually shows up too.

  • So you can modify the colors to whatever colors you want, but if you want the colors that

  • were gonna put on this website or through this web tutorial, what I want you to do is

  • go the NYC Tech Club website and got to the Text Tutorial and on step number 15 right

  • here where it saysColors”, what I want you to do is highlight this hex code right

  • here. And this is going to be the color code for the color of red that we want.

  • So once if you highlight and copy that, go back to the Dashboard right here and where

  • it saysPrimary color”, go ahead and push this button right here where it says

  • Select Colorand all we have to do is just paste in the code right here. And then

  • were gonna do the same right down here where it saysMenu Background.” Just

  • click on that button and then delete this hex code and paste in that code right there.

  • And now the colors will actually change to that brighter red and all we have to do is

  • clickSave" and "Publish.”

  • And once this is saved, we can scroll up to the Blog options tab and click on that. And

  • this is where were gonna modify the Blog post page. In this section right here, we

  • can modify the Blog post layout. So if I go to the demo website, this is what the Blog

  • Page looks like. This is the Masonry grid style. So if we want a Blog Page that looks

  • like this for our website, we have to select the Masonry grid style option.

  • So on the Customize Page right here, I’m gonna select Masonry grid style. And right

  • below it we have the option of creating a full width single post page. So if a visitor

  • clicks on a blog post, this is what it looks like right now. Youll see the blog post

  • with a right side bar. If you wanna get rid of the side bar and just have all of your

  • content go full width, then you would click that box. But were gonna leave it blank

  • right now or unchecked and just move on toContent and Excerpt.”

  • And right here all I wanna do is where it saysExcerpt length.” I wanna change

  • the 55 to 20. And the reason is, right here is where the excerpt is and 55 is a little

  • bit too long and a little bit too messy. So what I did was I modified it to 20 and it

  • just looks a little bit more professional. So once you changed the excerpt length to

  • 20, all we have to do is clickSave" and "Publish.” So once this is saved, you can

  • actually modify any of the other settings in these tabs if you want. But were actually

  • done with what we need to modify to build out our demo website. So first let’s go

  • to our old website and refresh it and see the changes that we made. And you can see

  • right here we have our slider image with some text and then on this button right here we

  • have our primary color.

  • So now we can move on to the next step which is creating a Custom Logo that were gonna

  • put right here. So what I want you to do is go to a website called logomakr.com, L-O-G-O-M-A-K-R.com.

  • So the wordmakrdoesn’t have the letter “e.” This is where were going

  • to create our custom logo. So the first thing that you have to do is click "Next" "Next"

  • "Next" and "Done." And what we wanna do is come to this search bar right here and type

  • in an image or a graphic we want. So I’m gonna type in a compass. So that’s what

  • I use for the demo website, and then I’ll scroll down and find the one that I wanna

  • use which is this one and I’ll just click on it. And you can see the image right here

  • and you can actually change the colors to whatever color you want using this color spectrum

  • right here. But the first thing that I want you to do is actually click on this corner

  • and drag it in to about fifty by fifty. And the reason why I wanna do this is so that

  • we make sure that it fits within our Header Menu. So if you remember, we have this transparent

  • header menu up here. And what I’ve done with my logo is I created a white logo because

  • I think it looks really nice on this full width image slider. So that’s what I’m

  • gonna use again, but you can make your logo any color you want.

  • So let’s go back to logomakr and what I wanna do is change this to white. And the

  • logo is still there but it looks like it disappeared just because the background is also white.

  • And all I wanna do now is click on this disc right here to save and download the logo.

  • So if I click on that, I’ll get this new tab right here. And the logo, if it’s white,

  • it actually shows up right here but you can’t see it. So what I want you to do if you have

  • a white logo is go to the center and then just right click. And then you should get

  • this pop up right here that saysSave Image.” Go ahead and select that and then you can

  • save this to your download folder. And what I want you to do is close this tab and then

  • X out of this and then actually if you have a white image here, I want you to change it

  • to a color; any color you want. If I select thisand the reason why I wanna do this

  • is because were gonna resave this logo and were gonna upload it as our favicon

  • right here on our web browser so that our logo shows up next to our web address.

  • So again I’m gonna click on this disc right here and download this and then I’ll right

  • click and save it. And then I’ll save as another name, and then were good to go.

  • So I’ll close out of this and then I’ll come back to our Dashboard right here where

  • were customizing everything, and I’ll click back right here. And right now what

  • were gonna do is upload our logo and our favicon. So right here where it saysSite

  • title/tagline/logo,” I want you to click on that. And if you wanna just update your

  • site title right here or your tagline, you can do that right here; otherwise, let’s

  • upload our logo and replace the text right here. So let’s click onSelect Image

  • right here and if you need to upload your new logo, go ahead and click on theUpload

  • Filestab right here and clickSelect Filesand find the logo in your downloads

  • folder or wherever you saved it and upload it; otherwise, you can go to Media Library

  • if you have it already uploaded and we already have that right here. Were gonna select

  • our logo and then just clickChoose Imageright there. And then we can see that our

  • logo actually gets updated and shows up on our page right here.

  • So now let me show you how to upload our favicon. So right here where it saysGeneral

  • I want you to click on that tab right there. And all we have to do right here is upload

  • our favicons. SoSelect Imageclick on that. And then well go to our Media

  • Library again. And if you need to upload your favicon again, again just click right here

  • onUpload Filesand then click onSelect Files.” But since we already uploaded everything,

  • I’m just gonna select on this image right here and clickChoose Imageand then

  • youll see that the favicon actually should update once we refresh this page. So what

  • I'm gonna do is "Save" and "Publish." Once everything is saved, I wanna show you what

  • our website looks like right now. So if I go to another tab and type in our web address

  • and click "Enter" we should see the changes that we just made. So we have our logo right

  • here and then our favicon right here.

  • So if your website doesn’t update and show these changes right away, what you need to

  • do is go to your Dashboard and click onPluginsright here and then scroll down to the bottom

  • where it saysWP Super Cacheand click onSettings.” And what you need to do

  • is delete your cache. So just click on this button right here and it will delete the files

  • that are stored on your server. And what the cache really is is a way to speed up your

  • website because it stores everything on your server. But since were updating and modifying

  • our website, we actually wanna delete everything every time we update our website so that we

  • can see the changes. So you might wanna keep this tab up in and just click "Delete" every

  • time you wanna see the changes as we go through this web tutorial, okay? So now that we have

  • our website right here, let’s move on to the next section. So let me show you what

  • were gonna create next.

  • So back on our demo website, we created this section already. So now were gonna move

  • on to the next section which is the Services or About Section. So what were gonna do

  • is create a bunch of services just like this. And then were gonna create this section

  • for our Homepage. So what I want you to do is go back to your WordPress website and all

  • were gonna do is click on this X right here that will bring us back to our WordPress

  • Dashboard.

  • Once youre back on your WordPress Dashboard, what I want you to do is go down on the left

  • hand side to Services and what were gonna click on isAdd New.” On the Add New

  • Service page, the first thing that we wanna do is put in a title for our product or service.

  • So I’m gonna type inPhotographyand you can put whatever title you want. And when

  • youre ready, come down to this next section where were going to put in a short description

  • about the product or service that were creating.

  • So what I’m gonna do is go back to the demo website and just highlight this short description

  • right here and copy and paste it in just to save a little bit of time. But if you want,

  • go ahead and type in a short description right here and when youre ready, scroll down

  • to this section where it saysService Icon.”

  • And right here, this is where were going to select the icon for this product or service

  • that were creating. So what we can do is click on this link right here to see a list

  • of all the icons that are available. And so well get this new tab with this website

  • and if we scroll down, you can see all of the icons that we can choose from. So once

  • you find the one that you want, all you have to do is highlight the short code just like

  • this and then copy it and then go back to your WordPress Dashboard and paste in that

  • short code right here. And that’s gonna insert the icon for the service or product

  • that youre making. And right below that, you see this title that saysService link.”

  • So if you paste in a URL right here, your visitors can actually go to your website and

  • click on the icon or the title and it will redirect them to another page. But you can

  • see right here, we don’t actually have another link to another page. So were gonna leave

  • this section blank right here. And if you want, you can always come back to this page

  • and edit this later.

  • So what I want you to do now is go to the category section right here and I want you

  • to add a category. So click on this link right here that saysAdd New Categoryand

  • were gonna add the same category for all the products or services that were gonna

  • create because this is gonna help us create our Homepage section in a little bit. So right

  • here just type intype a” and then clickEnter.” And youll see that the category

  • gets added right here to this list and now all we have to do is click on this button

  • that saysPublish.” And once our service is published, let’s actually create another

  • one together. So right here click on this button that saysAdd New.” And once were

  • back on this Add New Service page, remember the first thing that we wanna do is add a

  • title. So right here I’m gonna type inStrategythis time and when youre ready come down

  • to this next section and then were going to put in a short description.

  • So I’m gonna go back to the demo website and copy and paste this short description

  • right here, again just to save some time. So I will paste that in right here and when

  • youre ready, we can scroll down to the Service icon section. And since we already

  • have the webpage open that has the full list of icons, we can just click on that tab and

  • then find the icon that we want. So I want this one right here. So I’m just gonna highlight

  • the short code and copy that, and then go back to the WordPress website and paste that

  • in right here. And again were gonna leave this box blank unless you wanna redirect your

  • visitors to another page. And then right here where we have our Categories, since we already

  • added the type a category or whatever category that you listed for your first service, we

  • can just click this box right here instead of adding a new category. And now all we have

  • to do is clickPublishright here.

  • And once were back on the Add New Service page, again we wanna put in a title right

  • here. So this time I'm gonna type inStrategyand again you can put in whatever you want.

  • And then right down here where we put in a short description, again, I’m going to go

  • back to the demo website, the description right here and copy that, and then go back

  • to the WordPress Dashboard and paste it in right here. And then I’ll just scroll down

  • to the Service icon section and since we already have the website open that has a full list

  • of our icons, I’m gonna click and open that tab right here. And then I’m gonna find

  • the icon that I want and just highlight the short code and copy that and go back to the

  • WordPress Dashboard right here and paste that in right here. And then I’m going to leave

  • this box blank for the Service link. And right here where we have our category, since we

  • already added the type a category or whatever category that you did for the first service

  • or product that you made, we can just check this box right here next to type a and then

  • we can just clickPublishright here. And once that’s published, all we have to

  • do to create another service or product is click on this button right here that says

  • Add Newor on the left hand side under Services, we can clickAdd Newright

  • here. So what I want you to do is post this video and create one additional product or

  • service so that we can have three of them for our Homepage right here. And when youre

  • ready, you can pushPlayand then were gonna create this section. So go ahead and

  • pause this video and create your last product or service, and if you want you can create

  • additional ones and you can have multiple rows. But at least create one more and when

  • youre ready pushPlayand then were gonna create this section, okay? So I will

  • see you in a few minutes.

  • Okay, so now that youre back we should have at least three different services listed.

  • So if you want you can check out how many services you have by going on the left hand

  • side under Services and clicking onAll Items.” Now we have three. So if you have

  • more than three that’s fine. All I want you to do is make sure that you have the same

  • category for your services. So it doesn’t have to be type a like I put right here, but

  • you wanna just make sure that you have the same label. And if you don’t, go ahead and

  • hover over any of your services and you can clickEditright here and then modify

  • whatever you wanna modify.

  • So now were going to create this Homepage section right here. So what we have to do

  • is go back to our WordPress Dashboard right here and I want you to go to pages on the

  • left and then click onAll Pages.” And once youve come to this page, just come

  • down to the Homepage and click on that. Once youre on your Homepage, come over here

  • to the right and click on this tab calledPage Builder.” And this is a plugin that

  • we downloaded a little bit earlier and what were going to be using pretty much to customize

  • our website. So what were gonna do is create a bunch of blocks for our Homepage. So let

  • me just show you what I mean really quickly. On the demo website, this Services section

  • is a block and then right below it we have this Call to Action, and this is gonna be

  • another block. And then the Recent Blog post right here is gonna be another block.

  • So let’s create the first block for our Services section right here. So back on the

  • WordPress Dashboard right here, what I want you to do is click on this button right here

  • that saysAdd Row.” And this is gonna insert our first block. So what we wanna do

  • is change the number of rows from 2 to 1 and then clickInsert.” And now that we have

  • our block, we wanna add a widget. So click on this button right here that saysAdd

  • Widgetand then youll see all of these widgets right here and some of them come from

  • our theme and then these other ones come from plugins that we downloaded. So we want a Sydney

  • Theme widget. So let’s click on this link right here right at the top and the one that

  • we want is the "Sydney FP: Services Type A" widget. So click on that and then you can

  • see it right here it gets inserted.

  • And now what we want to do is click on thisEditbutton right here and then well

  • get this pop up. And then we wanna put in a title. So right here type inOur Services"

  • or "Our Productswhatever you want. And then youre gonna leave this as -1 right

  • here. And then for whatever category that you created for your Services, I want you

  • to type that in right here. So for me, I put in type a as the category. And then we can

  • just clickDoneright here. And then just clickUpdate.”

  • And once that’s updated, we can actually go to our Homepage and see what that looks

  • like. So let’s click on this button right here that saysView Page.” And once were

  • on the Homepage, we can just scroll down and we should see the first block that we just

  • created right hereOur Services. So keep on mind that the Products and Services show

  • up from most recent on the left side to the oldest or first one that you create on the

  • right side.

  • So the other thing that I wanna mention is you can see right here the short description

  • shows up with a gray font and the title right here and the title of our block is a black

  • font. So what I wanna do is actually change the body text to a black font as well. So

  • if you wanna do that also, you can follow along. What I’m gonna do is click on this

  • link right here that saysCustomize.” And then we should see our Customize options

  • right here and we can just click on this "Colors" tab right here and scroll down to body text

  • and click on this right here where it saysSelect Color.” And then just choose this

  • black box right here and then we can just clickSave" and Publish.” And then click

  • the X right here.

  • And once were back on our website, we can just scroll down and we should see that the

  • font color has changed right here. So if you update you website or refresh your website

  • and you don’t see the changes yet, what you probably have to do is go back to your

  • settings right here and go to WP Super Cache and delete your cache. And what that’s gonna

  • do again is delete the files on your server so that you can see the changes right away;

  • otherwise, you might have to wait a little bit of awhile to see the updates, okay?

  • So now that weve created this block, we can move on and create the next block. So

  • let’s me show you what were gonna create next. So if I scroll down on the demo website,

  • the next thing that were gonna create is this Call to Action right here. And what were

  • gonna have is a title with a background image and then two little sections right here with

  • buttons that are going to be linked to different pages that were gonna create a little bit

  • later.

  • So you can follow along to create this section or you can feel free to also create whatever

  • you want for your website because what I’m really giving you is the tools to customize

  • your own website. So if you want this Call to Action, let’s go back to our WordPress

  • website and click on this link right here that saysEdit Page.”

  • And once were back on the Edit Homepage, the first thing we wanna do is add a new block.

  • So go to this button right here that saysAdd Rowand click on that. And we wanna

  • change the number of rows from 2 to 1 and then click thisInsertbutton right

  • here. And so this is our new row. And before we add any new widgets, let’s go to this

  • wrench right here and hover over that and click onEdit Row.” And what were

  • gonna do is customize this row a little bit. So right here where it saysTheme”, click

  • on that and you get this drop-down. And the first thing were gonna do is come down

  • to this section where it saysTop/bottom padding.” And in this box right here I want

  • you to type in 50 or 5-0. And let me explain to you what this is gonna do really quick.

  • So on the demo website right here, you can see that we have the Service row right here

  • and then were creating this Call to Action right here. And in between there’s some

  • space and we also call thatpadding.” And there’s also padding down here between

  • the Call to Action and the Recent Blog Post.

  • So what were trying to do is minimize that padding or that space. So it says right here

  • that the default padding is 100px. So by putting fifty in here, were gonna reduce that padding

  • or that space by 50%. So make sure you put in fifty right here and then you can just

  • scroll down to this section right here that saysBackground Image.” And so if you

  • wanna insert a background image in your row just like what were gonna do right here,

  • all you have to do is go to this section where it saysBackground Imageand click on

  • this button right here that saysSelect Image.” And then we can go to our Media

  • Library. So if youre already uploaded all of your images then we can just select one

  • here. And if you wanna upload a new file, you can actually just click on this tab right

  • here that saysUpload Files.” And click on this button right here that saysSelect

  • Files.” And then you can find whatever photo you want in your folders.

  • But since we already uploaded everything, I’m just gonna just click on the "Media

  • Library" tab and find the background image that I want which is this one right here.

  • And so it’s the background.jpeg and once I select it, I can just pushDoneright

  • here and that’s gonna insert the background image. And the last thing we have to do right

  • here is go to Row Layout. And then in this drop-down right here, click onFull Width

  • and then we can just clickSave.”

  • And now we wanna add a widget in this block. So click on this button right here that says

  • Add Widgetand the widget that we want is theLayout Builder.” So find that

  • and click on that and now we can just click on thisEdit link" right here. And so the

  • layout builder allows us to add rows within a row. And what I mean by that is if you go

  • to the demo website, there is a Call to Action row right here. And within this large row,

  • there is another row for our Text Title right here and a row for our Call to Action buttons

  • right here.

  • So what were going to do is add two rows within this larger row. So back on the Layout

  • Builder I want you to click on this button right here that saysAdd Row.” And let’s

  • change the number of rows from 2 to 1 and click "Insert". And now we wanna add a Text

  • widget right here for our title, so click on this button that saysAdd Widget

  • and the widget that we want is the Text widget. So scroll down to the bottom and find the

  • one that saysTextand click on that. And now let’s click on theEdit link"

  • right here and we can add a title for our Call to Action right here.

  • So what I’m gonna is go to the demo website and just highlight the title right here and

  • copy that and paste that in. And once youre done putting in a title, go ahead and click

  • on theDonebutton right here. And now were inserted the Call to Action title

  • right here. So what I wanna do is customize this a little bit. So let’s hover over the

  • wrench right here and click onEdit Row.” And what we wanna do is click onTheme

  • right here to get this drop-down. And the first thing that we wanna do is change the

  • Top/bottom padding. So right here I want you to put in zero and then scroll down to the

  • section that saysColor.” And what were gonna do is change the font for our title

  • to the primary color that we chose when we customized our colors. So right here click

  • onSelect Colorand you can choose the primary color right here or you can put in

  • the color code right here. So what I’m gonna do is go to the NYC Tech Club website and

  • on the Text Tutorial on step 15, I’m gonna take the color code right here that is the

  • same for the primary color that I chose and copy that and paste that in right here and

  • then you can see that the color updates. And once I do that I can clickSaveright

  • here.

  • And now we can add our second row which is the Call to Action row. So right here click

  • on this button that saysAdd Rowand the first thing that we wanna do is change

  • the number of rows from 1 to 2. And what were gonna do is add a Call to Action widget right

  • here and then another Call to Action widget right here. And once youre ready, click

  • on this button right here that saysInsert.” And now we wanna add a widget right here.

  • So click on this button right here that saysAdd Widget.” And the widget that we want

  • is the "Sydney FP: Call to Action" widget.

  • So once you find that, click on that and we can just make a copy of this by clicking on

  • this link right here that saysDuplicate.” And what I want you to do is click and drag

  • one of these over to the left hand side. So now we have the left Call to Action widget

  • and the right Call to Action widget.

  • So let’s edit the left hand side first. So well click on thisEdit Linkright

  • here and what we wanna do is leave the title blank, but we wanna put in some text right

  • here for the Call to Action. So you can type in whatever you want. I’m gonna go to the

  • demo website and just highlight this text right here and copy it. And what it says is

  • Take some time and meet our employeesand then I’m gonna paste it in right here.

  • Once youre ready, come down to the next section right here. And this is where were

  • gonna put in a web address for our buttons. So when your visitors click on the button,

  • they get redirected to another page. So what I’m gonna do is type in a URL for a webpage

  • that were gonna create a little bit later. And you can follow along or you can put in

  • whatever web address that you want right here or you can leave it blank and put in something

  • later.

  • So I’m gonna type in www. - the web address - howtowebby.com/meet-the-team. And so once

  • you put something here, come down to the next section and this is where youre going to

  • put some text for your buttons. So I’m just gonna type inMeet The Team.” And once

  • you put something in here, let’s come to the right hand side and what I want you to

  • do is click on thisAttributestab. And youll get this drop-down right here

  • and what were gonna do is paste in some CSS.

  • And what this CSS is gonna do is help us create this black box or dark background right here

  • to separate our two Call to Actions. So if you wanna do that, what you have to do is

  • click on thisAttributestab and then you can go into the YouTube description to

  • the Call to Action section and copy and paste the CSS into this section right here. Or you

  • can go to the NYC Tech Club Text Tutorial and go to step number 18 – the Call to Action

  • section and scroll down to the bottom. And there’s this paragraph right here that says

  • if you wanna create that background box just highlight this CSS right here and copy that

  • and then just paste that in right here and then we can clickDone.”

  • And now we can edit the Call to Action on the right hand side. So let’s click on this

  • link right here that saysEditand we can leave the title blank, but we wanna put

  • in some text right here in the Call to Action. So I’m gonna go back to the demo website

  • and just highlight this text right here that saysReview Some Facts About Usand

  • copy that and paste that in right here. And when youre ready, come down to the next

  • section where were going to put in a web address for our buttons. So I’m gonna type

  • in a URL for a page that were gonna create a little bit later. So I’ll typewww.howtowebby.com/about

  • So were going to create an About page together in this tutorial. And then right down here

  • I’ll type in some texts for the buttons. So I’ll typeFacts.” And when youre

  • ready, come over here to the right hand side and click on this tab that saysAttributes

  • and were going to paste in some CSS again to create that black box or dark background

  • for our Call to Action.

  • So if you have this CSS, you can paste it in right here; otherwise, you can go to the

  • YouTube description and go to the Call to Action section and copy and paste that CSS

  • right here or you can go to the NYC Tech Club website and on step 18, you can get the CSS

  • right here. So well just highlight it and copy that and then well just paste it in

  • right here and all we have to do now is clickDone.” And now we have our Call to Action

  • right here. So the last thing that I wanna do is modify the padding. So right here under

  • the wrench click onEdit Rowand click onThemeright here and where it says

  • Top/Bottom Paddingand this box right here, put in zero and then clickSave

  • and then clickDoneand then we can just clickUpdateto save our changes.

  • And once our page is updated, we can click on this button right here to see what our

  • website looks like right now.

  • So once were back on the Homepage, we can just scroll down and we should see this Call

  • to Action section right down here. And we should have our two buttons that were gonna

  • create pages four in a little bit. So now we can move on to the next section of the

  • Homepage.

  • So back on the demo website, the next section that were gonna create is this "Recent

  • Blog Post" section. So what I want you to do is go back to your WordPress website and

  • click on this link right here that saysEdit Page.” Once were back on the Edit Page,

  • all we have to do is click to "Add a new row" and we wanna change the number of rows to

  • 1 right here and click this "Insert" button. And then we wanna drag this below the Layout

  • Builder. So what I want you to do is click on this up and down arrow right here and then

  • just drag it below. And right here we wanna add a widget. So click on this button that

  • saysAdd Widget.” And the widget that we want is the

  • "Sydney FP: Latest News" widget. So find that and then click on that and we can just click

  • Editright here. And all we want to do is add a title. So right here I’m gonna

  • type inLatest News.” And then we can just clickDoneand then we can actually

  • just clickUpdate.”

  • And once the page is updated, let’s click on this button to view the changes. And once

  • were on our Homepage, let’s scroll down to the bottom and this is the Recent Blog

  • post section. So it doesn’t look anything that great right now because we haven’t

  • written any blog post. So well eventually delete this one and add some new blog posts

  • later on to this tutorial. And well also add some custom CSS a little bit later to

  • get rid this button right here. So don’t worry about the look right now. As long as

  • we have this section right now, were good to go.

  • So let’s move on and create the next section of the Homepage. So if we go back to the demo

  • website, were gonna create another Call to Action right here with a button that’s

  • going to be in line with the text. Alright, so let’s go back to the WordPress website

  • and click onEdit Pageright here. And once were back on our Edit Page, the first

  • thing we wanna do is add a new row. So click onAdd Rowright here and make sure

  • the number of rows is set to 1 right here and then click theInsertbutton. And

  • so your row might be inserted in between some other rows. And what we wanna do is drag this

  • to the bottom, so to do that we wanna click on this up and down arrow right here and just

  • drag it all the way to the bottom. So make sure you new row is underneath the Latest

  • News.

  • Once we have it right here, we can click and add a widget, so click on this button right

  • here. And let’s add the "Sydney FP: Call to Action" widget, so click on that. And now

  • we can click on theEdit Linkright here. So were going to leave the title

  • blank, but we wanna put in some text right here for our Call to Action. So I’m gonna

  • go to the demo website and just copy and paste this text right here. So what it says isWe

  • love what we do. Need Inspiration? Check out what our clients are saying.” So once I

  • copy that, I’m gonna paste it in right here. And once youre ready, come down to this

  • next section where were going to put in a web address for a web page for our button.

  • So what I’m gonna do is type in a URL for a webpage that were gonna create in a little

  • bit. So you can follow along if you want. I’m gonna type in www.howtowebby.com/success-stories.

  • And then I’m gonna come down here and put inSuccess Storiesfor the text for

  • the button. And then what I want you to do is check this box right here that saysDisplay

  • the button in line with the text.” And what that’s gonna do is put our button right

  • here in line with this text right here for our Call to Action, okay? So now we can just

  • clickDoneright here and what we wanna do before we save this is hover over wrench

  • and clickEdit Row.” Were going to change the padding and do some other stuff.

  • So click onThemeright here. Right here where it saysTop/bottom padding,

  • I want you to put in 30 or 3-0 and then scroll down to background color right here. And what

  • were gonna do is change the background color to a darker color. So you can go to

  • the YouTube description and find the color code or you can go the NYC Tech Club website.

  • And on the Text Tutorial on step number 20 right here, there is a color code that you

  • can copy right here and then we can paste it in right in this box and youll see that

  • the color gets updated right there. And then the last thing we have to do is scroll down

  • to the Row Layout and in the drop-down, selectFull Widthand then we can clickSave

  • right here. And now let’s clickUpdate.” And once the page is updated, we can just

  • click on this button right here to see the changes that we just made and we can just

  • scroll down to the bottom of our website and we should see our new Call to Action right

  • here.

  • So now we can move on and create the next section of our website which is going to be

  • inserting the Social Media buttons right here. So let’s go back to the WordPress website

  • and let’s click on this link right here that saysEdit Page.” And once were

  • back to this page, we have to enable some widgets. So come down to plugins right here

  • and click onSite Origin" widgets. And once youre o the Site Origin page, come

  • down to the Disabled tab and click on that. And what we wanna do is turn all of these

  • widgets. So click on thisOffbutton right here and just go through all the widgets

  • and turn them all on. And this is just going to give us the option of using these widgets

  • as we customize the rest of our website. And we know that were going to be using the

  • social media buttons widget right here and also the Headline widget right here. So once

  • youve turned everything on, we can actually go back to the Homepage. So let’s go to

  • Pages right here and click onAll Pages.”

  • And now just come right down to the Homepage and click on theEdit Linkright here.

  • Once were back on the Edit Page, we wanna add a new row. So click on this button that

  • saysAdd Rowand make sure the number of rows is set to 1. And then click theInsert

  • button. And if your row shows up between some other rows, what we wanna do is click and

  • drag it to the bottom. So right here click on this up and down arrow and just drag it

  • all the way to the bottom. And once it shows up right here, we can add a widget. So go

  • to the bottom that saysAdd Widgetand click on that. And the widget that we want

  • is theSite Origin Social Media Buttonswidget. So click on that and once it shows

  • up right here, click on theEdit Linkright here. And then well get this pop

  • up and what we wanna do is click on thisAddbutton right here to add our first Social

  • Media button. So click on that and then right here where it saysSelect networkif

  • you click in here, youll expand this section. And what I want you to do is go to this drop-down

  • right here, and you can choose any type of Social Media platform that you want to create

  • your social media button for.

  • So I’m gonna select Facebook first and then right here I'll put in the NYC Tech Club URL.

  • And right down here, I’m gonna leave the icon color the same as the default. But I

  • wanna change the background color for the buttons. So what I’m gonna do is put in

  • the black color. So I’m gonna click onSelect Colorand I’m gonna change the color

  • code. So if you want the same colors as the demo website, you can go to the YouTube description

  • and in the social media button section, you can copy the code and paste that in right

  • here or you can go to the NYC Tech Club website. And on the Text Tutorial on step number 21,

  • you can find the color code right here which is 252525 and copy that and then just paste

  • it in right here and youll see the background color change. So once youre done, click

  • right here to collapse this section and let’s add three more buttons.

  • So I’m gonna clickAddright here and click this area right here and then I’m

  • gonna select theTwitterbutton. And right here I’ll just type in n-y-c-tech

  • club and I’m gonna just change the color background again to the custom code and then

  • I will collapse this section and add another button. So I’m gonna add a “Google Plus

  • button even though I don’t have a Google Plus account and just change the background

  • color. And you can add as many social media buttons as you want. So it’s really up to

  • you what you wanna do. So I’ll collapse this and add one more button. So I’ll click

  • right here, and I’ll just add a “LinkedInbutton. And even though I don’t have an

  • account, I’ll leave the URL just as is. And right here I will change the background

  • color to this darker color and then click right here.

  • And now once you're done adding all of your Social Media buttons, come down to the next

  • section where it saysDesign and layoutand what were going to do is customize

  • some of the settings right here. So where it saysButton theme” I want you to change

  • it to flat and then just come down to padding down here and we can click onLow.” And

  • then for alignment, click onCenterand then we can just click "Done" right here.

  • And once were back on this page, I wanna customize this row a little bit. So let’s

  • hover over the wrench right here and click onEdit Rowand then click onTheme

  • right here. And the first thing I wanna do is change the top/bottom padding. So right

  • here I wanna type in 10 or 1-0 and then come down here to the background color and click

  • onSelect Color.” Were gonna change this to a darker color. So you can go to the

  • YouTube description and get the color code and paste it in here or you can go the NYC

  • Tech Club Text Tutorial on step number 21 still. And right here where it says the color

  • code is 1C1C1C, we wanna highlight and copy that and then just paste that in right here.

  • And once we do that, we just wanna come down to the bottom where it saysRow Layout

  • and then go in the drop-down and selectFull width.” And then we can clickSave

  • right here. And now let’s actually click theUpdatebutton.

  • And once our Homepage is updated, let’s click and see what it looks like right now.

  • So click onView Pageright here. And once were back on the Homepage, we can

  • scroll down and see what our website looks like right now. And we should have the social

  • media buttons right down here. So were gonna come back to the Homepage a little bit

  • later and finish off our customizations. But right now what were gonna do is create

  • the About Page.

  • So what were gonna do is put in a title, well insert an image and wrap it around

  • some text. I’ll show you how to embed a video and then how to create this section

  • right here with some stats and then well insert a Call to Action in our social media

  • section again right here, okay?

  • So what I want you to do is go back to your WordPress website and let’s go to the Dashboard.

  • So hover over your website name right here and click on theDashboadlink right

  • here. Back on the Dashboard, what we wanna do is create a new page. So come down to Pages

  • and clickAdd New.” And the first thing that we wanna do is put a title for our new

  • page. So right here I’m gonna type inAbout.” And once youre ready, come down to the

  • section that saysPage Attributesright here. And what were gonna do is change

  • the template of this page to the front page, so clicking this drop-down and selectFront

  • Pageright here. And then if we go back to the section right here, you can see that

  • there is a Permalink. And this is the URL for this page. And you can see that it has

  • the web address/about. And that’s because we put inAboutas the title for our

  • page. If you wanna modify of edit the Permalink, all you have to do is click on this button

  • right here that saysEdit.” And then you can change any of the text right here.

  • But since were actually linking this page to one of our Call to Action buttons, I’m

  • gonna leave this as is. So I’m just gonna click okay right here.

  • And if youre ready, come down to this section right here where it saysPage Builder

  • and click on this tab. And what were gonna do is create several rows for this page. So

  • the first thing that I want you to do is click on this button that saysAdd Row.” And

  • what were gonna do is change the number of rows from 2 to 1 and then click thisInsert

  • button right here. And now we can add a widget right here. So let’s click on this button

  • that saysAdd Widgetand the widget that we want is the Visual Editor. So once

  • you find that, go ahead and click on it. And then once the widget is inserted right here,

  • let’s click on thisEdit Link”. And so the Visual Editor allows us to add text

  • and images and a bunch of other stuff into our page. So the first thing I wanna do is

  • put in a title. So right here, let’s put inAbout Usand then let’s come down

  • to this section where you can write up a description about your website, your business or anything

  • about you. So what I’m gonna do is go to the demo website and just highlight and copy

  • this text right here. So copy that and then I’m just gonna paste it in right her just

  • to save a little bit of time.

  • And now let me show you how to actually link some of this text to another page. So if I

  • wanna link the contact us text to a "Contact Us" page, all I have to do is highlight this

  • text right here and then I can click on this button right here that saysInsert/edit

  • link.” And then I’ll get this pop up and I can just type in the web address that I

  • wanna link the text to. So If I type in www.howtowebby/contact-us now if I click on thisAdd Linkbutton

  • right here, now the text is linked to another page, okay?

  • So now let’s add an image that were gonna wrap right here on the left hand side and

  • push over our text on the right. So what I want you to do is click on this button right

  • here that saysAdd Media.” And well get this pop up right here and if you already

  • uploaded all of your images then on the media tab, youll see them right here and you

  • can just select the one that you want. If you wanna upload a new image, all you have

  • to do is click on thisUpload Filestab right here and then just click on this

  • button that saysSelect Files.” And then go into your folders and find the image that

  • you want and then you can upload it that way.

  • Since we already uploaded all of our images, I’m gonna click on Media Library right here

  • and then just choose the image that I want which is this one. And then I’m gonna scroll

  • down to the Display Settings right here and what I wanna do is change the alignment to

  • left to wrap it around the text. And then right here where it saysLink to” I’m

  • gonna selectNone.” And then I’m just gonna clickInsertright here. And now

  • we should see our image inserted right here on the left hand side and our text on the

  • right hand side. So if you wanna change the alignment on the image, all you have to do

  • is click on it and then you can click on any of these buttons right here to change the

  • alignment or you can click on the pencil to edit the image or the “x” to remove the

  • image.

  • So now were gonna move on and embed a video. So I’m gonna show you how to do this in

  • two different ways. The first is going to the text tab right here and then just creating

  • two new lines right here. And what were gonna do is go to a YouTube video right here.

  • And all we have to do is come down here to this Share Link right here and click on this

  • and then click on theEmbedtab right here and were going to copy this HTML in

  • this box right here. So highlight and copy that, and then go back to your WordPress website

  • and were just gonna paste it in right here. And now if we go to the Visual tab we can

  • see this box right here. And this is gonna be where the YouTube video that we just embedded

  • is gonna be.

  • So let’s check out what it looks like. Let’s click on thisDonebutton right here

  • and before we actually publish this, I wanna edit this really, really quick. So let’s

  • go to the wrench and click onEdit Rowand then click onThemeright here and

  • where it saysTop/Bottom Paddinglet’s put in 40 right here or 4-0. And then scroll

  • down to the Row Layout right here and in the drop-down selectFull width.” And now

  • we can clickSaveright here and now let’s push thePublishbutton.

  • And once the page is published, let’s click on this button right here that saysView

  • Page.” And now we can see what our About Page looks like right now. So we have our

  • title, an image right here, some text and then our video right here. So really quickly

  • I’m gonna show you how to embed the video the other way and how we can make it go all

  • the way across the entire webpage. So well do that really, really quickly and then well

  • move on and create the rest of this About Page. So I’m gonna go back and click on

  • this link right here that saysEdit Page.”

  • Okay, so once where back on the Edit Page, I’m gonna show you how to add a full width

  • video really quickly. So all I have to do is add a new row and make sure it’s set

  • to 1 right here and click "Insert". And then I wanna add a widget. So I’ll click this

  • button right here and I’ll find the Sydney theme widget for the video. So Sydney video

  • widget and then I’ll click theEdit Linkright here and all we have to do is paste

  • in the URL for the video. So if I go to YouTube, and I go to theSharetab right here,

  • I can just copy this URL and go back to the WordPress website, and paste in that URL right

  • there and you clickDoneright here. And then just edit the row really quickly,

  • so if I go to Themes right here, I can put in whatever type of padding I want. So maybe

  • I’ll put in 20 and then all I have to do right here is kind of important is in the

  • Row Layout, you wanna select theFull width Stretch.” And once I do that, I can click

  • Saveand then clickUpdate.”

  • And once the page is updated, let’s click on this button that saysView Page.”

  • And now if I scroll down the page, you can see this is the first video that we embedded

  • and then this is the full width video that we just embedded right now. And it goes all

  • the way across your screen, okay? So now I have given you both of these options to embedding

  • videos and we can move on to creating the rest of the About Page.

  • So let’s click on this link right here that saysEdit Page.” And once were back

  • on theEdit Pagethe first thing that I wanna do is delete the row that I created

  • for the full width embedded video. So I’m just gonna hover over the wrench and click

  • onDelete Rowand then click onAre you sure?” And now that row disappears.

  • And before we do anything on this page, I wanna remind you what were gonna create

  • next. So if I go to the demo website and scroll down, were gonna create this Fact section

  • or a place where you can put in some statistics about your business or you, okay?

  • So let me go back to the WordPress website and the first thing that I wanna do is add

  • a new row. So I’m gonna click on this button that saysAdd Rowand I wanna change

  • the number of rows from 2 to 1 and click theInsertbutton. And now I wanna add a

  • widget, so click on the button that saysAdd Widgetand the widget that we want is the

  • Sydneyfpfactswidget. So once you find that, go ahead and click on that. And now

  • we can click on theEdit Linkright here. And then youll get this page right

  • here and I’ve already filled out my information, but I’m gonna walk you through exactly what

  • I did. I just don’t wanna waste any of your time since this is just a tutorial.

  • So if I go to the demo website, you can see down here on the Fact section that we don’t

  • have a title right in the middle, but we do have four facts. And on each of these facts,

  • we have an icon, a fact name and then a value. So what were gonna do on the WordPress

  • website right here is first, youre gonna put in a fact name. So I put inProjects

  • for my first one. And then youre gonna put in a value, so I put about 750,000 in

  • terms of the number of projects. And then for the icon, youre gonna put in a short

  • code. And how you get the short code is you click on this link right here and then well

  • get this webpage right here which should look familiar to you because we used it when we

  • created the Services section on our Homepage.

  • So in this webpage, there’s a bunch of icons that you can choose from for each of your

  • facts. So you have to find the icon that you want and once you do, all you have to do is

  • highlight the short code like this, copy it and then go back to your WordPress website

  • and paste it into the Fact Icon section right over here. So I created my four facts which

  • are projects, designs, customers and awards. What I want you to do is post this video and

  • fill out these Facts section right here and when youre ready, pushPlayotherwise

  • were just gonna continue on.

  • So when youre ready, I want you to come over to the right over here and click onDesign.”

  • And what were gonna do is change the font color for our Facts. So I want you to scroll

  • down to font color right here and push this button that says selectColor.” And all

  • were gonna do is change the font color to white. So I’m gonna click on this square

  • right here that is white and then we can clickDone.” And what I wanna do now is edit

  • this row. So I’m gonna hover over the wrench and click onEdit Rowand then click

  • onThemeright here. And for the Top/Bottom Padding, I’m gonna put in 30, so 3-0. And

  • then I’m gonna come down to the background color and choose theBackground Color.”

  • So I’m gonna pushSelect Colorright here, and I’m going to put in a custom color

  • code. So if you remember on the demo website, the color for this section is a red color.

  • So what I’m gonna do is go to the NYC Tech Club Text Tutorial and on step number 22 right

  • here, I’m gonna scroll down to the Section number 17 and there is a color code right

  • here which is D650. I’m gonna copy that and go back to the WordPress website and paste

  • that in right here. And you can see that the background color gets updated and then all

  • we have to do is come down to the Row Layout and in the drop-down, selectFull width

  • and then we can clickSaveright here. And now we can click on theEdit Link

  • right here. And once our page is updated, let’s click

  • on this button right here that saysView Pagejust to see the new changes. And now

  • we can just scroll down the page and we should see our Facts section just like this. So if

  • yours looks like this, then we can move on to the next section which is creating our

  • Call to Action right here, okay?

  • So let’s go back to the WordPress website and make that Call to Action. So well click

  • on this link right here that saysEdit Page.” Back on the Edit Page, the first

  • thing that I wanna do is add a new row. So I’m gonna click on this button right here

  • that saysAdd Rowand I wanna make sure that the number of rows is set to 1 right

  • here. And then we can click theInsertbutton and if your row shows up in between

  • some other rows, what we wanna do is drag it to the bottom. So click this up and down

  • arrow and just move it to the bottom and now we wanna add a widget. So click on theAdd

  • Widgetbutton and the widget that we want is a Sydney theme widget, so you can click

  • on "Sydney theme" right here and then find the "Sydney FP: Call to Action" widget and

  • click on that. And now we can click on theEdit Linkright here and were going

  • to leave the title blank, but we wanna put is some text for our Call to Action.

  • So I’m gonna go to the demo website and just highlight this text right here and copy

  • this and then paste it into the WordPress website right here. And then for the link,

  • I’m gonna put in the Contact Us Page so www.howtowebby.com/Contact-Us. And were

  • going to create this page in a little bit. And then the title for this button is gonna

  • be Contact Us and I wanna leave this unchecked. And then we can clickDoneright here.

  • And what we wanna do now is edit this row. So hover over the wrench and click onEdit

  • Rowand then click onThemeright here. And for the Top/Bottom Padding, I’m

  • gonna put in 30 or 3-0. And then come down here to the background color and click on

  • this. And what we wanna do is put in a color code. So you can go to the YouTube description

  • and copy and paste the color code or you can go to the NYC Tech Club Text Tutorial and

  • on step number 22, scroll down to this section where it says number 23 right here. And highlight

  • the color code right here which is 252525 and then go back to the WordPress website

  • and paste it in right here. And you can see that the color code is updated. Now what we

  • wanna do is come down to the Row Layout and in the drop-down selectFull widthand

  • then we can clickSaveright here. And now let’s click theUpdatebutton.

  • And once our page is updated, let’s click on this button right here that saysView

  • Page.” And once were on the About Page, let’s scroll down to the bottom and we should

  • see our Call to Action right here. So now let’s create the last section of the About

  • Page which is going to be inserting the social media buttons right here, okay?

  • So let’s go back to the WordPress website and click on theEdit Page Link.” And

  • once were back on the Edit Page, the first thing we wanna do is click and add a row.

  • So make sure the number of rows is set to 1 right here and then click theInsert

  • button. And if you remember, if the row is in between any other rows, we wanna drag it

  • to the bottom. So click this up and down arrow and just drag it all the way to the bottom

  • and now we can a widget.

  • So click on the button that saysAdd Widgetand the widget that we want is the Site Origin

  • Social Media buttons widget. So click on that and then were going to click on theEdit

  • Linkright here. And if you remember how to add social media buttons, all we have to

  • do is click thisAdd Buttonright here, expand this section and select the platform

  • that we wanna use. So right here is Facebook and I’m gonna type in NYC Tech Club right

  • here. And then we need to change the background color. So you can change it to whatever you

  • want. If you want the color code go to the YouTube description or the NYC Tech Club Text

  • Tutorial and on step number 21 right here is the color code 252525. So I will copy that

  • and paste that in right here and you can see that the color changes. So I’ll collapse

  • this and then I’ll click and add a new button, expand this and I will add a Twitter button

  • and then I will type in my URL right here. I’ll change the color code right here and

  • collapse this. And we will add two more buttons. So I’m just gonna clickAddtwice

  • right here and first well do the Google Plus. So well change the background color

  • right here. And then I’ll collapse this and expand this next one and we will add a

  • LinkedIn Button.” And I will change the background color again and then I will collapse

  • this.

  • And once youre ready, come down to Design and Layout and expand the section and all

  • we have to do is change the button theme to flat and then the padding to low and align

  • this to center. And then we can clickDoneright here. And now what we wanna do is edit

  • this row. So let’s go to the wrench and click onEdit Rowand then expand this

  • Theme section right here and for Top/Bottom Padding, I want you to put in 10 or 1-0.

  • And then for the background color, you can go to the YouTube description to get the color

  • code or the NYC Tech Club Text Tutorial. And up here is the color code that I want so 1C1C1C.

  • I’m gonna copy that and paste that in right there and you can see the color gets updated.

  • And then all we have to do is come down to the Row Layout and selectFull width

  • and then we can clickSaveright here. And now let’s just click theUpdate

  • button right here. And once the page is updated, let’s click

  • on this button one more time. And once were back on theAbout Pagewe can just scroll

  • down and we should see the social media buttons right down here. So if youre ready we can

  • move on to the next step which is creating the Meet the Team page or the "Employees"

  • page. So what were gonna do is create a bunch of individual employee pages and then

  • create this page right here. So what I want you to do is go back to your WordPress website

  • and were gonna go to the Dashboard. So hover over your website name right here and

  • click on "Dashboard."

  • Once were back on the WordPress Dashboard, the first thing that we have to do to create

  • our EmployeesPage is create some employee profiles. So on the left hand side find the

  • employees tab and hover over and click onAdd New.” Once were on the new Employee

  • Page, the first thing that we wanna do is add a name right here. So go ahead and type

  • in the name for your employee. I’m gonna put in a fake name. So I'll put in Addison's

  • son right here. And once youre ready let’s scroll down to this next section that says

  • Employee Inforight here. And what you have to do right here is put in a job title.

  • So I’m gonna type inDesignerfor this employee. And then right below that you

  • can add their social media URL right here. So if they have account with Facebook, Twitter

  • and Google Plus, you can add the web addresses right here. And then right below that you

  • can put in a custom link that will link to their name on the EmployeesPage.

  • So if you wanna create another page that has more details about this employee or there

  • is an external link that you wanna link them to then you can put it right here. And you

  • can always edit this later. So I’m gonna leave this blank for this tutorial. And once

  • youre ready let’s come over to this section right here where it saysFeatured Image.”

  • And what were gonna do is set a featured image for this employee. So click on this

  • link right here that says "Set Featured Image." And if you have already uploaded all your

  • images, then you can select the one you want in the media library; otherwise, you have

  • to go to the upload files tab and click on this button right here and go into your folders

  • and find the images that you want and upload it that way.

  • So I'm gonna go back to the Media library and just choose the image that I want for

  • this employee and before I click on this button, I do want to note that the dimensions for

  • all of these images for the employees on this tutorial is 200 by 200. So if you need to,

  • you can click on this "Edit Image" right here and then you can modify the sizes of your

  • images. Okay, so let me click on this button right here.

  • And then we'll see our featured image right here. And so the last thing that we have to

  • do is add a category name for our employee. And we're going to be adding unique category

  • names for each of our employees to help build out the employee page. So what I want you

  • to do is click on this link right here that says "Add New Category" and I'm gonna type

  • in "EMP1" and that's gonna stand for Employee number 1. And you can put whatever you want

  • right here and once you're ready, click "Enter" and then you'll see this categories list update

  • and now we can just push this button that says "Publish."

  • And once this employee's page is published, let's add another employee. So let's click

  • on this button right here that says "Add New." Once we're back on the Add New employee page,

  • the first thing we want to do is add a name right here. So I'm gonna put in Margaret Jones

  • right here and when you're ready, come down to the Employee Info section and right here

  • we want to put in a job title. So I'm gonna URLs right here for the employee's account.

  • And then if you want, you can put in a custom link right here and then when you're ready,

  • come to the featured section right here and click on this link right here that says "Featured

  • Image." And then we wanna go to the Media Library and select the image that we want,

  • so I'm just gonna choose this one right here and then click this button right here. And

  • then the last thing that I wanna do is add a unique category name since we're going to

  • be doing that for each employee that we create to help us create the employee page.

  • So all I have to do is click on this link right here, and then I'm gonna type in "EMP2"

  • for employee number 2 and then just click "Enter" and then this category list will update,

  • and then I can just click "Publish" right here. And once the Employee page is published,

  • let's create one more together. So let's click on this button that says "Add New." And once

  • we're back on the add new employee page, I wanna quickly show you how to create one more

  • employee. So right here, let's type in a name. I'll put in "Bob Peters" and once you're ready,

  • let's come down to employee info right here and we want to put in a job title. So I'll

  • type in "Programmer" right here and then you want to add their social media links right

  • here and then you can put in a custom link if you want right here. And once you're ready,

  • come over to the featured image section and click on this link and we wanna go to the

  • media library if you have all of your images uploaded and just select the image that you

  • want and then click on this button right here. And the last thing that we wanna do is add

  • a unique category name. So right here click on this link and then I'm just gonna type

  • in "EMP3" for employee number 3 and click enter and then I will see this list update

  • and then I can click on this button that says "Publish."

  • And now we can see the Employee page is published. So what I want you to do now is pause this

  • video if you need to, to create your additional employee profiles, all you have to do is click

  • this button right here to add a new employee. And when you're ready, go ahead and push "Play"

  • and what we're gonna do is create this page right here. So what' I'm gonna do is create

  • a total of nine employees. So if you need, go ahead and pause this video right now and

  • create your additional employees and push play when you're ready.

  • Okay, so if you pushed pause, and now you're playing the video, hopefully you created your

  • additional employee profiles. What I've done is created nine employee profiles. You can

  • see right here that each of these employees have their own unique category name. So you

  • wanna make sure that each of your employees have their own category name right here. And

  • once you're ready, let's create the employee page. So what I want you to do is come over

  • to the left. Under pages right here, click on "Add New."

  • Once were on the Add New page, the first thing that we have to do is type in a title right

  • here. So I'm gonna type in "Meet the team." And when you're ready, come down to the page

  • attributes right here and what we wanna do is change the template. So select "Front Page"

  • right here and when you're ready, come up to the page builder tab and click on that.

  • And the first thing that we wanna do is add a row. So we click on "Add row" and change

  • the number of rows from 2 to 1 and then click the "Insert" button. And let's actually edit

  • this row. So hover over the wrench right here and click on "Edit Row". And then click on

  • theme right here. And for the Top/bottom padding put in 40 or 4-0 and then click "Save."

  • And then let's add a widget. So click on the "Add widget" button. And the widget that we

  • want is the visual editor. So once you find that you go ahead and click on it. And then

  • we wanna click on the edit link right here and all we wanna do is put in our title right

  • here. So I'm gonna type in "Meet Our Team" and you can also put in whatever content you

  • want right here if you want; otherwise, click "Done." And now we're gonna add another widget

  • right below it. So click on the button that says "Add widget" and the widget that we want

  • is the "Sydney FP: Employees" widget, so click on that. And now we can click on the "Edit

  • link" right here, and all we have to do is change the number of the employees to show

  • right here from -1 to 3 and then we want to put in the employee category names right here

  • for our first three employees that we wanna show on the top row. So I'm gonna type in

  • "EMP1, EMP2, EMP3" and then I'll just click "Done."

  • So if you need your employee category names, all you have to do is come over to the left

  • hand side where it says Employees and click on "All items." And you'll get this page right

  • here that will have a list of all your employees and then on the right side, you can see the

  • employee category names. Okay, so I'm gonna go back to the WordPress website and the next

  • thing we wanna do is add another row for our second row of employees. So I'm gonna click

  • on "Add Row" and just make sure that the number of rows is set to 1 right here. And then click

  • "Insert." And let's edit this row really quickly. So under the wrench, click "Edit Row" and

  • click on "Theme" right here. And let's put in 30 this time for the Top/bottom padding

  • and click "Save." And now let's add a widget. So click on the bottom that says "Add widget"

  • and the widget that we want is the "Sydney FP: Employees" widget, so click on that. And

  • then we'll click on the "Edit link" right here. And again, we're gonna change the number

  • of employees to show to 3 per row and then we're going to put in another set of category

  • names right here for our employees. So I'll type in EMP4, EMP5, EMP6 and then I'll just

  • click "Done."

  • And now let's add the last row of our employees for the demo website. So click on "Add row"

  • and make sure the number of rows is set to 1 and then click the "Insert" button here.

  • And if your row shows up in between your other rows, we wanna click and drag it to the bottom.

  • So click on this up and down arrow and just bring it down to the bottom. And now let's

  • edit this row. So hover over the wrench and click on "Edit Row" and then click on "Theme"

  • right here. And let's put in 30 for the top/bottom padding, so 3-0 and then click "Save." And

  • again, we're going to add a widget. So click on the button that says "Add Widget" and the

  • widget that we want is the "Sydney FP: Employees" widget so click on that. And then click on

  • the "Edit link" right here and just change the number of employees to show that 3 right

  • there. And then let's type in some more category names right here. So I'll type in EMP7, EMP8,

  • EMP9, and then I can just click "Done."

  • And now let's click on this "Publish" button right here. And once the page is published,

  • let's click on this view page button. And now we can see what the employee page looks

  • like right now. So if you hover over any of these images, you get additional details about

  • the employee such as their job title and then links to their social media accounts right

  • here. So the next thing that we wanna do for this page is create the Call to Action right

  • down here. So let's go back to the WordPress website and click on "Edit page." Once we're

  • on the edit page, the first thing that we have to do to create our Call to Action is

  • add a new row. So click on "Add Row" and make sure the number of rows is set to 1. And then

  • click "Insert" and if your row shows up in the middle, let's drag it to the bottom so

  • let's click on this up and down arrow and move it all the way down here. And now let's

  • edit this row. So click on the "Edit Row" link right here and what we wanna do is click

  • on "Theme" and where it says Top/bottom padding, I want to put in 30 or 3-0. And when you're

  • ready, come down to the background color and click on this. And you can go to the YouTube

  • description or the NYC Tech Club Text Tutorial and copy in the color code that you need or

  • you can choose whatever color you want. I'm just gonna type in the color that I want since

  • I remember it. It’s 252525 and you can see right here the color gets updated.

  • When you're ready, come down to the Roll Layout and selectFull Widthand then we can

  • click "Save". And now we just wanna add a widget. So go to the button that says "Add

  • Widget" and click on that and the widget that we want is the "Sydney FP: Call to Action"

  • widget. So click on that. And now we can click on the edit link right here and all we wanna

  • do is add some text right here for our Call to Action. So I'm gonna go to the demo website

  • and just copy in this text right here. So highlight this and copy it and then go back

  • to the WordPress website and paste that in right here. And then for the link for the

  • button, I'm gonna type in www.howtowebby.com/contact-us and we're going to create this page in a little

  • bit. And then for the title for the button, I'm just gonna type "Contact Us" and once

  • you're ready, click "Done." And now let's click on this "Update" button just to save

  • our changes. And once the page is updated, we can click on this "View Page" just to see

  • what it looks like right now. And on the Employees page, if we scroll down, we should see the

  • Call to Action right down here.

  • So now let's create the last thing on this page which is the social media buttons right

  • here. So let's go back to the WordPress website and click on this link right here that says

  • "Edit Page." Once we're back on the edit page, let's add a new row for our social media section,

  • so click on "Add Row" and make sure the number of rows is set to 1. And then click the "Insert"

  • button. And now let's drag down the row to the bottom. So click on this up and down arrow

  • and just bring it all the way down to the bottom. And now let's edit the row. So hover

  • over the wrench and click on "Edit Row" and then click on theme right here. And what we

  • wanna do is change the Top/ bottom padding to 10, so put in 1-0 right here. And then

  • click on "Background color" right here. And you can choose whatever color you want for

  • the background. I'm gonna put in the color code that I want. So I'll go to the NYC Tech

  • Club Text Tutorial and again, on step number 21 where we create the social media section,

  • what I want is the color code right here. So 1C1C1C. I'm gonna highlight and copy that,

  • go back to the Wordpress website and just paste that in right there. And now you can

  • see that the color code gets updated.

  • So now, I wanna scroll down to the row layout and selectFull Widthright here and

  • then click "Save." Now we can add a widget right here. So click on the button that says

  • "Add Widget" and the widget that we want is the Site Origin Social Media Buttons widget.

  • So find that and then click on it. And then click on "Edit" right here and if you remember,

  • all we have to do is to click this "Add Button" to add social media buttons. So I'm gonna

  • click this four times really quick just to get our four social media buttons and then

  • I’ll expand each of these sections and select the social media platform that I want.

  • So Facebook first, type in NYC Tech Club right here. And then again, remember, we want to

  • change the background colors to be consistent with all of our other web pages. So I'm gonna

  • click on "Select Color" right here and then go to the text tutorial and get the color

  • code that I want. So it's 252525. I will copy that and then just delete this and paste it

  • in and see it change right here. Then I'll collapse this section, open up the next one

  • and then choose Twitter. Again I'll put in NYC Tech Club and then select the background

  • color and change this. And then collapse the section, open up the next one, and choose

  • Google Plus and then just change the background color since I don't have an account with Google

  • Plus. Collapse this and then open up the last one and select LinkedIn. And again, change

  • the background color code right here and collapse that. And once you're ready, come down to

  • design and layout and expand this section and we're just going to customize this a little

  • bit so where it says button theme, I'm gonna choose flat and then right words says padding,

  • I'll choose low and then alignment, I'll choose center. And now we can just click "Done."

  • And once we click done, let's go to the "Update button" and click on that. And once we're

  • on the employee page, we can just scroll down and we should see our social media buttons

  • right here. So we're pretty much done with this webpage.

  • So now we can actually move on and create the next page which is the Portfolio or Image

  • Gallery page. So this is what it looks like and if you click on any of these images right

  • here, you get this pop up and then you can go through them with a slider like this. And

  • so if you're ready, let's go back to the Wordpress website and we're going to be creating a new

  • page. So you can hover over new right here and click on "Page."

  • Once we're on our new page, the first thing that we wanna do is put in a title. So I'm

  • gonna type in "Image gallery" and when you're ready, come down to page attributes and under

  • template, let’s choose the "Front" page template and then let's go to the "Page Builder

  • tab" and click on that. And we want to add a new row. So click on the button that says

  • "Add row" and change the number of rows from 2 to 1, and then click "Insert" right here.

  • And now let's add a widget. So click on "Add Widget" and the widget that we want is the

  • visual editor. So click on this. And now let's click on the "Edit Link" and we wanna put

  • in a title for our page. So I'm gonna type in "Our Work" and then come down to this section

  • right here and this is where we're going to put in the images for our gallery. So what

  • we wanna do is click on "Add Media." And then we wanna click on this link right here that

  • says "Create Gallery" and what we can do is select images in our media library right here

  • or we can upload new images if we click on this "Upload Files" tab and push this button

  • right here. And then you can go into your folders and find your images and you can upload

  • it that way.

  • Since we already have everything uploaded, I'm gonna click on "Media Library" right here

  • and just select twelve different images that I want. So all I have to do is push any of

  • these images and you can see the checkmark right here and that means that these are selected.

  • So let me just choose two more. So I'll choose this one and this one. And once you're ready,

  • go ahead and push this button right here that says "Create a New Gallery." And what you'll

  • see right here is your image gallery and what you can do is add captions right here or you

  • can actually click and drag these two in different position if you want. So when you're ready,

  • come over to the gallery settings and what we have to do is change the link to attachment

  • page to link to media file. And then if you wanna change the number of columns per row,

  • you can do that here. So I'm gonna select "Four" right here and then we can just click

  • this button right here that says "Insert gallery." And then you'll see your gallery right here

  • and if you ever wanna modify or edit this, all you have to do is click inside and then

  • click on the pencil right here and you can edit. So once you're ready, go ahead and click

  • "Done" right here. And now let's push this button that says "Publish." And once our page

  • is published, we can click on this button right here that says "View Page" and you can

  • see that this is what our portfolio page looks like right now.

  • So we don't have any spacing in between these rows to separate these images. So if we wanna

  • do that, we have to modify some settings in one of our plug-ins. So what I want you to

  • do is hover over your name right here and click on the "Dashboard." And once we're back

  • on our Dashboard, come down to appearance and click on this link right here that says

  • "Light Box Plus." And all we have to do on this page is scroll down to the second set

  • of settings right here, and check this box right here where it says "Use for WordPress

  • galleries" and then click this button right here that says "Save All Settings." And once

  • the settings are saved, we can just go to our portfolio page and check it out. And now

  • we have our space between each row to separate our images. And if we click on any of these,

  • we can see the pop-up and then we can slide through them and see all of our image gallery,

  • okay?

  • So now let's create the next section of this webpage which is going to be the Call to Action.

  • So let's go back to the WordPress website and click on this "Edit Page" link. Once we're

  • back on the edit page, we need to add a new row. So click on this button right here and

  • make sure the number of rows is set to 1 and then click the "Insert" button. And now let's

  • edit this row. So hover over the wrench and click on "Edit Row." And then click on theme.

  • And the first thing we want to do is put in 30 for the Top/bottom padding, so 3-0 and

  • then come down to the background color. And you can go to the YouTube description and

  • get the color code or the NYC Tech Club Text Tutorial on the Create a Call to Action section

  • and just highlight the color code which is 252525 and copy that and paste it in and then

  • you'll see the color get updated. And then the last thing we have to do is change the

  • row layout to full width and then we can click "Save" right here.

  • And now let's add a widget right here. So click on the button that says "Add Widget.

  • And the widget that we want is the "Sydney FP: Call to Action" widget. So click on that

  • and then click on the "Edit Link." And what we need is to add some text right here for

  • our Call to Action. So I'm gonna go to the demo website and just copy in this text. So

  • I will highlight it and then I will copy it and go back to the WordPress website and paste

  • it in right here. And then I'll create a link for the button, so I'll type in www.howtowebby.com/contac-us

  • and we're gonna create this page in a little bit. And then we want to put in a title for

  • the button. So I'm gonna type in "Contact Us" and then we can just click "Done" right

  • here and then let's push this button that says "Update." Once the page is updated, we

  • can click on this button right here that says "View Page." And now we can just scroll down

  • and we should see our Call to Action right here.

  • So now let’s create the Social Media section of our page. So let's go back to the WordPress

  • website and click on this link that says "Edit Page." And once we're back on the edit page,

  • the first thing that we want to do is add a new row. So click on "Add Row" and make

  • sure the number of rows is set to 1. And then click this "Insert" button right here and

  • if you need to, drag this row to the bottom. So what we're gonna do is click on this up

  • and down arrow and just drag it on down. And now let's edit this row. So hover over the

  • wrench and click "Edit Row". And then we're gonna click on theme right here and for Top/bottom

  • padding, we're gonna put in 10. So 1-0. And then come down to the background color and

  • push this button. And you can go to the YouTube description and copy paste the color code

  • or you can go to the NYC Tech Club Text Tutorial and on the create social media widget section,

  • we have to just highlight the color code right here. So that's 1C1C1C and then copy that

  • and paste it in. And you can see that the color gets updated right here. And now let's

  • just scroll down to the row layout and selectFull Widthand then click "Save" right

  • here.

  • And now let's add a widget right here. So click on the button that says "Add Widget"

  • and the widget that we want is the Site Origin Social Media Buttons widget. So once you find

  • that, click on that. And now let's click edit right here. And again, to add social media

  • buttons, all we have to do is click this "Add Button." So I'm gonna click it four times

  • just to add four buttons. And then I'm going to expand the first section and select Facebook

  • and then I'll type in NYC Tech Club right here. And what I wanna do is change the background

  • color of the button. So I'll click on this "Select Color" right here and then I wanna

  • delete this color code right here. And I'm gonna go to the NYC Tech Club Text Tutorial

  • and just highlight the color code that I want which is 252525. Copy that and paste it in.

  • And then you'll see the color update right here. And then I'll collapse the section,

  • open up the next one and select Twitter right here. And type in NYC Tech Club and then just

  • change the background color to the color code and then collapse this one and then add the

  • Google Plus button and just change the background color right here. And then let's do this one

  • more time.

  • So I'm gonna select LinkedIn this time and just change the background color right here.

  • And once you're done, let's expand the design and layout section and let's customize this

  • a little bit. So for button theme, I'm gonna choose flat and then for padding, I'm gonna

  • choose low. And then for align, I'm gonna choose center. And then we can just click

  • "Done" right here. And now we can just click this "Update" button right here. And once

  • the page is updated, let's click on this button right here that says "View Page." And once

  • we're on the portfolio page, we can just scroll down and we should see our social media buttons

  • right here.

  • So now, we're actually done with this page and we can move on and create the next page

  • which is going to be the Contact Us page. So what we'll do is put in a small description

  • or contact information right here. We'll embed a map and then put in a contact us form right

  • here and then add the social media buttons at the bottom. So what I want you to do is

  • go back to the WordPress website and let's go to the Dashboards. So hover over your name

  • and click on "Dashboard." Once we're on the Dashboard, let's go down to pages and click

  • on "Add New." Once we're on the add new page, the first thing we wanna do is put in a title.

  • So right here, type in "Contact Us" and when you're ready come down to the page attribute

  • section and under template, let's choose the front page template. And then when you're

  • ready, come to the "Page Builder" tab and click on that. And what we want to do is add

  • a row. So click on the button that says "Add row" and change the number of rows from 2

  • to 1. And then click the "Insert" button.

  • And now lets' edit this row. So hover over the wrench and click "Edit Row", and then

  • click on "Theme" right here. And for Top/bottom padding, let's put in 40, so 4-0. And then

  • let's come down to the row layout and click on full width and then click "Save" right

  • here. And now let's add a widget right here. So

  • click on the button that says "Add Widget" and the widget that we want is the visual

  • editor. So click on that. And now let's click on the edit link right here and what we wanna

  • do is put in a title. So right here, type in "Contact Us." And when you're ready, go

  • ahead and push "Done" right here. And now what we wanna do is add another row. So click

  • on the button that says add row, and we wanna keep this as 2 this time. So make sure this

  • is 2 and then in here, we wanna change this to 70%. So type in 7-0 and then change the

  • other one to 30%. So type in 3-0 and then just click right here and you can see that

  • this resize.

  • And now what we wanna do is click "Insert". And now let's edit this row. So hover over

  • the wrench and click on "Edit Row". And then click on "Theme" right here, and for the Top/bottom

  • padding, let's put in 20, so 2-0. And then let's come down to the row layout and change

  • this to full width and then click "Save" right here. And now we wanna add a widget right

  • here. So let's click the button that says "Add Widget" and the widget that we want is

  • the visual editor. So click on that and then click on the "Edit Button" right here. And

  • if you push this button right here that says toolbar toggle, you'll expand this section

  • and have some additional font settings right here. So what we wanna do is put in some contact

  • details right here. So on the demo website, you can see we have our email, phone number

  • and then actual address. So on the WordPress website, I'm just gonna paste in that detail

  • right here and you can type in whatever you want. And you can also highlight some of those

  • text and push this button right here and it will bold your text. So I'm gonna do that

  • really quickly for all of these sections. So let's do it one more time and push bold.

  • And then what we wanna do is add a horizontal line right underneath. So I'm gonna create

  • a new line and then just push this button right here that says "Horizontal Line" and

  • insert that right here. So right here where it says email, you can see that my email address

  • is contact@howtowebby.com. So if you wanna create an email address that's going to be

  • associated with your web domain, I'm gonna link you to a video that I created on how

  • to do this in the YouTube description. So what you can do right now is put in the email

  • address that you wanna create a little bit later right here or put in any other email

  • address.

  • And so we can also link this email if we want and all we have to do is go to the text tab

  • and type in some html. So if you want, you can follow along. So right here, right before

  • the email address, I'll put in a open bracket and then type in A space H-R-E-F. And then

  • I will put equal sign and then quotes, mail to, colon and then I will have the email address

  • right here. And then at the end, I'll put in quotes again and then a close bracket.

  • And then you want to put in text that you're gonna link it to. So I'll type in contact@howtowebby.com

  • and then we just have to do an open bracket, slash A close bracket. And now if we go back

  • to the visual tab, you can see that your email is linked. So if your visitor clicks on it,

  • they can just email you directly. So once you're ready, let's click on this button right

  • here that says "Done."

  • And now we wanna add another widget right underneath this. So click on the button that

  • says "Add Widget" and the widget that we want is the "Site Origin Google Maps" widget. So

  • click on that. And now let's click on the "Edit Link" right here. And what you can do

  • is put in your address right here. I'm just gonna type in New York, New York and then

  • when you're ready, come down to the height right here. And we wanna change the height

  • to 2-50. So make sure you type that in and then we can just click "Done" right here.

  • And now we wanna add a widget on the right side over here. So let's click on this button

  • that says "Add Widget" and the widget that we want is the "Visual Editor." So once you

  • find that, click on that. And we wanna get some shortcut that we can paste in here. So

  • the first thing I want you to do is click on "Save Draft." And once the page is saved,

  • come over to the left over here where it say contact and click on "Contact Forms."

  • So the contact form is a plug in that we downloaded earlier in this tutorial and by default, they

  • create a contact form for us. So all we have to do is come down here, and click on this

  • link that says "Contact Form One." On the edit contact form page, come down to this

  • tab right here that says "Mail" and click on that. And you'll see these two section

  • right here. And inside is your default email address. And this is where all the messages

  • that you're gonna be sent or gonna go. So if you wanna change this, go ahead and do

  • that and if you wanna put in the web address that's gonna be associated with your web domain,

  • you can do that as well as long as you create that later. If you make any changes, go to

  • this button right here and click "Save" and if you don’t' want to make any changes,

  • then let's go back to the contact forms page. So right here under contact, click on "Contact

  • Forms."

  • Once you're back on the contact forms page, all we have to do is come down here to the

  • short code for this contact form. And we wanna highlight this section right here and copy

  • that. And now we're gonna paste it into our visual editor widget. So we're gonna go back

  • to our Contact Us page by hovering over pages and clicking on all pages. And now let's just

  • come down to the contact us page and click on this "Edit Link" right here. Once we're

  • back on the contact us page, just come down to the visual editor widget right here and

  • click on the "Edit link." And once we're on this page, click on the tab right here that

  • says "Text" and then paste in the short code right here. And that's gonna insert the contact

  • us form. And now we can just click on this "Done" button right here. And now let's click

  • this "Publish" button right here. And once the page is published, let's click on this

  • publish button right here that says "View Page" and see what it looks like. And once

  • we're on the contact us page, this is what it should look like right now. So now we can

  • move on and create the social media icons right on the bottom.

  • So let's go back to the WordPress website and click on this link right here that says

  • "Edit page." Once we're back on the edit page, the first thing that we wanna do is add a

  • new row. So click on this button, "Add Row" and make sure the number of rows is set to

  • 1 right here. And then click the "Insert" button. And if we need to, let's drag this

  • row to the bottom. So click on this up and down arrow and just move it down here. And

  • now let's edit this row. So hover over the wrench and click on "Edit Row". And then we're

  • gonna click on "Theme" right here, and for Top/bottom padding we're gonna put in 10 or

  • 1-0. And then for the background color, you can go to the YouTube description or the NYC

  • Tech Club Text Tutorial and get the color code. The color code is gonna be 1C1C1C for

  • what we're using for the demo site. So you can see it gets updated right here and then

  • we can just come down to the row layout and selectFull Widthand then we can click

  • "Save" right here.

  • And now we wanna add a widget right here. So click on button that says "Add Widget"

  • and the widget that we want is the "Site Origin Social Media Buttons" widget. So click on

  • that and then click on the "Edit Link" right here. And what we wanna do is add four buttons.

  • So click on this button right here four times and when you're ready go ahead and click and

  • expand this section right here and you can choose the platform that you want. So I'm

  • gonna choose Facebook and then type in NYC Tech Club right here. And then I wanna change

  • the background color of the buttons. So I'm gonna push this right here. And then you can

  • get the color code in the YouTube description or the NYC Tech Club Text Tutorial on the

  • social media widget section. Come right down here and highlight this color code which is

  • 252525 and then copy that and paste it in right here. And then we can collapse this

  • and open up the next one. And I'm gonna choose Twitter and type in NYC Tech Club right here.

  • And then change the background color to the color code and then collapse this. And then

  • open up this next one and choose Google Plus. And then change the background color, collapse.

  • And then one more time, I'll choose LinkedIn and then just change the background color

  • right here. And then collapse this. And once you're ready, come down to design and layout.

  • And let's click and expand this section and just customize this a little bit. So for button

  • theme, I'll choose flat. And then for padding, I'll choose low. And then for align, I'll

  • choose center. And once you're ready, go ahead and click this "Done" button right here.

  • And now let's push the "Update Button" right here. And once the page is updated, let's

  • click on this button right here that says "View Page." And now we can see what our Contact

  • Us page looks like. So we have our social media buttons down here and embedded map right

  • here, some contact information right here and then our Contact Us Form right here. So

  • now we can actually move on and create our next page which is the Testimonial page, also

  • known as the Success Stories page. So this is what it looks like. And what were gonna

  • do first is create some testimonials and then we'll create this client section and then

  • we'll build out the rest of the webpage including embedding some videos that can be video testimonials,

  • okay?

  • So let's go back to the WordPress website and the first thing we're gonna do is go to

  • the Dashboards. So hover over your name and click on the "Dashboard link" right here.

  • Once we're on the Dashboard, the first thing that we're gonna do is make some testimonials.

  • So come down to testimonials and click "Add New." On the add new testimonial page, the

  • first thing that we wanna do is put in a name right here for the person that's giving the

  • testimonial. So I'm gonna type in Helen Owen right here and when you're ready, come down

  • to this section right here. And this is where you type in your testimonial. So what I'm

  • gonna do is just paste in some gibberish just to save some time and then we can scroll down

  • to this section right here. And this is where you put in a job title and a company name

  • for the person that's giving your testimonial. So I'll put in "Director" right here and then

  • just type in "Goldman Sachs." And then what we wanna do is come down to this section right

  • here where it says "Featured Image" and we wanna upload an image. So click on this link

  • right here that says "Set Featured Image" and I'm just gonna go to the media library

  • and click on the image that I want and then click on this button right here.

  • And then the last thing that we wanna do is add a unique category name for this testimonial.

  • So click on this link right here and then I'm just gonna type in one right here and

  • click "Enter." And we wanna create unique category names for each of our testimonials

  • to help us create that testimonial page. So once you see the category name right here,

  • we can click on this "Publish" button right here. And once the testimonial is published,

  • let's click and add a new one together. So click on this button right here that says

  • "Add New." And once we're back on the add new testimonial page, the first thing we wanna

  • do is put in a name right here. So I'm gonna type in "James King" and then right down here

  • is where you type in your testimonial. So I'm gonna paste in some gibberish and then

  • we wanna put in a job title and a company name right here. So I'll put in Designer and

  • then I'll put in Adobe. And then we can scroll down to the Featured Image section and upload

  • an image. So click on this link right here. And then in the media library, I'll just select

  • an image that I want and click on this button that says "Set Featured Image." And then you'll

  • see the featured image right here.

  • And now let's add a unique category names once again. So click on this link right here.

  • And this time I'm gonna type in 2 and click "Enter" and then I'll see it update right

  • here. And then we can just push "Publish." And once that testimonial is published, let's

  • create one more together. So click on this button right here that says "Add new." And

  • back on the add new testimonial page, let's put in another name right here. So I'll just

  • type in Justin Bieber. And then right down here I'm gonna paste in some gibberish for

  • the testimonial. And then I'll scroll down here and just put in singer/artist. And then,

  • I'll come down to the featured image section and click on this link and go to my media

  • library and select the image that I want. And then click this button right here. And

  • then once the image shows up right here, all I wanna do is add another unique category

  • name. So I'll click on this link right here and then I'll just type in 3 and push "Enter."

  • And then I'll see the category list update and then we can push "Publish."

  • Once that testimonial is published, the next thing that we're gonna do is create this client

  • list with some logos. So on the WordPress website, let's go down on the left hand side

  • to clients and click on "Add new." On the add new client page, all we have to do is

  • put in a title right here. So I'm gonna type in "Client 1." And then we just wanna upload

  • a logo. So if you come down to the featured image section and click on "Set Featured Image"

  • we can either upload a logo using this upload files tab and clicking on the button here

  • or if you already have your logos uploaded, then we can click on media library and just

  • find the logo that we want. Click on that and then click on the "Set Featured Image"

  • button right here and then you'll see the logo right here and then we can just push

  • "Publish."

  • Once our client is published, let's create another one together. So click on "Add New"

  • and once we're back on the add new client page, the first thing we wanna do is add a

  • title. So I'll put "Client 2" right here. And then we just want to upload a logo. So

  • come down to the featured image and click on this link right here. And in my media library,

  • I'm just gonna scroll down and find the logo that I want which is this one. And just so

  • you know, the logos are 90 by 90 in dimensions. So keep that in mind when you upload your

  • own logos. And so once you're ready, click on the "Set Featured Image" button right here

  • and then we can just push "Publish." And once this client is published, what I want you

  • to do is pause this video and create three additional clients. And the reason why we

  • wanna create three additional clients is because we're going to have a row of five client logos

  • right here.

  • So once you're ready, go ahead and push "Play" and then we're gonna create this page. Okay,

  • so if you paused this video and created your additional clients, then you should have a

  • list of five clients right here. So now we're gonna create the Testimonial page. So what

  • I want you to do is go to pages and click on "Add New." Once we're on the add new page,

  • the first thing that we wanna do is put in a title right here. So I'm gonna type in "Success

  • Stories: and when you're ready, come down to the page attribute right here and let's

  • change the template to the front page template. And then what we wanna do is click on this

  • "Page Builder" tab right here and let's add a row. So click on the button that says "Add

  • Row" and let's change the number of rows from 2 to 1 and then click the "Insert" button

  • right here. And now let's edit this row. So hover over the wrench and click on "Edit Row"

  • and then click on this "Theme" tab right here, and for Top/bottom padding, let's put in forty.

  • So 4-0. And then let's scroll down to the row layout and choose full width and then

  • click "Save."

  • And now what we wanna do is add a widget right here. So click on the button that says "Add

  • Widget" and the widget that we want is the "Visual Editor." So once you find that, click

  • on that. And now let's click on the "Edit Link" right here and we just need to put in

  • a title. So I'm gonna title this "What Our Clients Are Saying" and once you put in your

  • title, go ahead and click "Done" right here. And now what we wanna do is add a row below

  • this. So click on the button that says "Add Row" and make sure the number of rows is set

  • to 2 right here. And then click the "Insert" button. And now let's edit this row. So hover

  • over the wrench and click on "Edit Row". And then click on the "Theme" tab right here.

  • And then where it says bottom border color, we're going to put in a color right here.

  • So click this button that says "Select Color." And what we're going to do is put in the primary

  • color code. So I'm gonna go to the NYC Tech Club Text Tutorial and on step number 26 right

  • here where it says "Create Testimonials" page, I’m gonna scroll down to the section where

  • we create the page and right down here, I'm going to highlight this color code. So the

  • color code is D63737 and I'll just copy that and go back to the WordPress website and paste

  • that in right here and you can see that the color code gets updated right here. And then

  • when you're ready, come down to the Top/bottom padding right here and what we're gonna put

  • in is 20. So put in 2-0 and then click "Save" right here.

  • And now I wanna add a widget on the left and a widget on the right. So let's click on the

  • button that says "Add Widget." And the widget that we want is the "Site Origin Video" widget.

  • So click on that. And now let's make a copy of this. So click on a duplicate link right

  • here. And we can just click and drag this over. So now we have one on the left and one

  • on the right. So let's edit the left hand side first. So click on the "Edit Link" right

  • here and all we have to do is click on the button right here that says "Externally Hosted"

  • and then we can just paste in the video URL right here.

  • So if I go to the YouTube page and I find the video that I want, all I have to do is

  • come down here to where it says "Share" and click on that and then take this URL right

  • here and copy that. And then go back to the WordPress website and paste that in right

  • here. And this is gonna embed the video on my webpage. So now we can click "Done" right

  • here and we can do the same to the right hand side. So click on the "Edit Link" right here

  • and then we wanna select "Externally Hosted" right here and now let's get the URL for our

  • video. So if I go to another video which could potentially be one of your testimonials, click

  • on the "Share Link" right here and then just get the URL and copy that. And then come back

  • to the WordPress website and paste that in right here. And then just click "Done" right

  • here. And now let's click the "Publish" button right here. And once the page is published,

  • let's check out what it looks like. So let's click on this button right here that says

  • "View page." So this is what the testimonial page looks like right now. So we have our

  • title and then two videos that are potentially video testimonials. So the next thing that

  • we're gonna do is insert the testimonials that we created a little earlier right here.

  • So let's go back to the WordPress website and click on the "Edit Page" link. Once were

  • back on the Edit Page, the first thing that we wanna do is add a new row. So click on

  • the button that says "Add Row." And we wanna change the number of rows to the number of

  • testimonials you have. So right here since we created three testimonials, I'm gonna put

  • in 3 right here. And then we can click "Insert" when you're ready. And now we wanna drag this

  • row to the bottom. So what we wanna do is click the up and down arrow and then just

  • move it down. And now let's edit this row. So hover over the wrench and click "Edit Row."

  • And then click on "Theme" right here and where it says Top/bottom padding, we're gonna put

  • in 40 or 4-0. And then when you're ready, click on "Save" right here. And now what we

  • wanna do is add a widget into each of these rows. So click on the button that saysAdd

  • Widgetand the widget that we want is the "Sydney FP: Testimonials" widget. So once

  • you find that, click on that. And let's make copies of this. So click on the link right

  • here that says duplicate two times and then we can just click and drag these over so we

  • have one on each row.

  • And now let's edit the left hand side one first. So click on the "Edit Link" right here

  • and all we have to do is change the number of testimonials to one right here and then

  • put in the category name for our first testimonial. So I'll put in 1. And if you don't remember

  • what the category names are, all you have to do is go to your testimonials page and

  • you can see a list of your testimonials right here and then you have your category names

  • right here.

  • So back on the WordPress website, once you put in the category name, all we have to do

  • is push "Done" right here. And now we can edit the next one right here. And so again,

  • we will put in 1 right here and then the category name right here is gonna be 2. And then I'll

  • click "Done." And then I'll do the third one. On the right hand side, I'll click "Edit"

  • change the number of testimonials to show to 1 and then just type in 3 for the category

  • name right here. And then I'll click "Done" and when you're ready, we can click "Update."

  • And once the page is updated, let's just click on "View Page" to make sure the updates are

  • correct. And once we're on the testimonials page, we can scroll down and we should see

  • the testimonials that we just inserted. So now we can move on and insert the logos right

  • here for our clients. So let's go back to the WordPress website and click on this link

  • right here that says "Edit Page." Once we're back on the edit page, the first thing that

  • we have to do is add a new row. So click on the button that says "Add Row" and make sure

  • the number of rows is set to 1. And then click the "Insert" button. And if we need to, let's

  • click and drag this row to the bottom. So right here, click the up and down arrow and

  • just move it down here. And once it's placed here, let’s hover over the wrench and click

  • onEdit Row.” And click on theThemetab right here. And the first thing that we're

  • gonna do is change the Top/bottom padding to 30. So put in 3-0. And then we're gonna

  • change the background color. So selectColorpush that and what we wanna do is put in a

  • custom color code. So you can go to the YouTube description or the NYC Tech Club Text Tutorial

  • and on step number 26, just scroll all the way down to step number 25 right here and

  • there is a color code that I want you to highlight which is E F E F EF and then copy that and

  • paste it in right here. And you can see that it is a light grey color.

  • And once we're done, we can come down to row layout and what we wanna do is selectFull

  • Widthand then click "Save" right here. And now we want to add a widget. So click

  • on the button that says "Add Widget" and the widget that we want is the "Sydney FP: Clients"

  • widget. So once you find that, click on that and then we can just click on this "Edit Link"

  • right here and all we have to do is make sure that this says "-1" right here and then we

  • can click "Done" and now we can just click "Update."

  • And once the page is updated, let's check out what it looks like. So let's click on

  • this button right here that says "View page." And once we're on the testimonials page, we

  • can just scroll down and we should see our client list right here. So if you ever wanna

  • update this list, all you have to do is go to your clients page and then you'll see a

  • list of your clients right here and you can hover any of them and click on the "Edit Link"

  • okay.

  • So now let's move on and the next thing we're gonna do is create this Call to Action for

  • this page. So let's go back to our WordPress website and click on "Edit Page." Once we're

  • back on the edit page, the first thing that we have to do is add a new row. So click on

  • the button that says "Add row" and make sure the number of rows is set to 1. And then click

  • the "Insert" button. And if we have our row inserted in between some other rows, we wanna

  • drag it to the bottom. So click on this up and down arrow and just move it down here.

  • And now let's edit the row. So hover over the wrench and click on "Edit Row" and then

  • click on "Theme" right here. And the first thing that what we wanna do is put in the

  • Top/bottom padding as 10, so 1-0. And then come down to the background color and what

  • we wanna do is put in a custom color code. So I'll just type in really quick since I

  • remember it. It's 252525 and you can find the color code in the YouTube description

  • and on the NYC Tech Club Text Tutorial. So you see that the background color updates

  • right here. And now we can just scroll down to the row layout, and what we wanna do is

  • selectFull Widthand then clickSave.” And once you're ready, let's add a widget

  • right her. So let’s click on the button that saysAdd Widgetand the widget

  • that we want is the "Sydney FP: Call to Action" widget. So click on that.

  • And now let's click on the "Edit Link" right here, and what we wanna do is put in some

  • text right here for our Call to Action. So I'm gonna go to the demo website and just

  • highlight this text right here. So it says "For a free quote to start working with us

  • today" I'm gonna copy that and paste that in and then for the link for the button, we'll

  • type in www.howtowebby.com/contact-us. And we already created this page. And then for

  • the title, I'll just type in "Contact Us." And then when you're ready, let's click the

  • "Done" button right here and then we can just push "Update." And once the page is updated,

  • let's check it out. So let's click on this button that says "View Page." And now on our

  • testimonials page, if we scroll down, we should see the Call to Action right here. So now

  • the last thing that we have to do is create the social media buttons right here. So let's

  • go back to the WordPress website and click on "Edit Page" one more time. Once we're back

  • on the edit page, let's add a new row. So click on the button that says "Add Row" and

  • make sure the number of rows is set to 1. And then we can click this "Insert" button

  • right here, and we wanna drag this row all the way to the bottom. So click on this up

  • and down arrow and move it below the Call to Action.

  • And once it's placed right here, let's edit this row. So hover over the wrench and click

  • on "Edit Row" and then click on the "Theme" tab right here, and for Top/bottom padding,

  • we're gonna put in 10, so 1-0. And then for the background color, just push "Select Color"

  • right here and we're going to put in a color code right here. So I'm gonna go to the Text

  • Tutorial and on the create social media widget section, I'm gonna highlight this color code

  • right here which is 1C1C1C. And copy that and just paste it in right here. And then

  • we wanna come down to row layout and selectFull Widthand then clickSave.”

  • And now we wanna add a widget right here. So click on the button that saysAdd Widget

  • and the widget that we want is the "Site Origin Social Media Buttons" widget. So click on

  • that. And now let's click on this "Edit Link" right here and we want to add four buttons.

  • So click on this add button four times. And then we wanna click inside of this to expand

  • it and choose the social media platform that we want. So I'll choose Facebook and then

  • I'll type in NYC Tech Club right here. And then we wanna change the background color

  • of the button. So push "Select Color" and then we can put in a custom color code right

  • there. So I'm gonna go to the NYC Tech Club Text Tutorial and write down here where the

  • color code is 252525. I'm gonna copy that and then just paste that in right here. And

  • then you'll see the color get updated and then I'll collapse this section and then open

  • up the next one and choose Twitter. And type in NYC Tech Club and then change the background

  • color. And then collapse this and then choose Google Plus right here and change the background

  • color and then collapse this. And then choose LinkedIn right here. And one more time, change

  • the background color. And then collapse this. And when you're ready, come down to design

  • and layout. And let's expand this section and just do some customizations. So for button

  • theme, I'm gonna choose flat and then I'll scroll down to padding and choose low. And

  • then for align, I'll choose center. And then we can just click "Done" right here and then

  • we push "Update." And once the page is updated, let's click on this button that says "View

  • page" and see what it looks like now.

  • Once were on our Testimonial Page, we can just scroll down and we should see our Social

  • Media Buttons section right down here. So were actually done with this page now and

  • were gonna move on and create some blog post. So I’ll show how to create a Featured

  • Image and then add some content just like this. So let’s go back to our WordPress

  • website, and were gonna go to our Dashboard. So hover over your name right here and click

  • on "Dashboard." Once were on our Dashboard, we wanna go down to Pause and click onAdd

  • New.” Once were on the Add New Blog Post page, the first thing that we wanna do is

  • put in a blog title right here. So I’m gonna type in "Build Something Great" and you can

  • put in whatever you want. And when youre ready, come down to this section right here.

  • And this is where you type in the content for your blog post. So what I’m gonna do

  • is just paste in some gibberish. And if you wanna format your content, you can use these

  • buttons right here. So I’ll let you mess you around with these on your own, but you

  • can also click on thisAdd Mediabutton if you wanna upload images.

  • So now the last thing that we wanna do is come down to the Featured Image section and

  • set our featured image. So click on this link right here and then we can go to our Media

  • Library and select the image that we want or we can click on upload files and upload

  • a new image. So I’m gonna stay on the Media Library tab and just come down and find the

  • image that I want. And I’ll just select this one and then I’ll push this button

  • right here that saysSet Featured Image.” And then we can add a category if we want

  • for this blog post, but were just gonna leave this blank. So all I wanna do is just

  • scroll up to thisPublishbutton and push that. And once the blog post is published,

  • let’s see what it looks like. So click on thisView Postbutton right here. And

  • once were on our Blog Post page, you can see this is what it looks like right now.

  • So were going to be doing some additional customizations in a little bit including adding

  • a comment section right here and customizing the right side bar, adding our author name

  • right here, and then changing the permalinks up here. So what I want you to do right now

  • is pause the video if you want and create some additional blog post. What I’m gonna

  • do is create a total of six blog post and then we can move on to the next step.

  • So what I want you to do is go toNewand click onPostto create some additional

  • blog post. Okay, so if you pushPauseand created some additional blog post then

  • you might have a list of them just like this. So you can see right here, I created six additional

  • blog posts and we have the initial default one. So we probably don’t want this "Hello

  • World" one that comes with the WordPress installation. So what we can do is click onTrash

  • right here and then let’s click on this link right here that saysTrash.” And

  • then we can just come down to the blog post and click on this link that saysDelete

  • Permanentlyor click on this button that saysEmpty Thrash.” And once weve

  • cleaned up our blog post, what we can do now is go check out what the Blog Post page looks

  • like. So if you want, all you have to do is type in the web address slash blog, so howtowebby.com/blog

  • is what I’m gonna go to. So you might wanna substitute howtowebby for your own web address.

  • So let’s pushEnterand we can seethis is the Blog Post page now. So I have

  • six blog posts with featured images and you can see right here we have little excerpts

  • and also the title and some additional details. So our visitor clicks on this, then it will

  • go to the Blog Post page, okay?

  • So now we have actually created all of the pages that we need for this web tutorial.

  • But what we wanna do now is do some additional customizations. So what I wanna do is go to

  • the Dashboard. So hover over your name right here and click on "Dashboard." Once were

  • on our Dashboard, the first thing that were gonna do is allow for comments on our blog

  • post. So what we have to do is come down to our settings and then click on "Discussion."

  • On the Discussion Settings page, we have to check off some of these boxes so that people

  • can leave comments on our blog post. So the first one we wanna check off is this one right

  • here and this is allows people to leave comments and then we wanna check this box right here.

  • So whenever someone leaves a comment, they have to put in their name and their email.

  • And then we wanna uncheck this so people can leave comments if they don’t have a registered

  • account. And we also wanna uncheck this one, so people can leave comments on older blog

  • post. And then if you wanna be emailed whenever someone leaves a comment, check this box right

  • here. And then let’s scroll down to this section right here where it saysBefore

  • a comment appears.” I usually check this box right here so I manually approve comments

  • and this just helps with Spam. So if you check this box, what you have to do whenever someone

  • gives you a comment is come to the Comments tab and manually approve them, okay? So I

  • also usually uncheck this one so people can leave comments if it’s their first time.

  • And once youre ready, let’s scroll down to the bottom and just clickSaveover

  • here.

  • And once our settings are saved, we can go to our blog post and we can refresh this.

  • And if we scroll down we can see the comment section right here. So if you don’t see

  • your Comments section, then let me show you what else you can do. If we go back to our

  • WordPress website, we can go to Post and click onAll Posts.” And once youre on the

  • Blog Post page, come over and check off this box right here and then go into the drop-down

  • and clickEdit.” And then click this button that saysApplyand then right

  • here where it saysCommentsgo into the drop-down and clickAllow.” And then

  • clickUpdateright here. And once this is updated, we can go back to our blog post

  • and refresh. And if we scroll down now, we should see this comment section if you didn’t

  • see it before. And the reason why you might not have seen it before is because we created

  • this blog post before we updated the comment settings. So going forward whenever you create

  • a blog post, you should see this Comment section right here, okay?

  • So now were gonna move on and the next thing that were gonna do is create this

  • right sidebar right here. So well have this Recent Post section, a Twitter Feed and

  • then this Facebook Like box. So what we have to do go back to the WordPress website and

  • on the left hand side, go down to Appearance and click onWidgets.” On the Widgets

  • page, what were gonna do is drag some of these widgets on the left hand side into the

  • sidebar right here. And so my sidebar might look a little different than yours because

  • I’ve deleted some of the default widgets that come install with WordPress. And you

  • can do the same by clicking and expanding the widget and then clicking theDelete

  • Linkright here. And then the widget gets moved back to the left hand side. And you

  • can always use it if you click and drag it over to the sidebar.

  • So the first widget that we wanna drag in is the easy "Facebook Like" box. And this

  • is a plugin that we downloaded earlier in this tutorial. So all I wanna do is click

  • and drag it into the side bar. And then we wanna paste in the Facebook URL right here.

  • So all I wanna do is change this to NYC Tech Club and you wanna make sure there is no slash

  • at the end. So if you have this slash right here, you wanna delete it; otherwise, this

  • widget won’t show up on your webpage.

  • And now we wanna scroll down to this section where it saysResponsiveand check that

  • box. And then we can scroll down and clickSave.” And once this is saved, let’s

  • actually click and collapse this section. And now we wanna drag in a text widget right

  • here. So let’s scroll down to the bottom and find the Text Widget and we can just click

  • this and check Sidebar right here and scroll down a little bit and clickAdd Widget.”

  • And now our Text Widget is right here and what we wanna do is add in some HTML for our

  • Twitter Feed. So we have to get that HTML from our Twitter profile. So go to your Twitter

  • Page. And then on your Twitter Homepage, what you wanna do is click on your profile picture

  • right here and then click onSettings.” And then right here on the left hand side,

  • youll see this drop-down. And what you wanna do is click on "Widgets" right here.

  • And now what we need to do is go this button that saysCreate Newand click on that.

  • And then we wanna click on this button that saysCreate Widget.” So click on that.

  • And right here, this is the HTML that we need for this Twitter Feed right here. But before

  • we copy this, we need to click on this button that saysSave Changes.”

  • So once the changes are saved, go ahead and highlight this HTML and copy it and then go

  • back to your WordPress website. And in this Text Widget just paste in that HTML. And now

  • we need to change the size of this Twitter Feed. So what we need to do is go to the NYC

  • Tech Club Text Tutorial and on step number 29 right here, I want you to scroll down to

  • this yellow box right here and highlight this HTML right here. And what were gonna do

  • is copy it and then go back to the Text Widget and highlight the first line and paste in

  • this HTML over it. And then we can clickEnterto create a new line right here. And all we

  • have to do is clickSaveright here.

  • And once this is saved, we can click and collapse this. And all we have to do now is add the

  • Recent Post Extended Widget. And this is a plugin that we downloaded earlier in this

  • tutorial. So what we can do is click on it and then make sure this sidebar is checked

  • right here. And then click this button that saysAdd Widgetand this will be added

  • right below the Text Widget where we want it. So what we wanna do is change the thumbnail

  • size from 45 by 45 to 75 by 75. And then we wanna click on this box right here that says

  • Display Excerptand then we wanna change the Excerpt Link from 10 to 8. And then all

  • we have to do is scroll down and clickSave.” And once this is saved, we can go to our Blog

  • page and it should look something like this. So you can see that there's some extra space

  • in between these widgets right now. But were gonna customize that in a little bit, so don’t

  • worry about that. The one thing I do wanna point out is on the Recent Blog Post section,

  • you can see that the font right here is a little gray and it’s not black. So if you

  • wanna change that to a black color font, all we have to do is go back to our WordPress

  • Dashboard and go to Appearance and click onCustomize.” And on the Customize tab,

  • all we have to do is come down to Colors and then scroll down to the Sidebar Color and

  • then click on that. And then choose theBlack Optionright here and then we can just

  • clickSave" and "Publish.” And once this is saved, we can go to our blog post and we

  • can refresh right here. And once it’s refreshed, we can scroll down and we should see black

  • font now in our Recent Blog Post section. So now were good to go and we can move

  • on to the next step which is creating the Header Menu right up here.

  • So what I wanna do is go back to the WordPress website and what we wanna do is go to the

  • Dashboard. So hover over your name and click on "Dashboard." Back on the WordPress Dashboard

  • what we wanna do to create our Header Menu is come down to Appearance and click onMenus.”

  • On this Menus Page, what we need to do is click on this link right here that saysCreate

  • a New Menu.” And now what we wanna do is put in a title for our Menu. So right here,

  • I’m gonna typeHeader Menuand when youre ready click on this button right

  • here that saysCreate Menu.” Now what we wanna do is come down to the Menu Settings

  • right here and click on this box next to Primary Menu. And then come to the Pages tab right

  • here and select the pages that you want to show up on your Header Menu. So I’ll choose

  • Contact Us, Image Gallery, Meet the Team, About, Blog and Homepage. And once youre

  • ready, click on this button right here that saysAdd to Menu.” Once you see your

  • Menu Items right here, what you can do is click and drag them to rearrange them and

  • you can also click and expand these sections and change the navigation label.

  • So right here where it saysMeet the Team” I’m gonna change that to Employees and also

  • for the Image Gallery, I’m gonna expand that and change this to portfolio. And then

  • once youre ready, go ahead and click thisSave Menubutton right here. And once

  • our Header Menu is saved, what we can do is go to our website and see what it looks like.

  • And now when we go to our Homepage, you can see right here we have our Header Menu. And

  • all of these links go to different pages on our website. So now let’s move on and the

  • next thing that were gonna do is create our Footer section with our website name.

  • So let’s go back to the WordPress website and let’s go to our Dashboard. So hover

  • over your name and click onDashboard.” Once were back on our Dashboard, what you

  • need to do is come down to Appearance and click onEditor.” Once youre on this

  • Edit page, come over here to the right side where it saysTemplates.” And then find

  • the Footer, so thefooter.phpand click on that.

  • Once youre on the Sydney Footer Page, I want you to make sure that you see this right

  • here where it says Sydney footer. And if you wanna proceed with this section, you have

  • to be really, really careful because if you mess up then it could ruin your website. So

  • if you wanna continue, push this button right here that saysProceed.” And once you

  • see all of these CSS right here, what we wanna do is highlight all of it and were gonna

  • delete it. So once you delete everything, you should see nothing in this box right here.

  • So now what you need to do is go to the NYC Tech Club Text Tutorial and on step number

  • 31 where it saysModify Footer.” In this yellow box right here, there is Custom CSS.

  • And what you need to do is highlight all of it from the top to the bottom and copy it

  • and then paste it into this box right here. And then all we have to do is modify two sections.

  • So where it says www.nyctechclub.com you can put in your web address right here and then

  • right here where it says NYC Tech Club 2015, you can put your business name right here.

  • Make sure that you have the two apostrophes right at the end and the beginning right here.

  • Otherwise this will not work and your website will not show.

  • So once youre ready, click this button that saysUpdate File.” And once the

  • footer.php is updated, we can go to our website and see what it looks like. Back on our Homepage,

  • if we scroll down, we should see our Footer section with our business name now. So now

  • what were gonna do is move this to the center and were also going to get rid of

  • this button right here on our Recent Blog Post section on the Homepage. And then were

  • also going to get rid of the extra space on the right side bar. So what we need to do

  • is go back to our WordPress Dashboard. So go to your name and click onDashboard

  • right here. Once were on the Dashboard, what we wanna do is come down to Appearance

  • on the left hand side and click on Custom CSS. And once were on this Theme Junkie

  • Custom CSS Page, what we need to do is go to the NYC Tech Club Text Tutorial and on

  • step number 32 right here where it saysAdd Custom CSSall we have to do is highlight

  • all of the CSS in this yellow box, copy it and then go back to the WordPress website

  • and paste it in right here. And then we can scroll down to the bottom and clickSave.”

  • And once this is saved, we can go back to our WordPress website and check out what it

  • looks like now. Back on the Homepage, if we scroll down, we should see some changes now.

  • So right down here, there shouldn’t be a blog post button and also the business name

  • should be centered. And then if we go to our blog post, the right side bar spacing should

  • be fixed. And we also got rid of the timer that shows up when your site uploads.

  • So the last thing that were gonna do is edit our permalinks and change the Site Tag

  • Line right here. So what we need to do is go to our WordPress Dashboard. So hover over

  • your name and click onDashboard.” Once youre on the WordPress Dashboard, come

  • down to your Settings and click onGeneral.” And then on the Settings page, what you can

  • do right here on the tag line is change it or you can actually delete it. And that’s

  • what I’m gonna do. And then right down here where it saysWordPress Address,” you

  • can type inwww.” if you want that in front of your web address and also you can

  • type that right here on the site address. So if you want, just type inwww.” and

  • then scroll down to the bottom and all were gonna do is clickSave Changes.” And

  • then well be asked to re-login for security purposes, so all we have to do is put in our

  • username and password and clickLogin.” And once were logged back in, we wanna

  • come back down to settings and this time we wanna click on "Permalinks." And once youre

  • on the Page, what you have to do is choose the Permalink that you want for your blog

  • post. So the one that I usually choose is this one right here that saysPost Name.”

  • And once youre ready, all you have to do is come down here and clickSave Changes.”

  • And once the settings are saved, we have successfully built a professional and beautiful WordPress

  • website. So let’s go see what the final product looks like.

  • So this is what our final website looks like. So if you found this video useful, please

  • give it a big thumbs up. If you have any questions or comments, leave them below and please make

  • sure to subscribe because we always put up awesome videos. So congratulations again and

  • I will see you all later.

If you wanna build a super professional website, watch this video, and I’ll show

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます

B1 中級

ワードプレスサイトを無料で作る方法 - 2016年 (How to Make a Wordpress Website FOR FREE - 2016)

  • 335 22
    Jack に公開 2021 年 01 月 14 日
動画の中の単語