Invested Traveler: Call To Action

Documentation:

HTML:

<!-- CTA Section --> <div id="cta-section"> <div class="container"> <div class="row"> <?php if( get_field('call_to_action', 'option') ): ?> <?php $counter = 0; $number_of_cols = count( get_field( 'call_to_action', 'option' ) ); switch ($number_of_cols) { case '1': $col_size = 'col-md-4'; $col_offset = 'col-md-offset-4'; break; case '2': $col_size = 'col-md-4'; $col_offset = 'col-md-offset-2'; break; case '3': $col_size = 'col-md-4'; break; case '4': $col_size = 'col-md-3'; break; default: $col_size = 'col-md-4'; break; } ?> <?php while( has_sub_field('call_to_action', 'option') ): ?> <div class="<?php echo $col_size; ?> <?php if ($counter == 0 && $col_offset) { echo $col_offset; } ?>"> <a href="<?php echo the_sub_field('cta_url', 'option'); ?>"> <div class="cta-home-single" style="background-color: <?php echo the_sub_field('cta_background_color'); ?>;"> <div class="cta-home-single-inner"> <h3 style="color: <?php echo the_sub_field('cta_foreground_color', 'option'); ?>"><?php echo the_sub_field('cta_title'); ?></h3> <i style="color: <?php echo the_sub_field('cta_foreground_color', 'option'); ?>" class="fa <?php echo the_sub_field('cta_icon'); ?>" aria-hidden="true"></i> <p style="color: <?php echo the_sub_field('cta_foreground_color', 'option'); ?>"><?php echo the_sub_field('cta_content', 'option'); ?></p> </div> </div> </a> </div> <?php $counter++; endwhile; ?> <?php endif; ?> </div> </div> </div>

CSS:

/* CTA Section */ $header-font-stack: "Helvetica Neue", Helvetica, Arial, sans-serif; #cta-section { margin-top: -30px; position: relative; z-index: 1; width: 100%; float: left; } .cta-home-single { text-align: center; padding: 30px 0; min-height: 250px; display: flex; align-items: center; justify-content: center; filter: brightness(100%); transition: 0.6s; h3, p, i { margin: 0; } h3 { font-family: $header-font-stack; font-weight: 300; letter-spacing: 3px; margin-bottom: 10px; font-size: 30px; } p { margin-top: 10px; } i { font-size: 32px; } &:hover { filter: brightness(120%); } } .cta-home-single-inner { padding: 0 40px; } @media (max-width: 768px) { #cta-section { margin-top: 30px; } }

PHP:

function acf_options_add_call_to_action() { if( function_exists('acf_add_local_field_group') ): acf_add_local_field_group(array ( 'key' => 'group_5883427901a46', 'title' => 'Theme Options', 'fields' => array ( array ( 'placement' => 'left', 'endpoint' => 0, 'key' => 'field_588339dd66a7c', 'parent' => 'theme_settings', 'label' => 'Call To Action', 'name' => '', 'type' => 'tab', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), ), array ( 'sub_fields' => array ( array ( 'default_value' => '', 'maxlength' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'key' => 'field_588343421a26f', 'label' => 'CTA Title', 'name' => 'cta_title', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), ), array ( 'default_value' => '', 'maxlength' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'key' => 'field_588343541a270', 'label' => 'CTA Icon', 'name' => 'cta_icon', 'type' => 'text', 'instructions' => 'Reference this cheatsheet for icon codes: http://fontawesome.io/cheatsheet/ Example: fa-bar-chart', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), ), array ( 'default_value' => '', 'maxlength' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'key' => 'field_5883435f1a271', 'label' => 'CTA Content', 'name' => 'cta_content', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), ), array ( 'default_value' => '', 'key' => 'field_5883438d1a272', 'label' => 'CTA Background Color', 'name' => 'cta_background_color', 'type' => 'color_picker', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), ), array ( 'default_value' => '#000', 'key' => 'field_588343a41a273', 'label' => 'CTA Foreground Color', 'name' => 'cta_foreground_color', 'type' => 'color_picker', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), ), array ( 'default_value' => '', 'maxlength' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'key' => 'field_588343b61a274', 'label' => 'CTA URL', 'name' => 'cta_url', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), ), ), 'min' => 0, 'max' => 0, 'layout' => 'block', 'button_label' => 'Add CTA', 'collapsed' => '', 'key' => 'field_588343281a26w', 'parent' => 'theme_settings', 'label' => 'Call To Action', 'name' => 'call_to_action', 'type' => 'repeater', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), ), ), 'location' => array ( array ( array ( 'param' => 'options_page', 'operator' => '==', 'value' => 'theme-settings', ), ), ), 'menu_order' => 0, 'position' => 'normal', 'style' => 'default', 'label_placement' => 'top', 'instruction_placement' => 'label', 'hide_on_screen' => '', 'active' => 1, 'description' => '', )); endif; } add_action( 'acf/init', 'acf_options_add_call_to_action' );