Elementor displays the same shortcode twice (only on editor)

Question

Elementor displays the same shortcode twice. One in the place where the shortcode is placed, the other right behind the header. The problem only occurs in the editor. On the page, it displays normally. Please help. How can i fix it?

    function display_grid_func ( $atts ){
echo '<div class="post-grid">';
    $args = array(
        'post_type' => 'realizacje',
        'post_status' => 'publish',
        'posts_per_page' => 9,
        'cat' => 5
    );

    $loop = new WP_Query($args);

    while ($loop->have_posts()) : $loop->the_post(); ?>

        <div class="post-tile home">
            <a href="<?php the_permalink(); ?>">
                <img src="<?php the_post_thumbnail_url('tile-foto'); ?>" />
            </a>
                <a class="button-zobacz home" href="<?php the_permalink(); ?>">Zobacz &#8594;</a>
            
        </div>

    <?php endwhile;
    wp_reset_postdata();?><?php
    echo '</div>';
}

add_shortcode('post_grid', 'display_grid_func');

What I have tried so far: -I change the theme -I turned off all plugins -I was looking on google

Answer 1

I solved the problem :) I used ob_start(); and return ob_get_clean();

function display_grid_func($atts)
{
    ob_start();
    echo '<div class="post-grid">';
    $args = array(
        'post_type' => 'realizacje',
        'post_status' => 'publish',
        'posts_per_page' => 9,
        'cat' => 5
    );

    $loop = new WP_Query($args);

    while ($loop->have_posts()) : $loop->the_post(); ?>

        <div class="post-tile home">
            <a href="<?php the_permalink(); ?>">
                <img src="<?php the_post_thumbnail_url('tile-foto'); ?>" />
            </a>
            <a class="button-zobacz home" href="<?php the_permalink(); ?>">Zobacz &#8594;</a>

        </div>

    <?php endwhile;
    wp_reset_postdata(); ?>
<?php echo '</div>';
    return ob_get_clean();
}

add_shortcode('post_grid', 'display_grid_func');