Section 1
This is the first section on the front page
You can place a number of things over the top of this parallax image
scroll, scroll, scroll...
👇
Section 2
You can place items here too!
It's best practice to visually alternate between images and color or white space.
The 3rd Section
Once again using a contrasting color to break up the visual.
While we are using a very dark grey here, it could easily be any of your colors.
4th Section
This is a wide section
We'll illustrate that with a red border around this text to show the width. This might be a good place for a call to action banner, or maybe a slideshow of your recent testimonials.
Of course, you don't need a border here. We're just showing you the width IF you are in desktop mode.
Section 5
With solid sections above, we can once again show a parallax image with text or something over the top.
On our website we use this section to show testimonials from past clients.
Section 6
This is yet another solid colored section.
Once again, this could be one of the colors in your style pallete, or a nice clean white like we did here.
OR…
Section 7
Another Parallax section
Here's a few design rules to follow:
#1: We never want to place a parallax section right after another parallax section.
#2: Be mindful of the image and the contrast of the text. Because the text is floating over the image, white text might scroll over a white section of the image. When this happens we can sometimes add a drop shaddow to the text.
#3: The image should be visually interesting but not technical in detail. This image is an excellent example of that. It's interesting but the fine detail of the cars and the white of the building sides makes the text hard to read.
#4: Be very cautious placing images over the top of a parallax image. It's oftentimes visually confusing.
Section 8
It might be a good thing to mention that your home page doesn't need to use all of the sections available.
Section 9
We'll throw a splash of color at you.
Remember that any of the sections could be any color. This orange happens to be the same orange we use in our logo.
Section 10
We'll break that up once again with a nice clean section of white.
Modern design uses a lot of what is considered white space. Think of the Apple site.
Section 11
Your Sections don't have to be solid colors, they could also use a background graphic like this.
This does have it's issues. Because the site is mobile responsive and adapts to the viewers screen, we can't accurately predict where the graphic is going to be placed behind the text. If the viewport is too wide, the image could be forced to repeat.
(but we can write some code to fix that too)
Section 12
We'll go back to solid colors again.
Just remember that sometimes a slightly different color, just off from your pallete might work as a great accent too.
Section 13
We'll end the sections for the home page here.
Below this section is the Footer. The Footer, like the Header Section is common to all pages (except "Landing Pages")
REMEMBER: Your site doesn't have to use all of these sections. We've built sites that used only the first section, and we've built sites that used almost 30 sections (that was a custom build).
Note: These sections only show on the home page. Every other page on your site will only have the Header, Logo, Menu, and Footer - with of course the content of that page.