Split hero (image beside text)
The split hero puts the headline and a product or people photo side by side. It's clearer than a background image and reads well on any screen.
Building it
Use a boxed container with Direction: Row, two child containers at 50% each (or 55/45 favouring the text), and a gap of 40–64 px. The text side holds a Heading, a short Text Editor paragraph and one or two Buttons; the image side an Image widget.
Image on the left or the right?
Text first (on the left in left-to-right languages) is read first and is the usual choice. Put the image on the left when the image is the message, for example a product. To swap, use Direction: Row Reverse instead of moving widgets, so the reading order in the HTML stays text-first.
On phones
Set the parent to Direction: Column on mobile. Decide whether the image goes above or below the text; below keeps the headline at the top of the screen. Reduce the heading size with the responsive typography controls or a fluid size.
Two buttons
If you use two buttons, make one filled (main action) and one outlined (secondary). Two equally strong buttons split attention.