How to Make a WordPress Website with GoDaddy Tutorial 2016

Articles, Blog

How to Make a WordPress Website with GoDaddy Tutorial 2016

How to Make a WordPress Website with GoDaddy Tutorial 2016


If you have a GoDaddy domain or you wanna
register a domain with GoDaddy, watch this video and I’ll show you how to build a website
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, 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 we have to do is register
a domain just like this, and then we have to get hosting service. And hosting allows
us to run our website and store all the content on our website. So this is going to cost us
less than 20 bucks. And so the first thing that I want you to do is go to godaddy.com.
So www.godaddy.com. On the GoDaddy page, this is where we’re gonna register our domain and
then we’re gonna go to hostgator.com to get our hosting service. And the reason why I
recommend HostGator is because it’s a lot cheaper and they’re just better customer service.
So right here in the Search bar, go ahead and type in the domain name that you want
to register and then click “Search Domain.” I’m gonna put in howtowebby.com and then just
click “Search” right here. And on this next page, if you get this message right here that
says, “Yes! Your domain is available” all you have to do is click “Select” right here
and then click “Continue to Cart.” If your domain isn’t available, go ahead and type
in a new one right here and click “Search” again. Otherwise, just click “Select” and
then click “Continue to Cart.” And then on this next page, all we have to
do is go through these three steps. So right here on Step 1, make sure it says “No Thanks”
right here. And then on Step 2, make sure it says “No Thanks” as well because we’re
gonna get hosting from HostGator. And then on Step 3, also make sure it says “No Thanks”
right here because HostGator is gonna allow us to add our email to our domain for free.
So just make sure everything is unchecked or says “No Thanks”” and then just click “Continue
to Cart.” And once we get to the Shopping Cart page,
what I want you to do is to make sure that the domain is filled correctly that you wanna
register and then you can change the terms on how long you wanna register your domain
right here if you want. So I’m just gonna click “1 Year” right there and all I wanna
do right now is click “Proceed” to check out. So I’m going to assume that you’re a new customer
with GoDaddy. If it’s not your first time, then go ahead and type in your username and
your password right here and then click “Log In.” Otherwise, underneath where it says “New
Customer” click “Continue.” And now, all you have to do is fill out your
billing information right here and then you can come down here to Account Information
and put in your email address. You can create a username, a password, and a PIN. And then
you’ll put in your payment information right down here and then click “Continue.” So if
you need to, go ahead and pause this video and fill out all these information. I’m not
gonna do it with you because I’ve already registered my domain. So once you’re ready,
go ahead and push “Play” again; otherwise, we’re gonna move on to the next step. Once you’ve registered your domain, I want
you to log in to your GoDaddy account and you’ll see your dashboard that looks just
like this and there’s a section right here that says “Domains.” I want you to click on
this + button right here and then you’ll see the domain that you just registered right
here. So now all we have to do is go to hostgator.com and get the hosting service. So what I want
you to do is open up a new tab and go to www.hostgator.com. On the HostGator page, all we have to do is
click “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!” Now all we have to do is fill out some information.
So right here, click on this tab that says “I Already Own This Domain” and then type
in the domain that you just registered with GoDaddy. So I’m gonna type in howtowebby.com
and push “Enter.” And then I’ll get these search results right here. And if we get this
green check mark and it says “Added” then we’re good to go and we can scroll down to
step number 2. So step number 2 is actually where you choose
your hosting plan. So right here in this drop down, remember we’re choosing between the
Hatchling Plan and the Baby Plan. And 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 choose the Baby Plan since I
build multiple websites and then I’m gonna select my billing cycle. And what I recommend
is either 6 or 12-months just to give yourself enough time to know whether or not you wanna
continue to run a website or not. So I’m gonna select 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’m not gonna do this with you because I’ve
already created my account but if you need to, go ahead and pause this video and fill
out this information and then click “Play” when you’re ready. Otherwise, we’re just
gonna move on to step number 4. And step number 4 is adding additional services
and HostGator by default actually selects all of these but they’re actually just extra
cost that we don’t really need and we can actually add these later. So what I want you
to do is uncheck these and once you’re done with that, we can move on to step number 5. So step number 5 is where you enter a coupon
code. And by default HostGator puts in this SNAPPY code which gives you 20% off right
here. What I recommend is you type n-y-c-tech-3-0 and what you’re gonna do is click “Validate”
and you’ll see this discount actually increase because you’re gonna get a 30% discount with
this code n-y-c-tech-30. So once you do that, we can just click right here that “I have
agreed to the terms” and click “Check Out Now!” So once you have your hosting, I want you
to go to your inbox, and you’ll see this email from hostgator.com that’s says “Your
Account Info.” I want you to open that and you’ll see a bunch of links here. What we
really need to focus on now right now are the first and second name servers. We’re gonna
copy and paste this stuff over to our GoDaddy account so that we can connect our domain
with our HostGator hosting service. So go back to your GoDaddy account right here and
then find the domain that you registered and click on this button that says “Manage.” On this next page, all you have to do is come
down to this section that’s titled “Name Servers” and then click on this link right here that
says “Manage.” You’ll get this pop up and all you have to do is click on this button
right here that says “Custom.” And then we’re gonna click on this link right here that says
“Enter Custom Name Servers.” What we’re gonna do is paste in the first and second name servers
right here. So what I want you to do is go back to your
Inbox and right here where it says “1st Name Server” I want you to highlight this and copy
it and then paste it into this box right here. And now we’re gonna paste in our second name
server right here. So again, I’m gonna go back to my Inbox and
go to this email and highlight the 2nd name server, copy that and then just paste it in
right here and all I have to do now is click “OK” and then we can click “Save.” And once
everything is saved, we don’t actually need to use GoDaddy anymore so we can actually
close out of this and go back to our HostGator email and right here you’ll see this line
that says “Your Control Panel.” I want you to click on that. This allows us to log in to our cPanel and
in 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 ahead and go back to your email and you’ll
see that right here, your username and your password. So go ahead and copy and paste those
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 dropdown 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 dropdown 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 eight 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 seven 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 seven, 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 nine 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 dropdown 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 dropdown right here. And where it says “Front Page” click in the dropdown and
select Homepage and then for Post page, click in the dropdown 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 two 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 fourteen to sixteen. 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 fifteen 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 fifty-five to twenty. And the reason is,
right here is where the excerpt is and fifty-five is a little bit too long and a little bit
too messy. So what I did was I modified it to twenty and it just looks a little bit more
professional. So once you changed the excerpt length to twenty, 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 two to one
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 negative one 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 two to one
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 dropdown. 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 fifty or five-zero. 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 one hundred px.
So by putting fifty in here, we’re gonna reduce that padding or that space by fifty
percent. 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 dropdown
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 two to one
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 dropdown. 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 fifteen, 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 one to two. 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 dropdown 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 eighteen – 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 eighteen, 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 one 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 one 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 thirty or three-zero
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 twenty 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 dropdown, 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 one. 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 dropdown 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 twenty-one, you can find the color code right here which
is two five two five two five 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 nyctechclub 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 ten or one-zero 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 twenty-one still. And right here where it says the color code is one C one C one
C, 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 dropdown 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 dropdown 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 two to one 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 forty right here or four-zero. And then scroll down to the Row Layout right here
and in the dropdown 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 one 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 twenty 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 two to one 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 thirty, so three-zero. 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 twenty-two right here, I’m gonna scroll down to the
Section number seventeen and there is a color code right here which is D six five zero five
zero. 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 dropdown, 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 one 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 thirty or three-zero. 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 twenty-two, scroll down
to this section where it says number twenty three right here. And highlight the color
code right here which is two five two five two five, 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 dropdown 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
one 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 twenty-one, right
here is the color code two five two five two five. 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 ten or one-zero. 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 one C one C one C. 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 two hundred by three hundred. 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 EMP one and that’s gonna stand for Employee
number one. 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 “EMP two” for employee number two 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 “EMP three” for
employee number three 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 two to one 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 forty or four-zero 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 negative one to three 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 EMP one, EMP two, and EMP three
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 one 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 thirty 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 three 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 EMP four, EMP five and EMP six 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
one 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 thirty for the
top/bottom padding, so three zero 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 three right there. And then let’s
type in some more category names right here. So I’ll type in EMP seven, EMP eight and EMP
nine, 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 one. 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 thirty or three zero. 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 two
five two five two five 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 one. 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 ten, so put in one-zero 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 twenty-one where we create the social media section, what I want is the
color code right here. So one C one C one C. 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 two five two five
two five. 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
two to one, 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 one
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 thirty for the Top/bottom padding, so three-zero 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 two five two five two five 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 one. 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 ten. So one-zero.
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 one C one C one C 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 two five two five two five. 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 two to one. 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 forty, so four-zero. 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 two this time. So make sure this is two and then in here, we wanna change this
to seventy percent. So type in seven-zero and then change the other one to thirty percent.
So type in three-zero 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 twenty, so two-zero.
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 two fifty. 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 one 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 ten or one-zero. 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 one C one C one C 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 two five two five two five 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 two 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 three 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 one.” 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 two” 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 ninety by ninety 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
two to one 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 four-zero. 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 two 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 twenty six 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 D six three seven three
seven 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 twenty. So put in two-zero 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 three 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 forty or four-zero. 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 one. 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 one right here and then the
category name right here is gonna be two. 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 one and then just type in three 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 one. 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 thirty. So put in three zero. 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
twenty-six, just scroll all the way down to step number twenty-five 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 “Negative one” 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 one. 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 ten, so one-zero.
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 two five two five two
five 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 one.
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 ten, so one-zero. 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 one C
one C one C. 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
two five two five two five. 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 dropdown and click “Edit.” And then click this
button that says “Apply” and then right here where it says “Comments” go into
the dropdown 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 dropdown. 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
twenty-nine 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 forty-five by forty-five to seventy-five
by seventy-five. And then we wanna click on this box right here that says “Display Excerpt”
and then we wanna change the Excerpt Link from ten to eight. 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 thirty-one 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 thirty-two 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 Permalinks 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.

27 thoughts on How to Make a WordPress Website with GoDaddy Tutorial 2016

  1. I love the video but I am having some problems. I am at mark 24:43 of the install video and the "Types" does not appear in my menu. Second, the "setting.xml" file is not in the zip file. Third, the "Lightbox plus Colorbox" is not in the Plug in list that I can see. All assistance appreciated.

  2. when i import sydney-settings.xml file then it's show me "Sorry, there has been an error.
    This does not appear to be a WXR file, missing/invalid WXR version number" type error please solve my problem.

  3. On the part where you are clicking on "begin installing plugins" I don't see that on mine. My theme is a different one. could that be why? Thank you!

  4. I like how you have put this together, however, I use a pc and when I download the zip file I do not see the Sydney-Settings file

  5. hello sir,how to make a social networkig website with login page etc.can you provide a video for us?

  6. can we do same for making an online store? registering a domain name at go daddy and hosting it at hostgator?

  7. Great info, thx
    Dumb question. I'm trying to add pics to the home page slider and they don't look right. The Mobile pics look good but not if viewed on a laptop. Suggestions ? Thanks

  8. Hi, I'm using an image in the logo section of the header. I would like to make the logo wider if possible. When I try to edit the css it won't open the style sheet. I just get to a sheet that has info about the author and license. Is this function blocked?
    Thanks!

  9. Hi Jameson,I could follow your video. You mention CSS code on step 32 on the NYC tech club page but I don't see the code anywhere. Maybe you moved it? Cause I know you'd want me to have that information.

  10. Hey!
    So about the "Add Employees" plugin around 1:32:00, on setting up the page exactly the way shown in the tutorial and upon hovering over the image, the box with description doesn't show up as shown in the video. It's my understanding that that should happen automatically and I don't need to enable or edit any settings in the plugin. Let me know how to solve this! Cheers!

  11. sir in sydney slider when i change the image it not show the origial size like it zoom what can i do sir please tell me the solution

Leave a Reply

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