Show 4 Post, One in Left and 3 in right with featured image: In Elementor Builder

• 

Mainly I created the shortcode to show 4 post as per the design above, One in left and Three in right based on the request of one of my client. He wanted to show 4 post in such manner in Elementor page builder plugins. You have to use [recent_posts] in Elementor shortcode module to show it.

The code is divided in 2 part. One for Functions.php and other for Style.css

Code for function.php

function four_posts($atts, $content = null) {
	
	global $post;
	
	extract(shortcode_atts(array(
		'cat'     => '',
		'num'     => '4',
		'order'   => 'DESC',
		'orderby' => 'post_date',
	), $atts));
	
	$args = array(
		'cat'            => $cat,
		'posts_per_page' => $num,
		'order'          => $order,
		'orderby'        => $orderby,
	);
	
	$output = '';
	
	$posts = get_posts($args);
	$i=0;
	$ra=0;
	foreach($posts as $post) {
		$featured_img_url = get_the_post_thumbnail_url($post->ID,'full');
		setup_postdata($post);
if($i==0){	?>

<?php	

		$output .= '<span class="left"><li><span class="thumb"> <img src="'. $featured_img_url .'"/></span><span class="tex"><a href="'. get_the_permalink() .'">'. get_the_title() .'</a><span class="excerpt">'.get_the_excerpt($post->ID).'</span></span></li></span><span  class="right">';
 
}
else{
	 
	 
		$output .= '<li><span class="tex"><span class="cat">'.get_the_category( $post->ID )[0]->name.'</span><a href="'. get_the_permalink() .'">'. get_the_title() .'</a><span class="excerpt">'.get_the_excerpt($post->ID).'</span></span><span class="thumb"> <img src="'. $featured_img_url .'"/></span> <div class="divider"></div></li>';
 
 

}
if($i==3){echo "</span>";}
$i++;
	}
	
	wp_reset_postdata();
	
	return '<ul>'. $output .'</ul>';
	
}
add_shortcode('recent_posts', 'four_posts');

Code for Custom css or Style.css

/***home posts****/
span.left {
    width: 53% !important;
    float: left;
}
span.right {
    float: right;
    width: 44% !important;
}
span.right *, span.left * {
    list-style: none !important;
}
.right span.tex {
    width: 70% !important;
    float: left;
}
.right span.thumb {
    float: left !important;
    width: 27% !important;
    margin-left: 3% !important;
}
 span.tex a {
    font-weight: bold;
    color: black !important;
    display: block;
    text-align: left;
}
span.excerpt {
    text-align: left;
    float: left;
}
span.right li {
   
    overflow: hidden;
    margin-bottom: 12px;
}
.left span.thumb, .left span.thumb * {
    width: 100% !important;
    display: block;
}
 
span.left li {
	 overflow: hidden;
    position: relative;
}
.left span.tex {
    overflow: hidden;
    display: block;
    position: absolute;
    z-index: 100000000;
    width: 100% !important;
    bottom: 0;
    left: 0px;
    right: auto !important;
    float: none;
}
.left .tex a {
    background: rgba(255, 165, 0, 0.6) !important;
    padding: 1%;
    color: white !important;
}
.left .tex .excerpt {
    background: rgba(0, 0, 0, 0.6) !important;
    color: white;
    padding: 1%;
}
.divider {
    background: url(https://allaboutbasic.files.wordpress.com/2019/10/dots.png) repeat-x center;
    height: 7px;
    display: block;
    clear: both;
}
span.cat {
    background: rgba(255, 165, 0, 1);
    clear: both;
    width: 30%;
    display: block;
    color: white !important;
    padding-bottom: 2px !important;
    padding-top: 2px !important;
    margin-bottom: 6px !important;
}
@media (min-width: 320px) and (max-width: 668px) { 
span.left {
    width: 100% !important;
    float: left;
    clear: both;
    display: block;
	}

.elementor-shortcode ul {
    padding: 0px !important;
}
	span.right {
    float: left;
    width: 100% !important;
    clear: both;
    display: block;
    padding-top: 24px;
    position: relative;
    overflow: hidden;
}
	.right span.tex {
    width: 60% !important;
    float: left;
}
	.right span.thumb {
    float: left !important;
    width: 40% !important;
    margin-left: 0% !important;
}
	.right .tex a {
    line-height: 20px !important;
    margin-bottom: 15px !important;
}
.right span.tex {
    
    margin-bottom: 23px;
}	

}