Elementor breaks site with custom shortcode - wordpress

Question

I created a custom shortcode which includes a special loop which includes all posts from different multisite blogs. This solution is provided by this plugin: https://rudrastyh.com/. The shortcode is perfectly working an all normal pages and posts.
But I am also using the page builder Elementor. When inserting this shortcode into Elementor some strage things are happening: in editor mode the shortcode output is showing up twice, once at the top of the editor area and once again at the place where I actually put the shortcode. When I hit save, my whole site breaks and shows a standard image when accesing any page. Then the the only solution is to recover my latest database backup.
Here I show you some screenshots of the editor mode:
Here my shortcode fuction:
// Add Shortcode
function all_events_shortcode ($atts) {
// Attributes
$atts = shortcode_atts(
array(
'lang' => '',
'blog' => '',
),
$atts
);
// Network_Query parameters
$args = array(
'posts_per_page' => 14,
'blog_id' => esc_attr($atts ['blog']),
'lang' => esc_attr($atts ['lang']),
'orderby' => 'meta_value_num',
'order' => 'ASC',
'post_type' => 'noo_event',
'meta_key' => '_noo_event_start_date',
'meta_value' => date( "U" ),
'meta_compare' => '>'
);
$network_q = new Network_Query( $args );
// if there are posts, then print <ul>
if( $network_q->have_posts() ) :
echo '<div id="all_events">';
// run the loop
while( $network_q->have_posts() ) : $network_q->the_post();
// the get_permalink() function won't work without switch_to_blog()
// you can use network_get_permalink() instead but it is a little slower
switch_to_blog( $network_q->post->BLOG_ID );
// Get the dates
$start_date=get_post_meta($network_q->post->ID, '_noo_event_start_date', true);
$_start_date = gmdate("d.m.Y", $start_date);
$end_date=get_post_meta($network_q->post->ID, '_noo_event_end_date', true);
$_end_date = gmdate("d.m.Y", $end_date);
// you can obtain the post title from $network_q->post object
echo '<div class="all_events_item post-' . $network_q->post->ID . ' blog-' . $network_q->post->BLOG_ID . '">
<div class="all_events_img">
<a href="' . get_permalink( $network_q->post->ID ) . '">
'.get_the_post_thumbnail( $network_q->post->ID, 'large' ).'
</a>
</div>
<div class="all_events_content">
<h2>' . $network_q->post->post_title . '</h2>
<br />
<span class="start_date">'.$_start_date.'</span> -
<span class="end_date">'.$_end_date.'</span>
</div>
</div>';
// restore_current_blog() to switch to the previous (!) website
restore_current_blog();
endwhile;
echo '</div>';
endif;
network_reset_postdata(); // add it after the loop if you plan to use Network_Query multiple times on the page
}
add_shortcode('all-events', 'all_events_shortcode');
Can you give me some hints how I could tackle this problem?
Best wishes

Answer 1

Try this, it helped me.
Adding ob_start(); and then ob_get_clean();
function function_name(){
ob_start();
//..your code here...
$content = ob_get_clean();
return $content;
}
add_shortcode('shortcode_name','function_name');
Found the solution here and tried it. It worked for me.
Elementor page builder shortcode issue
Original credit: https://stackoverflow.com/a/48813883/9364624
Posted By: https://stackoverflow.com/users/1753934/colin-oakes

Answer 2

You need to bind HTML in variable and then return this HTML from shortcode..
Please check the code below
function _login_popup() {
$html = '<form id="user-login-form" method="post" action="#" class="js-form-redirect js-form-action" novalidate="">
<div class="floating-label form-group">
<input id="useremail" name="user_name" required="" value="" type="email">
<label for="useremail">Email</label>
</div>
<div class="floating-label form-group">
<input id="userpassword" name="password" required="" value="" type="password">
<label for="userpassword">Password</label>
</div>
<div class="o-form__buttons text-right --small-center">
<button type="submit" id="submit_login" class="a-button-form --save a-no-before" value="edit">Sign in</button>
</div>
</form>';
return $html;
}
add_shortcode('yg-login-popup', '_login_popup');
In this shotcode i have created login form..