This page showcases seven different hero banner styles available in the new theme. Each image demonstrates a unique layout option, shown with either a blue header or a white header, and includes examples using a range of accent colors.
Click any image to view a larger version. Use this gallery to help identify which colors best suit your site’s goals and aesthetic preferences.
When the theme is applied, your current hero option will be updated. You may change your hero layout after the theme is applied if you want a different look. The option for a short hero is a new one and can only be applied once the new theme is installed.
Note: These mock-ups reflect current theme design and layout options. Minor refinements may still occur before launch.
Hero Media: Carousel and Blue Header
These examples show a variety of supported hero banner layouts, each displayed in either blue or white header configurations, and using different accent colors. Use this gallery to compare layout and color interactions at a glance.
Hero Media: Full Image with Caption and Blue Header
These examples show a variety of supported hero banner layouts, each displayed in either blue or white header configurations, and using different accent colors. Use this gallery to compare layout and color interactions at a glance.
Hero Media: Image/Video Only and Blue Header
These examples show a variety of supported hero banner layouts, each displayed in either blue or white header configurations, and using different accent colors. Use this gallery to compare layout and color interactions at a glance.
Hero Media: Short Image with Aligned Caption and Blue Header
These examples show a variety of supported hero banner layouts, each displayed in either blue or white header configurations, and using different accent colors. Use this gallery to compare layout and color interactions at a glance.
Hero Media: Image/Video with Overlay Text and Blue Header
These examples show a variety of supported hero banner layouts, each displayed in either blue or white header configurations, and using different accent colors. Use this gallery to compare layout and color interactions at a glance.
Hero Media: Full Image with Aligned Caption and Blue Header
These examples show a variety of supported hero banner layouts, each displayed in either blue or white header configurations, and using different accent colors. Use this gallery to compare layout and color interactions at a glance.
Hero Media: Image with Aligned Caption and Blue Header
These examples show a variety of supported hero banner layouts, each displayed in either blue or white header configurations, and using different accent colors. Use this gallery to compare layout and color interactions at a glance.
Hero Media: Carousel and White Header
These examples show a variety of supported hero banner layouts, each displayed in either blue or white header configurations, and using different accent colors. Use this gallery to compare layout and color interactions at a glance.
Hero Media: Full Image with Caption and White Header
These examples show a variety of supported hero banner layouts, each displayed in either blue or white header configurations, and using different accent colors. Use this gallery to compare layout and color interactions at a glance.
Hero Media: Image/Video Only and White Header
These examples show a variety of supported hero banner layouts, each displayed in either blue or white header configurations, and using different accent colors. Use this gallery to compare layout and color interactions at a glance.
Hero Media: Short Image with Aligned Caption and White Header
These examples show a variety of supported hero banner layouts, each displayed in either blue or white header configurations, and using different accent colors. Use this gallery to compare layout and color interactions at a glance.
Hero Media: Image/Video with Overlay Text and White Header
These examples show a variety of supported hero banner layouts, each displayed in either blue or white header configurations, and using different accent colors. Use this gallery to compare layout and color interactions at a glance.
Hero Media: Full Image with Aligned Caption and White Header
These examples show a variety of supported hero banner layouts, each displayed in either blue or white header configurations, and using different accent colors. Use this gallery to compare layout and color interactions at a glance.
Hero Media: Image with Aligned Caption and White Header
These examples show a variety of supported hero banner layouts, each displayed in either blue or white header configurations, and using different accent colors. Use this gallery to compare layout and color interactions at a glance.