Website Creation Workshop with Christina Hills€¦ · Sample Lesson From the Website Creation...
Transcript of Website Creation Workshop with Christina Hills€¦ · Sample Lesson From the Website Creation...
Sample Lesson From the Website Creation Workshop
"Your Website Design, Layout, and Sidebars"
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 2 | P a g e
TABLE OF CONTENTS
PART : Using “Pages” vs. “Posts” in WordPress _________________________________________ 3
PART : What is the “Blog” Part of WordPress __________________________________________ 8
PART : Your Website Design, Layout, and Sidebars _____________________________________ 11
PART : Your WordPress “Theme” Design _____________________________________________ 17
PART : The Difference between a "Theme" and a "Template" ____________________________ 20
PART : Your "Header Graphic" vs. "An Image in the Page/Post" vs. an "Image in the Sidebar" ___ 23
PART : Finding a "Theme" for Your Website __________________________________________ 24
PART : Create Your WordPress Site NOW! ____________________________________________ 28
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 3 | P a g e
PART : Using “Pages” vs. “Posts” in WordPress
Before we talk about “Pages” vs. “Posts”, Let’s Look at the Outside and Inside of WordPress
Figure 1: Outside
What the WORLD Sees
Figure 2: Inside What YOU see
"Admin Dashboard"
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 4 | P a g e
What is a “Page”?
Figure 3: A WordPress “About Us” Page
A WordPress Page generally has “Static Content”, content that you don’t normally change often.
Such as an “About Us” page or a “Contact Us” page.
WordPress “Pages” can have different templates, for different layouts (more on this later in this document)
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 5 | P a g e
Figure 4: A WordPress Home "Page"
Figure 5: A WordPress “Squeeze” Page
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 6 | P a g e
Figure 6: A WordPress “Sales Letter” Page
See Example Here http://www.WebsiteCreationWorkshop.com/register
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 7 | P a g e
What is a “Post”?
Figure 7: A WordPress “Post”
A WordPress “Post” has a Date and an Author associated with it. It is part of the “Blog”. People think of the “Blog” as their newsletter, or their articles, or their tips. You don’t have to be a ‘blogger’ to use WordPress!
Think of “Posts” as your articles and “Pages” as the part of your site that gives out information.
Posts are the blog part of your WordPress website. You can choose not to use it if you don't want a blog/newsletter/recent news/diary/etc.
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 8 | P a g e
PART : What is the “Blog” Part of WordPress
Figure 8: The “Blog” is a Collection of “Posts”
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 9 | P a g e
Figure 9: The Blog Posts Can Have a "Read More" Link
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 10 | P a g e
Figure 10: That Then Goes to the Full Post
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 11 | P a g e
PART : Your Website Design, Layout, and Sidebars
Figure 11: A Typical WordPress Website Layout Example
WordPress sites generally have:
Headers
Navigation
Content
Sidebars
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 12 | P a g e
The "Sidebars" are Also Knows as "Widgets"
Figure 12: WordPress Sidebar Widgets on the Right
Sidebar widgets can be anywhere on the site.
Although they are called ‘sidebars’ they can be on the bottom in the footer area and on the top under the header area.
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 13 | P a g e
Different WordPress Layouts
Figure 13: Right Sidebar Layout
Figure 14: Left Sidebar Layout
Figure 15: Center Column Layout
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 14 | P a g e
Figure 16: Page Menu Above
Figure 17: No Top Menu Layout
Figure 18: "Sales Letter" Layout
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 15 | P a g e
Figure 19: By Default Most Themes Display the Blog on the Homepage
Figure 20: Layout for Above Website
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 16 | P a g e
Some Themes Have a Fixed Home Page Design
Figure 21: Finished Student Site: Fixed Homepage in the Theme
Figure 22: Finished Student Site: Another "Fixed Homepage" Theme Design
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 17 | P a g e
PART : Your WordPress “Theme” Design
What is a “Theme”?
Figure 23: Default Twenty-Ten Design
Figure 24: With Design and Content
Figure 25: With Design and Content
Figure 26: With Design
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 18 | P a g e
See How a Theme Can Look Very Different with Customization
Figure 27: A Business Style Theme
When you first get a WordPress theme it will be empty and a bit plain, but just see what you can do with it in the images below!
You don’t need to hire a theme designer to customize your theme!
You can make your site unique to you!
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 19 | P a g e
Figure 28: Example Website with a Red Version of the Theme
Figure 29: Same Theme, Different Color Scheme
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 20 | P a g e
PART : The Difference between a "Theme" and a "Template"
A Theme is the overall design, look and feel of your WordPress Website. It dictates the colors, fonts, and other design elements of your site.
A Template is a subset of the Theme. Templates apply to Pages and usually have to do with the layout, but can have other functions such as a specific 'contact us' or a ‘sitemap’ template.
Figure 30: The Default "Twenty-Ten" Theme
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 21 | P a g e
Page Template Example
Figure 31: Default Page Template for the Prose Theme
This page template has the content on the left, and the sidebar on the right.
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 22 | P a g e
Another Page Template Example
Figure 32: A Page "Template" with No Sidebars from the Prose Theme
This Page template has no sidebars and just the content in the center
(You can find this theme at: http://www.TheProseTheme.com)
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 23 | P a g e
PART : Your "Header Graphic" vs. an "Image in the Page/Post" vs. an "Image in the Sidebar"
Important distinction between a header graphic that is part of the theme, and an image in your page and post, vs. and image in the sidebar
Figure 33: Header Image vs. Image in a Post
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 24 | P a g e
PART : Finding a "Theme" for Your Website
There are various ways to find a theme.
You can search for free themes at WordPress.org (or inside your dashboard admin)
You can go to a reputable Theme Company such as iThemesQueen.com or StudioPressQueen.com
Or you can do a Google Search
Ways to Find a FREE Theme Design for Your Website
Figure 34: Go to the WordPress.org Theme Directory
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 25 | P a g e
Ways to Find a “PREMIUM” Theme Design for Your Website
Figure 35: Go to a Theme Website like StudioPressQueen.com
Figure 36: Go to a Theme Website like iThemesQueen.com
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 26 | P a g e
Figure 37: Ink Themes: www.TheBestThemes.com/inkthemes
Figure 38: Elegant Themes: http://www.thebestthemes.com/elegantthemes
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 27 | P a g e
BEWARE of Downloading FREE Themes from the Internet
Figure 39: Search Google for a Theme
Use caution when downloading files from the internet. Make sure you trust the site you are downloading from. Look around at the sites and check that they are active sites, and not old stale ones
“Your Website Design, Layout, and Sidebars” Sample WordPress Lesson
(v11) The Website Creation Workshop Copyright 2010-2013 Christina Hills. All rights reserved. 28 | P a g e
PART : Create Your WordPress Site NOW!
No need for a Web Master, Get Going Yourself!
Decide the layout you are interested. Look around the internet and see what other websites appeal to you. And save those sites as examples for you to look at and refer to. Don’t wait till you have everything, the process of building your site will help you get clearer on your ideas!
For more information about the Website Creation Workshop, go to:
JOIN ME NOW
http://www.WebsiteCreationWorkshop.com/register