Sample Lesson From MODULE Your Website Design, Layout, and ... · Sample Lesson From MODULE "Your Website Design, Layout, and Sidebars"

Sample Lesson From MODULE

"Your Website Design, Layout, and Sidebars"

“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2

(v7) The Website Creation Workshop Copyright 2010-2012 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 _________________________________________ 7

PART : Your WordPress “Theme” Design ___________________________________________ 11

PART : Your Website Design, Layout, and Sidebars ___________________________________ 15

PART : The Difference Between a "Theme" and a "Template" ___________________________ 22

PART : Your "Header Graphic" vs. "An Image in the Page/Post" vs. An "Image in the Sidebar" _ 27

PART : Finding a "Theme" for Your Website _________________________________________ 29

PART : Action Steps ____________________________________________________________ 32



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"



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.



Figure 4: Another WordPress Home "Page"

Figure 5: A WordPress “Squeeze” Page



Figure 6: A WordPress “Post”

A WordPress Post has a Date and an Author associated with it. It also gets sent out on the blog in the RSS Feed. So think of ‘Posts’ as part of your blog/articles/newsletters And ‘Pages’ as pages that won’t change often.



PART : What is the “Blog” Part of WordPress

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



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



Figure 9That Then Goes to the Full Post



“Posts” go out on the RSS Feed RSS Stands for ‘Really Simple Syndication’

RSS Feed Icon

Figure 10: Google Feed Reader picking up Blog Posts

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. Only the Posts go out on the Feed, Pages do not.

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!



PART : Your WordPress “Theme” Design

What is a “Theme”?

Figure 11: Default Twenty-Ten Design

Figure 12: With Design and Content

Figure 13: With Design and Content

Figure 14: With Design



See How a Theme Can Look Very Different with Customization

Figure 15: 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!



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



Figure 17: Same Theme, Different Color Scheme

You don’t need to hire a theme designer to customize your theme! You can make your site unique to you!



PART : Your Website Design, Layout, and Sidebars

Figure 18: A Typical WordPress Website Layout Example

WordPress sites generally have:

Headers

Navigation

Content

Sidebars



The "Sidebars" are Also Knows as "Widgets"

Figure 19: 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 20: Right Sidebar Layout

Figure 21: Left Sidebar Layout

Figure 22: Center Column Layout

Figure 23: Page Menu Above



Figure 24: "Sales Letter" Layout

Figure 25: No Top Menu Layout



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

Figure 27: Layout for Above Website



Some Themes Have a Fixed Home Page That is Part of the Theme Design

This is a Design Feature of That Theme

Figure 28: Fixed Homepage in the Theme



Figure 29: Another "Fixed Homepage" Theme Design

Theme is the LifeStyle Theme by Studio Press

http://www.studiopressqueen.com/



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



Figure 31: A Customized 2010 Theme with the Weaver Theme



Page Template Examples

Figure 32: The Default Page Template for the "Flexx" Theme

http://www.flexxqueen.com/



Figure 33: Same Theme, Same Template, Different Color Scheme and Content

This “Premium” Theme comes from FlexxQueen.com

http://www.flexxqueen.com/



Another Page Template Example

Figure 34: A Page "Template" with No Sidebars



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 35: Header Image vs. Image in a Post



Figure 36: Header Image vs. Sidebar Image



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 Theme Design for Your Website

Figure 37: Go to the WordPress.org Theme Directory

http://www.ithemesqueen.com/

http://www.studiopressqueen.com/

http://wordpress.org/



Figure 38: Go to a Theme Website like iThemesQueen.com

Figure 39: Go to a Theme Website like StudioPressQueen.com

http://www.ithemesqueen.com/

https://www.studiopressqueen.com/



Figure 40: 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 : Action Steps

Start planning your site! 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. Now for more information about the next Website Creation Workshop, go to:

http://www.WebsiteCreationWorkshop.com/register

http://www.websitecreationworkshop.com/register

Documents

Sample Lesson From MODULE Your Website Design, Layout, and ... · Sample Lesson From MODULE "Your Website Design, Layout, and Sidebars"