Embed Size (px)
Citation preview
How To Make A WordPress Website Professional Looking & Fast
2
CreateWPSite.com
Contents
A QUICK BACKSTORY ............................................................................................................................................. 3
WEBSITE LAYOUT ................................................................................................................................................... 4
HERE IS HOW THE TEMPLATE LOOKS ON A TABLET (IPAD) ................................................................................ 5
HERE IS HOW THE TEMPLATE LOOKS ON A PHONE (IPHONE 6S PLUS) ............................................................. 6
VIDEO VERSION OF THIS GUIDE ............................................................................................................................ 7
STEP 1 : WEBSITE HOSTING/DOMAIN ................................................................................................................... 8
STEP 2 : HOSTING SETUP / WORDPRESS INSTALLATION .................................................................................... 9
STEP 3 : THEME OPTIONS SETTINGS ................................................................................................................... 13
STEP 4 : POST & PORTFOLIOS SETTINGS ............................................................................................................ 16
CONCLUSION ........................................................................................................................................................ 19
How To Make A WordPress Website Professional Looking & Fast
3
CreateWPSite.com
A Quick Backstory
I wanted to set this guide up because I see a lot of junk when it comes to how to videos and guides. This is going to show you EXACTLY how to make a website using WordPress. When I finally decided to create this, I wanted to make sure the theme I was going to use would be 100% Free but still professional/modern looking.
I also wanted something that looks good on Mobile, Which is important because 4 out of 5 consumers use smartphones to shop. Mobile was the future, Now mobile is now. YouTube Video Version Of This Guide.
How To Make A WordPress Website Professional Looking & Fast
4
CreateWPSite.com
Website Layout
This is the Template we will be using. This is the Virtue Theme
What we are doing exactly is recreating the Demo Version of the Free WordPress Theme “Virtue” But you will use your own content (Which is basically the images and text you see)
How To Make A WordPress Website Professional Looking & Fast
5
CreateWPSite.com
Here Is How The Template Looks On A Tablet (iPad)
How To Make A WordPress Website Professional Looking & Fast
6
CreateWPSite.com
Here Is How The Template Looks On A Phone (iPhone 6S Plus)
How To Make A WordPress Website Professional Looking & Fast
7
CreateWPSite.com
Video Version Of This Guide
(I wanted to make sure to include the video version of this guide for you to reference)
How To Make A WordPress Website Professional Looking & Fast
8
CreateWPSite.com
Step 1 : Website Hosting/Domain
(Beyond this point if you have anything you don’t understand or you get stuck just go here to watch the video version which will most likely solve your problem)
The first thing you're going to need to do is get website hosting & a domain. This is also something I wanted to make sure to keep as reasonable as possible when it comes to pricing.
You will need to pick out your Web Hosting provider If you don’t know what website hosting is think of it as if you were building a house and before you build the house you have to buy the land to put the house on. Before you can have a website you need somewhere to put it.
Normally when I show examples of how to build a website I use GoDaddy. I use them because it’s only $1 dollar per month, (Which is affordable for anyone) The service is always reliable & You can install wordpress in about 3 clicks.
We are going for simple. Not complicated This is why I use GoDaddy but there are plenty of other Hosting providers out there. (GoDaddy will be used in this guide, If you want to follow along exact stepbystep then go with GoDaddy)
Here Is A List Of Providers With Discounted Links To Save You Money GoDaddy | BlueHost | JustHost | DreamHost | FatCow | HostMonster | Web.com |
Namecheap
How To Make A WordPress Website Professional Looking & Fast
9
CreateWPSite.com
Step 2 : Hosting Setup / WordPress Installation
Now it’s time to set up the actual hosting. Again for this example we're using GoDaddy.
◉ This discount link to GoDaddy will automatically apply a promotional code to get you the $1 hosting & also to get you a free domain which is a $12 savings alone.
◉ After you go the link, this page will come up
◉ Select which plan you would like. For this example we’re choosing the “Basic Plan”
◉ This page will then come up. Select your plan length (12 months for the savings)
How To Make A WordPress Website Professional Looking & Fast
10
CreateWPSite.com
◉ Make sure those 3 boxes are unselected and then click “Continue”
How To Make A WordPress Website Professional Looking & Fast
11
CreateWPSite.com
◉ This page will come up. This is where your going to get your free domain name. Simply pick the website address you would like your website to be called.
For example : If you want to start a Diet & Weight Loss website then maybe you would go with a domain name like “www.DietSecrets.com”
◉ After you choose your domain name, Click “Select & Continue”
◉ This is how your order should look. For just $12 You will have your website for a full year which is a huge steal as you can see the “Total Saved $86.87” Via the discounted link
How To Make A WordPress Website Professional Looking & Fast
12
CreateWPSite.com
◉ After this click “Proceed to Checkout” & Pay for your order
How To Make A WordPress Website Professional Looking & Fast
13
CreateWPSite.com
Step 3 : Theme Options Settings
The first thing we are going to do after we log in is install the website theme.
Go To : Appearance > Themes > Add new > Search "Virtue" Install & Activate Theme
Now we are gonna install a quick plugin
Go To : Plugins > Add New > Search "Virtue" and find the “Virtue / Pinnacle ToolKit” Plugin then click “Install Now” Then click “Activate Plugin”
Now we’re gonna start customizing the Theme.
You're going to see a lot of different settings, Simply follow the directions below and if I don’t mention editing something just leave it how it already is.
First thing is to upload the logo. Find an image that matches the dimensions of the orange highlighted text below
Go To : Appearance > Theme Options > Main Settings > Upload Logo
◉ The size of the demo banner is 275x44
◉ If you want to upload the 2x times the sizes for retina screens you can at 550x87 (All Banner Sizes will be highlighted in orange)
How To Make A WordPress Website Professional Looking & Fast
14
CreateWPSite.com
Next we are going to install the 3 slider images.
Go To : Appearance > Theme Options > Home Slider Settings First adjust “Choose A Home Image Slider”
Select "flex slider" After that do the following, below.
◉ Upload 3 images for the slider Size 1170x450
◉ Adjust "slider max height" to 450
Next were gonna adjust some layout settings
Go To : Appearance > Theme Options > Home Layout
◉ Put "Page Title" & "Page Content" under the Disabled Menu
◉ Add text "Latest From The Blog" under "Home Blog Title"
◉ Add text "Featured Projects" to "Home Portfolio Carousel Settings"
We’re now going to add some icon images that are located at the bottom of the site.
How To Make A WordPress Website Professional Looking & Fast
15
CreateWPSite.com
Go To : Appearance > Theme Options > Home Layout > Scroll down to the “Home Icon” Section and add the 4 following icons.
◉ iconpencil
◉ Title "Clean Design"
◉ iconmobilephone
◉ Title "Responsive"
◉ iconshoppingcart
◉ Title "Ecommerce"
◉ icongears
◉ Title "Tons of Options"
Then change the columns in each row to 4 rather than 3
The next thing we need to do is edit some post settings
Go To : Appearance > Theme Options > Page/Post Settings
◉ Allow comments on portfolio posts "turn on"
◉ Show comments closed text "turn on"
◉ Then scroll down to Blog Post Defaults > blog post summary default change to "text” Then click “Save Changes”
This will be the last of the theme options settings
Go To : Appearance > Theme Options > Misc Settings
◉ Create custom sliders > add "sidebar1"
How To Make A WordPress Website Professional Looking & Fast
16
CreateWPSite.com
Step 4 : Post & Portfolios Settings
The first thing we are going to do is add some categories
Go To : Posts > Categories Add the following categories
◉ Adventure
◉ Photos
◉ Video Post
The next thing will be to add some content so we're gonna create 4 posts.
Go To : Posts > Add New
Create 4 Blog Posts with a title and some content and set a featured image for each post with a image size of 270x270
How To Make A WordPress Website Professional Looking & Fast
17
CreateWPSite.com
Now we’re gonna add 3 new portfolios (Think of it just like adding a blog post)
◉ Add 3 portfolios each with a featured image with a size of 366x366
We’re now gonna add a widget real quick.
Go To : Appearance > Widgets
◉ Add the "Virtue: Recent Posts" to the bottom of the widget list and set it to 5 posts
How To Make A WordPress Website Professional Looking & Fast
18
CreateWPSite.com
This is the final step in setting up this demo. We’re gonna add pages to the Menu.
Go To : Appearance > Menus > Create Menu name it (Menu1)
Add the following pages. (If you don't feel you need some of the pages below then don’t add them, Just add the pages you need for your website)
◉ Home | Portfolio | Features | Blog | Shop | Download
How To Make A WordPress Website Professional Looking & Fast
19
CreateWPSite.com
Conclusion
I want to touch on a few last things again. This guide is just to show you how the site is actually set up. All you have to do is fill it with your own content. You have the sizes for each image, labeled in orange.
If you need help with the sizes and the actual images. Here are 3 things I suggest.
1. If you have the ability to pay $5 you can get them made for you very easy here on fiverr.
2. Look for images on google and if you don't know how to resize something (which i will explain next) you can just look up the exact size you need.
3. Or you can do this. If you find an image you like but it's the wrong size you can simply photoshop the image and crop it to fit the correct specification.
If you do not have photoshop you can even use paint.
Below is an example of how you can do this with a larger image you find. You will see the size of the image i got is 1170x450 which is the size of one of the 3 slider images we install in the beginning of this guide.
How To Make A WordPress Website Professional Looking & Fast
20
CreateWPSite.com
I’m hoping one of the main reasons people like this guide is because, Whether they want a professional looking or a simple and easy to create website.
They get both.
Even if you don’t need some elaborate website, Maybe something just something quick to set up so you can advertise your business so people can contact you or you want the full complete website. Either way you're covered and that's what makes this guide so versatile.
So at least add the necessary images with related visuals to your business or idea.
Now more than ever if someone lands on your website and it looks unprofessional, difficult to navigate and difficult to understand what the purpose of the site actually is, they're just going to leave. That being the reason I picked this theme because it looks so professional and it's free and i’m able to show you how to set it up in literally minutes.
This is something you will be able to show friends/family/clients/strangers whoever and they will actually think you know what you're doing. Which always makes things easier.
How To Make A WordPress Website Professional Looking & Fast
21
CreateWPSite.com
If you don’t want to put a lot into it at least include in your first slider image, Your business and number or however you want people to contact you. The sophistication of the website layout will make up for the lack of content.
That’s all guys. If you have any questions send me an email at
