23
WEB DESIGN BASICS

Web design basics_05

Embed Size (px)

DESCRIPTION

Here is the slideshow from our fifth class of Web Design Basics.

Citation preview

Page 1: Web design basics_05

WEB DESIGN BASICS

Page 3: Web design basics_05

01:36 AM 3

New Material Added to the Site

http://startingmyownwebpage.wordpress.com/

Page 4: Web design basics_05

01:36 AM 4

Widgets!

Page 5: Web design basics_05

01:36 AM 5

Widgets

Widget is a fancy word for tools or content that you can add, arrange, and remove from the sidebar(s) of your blog.

Depending on the Theme that you are using, Widgets might appear to the right, the bottom or both the right and bottom of your webpage.

Page 6: Web design basics_05

01:36 AM 6

Types of Widgets

Page 7: Web design basics_05

01:36 AM 7

Widgets can be configured to appear only on certain pages (or be hidden on certain pages) by

using the Visibility panel.

Widgets

Page 8: Web design basics_05

01:36 AM 8

Widgets

Visibility is controlled by five aspects: page type, category,

tag, date, and author.

For example, if you wanted the Archives widget to only appear on category archives and error

pages, choose “Show” from the first dropdown and then add two rules: “Page is 404

Error Page” and “Category is All Category Pages.”

Page 10: Web design basics_05

01:36 AM 10

Custom Header

The use of this option is completely free, and you do not need to purchase the Custom Design upgrade in order to change your header—as long as you’re using

one of the themes that includes the option, of course.

Page 11: Web design basics_05

01:36 AM 11

Two ways to access the Customize menu

Page 12: Web design basics_05

01:36 AM 12

If you do not see this section, this means that your current theme does not support the

use of a custom image header.

Custom Header

Page 13: Web design basics_05

01:36 AM 13

Themes That Support Custom Header

Page 14: Web design basics_05

01:36 AM 14

Note: If the image that you want to insert in your header is already in your Media Library, all you need to do is locate it and select it. Otherwise, you’ll need to upload an image from your

computer or choose one from the suggested ones (if any).

Depending on the size of the image that you have selected and the respective size of your theme’s custom header, you might

also have to crop the image.

Custom Header

Page 15: Web design basics_05

01:36 AM 15

Flexible Headers

If your theme supports Flexible Headers (check the list below), you can also

skip cropping—the header image will be added without any cropping so you can use

one that is taller or shorter than the size defined by the theme when you crop.

Page 16: Web design basics_05

01:36 AM 16

Themes That Support Flexible Headers

Page 17: Web design basics_05

01:36 AM 17

Most themes will display your blog’s title and optional tagline

either over or next to your header image. You can change the color of that text from the Customizer using the Colors tool. You can also edit your blog’s title and tagline from

the Customizer in the Site Title panel.

Header Text

Page 19: Web design basics_05

01:36 AM 19

Position: This option allows you to position the background image on the Left (default), in the Center or on the Right of the page.

Repeat: This option determines if the background image is repeated. The choices are:

1. No repeat: The background image will be shown only once on the page.

2. Tile (default): The background image will be repeated both horizontally and vertically throughout the entire page.

3. Tile Horizontally: The background image will repeat only horizontally.

4. Tile Vertically: The background image will repeat only vertically.

Attachment: This determines if you want the background image to scroll with the content or to stay “fixed” in place when the user scrolls down the page. The default attachment setting is scroll.

Page 20: Web design basics_05

01:36 AM 20

Video

WordPress currently supports embedding videos from YouTube, Vimeo, Hulu, Flickr, Animoto,

DailyMotion, Viddler, Blip.tv, TED Talks, Educreations, Instagram, AolOn, Vine, and

Videolog.

Page 21: Web design basics_05

01:36 AM 21

Go Mobile

Page 22: Web design basics_05

01:36 AM 22

Press This

Page 23: Web design basics_05

01:36 AM 23

Page Jumps

Return to Top of Page