Build Your Own Business Website header image

Lesson 9 – Add Content to Your Site

Difficulty Level -

Filed Under Topics - , , , , ,

Listed Under Lesson Subjects -

In lesson 9 of our Build a Responsive Professional Website using Thesis 2, we teach you the ins and outs of adding content to your web pages. We look at the WordPress text editor and the various tools it contains for adding and editing text. Once the text is added we look at formatting it so that it is easy to read and Google friendly. We also take a look at the SEO tools that Thesis 2 provides and demonstrate how to use them to maximize your on page SEO.

In the second half of the lesson we discuss how to add images to the content of our pages. We look at the WordPress media library and use it to insert images along side of our text.  Finally we discuss optimizing images for web use so that you and your users will get maximum benefits from your images. We show you how to find images and then how to use Photoshop Elements to edit and optimize them.

Using the WordPress Text Editor

  • Different views of the text editor
    • 2 Modes
      • Dashboard Mode
      • Full Screen Mode
    • 2 Views
      • Visual View
      • HTML View
  • Dashboard Mode Interface – Visual View
    • Media tool
    • View Tabs
    • Toolbar
      • minimal view
      • kitchen sink view
      • tool tips
  • Full Screen Mode – Visual View
    • Toolbar
    • Media tool
    • help
  • Dashboard Mode – HTML View
    • Media tool
    • Toolbar
  • Full Screen Mode – HTML View

Adding Text From Other Software

  • Elements of the sample document
    • headings
    • font size
    • bold
    • italic
  • Inserting Text from Word
    • Direct Paste
    • Paste using “paste from Word”
    • Paste to HTML
  • Inserting Text from Google Docs
    • Direct Paste
    • Paste using “paste from Word”
    • Paste to HTML
  • Rules to live by
    • Paste as little formatting as possible
    • Do all text formatting in WordPress
    • Check delete from within HTML view
  • Use of Lorem Ipsum text

Styling Content for Readability Using Headings and Lists

  • Markup for SEO
    • Search Engine Optimization Starter Guide – Section 3 – Optimizing Content
      • Stay organized around a single topic
      • Create content primarily for users
      • Use heading tags appropriately
    • Use headings to provide logical outline
      • heading tags – h1 through h6
      • Imagine you are writing an outline
      • 1 h1 tag per page
      • h2 for main subject breakdown
      • h3 for sub headings
      • h4 for sub sub headings
    • Use bold, links or italics to emphasize key text
  • Markup for Readability
    • People don’t read – they scan
    • Use headings to break up and summarize content
    • Use lists instead of paragraph text to itemize important points
    • Use bold or italics to emphasize key text
  • Adding links to text
    • What is a link?
    • SEOSG – Write better anchor text
    • Selecting good link text
      • Tells users (and Google) something about the page being linked to
      • Choose descriptive text
      • Use internal links
    • Insert link tool
      • URL
      • title
      • Open link in new tab
      • Link to existing content
      • Search
  • Rules
    • Never use headings for styling
    • Minimize inline styles
    • Don’t shout
    • Don,t have long blocks of uninterrupted text

Developing your On-Page SEO

  • SEOSG SEO Basics
  • Create unique, accurate page meta titles
    • Descriptive
    • Keyword Rich
    • 70 characters
    • Displayed in Search Results
  • The 4 roles of the Page Title
    • Reader Friendly Title
    • Search Friendly Title
    • Search Friendly Slug
    • Navigation Title
  • Make use of the “description” meta tag
    • Descriptive,
    • keyword rich
    • 150 characters
    • Shows up in search results
  • Content SEO
    • Headings
    • Links
    • Emphasized text
    • image alt text
    • link and image titles

Understanding the WordPress Media Settings

  • WordPress Media Settings
    • The Role of Image Sizes
    • Image Sizes
      • Thumbnail
      • Medium
      • Large
    • Optimum image sizes for Agility
      • Width of content column – 640px
      • Thumbnail – 200×200
      • Medium – 320 x 1046
      • Large – 640 x 1046

Introduction to the Media Library

  • Main menu
  • Add new media
  • Add multiple images
  • The media library is not just for images
  • File size limitations

Inserting Images into your Pages

  • Inserting Images within the content
    • width of content column – 640px
    • insert image from computer
      • Position cursor
      • Add Media
      • Insert Media choices
      • Choose the image
      • Attachment Details
      • Attachment Display Settings
  • Aligning images and text
    • Position cursor
    • insert image from media library
    • Attachment Display Settings
    • Fine tune after insertion
  • Featured image
    • Role of the Featured Image
    • Set a Featured Image
    • Featured Image placement in Agility templates

Optimizing Images for the Web

  • The purpose for image optimization
    • Increase the speed of web pages
    • Increase the user retention
    • Improve your site ranking
  • What is image optimization?
    • Balance of image size
    • Balance of image quality
  • 4 elements of Image Optimization
    • Image resolution
    • Image dimension
    • Image compression format
    • Compression quality
  • Image Resolution – absolute rule
  • Image Dimension
    • How to determine the correct image dimension
    • Always use the maximum image size
    • Dynamic image sizes
  • Image Compression Format Choices
    • Jpeg
    • GIF
    • PNG
  • Compression Quality
    • Quality %
    • Number of colors
    • Dithering

Finding Images for Use on Your Site

  • Go to Dreamstime
  • Set up an account
  • Browse free images
  • Purchase images
  • Download a free image

Using Photoshop Elements to Prepare Your Images

  • Why use Photoshop Elements?
    • Inexpensive
    • Simple
    • Sophisticated Tools
    • Time saving tools
  • Download and Install Photoshop Elements
  • Tour the Interface
    • 3 Views
  • Open an image
    • Check its dimensions
  • Crop the image
  • Resize the image
    • image size
    • canvas size
  • Save for Web
    • 4 options
      • jpeg
      • gif
      • png-8
      • png-24

Question and Answer

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment