In Lesson 11 of our Build a Professional Services Website using the Genesis theme and WordPress we set up the Agency child theme Home Page using plugins and widgets.
We begin by talking about the Genesis/Agency Home Page, the typical page elements and home page elements and how to add the welcome message. Then we show how to add and use the Genesis Responsive Slider which is located near the top of the Home Page. We also show how to make the Genesis theme header image responsive since it is one of the only elements in the theme that isn’t responsive.
We move on to using the Genesis theme Featured Page Widget to display teasers in the area just below the slider with links off to specific pages. The lesson concludes by showing how to add a contact form to your site using Contact Form 7 and we provide a plugin that allows you to style the contact form very easily.
Understanding the parts of a Genesis/Agency Home Page – Watch the Video
-
Typical Page Elements
- Header
- Navigation
- Inner
- Footer
-
Home Page Elements
- Same as typical except for inner
- Home Page inner layout
- Home Welcome
- Home Slider
- Home Widgets
- Home Left
- Home Middle
- Home Right
-
Agency and Reading Settings
- Typical WordPress Way
- Front page displays
- posts
- static front page
- Default
- Front page displays
- Agency Theme Way
- Ignore reading settings
- Add a widget to a home widget area
- Typical WordPress Way
Add The Welcome Message to the Home Page – Watch the Video
- This can be ANY widget – it doesn’t have to be text
- Add a text widget
- Review the various pre-configured styles
- Add the final text
Add the Genesis Responsive Slider – Watch the Video
-
Install the plugin
-
Initial Settings
- Type of Content
- Posts or pages
- By Taxonomy and Terms
- Include/exclude by taxonomy id
- Include/exclude pages by id
- Number of slides
- post offset
- display order
- Transition Settings
- Display Settings
- Content Settings
- Type of Content
-
Responsive Slider images
- Where do the images come from?
- What happens when the image is too big?
- The ideal image size
- How to change image sizes once they’ve been set
-
Our settings
-
Add featured images to the appropriate pages
The Genesis Theme Featured Page Widget – Watch the Video
- Elements of the widget
- Widget title
- Image
- Page Title
- Page byline
- Content
- Link
- Various image choices
- No content – no link
- Use other than the home page
Make the Genesis Theme Header Image Responsive – Watch the Video
- Install the BYOB Genesis Responsive Header Image
- Plugin image sizes
- Test
Add a Contact Form to the Genesis Theme Using Contact Form 7 – Watch the Video
-
Install Contact Form 7
-
Contact Form 7 edit screen
- Support & Docs
- Existing Forms
- Current Form Label
- Form
- Mail 2
- Messages
- Additional Settings
-
Understanding the Form Code
- Form HTML
- Form Fields
- Making a field required
- Changing labels
- Change Submit Button text
-
Add Aksimet to Form
- akismet:author
- akismet:author_email
- akismet:url
-
Add the Contact Form to a page
- Directly to the page
- In a text widget
Style the Contact Form Using BYOB Genesis Contact Form 7 Styles plugin – Watch the Video
- Install the plugin
- Choose the number of styles
- Choose the elements to style
- Customize the Submit button
- Set the text input widths
