Hero Options

Style 1 - Rule of Thirds

Visually divide the hero section into thirds. The focal point is generally in 1/3 to 1/2 of the image on its right or left. The text content will go on the side opposite the focal point.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eros donec ac odio tempor orc vitae. 

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eros donec ac odio tempor orc vitae. 

Style 2 - The Stripe

Similar to the "Rule of Thirds" hero layout, but the text content might need more contrast or more of the image might need to show.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Style 3 - Split Screen

This layout is great for hero images with a center focal point. This means if you placed the text on top of the hero image, it would cover the important parts, so the content is placed beside the image instead.

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eros donec ac odio tempor orci dapibus ultrices in. Velit dignissim sodales ut.

Style 4 - Text Overlay

The text content in this hero layout is centered directly over the image. This is a good layout if the hero image is not too busy, has no real focal point or has lots of negative space along the top. If the text on top is still too hard to read, we'll add an opaque overlay for contrast.

Lorem ipsum dolor sit, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eros donec ac odio tempor orci dapibus ultrices in. Velit dignissim sodales ut eu sem integer vitae. 

Lorem ipsum dolor sit, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eros donec ac odio tempor orci dapibus ultrices in. Velit dignissim sodales ut eu sem integer vitae. 

Style 5 - Floating Image

This layout works best for cases where the hero image is too small to fill the screen, or if everything in the image is so important that it can't be cropped or hidden. The background of the row is usually a solid color, a gradient or a blurred image.

Lorem ipsum dolor, consectetur adipiscing

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eros donec ac odio tempor orci dapibus ultrices in. Velit dignissim sodales ut eu sem integer vitae. 

Style 6 - Blog Slider

Use this hero layout if you have a blog-centric site with posts that get regularly updated, and you would like for your latest posts to be the first thing people see on the site.

Tortor consequat id porta nibh venenatis cras sed feli

February 28, 2024

Ipsum suspendisse ultrices gravida dictum. Sed arcu non odio euismod lacinia at quis risus. At tellus at urna condimentum mattis pellentesque iIpsum suspendisse ultrices gravida dictum. Sed arcu non odio euismod lacinia at quis risus. At tellus at urna condimentum mattis pellentesque id…

Read More

Est lorem ipsum dolor sit amet consectetur adipiscing eli

February 28, 2024

Eget mauris pharetra et ultrices neque. Blandit massa enim nec dui. Arcu cursus vitae congue mauris rhoncus aenean. Pellentesque habitant morbi tristique…

Read More

Massa enim nec dui nunc mattis eni

February 28, 2024

Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. In eu…

Read More

Orci a scelerisque purus semper ege

February 28, 2024

Eu volutpat odio facilisis mauris. Egestas maecenas pharetra convallis posuere morbi leo urna. Duis ultricies lacus sed turpis. Lectus sit amet est…

Read More

Orci a scelerisque purus semper eget

August 4, 2020

Eu volutpat odio facilisis mauris. Egestas maecenas pharetra convallis posuere morbi leo urna. Duis ultricies lacus sed turpis. Lectus sit amet est placerat in. Est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque. Varius sit amet mattis vulputate enim nulla. In ante metus dictum at. Netus et malesuada fames ac turpis. Eget mauris pharetra…

Read More

Style 7 - Product Slider

Use this hero layout if you have a premium shop with many products that get regularly added, and you would like for your latest or featured products to be the first thing people see on the site.