Recreate one of the demos

This article will show you how you can create a simple donation page like this demo: https://wcdp.jonh.eu/demos/demo-style-1/

This website uses the free theme Astra with a few customizations.
Other than that it’s actually just a simple HTML block with the following content:

<div id="hero-banner">
    <div class="wcdp-container">
        <div style="height:230px"></div>
        <div style="height:150px" class="desktop-hide"></div>
        <div class="home-table">
            <div>
                <div style="background-color:white;padding:20px;">
                    <h2>Demo Style 1</h2>
                    <p>Just a simple donation form.</p>
                    [wcdp_donation_form id="12345"]
                </div>
            </div>
            <div>
                <div class="mobile-hide" style="height:15vh"></div>
            </div>
        </div>
        <div style="height:100px"></div>
    </div>
</div>

<style>
    .wcdp-container {
        max-width: 1240px;
        margin-right: auto;
        margin-left: auto;
    }
    #hero-banner {
        background: url(https://example.com/background.jpg) no-repeat center center fixed;
        background-size: cover;
        min-height:100vh;
    }
    .home-table {
        display: grid;
        grid-template-columns: 42% 58%;
    }
    @media screen and (max-width: 768px) {
        .home-table {
            grid-template-columns: 1fr;
        }
        .mobile-hide {
            display: none;
        }
    }
    @media screen and (min-width: 768px) {
        .desktop-hide {
            display: none;
        }
    }
</style>

Depending on which theme you use, you may need to adjust the CSS. Please remember to use the correct shortcode in line 10 and the background image in line 28.