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