sample lesson from module w your website design, layout...

Sample Lesson From MODULE w

"Your Website Design, Layout, and Sidebars"

“Your Website Design, Layout, and Sidebars” Module 2

(v2) The Website Creation Workshop Copyright 2010 Christina Hills. All rights reserved.

2 | P a g e

TABLE OF CONTENTS

PART q: __________________________________________________ 3 Using “Pages” vs. “Posts” in WordPress

PART w: Your WordPress “Theme” Design _______________________________________________________ 9

PART e: Your Website Design, Layout, and Sidebars ______________________________________________ 13

PART t: Your "Header Graphic" vs. "An Image in the Page/Post" vs. An "Image in the Sidebar" ____________ 24

PART y: Finding a "Theme" for Your Website ____________________________________________________ 26

PART u: Action Steps _______________________________________________________________________ 29



3 | P a g e

PART q: Using “Pages” vs. “Posts” in WordPress

First Let’s Look at the Outside and Inside of WordPress

Outside What the World Sees

Inside What YOU see

"Admin Dashboard"



4 | P a g e

A WordPress "Page"

A WordPress "Post"



5 | P a g e

What is the “Blog” Part of WordPress?

The “Blog” is a Collection of “Posts”



6 | P a g e

The Blog Posts Can Have a "Read More" Link



7 | P a g e

That then goes to the Full Post



8 | P a g e

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

RSS Feed Icon

Google Feed Reader

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



9 | P a g e

PART w: Your WordPress “Theme” Design

What is a “Theme” ?

No Design With Design

No Design With Design



10 | P a g e

See How a Theme Can Look Very Different with Customization

A Business Style Theme



11 | P a g e

Example Website with a Red Version of the Theme



12 | P a g e

Same Theme, Different Color Scheme

You don’t need to hire a theme designer to customize your theme!



13 | P a g e

PART e: Your Website Design, Layout, and Sidebars

A Typical WordPress Layout Example



14 | P a g e

The "Sidebars" are Also Knows as "Widgets"

WordPress Sidebar Widgets on the Right



15 | P a g e

Different WordPress Layouts

Right Sidebar Layout Left Sidebar Layout

Center Column Layout "Page Menu Above the Header" Layout



16 | P a g e

"Page Menu Below the Header" Layout No Top Pages Layout

"Sales Letter" Layout



17 | P a g e

By Default Most Themes Display the Blog on the Homepage

Layout for Above Website



18 | P a g e

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

This is a Design Feature of that Theme

Fixed Homepage in the Theme



19 | P a g e

Another "Fixed Homepage" Theme Design

This Theme is the TheLifestyleTheme.com Theme by Studio Press

http://www.thelifestyletheme.com/



20 | P a g e

PART r : 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 'contact us' or a ‘sitemap’ template.

The Default "Kubrick" Theme



21 | P a g e

An Example of a Free Theme: "Pixeled"



22 | P a g e

Page Template Examples

The Default Page Template for the "Flexx" Theme

This “Premium” Theme comes from FlexxQueen.com

http://www.flexxqueen.com/



23 | P a g e

A Page "Template" with No Sidebars



24 | P a g e

PART t: 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

Header Image vs. Image in a Post



25 | P a g e

Header Image vs. Sidebar Image



26 | P a g e

PART y: 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 Or you can do a Google Search

Ways to Find a Theme Design for Your Website

Go to the WordPress.org Theme Directory

http://wordpress.org/



27 | P a g e

Go to a Theme Website like iThemesQueen.com

Go to a Theme Website like StudioPressQueen.com

http://www.ithemesqueen.com/

https://www.e-junkie.com/ecom/gb.php?cl=10214&c=ib&aff=51247



28 | P a g e

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



29 | P a g e

PART u: Action Steps

Start planning your site. Decide the layout you are interested. Look around the internet and see what other websites appeal to you. Get out pen and paper and scribble out how you want YOUR site to look. For more information about Christina’s next Workshop follow the link below

http://www.WebsiteCreationWorkshop.com/register

http://www.websitecreationworkshop.com/register

sample lesson from module w your website design, layout...

Documents