Home Page: Footer & Newsletter Block
In this lesson we are going to:
Strip down our home page
Work with our footer & newsletter design
Learn about and use some 'block' options
Learn about changing text colors & highlighting text
Get comfortable moving things around & revisit site style adjustments
Example: Website Layout Overview
I want to quickly walk you through the anatomy of a home page layout that I really like, by Dare to Grow. And point a bit of the 'brand psychology' for how someone might experience her choice of copy location, for first time web-viewers and potential clients.
Exercise 1: Creating a Blank Canvas
In order to start creating the home page layout we drafted up in the last module, we need to strip down the sections that came with the template.
Exercise 2: Footer & Newsletter Section Design
Our first home page design work will be the footer/newsletter section at the bottom of the page. Note that this section will be present on all pages of your website, that is why it's good to have your newsletter signup in this section.
You will probably (maybe) wish to also include a 'lead funnel' section on your home page, which is a special offer to your potential clients, in which they get a thing, if they give their get on your list. We will look at lead gen funnels in another module, just wanted to mention it, as we did see it on the Dare to Grow home page video.
Footer Design Examples:
What you should know after this step:
Review of how to change the 'color theme' for a section & how to manually change the color of a specific item in your 'site styles'
How to add text blocks, change font sizes, font colors, and highlight text
How to change design settings for: social icons, images, newsletter blocks
How to add a background image to the section
How to add an image and adjust design settings
How to move blocks around on your section grid & change alignment
Resources: Pirate Ipsum & Hipster Ipsum
Action Steps:
Emulate the footer design from the home page map you created in Module 5
Make new and improved adjustments, if your footer needs or wants to go in a different direction (we are always flexible with the design that wants to come through)
Play with the tools and skills shown in the demo, using the footer as a jump off point for establishing comfort with adapting form and function
