How do I change the CSS for all Page Title sections across an Elementor website?

Question

We recently took over a website that's written with Elementor. Not something I am terribly use to.

Most theme page builders assign a Class to the Page Title (where the title and Breadcrumbs show), so you can control it in CSS.

I can't find such a section in Elementor. I'm told each page has it's own ID. But if you want to apply a Shadow to ALL Page Title areas, or apply a Background Overlay of darkness to all Page titles, behind the text - how do you do that?

If you had 1000 pages, surely you don't need 1000 CSS Classes?

What is the magical Class in Elementor that is assigned as the Page Title row?

Thanks

Answer 1

Normally it will be:

h1.elementor-heading-title

Answer 2

To change the CSS for all Page Title sections across an Elementor website, you can use custom CSS

/* Example CSS for Page Title sections */
.elementor-page-title {
    /* Your styles here */
    background-color: #f0f0f0;
    padding: 20px;
    color: #333;
}

.elementor-page-title h1 {
    /* Styles for the title */
    font-size: 36px;
    font-weight: bold;
}