B1 Intermediate US 2662 Folder Collection
After playing the video, you can click or select the word to look it up in the dictionary.
Loading...
Report Subtitle Errors
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 you’re 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 you’re 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 we’re
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. We’ll 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, we’re gonna have a headline, a subheadline and a Call to Action
button. And the reason why we’re 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
we’re 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 we’re done with this section, we’re
gonna create a Call to Action section right here. And what we’ll 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 we’re done with this section, we’re
gonna create a recent Blog Post section that looks just like this, and then we’ll 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,
we’ll have Social Media Buttons. We’ll 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 we’re gonna make look like.
So this is the About page that we’re going to make, and I’ll show you how to put in
titles at the top of your pages like this. And we’ll insert an image right here just
so that you know how to do that, and then we’ll put in a little description right
here about your business. And then we’ll 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, we’re
gonna put in some facts or statistics about your business right here. And then we’ll
have another Call to Action right here, and then right below that on every one of your
pages you’ll see this footer right here. So now let me show you another page that we’re
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, we’re 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 you’re going to love this page because what we’re
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, we’re 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 we’re 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, we’ll 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 they’re
from right here. And then right below that, we’ll add some logos of our current and
past clients right here. And then we’ll put in a Call to Action right here and then
our footer right here. So once we create this page, we’re going to create our Blog page
next.
Now we’re gonna create a very simple, but elegant and professional Blog post page just
like this. And what you’ll see is we’ll 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 you’ll 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, we’re gonna create one additional page.
So the last page that we’re gonna create is this Contact Us page right here so that
your visitors can get in touch with you. So we’ll put in some contact information right
here and we’ll embed a map right below if you have a real location and then we’ll
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 we’re 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 you’re
going to build an amazing website. So if you’re 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 they’re 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 says “Choose 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 push “Enter.” 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 we’re 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 you’re 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 push “Play” when you’re
ready. Otherwise, we’re 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 you’ll 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
says “Check Out Now!”
Once you’ve signed up for hosting and registered your domain, I want you to go to your inbox,
and you’ll see this email right here from hostgator.com that’s titled “Your Account
Info.” I want you to click and open that and you’ll see a bunch of links right here
and the one that we wanna focus on is this one that says “Your Control Panel.” I
want you to click on that link right here and then you’ll get this pop up that allows
you to login to your cPanel.
And inside our cPanel is where we’re 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 click “Log in.”
Once you’re logged in, all we have to do is scroll down to this section right here
that says “Software and Services.” And what we’re 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 says “Quick Install.”
Now all we have to do is come down to this section right here that says “Popular Installs”
and click on "WordPress." And then we’ll get this pop up right here and all we have
to do is click on this button that says “Install 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 click “Install WordPress.”
Once you've installed WordPress, you should see this message right here that says “Your
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 you’ll see this email
right here that says “Install 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
we’re 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 says “Admin URL.”
And we’re 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 you’re
ready, go ahead and click this button that says “Log in.”
Once we’re logged in, this is the WordPress Dashboard. And this is where we’re 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 on “Themes.”
Once you’re on the Themes page, what I want you to do is go to this button right here
that says “WordPress.org Themes” and click on that. And the theme that we’re gonna
be using is called the “Sydney” theme.” So right here where it says “Search 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 click “Install.” And then on this next page, just click this link
right here that says “Activate.” And once we’re 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 we’re gonna make
it look like in a little bit.
So go back to your Dashboard if you’re not already on it. And the next thing we’re
gonna do is install some plugins that are recommended to us. And plugins really just
make our life a lot easier. They’re like tools to really help us build our website.
So right here where it says “Begin 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 click “Install.” And then click this
button that says “Apply.”
And once we get to this page that says “Everything has been installed successfully,” I want
you to click on this link right here that says “Return 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, we’ll get this message right here. And what I wanna do right now is actually
install the other plugins that we’re gonna need for this web tutorial. So right here
where it says “Plugins” I want you to hover over that and click “Add New.”
On the Add Plugins page, what we’re gonna do is search for some plugins right here and
then click in “Install” and activate them. So in order to know which plugins we’re
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 we’re going through right now. And what I want you to do is go down to step number
8 where it says “Download Plugins.” And what we’re 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
“Enter” and then we can search for it.
And then we’ll see it right here and all we have to do is click “Install” and then
we’ll just click “Activate” right here. And then we’ll see this message right here
that says “Plugin activated.” And now I wanna install another plugin, so right here
click “Add New.” And then we’re gonna go back to the website and we’re 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 click “Enter” and search for it. And then right here this
Contact Form 7, all we’re gonna do is click “Install Now.” And then again we’ll
click “Activate Plugin” right here and once again we’ll get this message right
here that says “Plugin has been activated” and before we actually add another plugin,
I do wanna show you that all of your plugins that you’re 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 on “Add New.”
And now let’s go back to the NYC Tech Club website and highlight the “Easy Facebook
Like” box and copy that. And then we’re 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 we’ll click “Install Now.” And then we’ll click “Activate” once again.
And now we’re gonna add another plugin. So right here click “Add New” and what
we’re 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 we’ll click “Activate” and we have two more
plugins to go. So this should be pretty familiar to you. Right now we’re gonna click “Add
New” once again and then go back to the NYC Tech Club website and right here we’re
going to highlight “Site Origin Widget Bundle” and copy that. And then we’re gonna paste
it into this search bar right here and search for that. And then we’ll see the plugin
right here, so click “Install Now” and then we’ll click “Activate” right here.
And now let’s click “Add New” once again and go back to the NYC Tech Club website and
highlight this last plugin that we need and copy that. And then we’ll 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 click “Install Now.” And once again, let’s click “Activate
Plugin” right here.
Okay, so once we’ve 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
click “Download File.”
Once you’ve 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 we’ll get this folder right here. And
if we open it up, you can see all the contents right here. And what we’re gonna do next
is actually import the theme settings. So right down here where it says “Sydney-settings.xml”
we’re gonna import this into our WordPress website. So I want you to go back to your
Dashboard and right down here where it says “Types” I want you to hover over that
and then click on “Import/Export.”
And then on this page, all we have to do is come down here to “Import Types Data File”
and push this button right here that says “Choose File.” And then we’re gonna
go to the folder that we just unzipped and all we’re gonna do is select the file “Sydney-settings.xml”
and choose that. And then click this button right here that says “Import File.”
And then on this next page, just scroll all the way down to the bottom and push this button
that says “Import.” And once everything has been imported, you should see these messages
right here that say “Groups or Fields” have been added. And then on the left hand
side over here, you should see additional links for clients, projects, testimonials,
employees and services. And we’re 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 to “Plugins”
and click “Add New.” Once you’re on the Add Plugins page, just come back to the
search bar right here and type in “Lightbox Plus Colorbox.” And what this is going to
be for is for our image gallery. So once you type that in, go ahead and push “Enter.”
And the plugin that we want is this one right here on the left by Dan Zaponne. So go ahead
and click “Install Now.” And again we can just click “Activate” right here.
And back on the Plugins page right here you should see the Lightbox plugin down here.
And if you have that, then we’re 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 to “Media” right 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 says “Select 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 click “Choose” right here. Once we’ve uploaded everything, you’ll 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 on “Library” and see all of our images that we’ve 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 says “Edit Image.” And then we’ll 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 push “Save” right 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 click “Add New.” We’re gonna create two new pages.
The first page that we’re gonna create is the Homepage and then we’re 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 says “Template” right here. Go into the drop-down and select
"Front Page" and then click “Publish” right 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 we’re gonna do is create the Blog post page. Okay, so let’s
title this new page our “Blog” page. 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 says “Publish.” 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 on “Customize.”
So on this page right here, on the left hand side you’ll see a bunch of different tabs.
And we’re 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 you’ll this section
that says “Front page displays.” I want you to click the bullet right here that says
“A static page” and then you’ll get this drop-down right here. And where it says
“Front Page” click 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 click “Save" 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 we’re gonna do in this web tutorial is create the slider image right
here and we’re 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
we’re gonna do is scroll up to the top and click on “Header" area right here.
Once you’re 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 slider” and then right down here where it says “Site header type”
I want you to select “No header” right here. And once we do that, we’re gonna scroll
down to this section right here where it says “Header Slider” and 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. We’re gonna leave it at the default 4000 milliseconds
and if you really want to you can change this yourself. But if not we’re gonna just move
down to this next section that says “First 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
says “Remove” or just click this button that says “Change Image.” So what I’m
gonna do is click this button right here. and what we’ll get is our Media Library.
And since we already uploaded all of our images, they’ll show up right here. If you wanna
upload a new image, all you have to do is click on this tab right here that says “Upload
Files.” And then you can actually click this button right here that says “Select
Files” and 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 you’ll 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 says “Welcome 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 we’ll 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 again “Remove or Change Image” right here and then we
get to our Media Library. And what I wanna do is select this image for my image slider
and just click “Choose Image” right here. And I’m gonna leave the Headline "Ready
to begin your journey" but right here on the sub-headline, I’m gonna say “Find out
what we’re 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 we’re 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 the “Services"
section. So what I want you to do is click “Save” right here. And then we’re gonna
move on to this next section that is the “Header Image.”
We’re 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 we’re gonna do in this website tutorial
is actually create custom titles with our own images for each of our pages. So we’re
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 says “Menu
styles” and click on that.
On the Menu style tab, we’re 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 the “Sticky” option is chosen.
If you don’t want the Header Menu to actually follow you down the page, you wanna choose
the “Static” option, 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 the “Inline”
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. You’ll have your Site title or Logo right here on top and then
you’ll have your navigation bar right here below it. So we’re just gonna use In line
for this website, but you can choose whatever options you want. And when you’re ready,
just click “Save" and "Publish” right here. And then just click the "Back" button.
Once we’re 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 to “Fonts” right here and click on that. In the “Fonts
Setting” section I wanna just scroll down all the way to the bottom to the last section
which is the “Body 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 we’re 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 we’re 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 we’re 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 you’ll 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
we’re 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 says “Colors”, 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 says “Primary color”, go ahead and push this button right here where it says
“Select Color” and all we have to do is just paste in the code right here. And then
we’re gonna do the same right down here where it says “Menu 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
click “Save" and "Publish.”
And once this is saved, we can scroll up to the Blog options tab and click on that. And
this is where we’re 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. You’ll 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 we’re gonna leave it blank
right now or unchecked and just move on to “Content and Excerpt.”
And right here all I wanna do is where it says “Excerpt 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 click “Save" and "Publish.” So once this is saved, you can
actually modify any of the other settings in these tabs if you want. But we’re 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 we’re 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 word “makr” doesn’t have the letter “e.” This is where we’re 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 says “Save 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 this – and the reason why I wanna do this
is because we’re gonna resave this logo and we’re 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 we’re good to go.
So I’ll close out of this and then I’ll come back to our Dashboard right here where
we’re customizing everything, and I’ll click back right here. And right now what
we’re gonna do is upload our logo and our favicon. So right here where it says “Site
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 on “Select Image”
right here and if you need to upload your new logo, go ahead and click on the “Upload
Files” tab right here and click “Select Files” and 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. We’re gonna select
our logo and then just click “Choose Image” right 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 says “General”
I want you to click on that tab right there. And all we have to do right here is upload
our favicons. So “Select Image” click on that. And then we’ll go to our Media
Library again. And if you need to upload your favicon again, again just click right here
on “Upload Files” and then click on “Select Files.” But since we already uploaded everything,
I’m just gonna select on this image right here and click “Choose Image” and then
you’ll 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 on “Plugins” right here and then scroll down to the bottom
where it says “WP Super Cache” and click on “Settings.” 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 we’re 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
we’re gonna create next.
So back on our demo website, we created this section already. So now we’re gonna move
on to the next section which is the Services or About Section. So what we’re gonna do
is create a bunch of services just like this. And then we’re gonna create this section
for our Homepage. So what I want you to do is go back to your WordPress website and all
we’re gonna do is click on this X right here that will bring us back to our WordPress
Dashboard.
Once you’re back on your WordPress Dashboard, what I want you to do is go down on the left
hand side to Services and what we’re gonna click on is “Add 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 in “Photography” and you can put whatever title you want. And when
you’re ready, come down to this next section where we’re going to put in a short description
about the product or service that we’re 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 you’re ready, scroll down
to this section where it says “Service Icon.”
And right here, this is where we’re going to select the icon for this product or service
that we’re 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 we’ll 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 you’re making. And right below that, you see this title that says “Service 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 we’re 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 says “Add New Category” and
we’re gonna add the same category for all the products or services that we’re gonna
create because this is gonna help us create our Homepage section in a little bit. So right
here just type in “type a” and then click “Enter.” And you’ll see that the category
gets added right here to this list and now all we have to do is click on this button
that says “Publish.” And once our service is published, let’s actually create another
one together. So right here click on this button that says “Add New.” And once we’re
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 in “Strategy” this time and when you’re ready come down
to this next section and then we’re 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
you’re 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 we’re 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 click “Publish” right here.
And once we’re back on the Add New Service page, again we wanna put in a title right
here. So this time I'm gonna type in “Strategy” and 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 click “Publish” right 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 New” or on the left hand side under Services, we can click “Add New” right
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 you’re
ready, you can push “Play” and then we’re 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
you’re ready push “Play” and then we’re gonna create this section, okay? So I will
see you in a few minutes.
Okay, so now that you’re 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 on “All 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 click “Edit” right here and then modify
whatever you wanna modify.
So now we’re 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 on “All Pages.” And once you’ve come to this page, just come
down to the Homepage and click on that. Once you’re on your Homepage, come over here
to the right and click on this tab called “Page Builder.” And this is a plugin that
we downloaded a little bit earlier and what we’re going to be using pretty much to customize
our website. So what we’re 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 says “Add 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 click “Insert.” And now that we have
our block, we wanna add a widget. So click on this button right here that says “Add
Widget” and then you’ll 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 this “Edit” button right here and then we’ll
get this pop up. And then we wanna put in a title. So right here type in “Our Services"
or "Our Products” whatever you want. And then you’re 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 click “Done” right here. And then just click “Update.”
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 says “View Page.” And once we’re
on the Homepage, we can just scroll down and we should see the first block that we just
created right here – Our 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 says “Customize.” 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 says “Select Color.” And then just choose this
black box right here and then we can just click “Save" and Publish.” And then click
the X right here.
And once we’re 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 we’ve created this block, we can move on and create the next block. So
let’s me show you what we’re gonna create next. So if I scroll down on the demo website,
the next thing that we’re gonna create is this Call to Action right here. And what we’re
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 we’re 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 says “Edit Page.”
And once we’re back on the Edit Homepage, the first thing we wanna do is add a new block.
So go to this button right here that says “Add Row” and click on that. And we wanna
change the number of rows from 2 to 1 and then click this “Insert” button 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 on “Edit Row.” And what we’re
gonna do is customize this row a little bit. So right here where it says “Theme”, click
on that and you get this drop-down. And the first thing we’re gonna do is come down
to this section where it says “Top/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 we’re creating this Call to Action right here. And in between there’s some
space and we also call that “padding.” And there’s also padding down here between
the Call to Action and the Recent Blog Post.
So what we’re 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, we’re 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 says “Background Image.” And so if you
wanna insert a background image in your row just like what we’re gonna do right here,
all you have to do is go to this section where it says “Background Image” and click on
this button right here that says “Select Image.” And then we can go to our Media
Library. So if you’re 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 says “Upload Files.” And click on this button right here that says “Select
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 push “Done” right
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 on “Full Width”
and then we can just click “Save.”
And now we wanna add a widget in this block. So click on this button right here that says
“Add Widget” and the widget that we want is the “Layout Builder.” So find that
and click on that and now we can just click on this “Edit 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 we’re 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 says “Add 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 says “Add Widget”
and the widget that we want is the Text widget. So scroll down to the bottom and find the
one that says “Text” and click on that. And now let’s click on the “Edit 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 you’re done putting in a title, go ahead and click
on the “Done” button right here. And now we’re 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 on “Edit Row.” And what we wanna do is click on “Theme”
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 says “Color.” And what we’re 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
on “Select Color” and 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 click “Save” right
here.
And now we can add our second row which is the Call to Action row. So right here click
on this button that says “Add Row” and the first thing that we wanna do is change
the number of rows from 1 to 2. And what we’re gonna do is add a Call to Action widget right
here and then another Call to Action widget right here. And once you’re ready, click
on this button right here that says “Insert.” And now we wanna add a widget right here.
So click on this button right here that says “Add 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 says “Duplicate.” 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 we’ll click on this “Edit Link” right
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 employees” and then I’m gonna paste it in right here.
Once you’re ready, come down to the next section right here. And this is where we’re
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 we’re 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 you’re going to
put some text for your buttons. So I’m just gonna type in “Meet 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 this “Attributes” tab. And you’ll get this drop-down right here
and what we’re 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 this “Attributes” tab 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 click “Done.”
And now we can edit the Call to Action on the right hand side. So let’s click on this
link right here that says “Edit” and 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 says “Review Some Facts About Us” and
copy that and paste that in right here. And when you’re ready, come down to the next
section where we’re going to put in a web address for our buttons. So I’m gonna type
in a URL for a page that we’re gonna create a little bit later. So I’ll type “www.howtowebby.com/about”
So we’re 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 type “Facts.” And when you’re
ready, come over here to the right hand side and click on this tab that says “Attributes”
and we’re 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 we’ll just highlight it and copy that and then we’ll just paste it in
right here and all we have to do now is click “Done.” 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 on “Edit Row” and click on “Theme” right here and where it says
“Top/Bottom Padding” and this box right here, put in zero and then click “Save”
and then click “Done” and then we can just click “Update” to 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 we’re 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 we’re 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 we’re 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 says “Edit Page.” Once we’re 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
says “Add 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
“Edit” right here. And all we want to do is add a title. So right here I’m gonna
type in “Latest News.” And then we can just click “Done” and then we can actually
just click “Update.”
And once the page is updated, let’s click on this button to view the changes. And once
we’re 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 we’ll eventually delete this one and add some new blog posts
later on to this tutorial. And we’ll 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, we’re 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, we’re 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 on “Edit Page” right here. And once we’re back on our Edit Page, the first
thing we wanna do is add a new row. So click on “Add Row” right here and make sure
the number of rows is set to 1 right here and then click the “Insert” button. 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 the “Edit Link” right here. So we’re 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 is “We
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 you’re ready, come down to this
next section where we’re 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 we’re 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 in “Success Stories” for the text for
the button. And then what I want you to do is check this box right here that says “Display
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
click “Done” right here and what we wanna do before we save this is hover over wrench
and click “Edit Row.” We’re going to change the padding and do some other stuff.
So click on “Theme” right here. Right here where it says “Top/bottom padding,
I want you to put in 30 or 3-0 and then scroll down to background color right here. And what
we’re 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 you’ll 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, select “Full Width” and then we can click “Save”
right here. And now let’s click “Update.” 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 says “Edit Page.” And once we’re
back to this page, we have to enable some widgets. So come down to plugins right here
and click on “Site Origin" widgets. And once you’re 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 this “Off” button 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 we’re going to be using the
social media buttons widget right here and also the Headline widget right here. So once
you’ve turned everything on, we can actually go back to the Homepage. So let’s go to
Pages right here and click on “All Pages.”
And now just come right down to the Homepage and click on the “Edit Link” right here.
Once we’re back on the Edit Page, we wanna add a new row. So click on this button that
says “Add Row” and make sure the number of rows is set to 1. And then click the “Insert”
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 says “Add Widget” and click on that. And the widget that we want
is the “Site Origin Social Media Buttons” widget. So click on that and once it shows
up right here, click on the “Edit Link” right here. And then we’ll get this pop
up and what we wanna do is click on this “Add” button right here to add our first Social
Media button. So click on that and then right here where it says “Select network” if
you click in here, you’ll 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 on “Select Color” and 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 you’ll see the background color change. So once you’re done, click
right here to collapse this section and let’s add three more buttons.
So I’m gonna click “Add” right here and click this area right here and then I’m
gonna select the “Twitter” button. 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 “LinkedIn” button. 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 says “Design and layout” and what we’re going to do is customize
some of the settings right here. So where it says “Button theme” I want you to change
it to flat and then just come down to padding down here and we can click on “Low.” And
then for alignment, click on “Center” and then we can just click "Done" right here.
And once we’re back on this page, I wanna customize this row a little bit. So let’s
hover over the wrench right here and click on “Edit Row” and then click on “Theme”
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
on “Select Color.” We’re 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 says “Row Layout”
and then go in the drop-down and select “Full width.” And then we can click “Save”
right here. And now let’s actually click the “Update” button.
And once our Homepage is updated, let’s click and see what it looks like right now.
So click on “View Page” right here. And once we’re 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 we’re gonna come back to the Homepage a little bit
later and finish off our customizations. But right now what we’re gonna do is create
the About Page.
So what we’re gonna do is put in a title, we’ll 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 we’ll 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 the “Dashboad” link right
here. Back on the Dashboard, what we wanna do is create a new page. So come down to Pages
and click “Add New.” And the first thing that we wanna do is put a title for our new
page. So right here I’m gonna type in “About.” And once you’re ready, come down to the
section that says “Page Attributes” right here. And what we’re gonna do is change
the template of this page to the front page, so clicking this drop-down and select “Front
Page” right 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 in “About” as 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 says “Edit.” And then you can change any of the text right here.
But since we’re 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 you’re ready, come down to this section right here where it says “Page Builder”
and click on this tab. And what we’re 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 says “Add Row.” And
what we’re gonna do is change the number of rows from 2 to 1 and then click this “Insert”
button right here. And now we can add a widget right 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, go ahead and click on it. And then once the widget is inserted right here,
let’s click on this “Edit 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 in “About Us” and 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 says “Insert/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 this “Add Link” button
right here, now the text is linked to another page, okay?
So now let’s add an image that we’re 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 says “Add Media.” And we’ll get this pop up right here and if you already
uploaded all of your images then on the media tab, you’ll 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 this “Upload Files” tab right here and then just click on this
button that says “Select 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 says “Link to” I’m
gonna select “None.” And then I’m just gonna click “Insert” right 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 we’re 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 we’re 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 the “Embed “ tab right here and we’re going to copy this HTML in
this box right here. So highlight and copy that, and then go back to your WordPress website
and we’re 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 this “Done” button right here
and before we actually publish this, I wanna edit this really, really quick. So let’s
go to the wrench and click on “Edit Row” and then click on “Theme” right here and
where it says “Top/Bottom Padding” let’s put in 40 right here or 4-0. And then scroll
down to the Row Layout right here and in the drop-down select “Full width.” And now
we can click “Save” right here and now let’s push the “Publish” button.
And once the page is published, let’s click on this button right here that says “View
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 we’ll do that really, really quickly and then we’ll
move on and create the rest of this About Page. So I’m gonna go back and click on
this link right here that says “Edit 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 the “Edit Link” right 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 the “Share” tab right here,
I can just copy this URL and go back to the WordPress website, and paste in that URL right
there and you click “Done” right 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 the “Full width Stretch.” And once I do that, I can click
“Save” and then click “Update.”
And once the page is updated, let’s click on this button that says “View 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 says “Edit Page.” And once we’re back
on the “Edit Page” the 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
on “Delete Row” and then click on “Are you sure?” And now that row disappears.
And before we do anything on this page, I wanna remind you what we’re gonna create
next. So if I go to the demo website and scroll down, we’re 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 says “Add Row” and I wanna change
the number of rows from 2 to 1 and click the “Insert” button. And now I wanna add a
widget, so click on the button that says “Add Widget” and the widget that we want is the
“Sydneyfpfacts” widget. So once you find that, go ahead and click on that. And now
we can click on the “Edit Link” right here. And then you’ll 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 we’re gonna do on the WordPress
website right here is first, you’re gonna put in a fact name. So I put in “Projects”
for my first one. And then you’re gonna put in a value, so I put about 750,000 in
terms of the number of projects. And then for the icon, you’re gonna put in a short
code. And how you get the short code is you click on this link right here and then we’ll
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 you’re ready, push “Play” otherwise
we’re just gonna continue on.
So when you’re ready, I want you to come over to the right over here and click on “Design.”
And what we’re 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 select “Color.” And all
we’re 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 click “Done.” And what I wanna do now is edit
this row. So I’m gonna hover over the wrench and click on “Edit Row” and then click
on “Theme” right 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 the “Background Color.”
So I’m gonna push “Select Color” right 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, select “Full width”
and then we can click “Save” right here. And now we can click on the “Edit Link”
right here. And once our page is updated, let’s click
on this button right here that says “View Page” just 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 we’ll click
on this link right here that says “Edit 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 says “Add Row” and I wanna make sure that the number of rows is set to 1 right
here. And then we can click the “Insert” button 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 the “Add
Widget” button 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 the “Edit Link” right here and we’re 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 we’re
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 click “Done” right here.
And what we wanna do now is 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, 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 select “Full width” and
then we can click “Save” right here. And now let’s click the “Update” button.
And once our page is updated, let’s click on this button right here that says “View
Page.” And once we’re 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 the “Edit Page Link.” And
once we’re 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 the “Insert”
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 says “Add Widget” and the widget that we want is the Site Origin
Social Media buttons widget. So click on that and then we’re going to click on the “Edit
Link” right here. And if you remember how to add social media buttons, all we have to
do is click this “Add Button” right 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 click “Add” twice
right here and first we’ll do the Google Plus. So we’ll 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 you’re 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 click “Done” right here. And now what we wanna do is edit
this row. So let’s go to the wrench and click on “Edit Row” and 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 select “Full width”
and then we can click “Save” right here. And now let’s just click the “Update”
button right here. And once the page is updated, let’s click
on this button one more time. And once we’re back on the “About Page” we can just scroll
down and we should see the social media buttons right down here. So if you’re ready we can
move on to the next step which is creating the Meet the Team page or the "Employees"
page. So what we’re 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 we’re gonna go to the Dashboard. So hover over your website name right here and
click on "Dashboard."
Once we’re back on the WordPress Dashboard, the first thing that we have to do to create
our Employees’ Page is create some employee profiles. So on the left hand side find the
employees tab and hover over and click on “Add New.” Once we’re 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 you’re ready let’s scroll down to this next section that says
“Employee Info” right here. And what you have to do right here is put in a job title.
So I’m gonna type in “Designer” for 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 Employees’ Page.
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
you’re ready let’s come over to this section right here where it says “Featured Image.”
And what we’re 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 select “Full Width” and 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 select “Full Width” right 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 select “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 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 [email protected] 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 [email protected]
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 select “Full Width” and 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 we’re 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 we’re
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 says “Add
Widget” and 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
on “Edit Row.” And click on the “Theme” tab 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 select “Color” push 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 select “Full
Width” and 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
select “Full Width” and then click “Save.” And once you're ready, let's add a widget
right her. So let’s 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 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 select “Full Width” and then click “Save.”
And now we wanna 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 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 we’re on our Testimonial Page, we can just scroll down and we should see our Social
Media Buttons section right down here. So we’re actually done with this page now and
we’re 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 we’re gonna go to our Dashboard. So hover over your name right here and click
on "Dashboard." Once we’re on our Dashboard, we wanna go down to Pause and click on “Add
New.” Once we’re 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 you’re 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 this “Add Media” button 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 says “Set Featured Image.” And then we can add a category if we want
for this blog post, but we’re just gonna leave this blank. So all I wanna do is just
scroll up to this “Publish” button and push that. And once the blog post is published,
let’s see what it looks like. So click on this “View Post” button right here. And
once we’re on our Blog Post page, you can see this is what it looks like right now.
So we’re 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 to “New” and click on “Post” to create some additional
blog post. Okay, so if you push “Pause” and 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 on “Trash”
right here and then let’s click on this link right here that says “Trash.” And
then we can just come down to the blog post and click on this link that says “Delete
Permanently” or click on this button that says “Empty Thrash.” And once we’ve
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 push “Enter” and we can see – this 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 we’re
on our Dashboard, the first thing that we’re 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 says “Before
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 you’re ready, let’s scroll down to the bottom and just click “Save” over
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 on “All Posts.” And once you’re on the
Blog Post page, come over and check off this box right here and then go into the drop-down
and click “Edit.” And then click this button that says “Apply” and then right
here where it says “Comments” go into the drop-down and click “Allow.” And then
click “Update” right 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 we’re gonna move on and the next thing that we’re gonna do is create this
right sidebar right here. So we’ll 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 on “Widgets.” On the Widgets
page, what we’re 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 the “Delete
Link” right 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 says “Responsive” and check that
box. And then we can scroll down and click “Save.” 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 click “Add 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 on “Settings.” And then right here on the left hand side,
you’ll 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 says “Create New” and click on that.
And then we wanna click on this button that says “Create 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 says “Save 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 we’re 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 click “Enter” to create a new line right here. And all we
have to do is click “Save” right 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 says “Add Widget” and 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 Excerpt” and then we wanna change the Excerpt Link from 10 to 8. And then all
we have to do is scroll down and click “Save.” 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 we’re 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 on “Customize.” 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 the “Black Option” right here and then we can just
click “Save" 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 we’re 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 on “Menus.”
On this Menus Page, what we need to do is click on this link right here that says “Create
a New Menu.” And now what we wanna do is put in a title for our Menu. So right here,
I’m gonna type “Header Menu” and when you’re ready click on this button right
here that says “Create 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 you’re
ready, click on this button right here that says “Add 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 says “Meet 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 you’re ready, go ahead and click this “Save Menu” button 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 we’re 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 on “Dashboard.” Once we’re back on our Dashboard, what you
need to do is come down to Appearance and click on “Editor.” Once you’re on this
Edit page, come over here to the right side where it says “Templates.” And then find
the Footer, so the “footer.php” and click on that.
Once you’re 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 says “Proceed.” And once you
see all of these CSS right here, what we wanna do is highlight all of it and we’re 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 says “Modify 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 you’re ready, click this button that says “Update 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 we’re gonna do is move this to the center and we’re also going to get rid of
this button right here on our Recent Blog Post section on the Homepage. And then we’re
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 on “Dashboard”
right here. Once we’re on the Dashboard, what we wanna do is come down to Appearance
on the left hand side and click on Custom CSS. And once we’re 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 says “Add Custom CSS” all 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 click “Save.”
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 we’re 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 on “Dashboard.” Once you’re on the WordPress Dashboard, come
down to your Settings and click on “General.” 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 says “WordPress Address,” you
can type in “www.” 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 in “www.” and
then scroll down to the bottom and all we’re gonna do is click “Save Changes.” And
then we’ll be asked to re-login for security purposes, so all we have to do is put in our
username and password and click “Login.” And once we’re logged back in, we wanna
come back down to settings and this time we wanna click on "Permalinks." And once you’re
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 says “Post Name.”
And once you’re ready, all you have to do is come down here and click “Save 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.
    You must  Log in  to get the function.
Tip: Click on the article or the word in the subtitle to get translation quickly!

Loading…

How to Make a Wordpress Website FOR FREE - 2016

2662 Folder Collection
羅紹桀 published on May 12, 2016
More Recommended Videos
  1. 1. Search word

    Select word on the caption to look it up in the dictionary!

  2. 2. Repeat single sentence

    Repeat the same sentence to enhance listening ability

  3. 3. Shortcut

    Shortcut!

  4. 4. Close caption

    Close the English caption

  5. 5. Embed

    Embed the video to your blog

  6. 6. Unfold

    Hide right panel

  1. Listening Quiz

    Listening Quiz!

  1. Click to open your notebook

  1. UrbanDictionary 俚語字典整合查詢。一般字典查詢不到你滿意的解譯,不妨使用「俚語字典」,或許會讓你有滿意的答案喔