Sample Lesson From MODULE Your Website Design, Layout, and ... · Sample Lesson From MODULE "Your Website Design, Layout, and Sidebars"
Post on 21-Jun-2020
4 Views
Preview:
Transcript
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
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 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 Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 4 | P a g e
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.
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 5 | P a g e
Figure 4: Another WordPress Home "Page"
Figure 5: A WordPress “Squeeze” Page
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 6 | P a g e
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.
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 7 | P a g e
PART : What is the “Blog” Part of WordPress
Figure 7: The “Blog” is a Collection of “Posts”
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 8 | P a g e
Figure 8: The Blog Posts Can Have a "Read More" Link
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 9 | P a g e
Figure 9That Then Goes to the Full Post
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 10 | P a g e
“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!
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 11 | P a g e
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
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 12 | P a g e
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!
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 13 | P a g e
Figure 16: Example Website with a Red Version of the Theme
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 14 | P a g e
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!
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 15 | P a g e
PART : Your Website Design, Layout, and Sidebars
Figure 18: A Typical WordPress Website Layout Example
WordPress sites generally have:
Headers
Navigation
Content
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. 16 | P a g e
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.
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 17 | P a g e
Different WordPress Layouts
Figure 20: Right Sidebar Layout
Figure 21: Left Sidebar Layout
Figure 22: Center Column Layout
Figure 23: Page Menu Above
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 18 | P a g e
Figure 24: "Sales Letter" Layout
Figure 25: No Top Menu Layout
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 19 | P a g e
Figure 26: By Default Most Themes Display the Blog on the Homepage
Figure 27: Layout for Above Website
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 20 | 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
Figure 28: Fixed Homepage in the Theme
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 21 | P a g e
Figure 29: Another "Fixed Homepage" Theme Design
Theme is the LifeStyle Theme by Studio Press
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 22 | 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 Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 23 | P a g e
Figure 31: A Customized 2010 Theme with the Weaver Theme
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 24 | P a g e
Page Template Examples
Figure 32: The Default Page Template for the "Flexx" Theme
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 25 | P a g e
Figure 33: Same Theme, Same Template, Different Color Scheme and Content
This “Premium” Theme comes from FlexxQueen.com
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 26 | P a g e
Another Page Template Example
Figure 34: A Page "Template" with No 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. 27 | 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 35: Header Image vs. Image in a Post
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 28 | P a g e
Figure 36: Header Image vs. Sidebar Image
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 29 | 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 Theme Design for Your Website
Figure 37: Go to the WordPress.org Theme Directory
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 30 | P a g e
Figure 38: Go to a Theme Website like iThemesQueen.com
Figure 39: Go to a Theme Website like StudioPressQueen.com
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 31 | P a g e
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
“Your Website Design, Layout, and Sidebars” Sample Lesson From Module 2
(v7) The Website Creation Workshop Copyright 2010-2012 Christina Hills. All rights reserved. 32 | P a g e
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
top related