How do I create a Hero section for the following scenario?

Hi there,

are you using the Block Editor?
If so try our GenerateBlocks Plugin:

https://generateblocks.com

Let me know.

Yeah, I tried GenerateBlocks. The results were not good for me. Generate Blocks is too complicated for me. There are too many settings in Gutenberg for me. I like working with code elements.

But thanks David for your help.

Frank

Would you be using the Header Element ?

yes, gladly

This would be your HTML:

<div class="hero-row">
    <div class="hero-column">
        <div class="column-inner">
            <h1>Title</h1>
            <h2>Subtitle</h2>
            <a class="button" href="#url">Button one</a>
            <a class="button" href="#url">Button two</a>
        </div>
    </div>
    <div class="hero-column">
        <div class="column-inner">
            Video Embed here
        </div>
    </div>
</div>

and this your CSS:

.hero-row {
    display: flex;
    flex-wrap: wrap;
}

.hero-column {
    flex: 1 0 50%;
}

.column-inner {
    padding: 40px 0;
}

@media(max-width: 768px) {
    .hero-row {
        text-align: center;
        display: block;
    }
}

David, thank you so much. Really great support. Everything works very well.

Thank you very much.
Frank

Glad to be of help.