Ok, I think your iterations were off…
You start the count at 0, so while you have the posts from 1 o 7 in the picture, you’re actually working with 0 to 6.
So I re-wrote it with greater than and less than comparisons in the if and elseif conditions.
<?php
function three_column_sc($atts){
ob_start();
?>
<div class="blog-area">
<?php
$atts = shortcode_atts( array(
'cats' => '',
'show_cat' => 'yes',
'show_author' => 'yes',
'show_date' => 'yes',
'show_img' => 'yes',
'posts_num' => 7,
'show_excerpt' =>'no',
'date_format' => 'Y-m-d',
), $atts, 'home_blog_posts' );
$cats = explode(',' , $atts['cats']);
$args = array(
'hide_empty' => 1,
'orderby' => 'date',
'order' => 'DSC',
'exclude' => 1,
'include' => $cats,
);
?>
<section class="post-home-content">
<?php
$the_query = new WP_Query( array(
'post_type' => 'post',
'posts_per_page' => $atts['posts_num'],
'post_status' => 'publish'
) );
if( $the_query->have_posts() ) :
// we set the iteration count at zero
$i = 0;
while ($the_query->have_posts()):
$the_query->the_post();
//first iteration check: is this the first post (aka zero)?
if( $i == 0 ) : ?>
<div class="blog-column-1">
<a class="image" href="<?php esc_url(the_permalink() ?? ''); ?>">
<?php if( has_post_thumbnail() ) :
the_post_thumbnail('large');
endif; ?>
</a>
<div class="post-content">
<h3><a href="<?php esc_url( the_permalink() ?? '' ); ?>"><?php echo esc_html( the_title() ); ?></a></h3>
<?php if( $atts['show_excerpt'] === 'yes' ) {
$the_content = apply_filters( 'the_content', get_the_content() ); ?>
<?php if( !empty( $the_content ) ) { ?>
<p class="post-exrpt"><?php echo wp_trim_words( esc_html(wp_strip_all_tags($the_content)), 20, '...'); ?></p>
<?php } } ?>
<div class="blog-post-meta">
<?php
if( $atts['show_author'] != "no" ) {
esc_html_e('By ', 'tabbed-posts');
esc_url(the_author_posts_link() ?? '');
echo esc_html(' | ');
}
if( $atts['show_cat'] != "no" ) {
esc_html_e('in ', 'tabbed-posts');
esc_url(the_category(' ') ?? '');
echo esc_html(' | ');
}
if( $atts['show_date'] != "no" ){
echo wp_date( $atts['date_format'], get_post_timestamp() );
}
?>
</div>
</div>
</div>
<?php
//Second iteration check, are the posts greater than 0 and less than 4, or are these posts 1, 2 & 3 as iterations, or 2, 3, 4 as an actual count?
elseif( $i > 0 && $i < 4 ): ?>
<div class="blog-column-2">
<div class="blog-image">
<a href="<?php esc_url(the_permalink() ?? ''); ?>">
<?php if (has_post_thumbnail()){ the_post_thumbnail( 'medium' ); } ?>
</a>
</div>
<div class="blog-post-meta">
<?php
if ($atts['show_cat'] != "no"){
esc_url(the_category(' ') ?? '');
}
?>
</div>
<div class="blog-post-title">
<h4><a href="<?php esc_url(the_permalink() ?? '');?>" title="<?php esc_attr(the_title());?>"><?php echo esc_html(the_title());?></a></h4>
</div>
</div>
<?php
//Lastly we check if the post is iteration 4 or higher, or posts 5, 6 and 7
elseif( $i >= 4 ) : ?>
<div class="blog-column-3">
<div class="blog-image">
<a href="<?php esc_url(the_permalink() ?? ''); ?>">
<?php if (has_post_thumbnail()){ the_post_thumbnail( 'medium' );} ?>
</a>
</div>
<div class="blog-post-meta">
<?php
if ($atts['show_cat'] != "no"){
esc_url(the_category(' ') ?? '');
}
?>
</div>
<div class="blog-post-title">
<h4><a href="<?php esc_url(the_permalink() ?? '');?>" title="<?php esc_attr(the_title());?>"><?php echo esc_html(the_title());?></a></h4>
</div>
</div>
<?php
endif;
$i++;
endwhile;
endif;
wp_reset_postdata();
?>
</section><!---sectio end-->
</div> <!---blog area--->
<?php
$output = ob_get_clean();
return $output;
}
add_shortcode('home_blog_posts', 'three_column_sc');
I haven’t tested this though, so there could be other things wrong with it that I didn’t catch because I’ve only focused on the iterations and conditions.
Hope this solves it.