Build Your Own Business Website header image

Lesson 8 – Setup the Appearance of your Site Using the Genesis & WordPress Theme Settings

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to - ,

In Lesson 8 of our Build a Professional Website Using the Genesis theme and WordPress course we show how to set up the appearance of your professional services/small business websiteusing Genesis and WordPress theme settings.

We show how to set up the site layout using theme settings. Then we look at the Genesis theme header in depth showing the layout options, how to determine the right image size and which widgets are intended to be used there.

We conclude the lesson by showing how to add a background image and color to your site and some examples of different kinds of background image layouts.

Understanding the Parts of a Genesis theme/Agency Page – Watch the Video

  • Main Page Elements

    • Header
    • Navigation
    • Inner
    • Footer
  • Header Layout

    • Full width
    • Widgetized
      • logo – 350px
      • widget – 600px
  • Navigation Layout

    • No navigation
    • Primary only
    • Primary & Secondary
  • Inner Layout

    • Breadcrumbs
    • Content
    • Sidebar
  • Footer Layout

    • Footer Widgets
    • Footer

Set up the Site Layout Using Theme Settings – Watch the Video

  • Color Style
  • Default Layout
  • Navigation Settings
  • Breadcrumbs
  • Comments and Trackbacks

Setup the Genesis Theme Header – Watch the Video

  • Recap of the Genesis/Agency header layout

  • Header layout options

    • Full Width text
    • Widget + text
    • Full Width Image
    • Widget + image
  • Determining the right header image size

    • Determine the right height and width
  • What happens if the image isn’t the right size?

    • If it’s too small
    • if it’s too big
    • If it’s the wrong shape
    • Considerations for transparent .png files
  • What widgets are intended to go in the header?

    • Search
    • Menu
  • Create our header

    • Upload the right image
    • Add nav menu to the widget area

Add a Background Image and Color – Watch the Video

  • Agency Default Background Configuration

    • Background image
    • Background color
    • Image shows through header and footer
  • Types of background images

    • fixed – single
    • tiled – both directions
    • tiled – horizontally
    • tiled – vertically
  • Set Display options

    • scroll
    • fixed
  • Set background color

  • Considerations for designing a background image

    • Vertical dimensions
      • Header
      • Navigation
      • Home Welcome Content
      • Home Slider
      • Overall page
      • Watch out for the admin bar
    • Horizontal dimensions
      • Page Width
      • Slider controls
      • Browser Width
  • Some Examples

    • Single background image
      • full page
      • fade to bottom
      • fade to sides
    • tiled background image
    • horizontal tile

Question and Answer Session – Watch the Video

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one