2015年建1000元專業Wordpress網站步驟指南 (Build $1000 professional Wordpress Websites step by step guide 2015)

字幕列表影片播放

good day ladies and gentleman my name is
mitchell gannaway and in 45 minutes
I'm going to show you how to create website with
free tools so powerful tons of
well-established web design companies are using the exact same tools
to build their own web sites and at the same time charging
thousands to their client's to build web sites using
these exact same tools I'm gonna show you how to use
over the past months I've literally come across
hundreds of professional web design companies using
these exact same tools I'm gonna show you how to use
and they are extremely easy to use
extremely easy to create complex web sites
even if you have never built a website before in your life
using these tools I'm gonna show you how to use
its easy to expand on your website as your business grows
can easily add shopping carts and tons of other features
you would naturally expect find on any professional website
so you will know that your website is built on a very
solid foundation that is easy to expand on
as your business grows and I'm basically going to guide you through
the hardest parts of building a website which is mainly getting Hosting
a domain name for your website installation of
wordpress and installation of the Divi
theme which we are going to use to build the website I'm gonna show you how to create
pages
navigation menus and do basic customizations on your website
add content and edit content on your pages and web site in general
So, lets take a look at the Divi Theme
which we will be installing on word press
lets just click there
This is the demonstration page for the Divi Theme and
If I was just to minimize this page you can see the Divi Theme
is fully responsive meaning that it looks great
on whatever with web de-- whatever web browser you
use it on and lets just Maximize that
once again and there are tons and tons of features that you can be easily
add to your website using the Divi Theme
Lets just scroll down
Very easy to create alot of these complex layouts you can literally find
any website you like on the Internet and replicate it
very easily using the Divi Theme which we are going to install
on Wordpress Lets just scroll back up
The Divi Theme does cost seventy
dollars But I'm gonna show you how to get it
100 percent competely free, completely
legal and no strings attached
what so ever
and this is the Divi Theme and this line perfectly
explains what it's about pure elegance
right out of the box and this is
just some of the sample web sites that you can create with Divi
this is just a quick one-page website
you can create as many pages as you want for your website
very easy to create layouts like this
for your website and actually make your website looking exactly
the way you want it to look and all these links
are gonna be in the description section below the video if you ever want to take
a look at
all these web sites I'm browsing through right now
and lets just scroll down and
here are a lot of sample website you can look at
that were created using this exact
same theme I'm going to teach you how to use
very simple to create very complex web sites
and as I said I'm going to provide this theme to you completely free
one hundred percent legal
and no strings attached and here is another page with alot of
showcases designs alot of clients that have used
the Divi Theme and built a website on wordpress
have submitted some of their websites
to a showcase page and the link
to showcase pages are gonna be in video description section
and lets click on that
and we are going to be using a company called siteground
to get Hosting and get a domain name for your website
so if you were to type in siteground reviews on
a google search you will come up with tons
of very highly rated reviews
for this particular company we are gonna be using and
hosting company basically stores all the
content such as text images
videos that are on your website
and they store those on their servers so that
people around the world can access your web site when you got to bed at night
and this is siteground they have a lot of
very
high reviews and this is the company I'm going to show you how to get
web hosting with and I'm gonna show you how to get a huge discount on what they
normally charge
for their Hosting and lets just click here
and in forty-five minutes I'm gonna show you how to use
the Divi Theme and show you all the technical aspects
of building a website on the Divi Theme but
I have created Divi playlist
and I'm gonna put this link in the description section below this video
and this is just an expansion to this video that will show you how to use
various different elements of
the Divi Theme extremely easy to use
but this will help you
in the sense that it is abit of a detailed reference guide on using
individual aspects of Divi and don't worry too much
none of this makes sense to you at this point
as you can see how to use sections in Divi how to use Pre-made layouts how to use
the image module don't worry too much about that right now because
I am gonna go into detail about how to use sections
pre-made layouts, err, add modules to the Divi Theme
but this is simply a reference guide if you need
a bit more detail on how to use these various elements of the Divi theme
at the end of this video so
lets close all these down
So, without
any further delay, let's get started and the very first thing we are going to do
is sign up for hosting and get
a website address with siteground if you use the link
im showing you right now which is in the description section below
this video simply click on the link and you will go to the discount section
on siteground where you will get a huge discount on what they normally charge for Hosting
The link is my affliate Link with siteground
and it will take you to the discount section and
you can buy me the equivalent of a digital cup of coffee if you use link
and also help me continue providing free videos
and tools you can use on your website and
we are now on the discount section and you can see
there are different packages StartUp Grow Big Go Geek
we are going to use the Start Up package for this video
That allows you to build one website with this hosting account
and you can see you get sixty percent off the normal
hosting package if you use the link that I showed you. Step 2
simply pick a domain name and I have already got
one planned out AmazingWP
fast dot com and just
enter whatever you want over there and pick
whatever extension you want dot com dot net
or country specific extension to your domain name
and you get that domain name free
with hosting package and save about 15 bucks
Ive just clicked proceed and we are now on to Step
3 and you'll be told that hopefully that your
specific address is available for registration so lets enter the details
and I'm just gonna black out alot of
what Im entering over here if you do want to send me an email
send it to Mitchbusiness82 at
at gmail dot com. The address that just popped up on the screen
and I will gladly help you with any
web design related queries you might have and if you send an email
during the week Monday to Friday I will usually responsed within
an hour, if you send it over the weekend it might take a bit longer
but getting back to the contact information, pick whatever country you are in
I am in South Africa and you can basically sign up
no matter where you are in the world, pick a password
Repeat that password, enter
your payment details
and just below the payment information is some purchase information
as you can see the plan we picked earlier, the StartUp package
and the data center and the default period of 12 months is set
three ninety five a month, obviously that doesn't come up to 95.40
because a few optional extras have been
ticked which I am now unticking right now and as you can see
the price falls and lets just untick the last one
scroll back up as you can see three ninety five times 12 is
forty-seven forty and you can pick
where you want your website to be hosted
and I'll just stick with the US right now
and you can pick the period. We're gonna go with the 12 months for this particular
demonstration and Siteground does have a 30-day money-back guarantee
if for some reason you decide you don't wanna go ahead So
lets scroll abit further down and these optional extras, domain privacy feel free to read
more about that
if you want premium support tick there if you want a basic backup service
or hack alert monitoring, decide
to click those. Click that you've read all the
terms and conditions and click submit order.
So, Hopefully your payment details are in order and you will be
redirected to this page and lets just let it load
quickly and thats done just click
proceed to customer area and just select the first option
for a quick Wordpress install, click proceed
and simply pick
a username and a password you want
for your website and I already have
some details I want to use you can pick whatever you want
just make sure your password is nice
& Long and something that's not easy to guess
so lets just add the username I want
as i've said, feel free to add whatever you want and as you'll notice
I have blocked out the admin email section on
top and that's simply because I had blocked it out when I initially
signed up for Hosting
and once again if you do have any questions please feel free to send them to Mitch
business 82 at Gmail dot com, so,
we've entered all those details and simply click
submit
and there we go, congratulations, you have competed the account setup and just
highlight those details over there
control C to copy them and paste them somewhere where you can easily find them
and there we go, those are your login details
for your website and what Im highlighting is
the login section for the backend of your Wordpress website
and i've copied that and I'm going to paste that in the address bar
hit enter and there we go
that is the login screen for your Word
press website.
So, lets log into our brand new website
which is actually live on the internet right now
and lets just use the username
I've copied that and Control V
to paste it and lets take the password
you can always change these details once you login
Lets just paste that password click remember me
and lets log in and
we are taken to the dashboard this is
customization central station
for your website and I've just highlighted
blog, right clicked and you can actually see our
website is live on the Internet and this is what it looks like by
default. If you type in your web address
dot com or whatever extension you picked this is what your website will
look like, so back to the dashboard
and let's change
the theme of our website the theme determines the
look and the layout for your website and as you can see there is a lot of themes you can
pick
I'm going to click add new and we are going to use
the Divi Theme and I'm gonna show you how to get the Divi Theme
for free
and this link is in the description section
below the video simply click it or
copy and paste it into your browser and you will be taken to one of my website
simply click the blue download bar
make sure you save the file to somewhere you can easily find it on your computer
click OK and
That is downloading to my desktop and simply click browse
to find that file and
all you have to do
is double click the file and
install now and that will
upload the file to your website
and you do not have to do anything
once you download that file in terms of unzipping it or anything like that
simply follow the instructions and there we go, its installed
and simply activate the theme and there we go Divi
is active on our website and let's visit the website
and
lets see what it looks like and there we go that initial
default theme has now changed to show
the Divi default theme and
back to our dashboard and
we are going to add some pages to our website
you can add as many pages as you want for this
tutorial I'm just gonna add three with the first being
our home page so type homepage there
Click publish and
that home page is actually published to the internet
let's a add second page to the website pages
add new, lets call this a
contact page and publish that page
you can name the pages whatever you want to name them.
and lets just add one more page
and this is
an about page and simply click
publish and we now have three pages that are
live on our website, so, lets see what our website looks like
About,
contact, home and we really don't want that uncatergorized that came default
with our installations, so we are going to get rid of that
and completely customized that navigation bar
So to do that we are going to scroll down to appearance
scroll down to menus
click on menus and
we are going to name our navigation bar
Primary Nav Bar, you can name it
whatever you want click create menu
and add our three pages we created
to the primary navigation bar add to menu
there we go, those three pages are on our navigation bar
going back to our page that's what the bar looks like
and we actually want to rearrange where all that appears and get rid of uncategorized and a PS and
so back
here lets just drag and drop home above there
contact above about and
click on primary navigation to make this navigation bar our primary
menu click save menu and lets see what our site looks like
F5 on my keyboard to refresh the page and there we go
that is our navigation bar
lets go back to our dashboard and in the dashboard, lets just change
a couple of settings very quickly, I want to get rid of that section that says my blog
So Im going to click on settings and change the site
title from my blog and just noticed it change in the top left hand corner of
the screen
to Amazing, lets
add a tag line to the website WP Fast
and we are going to scroll down
and just save those settings
and those settings have been saved. Lets
scroll down to Reading, click on that
and change Wordpress from a traditional default blogging platform to
a website let's make our home page
the front page of the website and lets scroll down
click save and
another setting we are going to change is permalinks
right over there, Click on that and this basically changes the
format that your website address and all its related pages appear
in and we are going to change it from its current structure
to the post name
structure and let me just show you on the website what our website currently looks
like
and if you look at the browser bar you can see Index dot php
is probably not something you want
in your address so let's just change that
I've clicked that post setting
click Save and if we go back to our
website you can see that
index dot PHP has disappeared from the address
and lets just close that
and I'm just going to set it back to what it originally was since this is just
a demo site
so I'm going to put the index dot php back in there but
I would recommend that you leave that out. Simply click save
and lets make
just couple more changes to the website
we've already done that, lets scroll up to
posts and lets delete the default posts that came
with wordpress just tick the default post
and let me just show you,that is what we are going to get rid of
and just click trash and it has moved to trash and
you can always get that back by clicking there if you ever do want it again
and
lets click on pages and
let's begin to add content to our home page
so, I've clicked home and we are going to use the
Divi page builder that little section over there
to build up our website our home page
I've just hit F5 to Refresh our home page that's what it currently looks like
and
if we click contact that's what our contact page looks like, completely blank
going back to home click on our dashboard
and click on use page builder and as you can see
that has popped up and we are going to click load layout
and we are going to use a predefined layout
that Divi sets up for us, so we've clicked that
and you can see some content has been added click Update
and lets see what our website looks like
Hit F5 on the keyboard to refresh the page
and as you can see, we have a predefined
layout loaded on our home page
and you do not have to use the predefined layout
you can build a webpage up from scratch
if you want to, lets go back to the dashboard
and lets add some content
to the home page, Im going to click on those 3 little bars
click on those 3 bars and
lets change some of the text that appears in our first slide
and
I want when someone clicks on that
enter button to be taken to our about page, I'm going to copy the
link of our about page, copy link location
go back to our dashboard and
copy that link into that section
where you place your url, Im going to upload an image
I've already got a couple of images saved on my desktop
if you want some really awesome, free high-quality images
go to a website called pixabay dot com
and I've just uploaded an image from my desktop
I'm going to set that as a background I'm going to click
save, save again and
updated. Lets look at our
website with those changes I've hit F5 to refresh the page
and there you can see that image and the text on top of it.
if I click about us, its takes us to
our about page. Lets go back to the homepage
and
we are going to do a few more edits
to that slide, so click those 3 bars
and lets click those 3 bars
We are going to remove some of the random placeholder text
and I'm just going to highlight that
delete it and type some
random text click save
lets add a new side and I'm
going to type in some text contact us
contact
and I want people when they click on the button to be taken to our contact
page so
let's get the link for our contact page right click on contact
copy link location and
paste our contact page url
lets upload an image upload files
select,I'm going to pick another random image
and Im going to click set as background
click Save
save again
update and
lets see what our page looks like now and
this is what it looked like before the changes were made, hit F5 to refresh the
screen
as you can see the text has changed and a second slide
has been added to our page, if we click that
Button, it will take us to our contact page which is currently
blank, so lets go back to our home page and
what we are going to do now is actually change the background
behind this slider and to do that
we are going to go back to our dashboard and this blue bar
basically controls all the content that's
within it which currently is just our slide/slider
and as you can see, you can add a background video
behind the Slider and you can add
a background-image: and just for this tutorial we are just going to change the
background color
to grey
and just click save, click update
and lets see our page
hit F5 to refresh the
page and as you can see a grey background has been
added behind our Slider
and if we scroll down, we have something called a full width
header and below the full width header, we have something called
blurbs, 4 of them. Going back into our dashboard
below our slider, a full width header and 4 blurbs
and below the four blurbs we have something called a
call to action. If we scroll down our page
that is what the call to action looks like. So lets go back into
our dashboard and I actually want to show
you, you can add additional sections to
predefined layouts and you can set how many columns you want
within these sections, as you can see, there is quite a
lot of different column layouts that you can pick from
and for this video
lets just pick a 2 third, 1 third column
click insert and you can insert various
modules to
a particular column and there are quite a lot of them over here that you can pick
from
there is in the playlist video I mentioned earlier, detailed information
on how to use these modules and we are just going to use a
video module
so, lets find a video
on YouTube to add to our video module
and you simply need to get the address of the video
that you want to add to your website
lets just find one random video, lets take this
Taylor Swift video click on it and get
the link of that video, Control C
to copy that link and Control V to
paste the link, save and next to the video
lets perhaps add an image
Click on that, upload an image
lets use one that we already uploaded, click on that
set as image, click save, click update
and just
hit F5 to
refresh the page and there you can see below
a full width header, we have added a video, and next to the video,
an image. Lets go back to the dashboard
and lets say we want to add
another section. Click add row
click insert columns. Lets make it a full
width section, lets add another video
lets actually use the same video
click save and
lets say, lets add an image beneath the video and
you can actually just click insert
module, Rather, lets add a row instead
insert column, lets go with another
full width column and
using the drag and drop
we've just recreated that same
image and just dragged and dropped it
into that new section, clicked update, hit F5
and the video,
image and below that, full width video
and full width image. It is as simple as that
and let me quickly show you how to add some content
to one of the blurbs. Its very intuitive
simply click those 3 bars
and lets change that text and
I'm just going to copy the location of our contact page
and paste that there and I want that to open
in a new tab if someone clicks that and lets
change the icon of that particular blurb
and lets pick that, click save
let's change the color of that icon before we click save, click save,
update
and
if we hit F5 to refresh the page on my keyboard
and those are the changes that have taken place to that blurb
and you can do that for all the other blurbs
It is very easy to add new content
to your webpage and i've showed you the basics of how to
use predefined layouts, I've showed you how to
add new sections to existing predefined layouts
and adjust the sizing and the positioning of those sections
I've showed you how to add modules
and I didn't have time to go into all the individual modules but the process
is pretty much the same and its very intuitive
but in the event that you do get stuck
click on the third link titled Divi
playlist in the description section below this video
this playlist has short videos
on using each and every single
module and detailed information on
adding content, creating and rearranging sections
using the page builder and as mentioned this
is very intuitive, there is nothing complicated
in what I've showed you but just in case
there is a detailed reference guide on using Divi
and it's available in the form of the playlist
I talked about in the first
five minutes of this video
and with that
said, lets continue adding content to some of our other pages
Click on all pages and lets
add content to our contact page and just click on contact page
and we can decide
to use the page builder once again
and we can actually
build up a contact page from scratch using
different layouts, or in this case we are going to use a
predefined layout once again and
there is a very nice contact
page predefined layout all ready to go
just load that and it comes with a full width map,
contact form and text. Lets update that
and
lets visit our contact page
and see what it currently looks like and there we go, we have a map
and we have a contact form
and some text to the right of the contact form
lets scroll down and lets
add content to the map and you just need to type in
the address of your business, if you want that to be included on the map
I am in Johannesburg South Africa and just click find
and it will find that on the map you can type in
a specific address and that will be pinpointed on the map as well
and lets just click save
and you need to do that a second time
over here, I've just pasted that, find
and it's been pinpointed on the map
Click save and
contact form, do you want a captcha to display or you don't want it to
display? Lets click Display captcha
and enter the email where you want the information entered on the contact form
to go, so, I'm just going to leave this blank
for now because this is simply a demonstration
and you can type in a title for your contact form
click save
and you can
edit this text if you want and there is just a lot of placeholders there
you just replace that with whatever you want and lets set a background for
this particular section, lets change the color to red.
and scroll down
click Save
and you can actually just
drag and drop the positioning of these
various sections and lets put the full width map below
the contact form, put the text to the left of the contact form
and lets fit the
contact form in there. Its not going to look great
but its just a demonstration of how you can easily drag
and drop information around, so I've just hit F5
and this is what it currently looks like, doesn't look fantastic but you can
play around to get the colors
and the sizing correct
so we are back in the dashboard
lets click all pages and lets
click about and lets
add content to the about
page. Lets use the page builder, load layout
if we scroll down, there is a
predefined layout for an about page
click load and
that's what it looks like
click update and
lets see what the about page looks like and
this is how it looks like before we add any content to it
and
all this can easily be edited
using the information or same
steps and procedures I've showed you with the previous pages
and simply click those 3 bars to edit the
information in this slider and the same goes with the
text, Simply
delete what you don't want over there and the same goes with the
bar counters next to the text and what we are going to do now
is add a logo to our website. To do that, scroll down to
appearances
click on Divi Theme options and lets
look at our page, that is where your logo will appear on
your website. Lets go back to the dashboard
appearances, Divi Theme options under logo
just simply upload an image and I've already got
one that I want to use. Don't be too concerned about the size
the Divi Theme will automatically resize
whatever image you upload, Click set as logo
and we are going to add something called a Favicon
lets use the exact same image, set as favicon
and that is where a favicon usually appears
on someone's browser and there is a whole bunch of options you can
mess around with if you really want to
and for now we are
just going to include some icons
in our footer. I just want a Facebook icon
included in the footer of my website
and disable everything else
and under Facebook profile URL simply
type whatever the URL of your Facebook page
might be and lets scroll down
Click save and let's see what
our website looks like, hit F5 to refresh the
page and there is our logo and
there is our Favicon
and if we scroll down
there is that Facebook icon and I
disabled all the other social icons. Lets quickly get rid of this
that comes standard with the
siteground install to do that simply scroll up there,
click customize and there is a whole bunch of
options over here where you can customize quite a few things on your website
Lets click widgets and
click on footer area one and
lets get rid of all this default stuff that
site ground installed on our site
simply click remove and
if we scroll
down our page you will find that
all that footer stuff has disappeared and
using this customization option you can actually edit
quite alot of features on your website and lets edit
the background color of our navigation bar
and lets go with black
and there we go and
those links don't look too great on a black background, so lets change them
to white and that looks
much better and
lets just
minimize that and you can actually create
a vertical navigation bar if you want and
lets just switch that back to what it was before
and I prefer that and
once you're happy with your changes simply click save
and publish and
close. If we click our homepage
you can see all those changes, the icon, the navigation bar
changes have taken affect across the entire site.
Let me very quickly
talk about something called Plugins on wordpress
A plugin allows you to add additional functionality
to a wordpress site and to add a plugin simply Scroll down
plugins and you can click Install
plugins and you can actually see plugins that are
actually installed on your website and you can find
a plugin that adds just about any type of functionality
you might want to add to your website. So lets
search for a plugin
that will allow us to view visitor statistics
on our website, So simply type in statistics over there
and enter to search
That is a great plugin with alot of people that have installed it
That is not such a great plugin
so lets go with the one with a lot of active installs
click Install Now and
the plugin has been installed and simply click
activate plugin and the statistics
plugin has been installed on our website
and as you can see, there it is and if you
look on the left hand side section of the
dashboard that statistics section has been added
and you can browse through alot of different
items with regards to statistics on your website
and with that said, I have basically covered
all the fundamentals that you will need
to build a website up from scratch and
if you do need any further help with regards to adding content
and using the page builder, remember there is
a reference guide in the form of the playlist video I mentioned
at the start of this video and
if you have any issues, problems
need abit of help, please feel free to send an email to me
and I'll help you as soon as possible
good luck with building your websites!