25% off ProSNIPC25OFF

Call-to-Action Section Block

Shortcode [scseed_cta_section title='' text='' btn_text='' btn_url='' bg='' color=''] rendering a full-width visually distinct call-to-action band with optional second button.

Module2 parts · by SnipCraft

PHPLogic

php
<?php
if ( ! function_exists( 'scseed_cta_section_shortcode' ) ) {

    function scseed_cta_section_shortcode( $atts ) {
        $atts = shortcode_atts( array(
            'title'     => 'Ready to get started?',
            'text'      => 'Join thousands of users today.',
            'btn_text'  => 'Get Started',
            'btn_url'   => '#',
            'btn2_text' => '',
            'btn2_url'  => '#',
            'bg'        => '#7c5cff',
            'color'     => '#ffffff',
            'align'     => 'center',
            'size'      => 'medium',
        ), $atts, 'scseed_cta_section' );

        $align = in_array( $atts['align'], array( 'center', 'left' ), true ) ? $atts['align'] : 'center';
        $size  = in_array( $atts['size'],  array( 'small', 'medium', 'large' ), true ) ? $atts['size'] : 'medium';

        $style = 'background:' . esc_attr( $atts['bg'] ) . ';color:' . esc_attr( $atts['color'] ) . ';';

        ob_start();
        ?>
        <section class="scseed-cta-section"
                 style="<?php echo $style; ?>"
                 data-align="<?php echo esc_attr( $align ); ?>"
                 data-size="<?php echo esc_attr( $size ); ?>">
            <div class="scseed-cta-inner">
                <?php if ( $atts['title'] ) : ?>
                <h2 class="scseed-cta-title"><?php echo esc_html( $atts['title'] ); ?></h2>
                <?php endif; ?>
                <?php if ( $atts['text'] ) : ?>
                <p class="scseed-cta-text"><?php echo esc_html( $atts['text'] ); ?></p>
                <?php endif; ?>
                <div class="scseed-cta-actions">
                    <?php if ( $atts['btn_text'] ) : ?>
                    <a href="<?php echo esc_url( $atts['btn_url'] ); ?>" class="scseed-cta-btn">
                        <?php echo esc_html( $atts['btn_text'] ); ?>
                    </a>
                    <?php endif; ?>
                    <?php if ( $atts['btn2_text'] ) : ?>
                    <a href="<?php echo esc_url( $atts['btn2_url'] ); ?>" class="scseed-cta-btn-2">
                        <?php echo esc_html( $atts['btn2_text'] ); ?>
                    </a>
                    <?php endif; ?>
                </div>
            </div>
        </section>
        <?php
        return ob_get_clean();
    }
    add_shortcode( 'scseed_cta_section', 'scseed_cta_section_shortcode' );
}

CSSStyles

css
.scseed-cta-section {
    width: 100%;
    padding: 4rem 2rem;
    box-sizing: border-box;
}

.scseed-cta-inner {
    max-width: 700px;
    margin: 0 auto;
}

[data-align="center"] .scseed-cta-inner {
    text-align: center;
}

[data-align="left"] .scseed-cta-inner {
    text-align: left;
}

.scseed-cta-title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 800;
    line-height: 1.2;
}

.scseed-cta-text {
    margin: 0 0 2rem;
    font-size: 1.05rem;
    opacity: 0.88;
    line-height: 1.6;
}

.scseed-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

[data-align="center"] .scseed-cta-actions {
    justify-content: center;
}

.scseed-cta-btn,
.scseed-cta-btn-2 {
    display: inline-block;
    padding: 0.8rem 2rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    color: inherit;
    border: 2px solid rgba(255, 255, 255, 0.5);
    transition: background 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.scseed-cta-btn {
    background: rgba(255, 255, 255, 0.15);
}

.scseed-cta-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.8);
}

.scseed-cta-btn-2 {
    background: transparent;
}

.scseed-cta-btn-2:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.8);
}

[data-size="large"] .scseed-cta-section {
    padding: 6rem 2rem;
}

[data-size="large"] .scseed-cta-title {
    font-size: clamp(1.8rem, 4vw, 3rem);
}

[data-size="small"] .scseed-cta-section {
    padding: 2.5rem 1.5rem;
}
#shortcode#cta#conversion#marketing#banner