Shortcode in Divi rendering outside column and section

Question

I have shortcode written in function.php file. I am using ACF to get custom data. But when I add shortcode inside page (in section's column) it is rendering outside in frontend.

Code in function.php

function show_feature_slider() {
$args = array( 'post_type' => 'featuredslider', 'posts_per_page' => -1, 'post_status' => 
'publish' );
$the_query = new WP_Query( $args ); 
?>
<div class="features-container">
 <div class="inner-container">
<?php
$index = 1;
while ($the_query->have_posts()) {
    $the_query->the_post();
    $id = get_the_ID();
    $desc = get_field('description', $id);
    $img_url = get_the_post_thumbnail_url();
    ?>
    <div class="feature feature-<?php echo $index ?>">
        <div class="featured-image">
            <img src="<?php echo $img_url; ?>"/>
        </div>
        <div class="featured-description">
            <?php echo $desc; ?>
        </div>
    </div>       

    <?php
    $index = $index + 1;
}
    ?>
 </div>
</div>
<?php
wp_reset_postdata();
}
add_shortcode('feature-slider', 'show_feature_slider');

Scrennshot of page in divi builder : https://prnt.sc/26fprc6

Screenshot on frontend: https://prnt.sc/26fpsp6

I have added shorcode in Code module of divi.

Answer 1

Try adding the shortcode inside a Text module. (using the Text tab, not the Visual tab)