Tutorial 5 of 108 min

Create the Perfect Hero Section

Control the Hero photograph, framing, heading, story label, text alignment, and background treatment.

What you’ll accomplish

You will create a strong first screen without accidental cropping, black letterboxing, or unwanted overlay text.

PhotoView Hero settings with the Show story label switch and the resulting hero image — Use the explicit Show story label switch when you do not want the small label. You do not need to erase the field or enter a blank space.

Open the Hero block

In My Website, open Home and expand Hero. Select the image, video, or portfolio source you want visitors to see first.

Choose how the image fits

Choose Fill frame when edge-to-edge impact matters and some cropping is acceptable. Choose Show full image when the entire composition must remain visible.

When Show full image leaves space around the photograph, PhotoView uses the current website background color or background image instead of black.

Set the heading and supporting text

Edit the website-only Hero heading in the Hero controls. This text is independent from the portfolio title.

Keep overlay copy short, choose its alignment, and check that it remains readable over both bright and dark areas.

Show or hide the story label

Use Show story label to control the small label above the headline. Turn it off when the photograph and main heading need a quieter presentation.

Check several screens

Preview desktop and mobile. Look for cropped faces, cut-off architecture, text near the image edge, and low contrast.

Save once the Hero works at both sizes.