Can you tell me a better way to do this? (header and page title area overlap)

Hi guys, I need a bit of educating to use DWB and maybe ACF/BB better please!

It's about having a transparent header with a large photo page title area on each page. I've achieved the design I want but I've taken a pretty rubbish route to get there. You can see my dev site here:

Basically I've set the header to have no background in DWB, and used widgets to set up a hero / page title area with the big photo and an h1 title. The widgets are set per page using Widget Logic and given a negative top margin to create the impression of one large header area. It works ok but it's very labour intensive when adding new pages and I'd like to make it easier for my client's volunteers to edit pages and page titles too.

Do I need to build a custom page template? Advanced Custom Fields? I've never used either before so I'm keen to use this to learn!

I'm using Beaver Builder and the page builder template in DWB for the page area itself if that makes any difference.