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



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"



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)



Figure 4: A WordPress Home "Page"

Figure 5: A WordPress “Squeeze” Page



Figure 6: A WordPress “Sales Letter” Page

See Example Here http://www.WebsiteCreationWorkshop.com/register

http://www.websitecreationworkshop.com/register



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.



PART : What is the “Blog” Part of WordPress

Figure 8: The “Blog” is a Collection of “Posts”



Figure 9: The Blog Posts Can Have a "Read More" Link



Figure 10: That Then Goes to the Full Post



PART : Your Website Design, Layout, and Sidebars

Figure 11: A Typical WordPress Website Layout Example

WordPress sites generally have:

Headers

Navigation

Content

Sidebars



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.



Different WordPress Layouts

Figure 13: Right Sidebar Layout

Figure 14: Left Sidebar Layout

Figure 15: Center Column Layout



Figure 16: Page Menu Above

Figure 17: No Top Menu Layout

Figure 18: "Sales Letter" Layout



Figure 19: By Default Most Themes Display the Blog on the Homepage

Figure 20: Layout for Above Website



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



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



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!



Figure 28: Example Website with a Red Version of the Theme

Figure 29: Same Theme, Different Color Scheme



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



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.

http://www.theprosetheme.com/



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)





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



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

http://www.ithemesqueen.com/

http://www.studiopressqueen.com/

http://wordpress.org/



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

https://www.studiopressqueen.com/

http://www.ithemesqueen.com/



Figure 37: Ink Themes: www.TheBestThemes.com/inkthemes

Figure 38: Elegant Themes: http://www.thebestthemes.com/elegantthemes

http://www.thebestthemes.com/inkthemes

http://www.thebestthemes.com/elegantthemes



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



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

http://www.websitecreationworkshop.com/register

website creation workshop with christina hills€¦ · sample lesson from the website creation...

Documents