Divi 5 makes it easy to create bold hero sections with immersive visuals and strong first impressions. In this free pack, you’ll get 6 Photo Background Heroes that are perfect for landing pages, portfolio intros, service pages, product launches, restaurant websites, sports websites, architecture studios, agencies, and more.
Each section uses full-width photo backgrounds, layered content, overlays, typography, buttons, and structured supporting elements to create polished hero designs that are ready to customize. Import a section, replace the content, update the background image, and you’re ready to go.
Preview
Here’s a quick look at the 6 Photo Background Heroes included in the pack. The download is further down the post.
Download 6 Photo Background Heroes For Divi 5
Get all 6 sections for free. Import them into your Divi Library and add them to any page in the Visual Builder.
What’s Included (7 Exports)
After you download and unzip the file, you’ll find 6 styled Photo Background Hero Section exports, plus 1 file containing all layouts.
Styled – Photo Background Hero Section 1 to 6 (6) → Six fully styled hero section layouts with full-width photo backgrounds, layered content areas, bold typography, buttons, overlays, image treatments, and clean spacing that you can use as-is or customize.
Styled – Photo Background Hero Sections (All) → Imports all 6 designs into your Divi Library at once.
How To Use The Photo Background Heroes
Keep your download folder handy. We’ll import the files, add a section to a page, and then replace the content.
1. Import Sections Into The Divi Library
Go to Divi → Divi Library. Click Import & Export at the top of the screen.
In the Import & Export Layouts modal, switch to the Import tab, then click Choose File and select your JSON file. Choose any Photo Background Hero Section JSON you’d like to use, then click Import Divi Builder Layouts.
2. Add A Photo Background Hero To Any Page
Open a page in the Visual Builder and add a new Section.
Click Add From Library and select one of your Photo Background Hero sections.
3. Swap The Content
Once the section is on the page, replacing the placeholder content only takes a few clicks. Start by updating the heading, body copy, buttons, links, labels, stats, captions, supporting details, and calls to action to ensure the hero section aligns with your brand and message. Then swap in your own photo background, featured image, logo, icons, video, or supporting visuals as needed.
Because photo background hero sections rely on strong contrast, readable text, and careful image placement, it’s best to replace content one area at a time. This helps preserve the balance between the background photo, overlay, typography, buttons, and supporting content as you customize the design.
If you want to expand or simplify a section, duplicate or remove existing rows, columns, groups, content blocks, buttons, or modules, rather than rebuilding the design from scratch. That’s the easiest way to preserve the original structure, alignment, spacing, and visual rhythm of the layout.
4. Adjust Styles (Optional)
These Photo Background Hero layouts are already styled, so you can use them right away or refine them to better match your site. Update typography, colors, background images, overlays, borders, shadows, spacing, buttons, and image treatments as needed using the settings in the Content and Design tabs.
To change typography, open any Text or Heading module and go to the Design tab. Expand the relevant text settings to adjust Font, Font Weight, Text Alignment, Text Color, and more.
To refine the hero styling, open the section, row, column, group, or module you want to adjust and use the Content and Design tabs to tweak Background, Background Image, Background Overlay, Border Width, Border Color, Border Radius, Box Shadow, Sizing, and Spacing.
If your section uses dark overlays, split content blocks, floating cards, large headline type, supporting stats, social links, or layered visual elements, keep those relationships in mind as you edit so the hero remains intentional, readable, and balanced.
Use Divi’s responsive editing tools to fine-tune spacing, background positioning, image cropping, text size, stacking, alignment, and button placement on smaller screens so the layout stays polished across devices.
Tips For Effective Photo Background Heroes
Photo background hero sections work best when the image, message, and call to action all support the same goal. Use these quick tips to keep your heroes polished, readable, and easy to customize.
Choose A Strong Background Photo
Your background image sets the tone for the entire hero section. Use high-quality photos with clear focal points, strong composition, and enough open space for text and buttons.
Keep Text Readable
Photo backgrounds can make text harder to read if contrast is too low. Use overlays, text shadows, color contrast, and careful placement to make headings, body copy, and buttons easy to see.
Create A Clear Visual Hierarchy
Use headline size, supporting copy, button placement, contrast, and spacing to guide visitors through the hero. The main message and call to action should be easy to understand at a glance.
Balance The Photo With The Content
A strong image should support the message, not compete with it. Position your content where the photo has room to breathe, and use padding, overlays, or layout blocks to create a clean reading area.
Check The Layout On Mobile
Photo background heroes can change noticeably on tablet and phone screens as images crop and content stacks. Review your layout on smaller devices to ensure the focal point remains visible, text stays readable, spacing feels balanced, and calls to action are easy to tap.
Start Building In Divi 5 Today!
These 6 Photo Background Heroes give you a fast way to build bold, immersive hero sections for landing pages, portfolios, service pages, restaurant websites, product launches, architecture studios, agencies, sports websites, and more. Swap in your content, customize the styling if needed, and you’ll have a professional hero section ready in minutes with Divi 5’s Visual Builder.
Leave A Reply