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

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

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.

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

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

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

Figure 38: Elegant Themes: 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

Website Creation Workshop with Christina Hills€¦ · Sample Lesson From the Website Creation...

Documents

Transcript of Website Creation Workshop with Christina Hills€¦ · Sample Lesson From the Website Creation...

Simple Website Creation

uCoz: website creation. Chapter 5.

Creation of a Prezi ---> explanationsThe website: //prezi.com

WEBSITE CREATION FOR BUSINESSES AND ORGANIZATIONS · WEBSITE CREATION FOR BUSINESSES AND ORGANIZATIONS . AUGUST 24, ... profile photo and cover photo, and ... Allows you to sell products

Process Flow: Website Creation - resources.heropm.comresources.heropm.com/lib.resources/Help/PF_Website.pdf · Creation Process Complete Design Process Complete PM Website Quick Start

WEBSITE CREATION - WebsiteToolTester V3 · WEBSITE CREATION FOR ABSOLUTE BEGINNERS Robert Brandl SIMPLE STEPS TO CREATING YOUR OWN BUSINESS WEBSITE WebsiteToolTester. 2 ... We’e

Easy Website Creation Using WordPress

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

Website Content Creation Worksheet - Nora Kramer Designs · 2018. 4. 24. · Website Content Creation Worksheet 1 of 13 Worksheet: Website Content Creation Let's face it. Coming up

Weebly - Website Creation Made Easy#propietariosbadaguas.weebly.com/uploads/6/5/1/4/651428/acta_y_constitucin.pdfWeebly - Website Creation Made Easy# Created Date: 3/9/2007 4:45:56

Website creation

Wordpress The Free Website and Blog Software. Introduction What is Wordpress? What is Wordpress? Website creation Website creation Blog Software Blog.

CRAFT MENTOR IMPLEMENTATION GRANT GUIDELINES...Digital advertising creation and placement Social media creation and placement Content creation for website refresh Interpretative museum

CMS 4 Schools Website Creation - Bonduel · CMS 4 Schools Website Creation Step 1: Go to the following website and enter your username and password as usual: ... Once you are done

Zunal: Webquest Creation Website

Creation of Website with WordPress, Web Agency Quebec

WordPress Website Creation Training Course Slides

Website Planning and Creation

Tips And Tricks About Website Creation

Do-It-Yourself Website Creation Checklist by Christina Hills · Do-It-Yourself Website Creation Checklist “Phase 1” Essential Elements in Your Client Attracting Website Pages