how to: Title like demo contact page

Hi @codestylist,

To achieve this layout, follow these steps:

1. create a page and set its template to Twentig – Transparent header as shown on screenshot 8
2. inside the editor, insert a group, set it to Full width and set a background color
3. inside the group, insert a Media & Text block and fill it with your image and content

Alternatively you can follow step 1 and just paste this code in the Code editor:

<!-- wp:group {"customBackgroundColor":"#d8eee1","align":"full"} -->
<div class="wp-block-group alignfull has-background" style="background-color:#d8eee1"><div class="wp-block-group__inner-container"><!-- wp:media-text {"mediaPosition":"right"} -->
<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile"><figure class="wp-block-media-text__media"></figure><div class="wp-block-media-text__content"><!-- wp:heading {"level":1} -->
<h1>Contact us</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size">This is a page with some basic contact information, such as an address, email, and phone number.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"primary"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background has-primary-background-color">Get in touch</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:media-text --></div></div>
<!-- /wp:group -->

I hope the above is useful to you.
Have a nice day.

If you enjoy Twentig, please leave us a review. We’d really appreciate it.

Thank you @twentig for your kind reply. Using the code was very easy and successfull.
Would it be also possible to add an background image instead of a color?
I saw, I can not handle the background image by CSS because you are using inline CSS to set the background.

You’re welcome @codestylist.

WordPress Group block doesn’t support background image. To add a background image, you can use the Cover block instead of the Group block:

<!-- wp:cover {"overlayColor":"accent","align":"full"} -->
<div class="wp-block-cover alignfull has-accent-background-color has-background-dim"><div class="wp-block-cover__inner-container"><!-- wp:media-text {"mediaPosition":"right"} -->
<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile"><figure class="wp-block-media-text__media"></figure><div class="wp-block-media-text__content"><!-- wp:heading {"level":1} -->
<h1>Contact us</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size">This is a page with some basic contact information, such as an address, email, and phone number.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"primary"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background has-primary-background-color">Get in touch</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:media-text --></div></div>
<!-- /wp:cover -->