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

[Frank Noack]

Hello GenratePress Team,

I would like to create a Hero Section. (See picture)
If it’s not too much trouble, could you tell me how to proceed?

Thank you very much in advance

Picture:
https://bit.ly/2zBhPRP

[David]

Hi there,

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

https://generateblocks.com

Let me know.

[Frank Noack]

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

[David]

Would you be using the Header Element ?

[Frank Noack]

yes, gladly

[David]

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;
    }
}

[Frank Noack]

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

Thank you very much.
Frank

[David]

Glad to be of help.

[Author]

Posts