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
- Vertical dimensions
-
Some Examples
- Single background image
- full page
- fade to bottom
- fade to sides
- tiled background image
- horizontal tile
- Single background image
