Design Fundamentals From the Website Creation Workshop

"Your Website Design, Layout, and Sidebars"

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

TABLE OF CONTENTS PART : Your Website Design, Layout, and Sidebars _______________________________________ 3 PART : The Difference Between “Pages” vs. “Posts” ______________________________________ 8 PART : What is the “Blog” Part of WordPress __________________________________________ 12 PART : Your WordPress “Theme” Design______________________________________________ 15 PART : The Difference between a "Theme" and a "Template" _____________________________ 19 PART : Your "Header Graphic" vs. an "Image in the Page/Post" vs. an "Image in the Sidebar" ____ 22 PART : Finding a "Theme" for Your Website ___________________________________________ 23 PART : Create Your WordPress Site NOW! ____________________________________________ 28

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 2|Page

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

PART : Your Website Design, Layout, and Sidebars

Figure 1: A Typical WordPress Website Layout Example WordPress sites generally have: 

Headers



Navigation



Content



Sidebars

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 3|Page

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

The "Sidebars" are Also Knows as "Widgets"

Figure 2: WordPress Sidebar Widgets on the Right

Figure 3: OptIn Box in Header Widget (v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 4|Page

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

Figure 4: Various Items in the Sidebar

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.

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 5|Page

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

Different WordPress Layouts

Figure 5: Right Sidebar Layout

Figure 6: Left Sidebar Layout

Figure 7: Center Column Layout

Figure 8: "Sales Letter" Layout

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 6|Page

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

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

Figure 10: Layout for Above Website

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 7|Page

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

PART : The Difference Between “Pages” vs. “Posts” What is a “Page”?

Figure 11: 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)

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 8|Page

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

Figure 12: A WordPress Home "Page"

Figure 13: A WordPress “Squeeze” Page

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 9|Page

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

Figure 14: A WordPress “Sales Letter” Page See Example Here http://www.WebsiteCreationWorkshop.com/register

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 10 | P a g e

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

What is a “Post”?

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

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 11 | P a g e

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

PART : What is the “Blog” Part of WordPress

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

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 12 | P a g e

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

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

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 13 | P a g e

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

Figure 18: That Then Goes to the Full Post

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 14 | P a g e

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

PART : Your WordPress “Theme” Design What is a “Theme”? The theme is the “look and feel” of your website. It’s your color scheme and the framework within where your site lives. It sets the tone of your website to your visitors

Figure 19: Twenty-Ten Theme Design

Figure 20: With Design and Content

Figure 22: With Design and Content Figure 21: With Design and Content

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 15 | P a g e

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

Some Themes Have a Fixed Home Page Design

Figure 23: Finished Student Site: Fixed Homepage in the Theme

Figure 24: Finished Student Site: Another "Fixed Homepage" Theme Design

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 16 | P a g e

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

See How a Theme Can Look Very Different with Customization

Figure 25: The Prose 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! We are using http://www.TheProseTheme.com in this example and on our blog: http://www.WebsiteCreationWorkshop.com/blog

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 17 | P a g e

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

Figure 26: Example Website with the Prose Theme

Figure 27: Same Theme, Different Customization Scheme

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 18 | P a g e

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

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 28: The Default "Twenty-Ten" Theme

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 19 | P a g e

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

Page Template Example

Figure 29: Default Page Template for the Prose Theme This page template has the content on the left, and the sidebar on the right.

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 20 | P a g e

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

Another Page Template Example

Figure 30: 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)

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 21 | P a g e

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

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

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 22 | P a g e

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

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, but…

BEWARE of Downloading FREE Themes from the Internet

Figure 32: 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

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 23 | P a g e

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

How to Find a FREE Theme Design for Your Website

Figure 33: Go to the WordPress.org Theme Directory

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 24 | P a g e

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

How to Find a “PREMIUM” Theme Design for Your Website

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

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

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 25 | P a g e

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

Figure 36: Woo Themes: www.TheBestThemes.com/woothemes

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

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 26 | P a g e

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

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

Figure 39: Student Success Story: HealthyandFitWoman.com

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 27 | P a g e

“Your Website Design, Layout, and Sidebars”

Sample WordPress Lesson

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

(v16) The Website Creation Workshop Copyright 2010-2014 Christina Hills. All rights reserved. 28 | P a g e