Tagged: 

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1428763

    Hi Everyone,

    I’m looking to have the Featured Blog Posts look like this – https://stpsustaginstg.wpenginepowered.com/wp-content/uploads/2023/12/Screenshot-2023-12-22-at-2.18.24-PM.png

    How can I make them look like this?

    Thanks!

    #1428792

    Hey MikeTandySwag,
    Thanks for the mockup, I recommend using the Masonry Element with the Display Title and Excerpt and Display as centered overlay (overlays the image) selected:
    Enfold_Support_4206.jpeg
    then under styling choose a Large Gap and Perfect Grid:
    Enfold_Support_4208.jpeg
    Then under the Advanced tab ▸ Developer Settigs add the custom class custom-masonry-with-button, note that you do not add the class dot:
    Enfold_Support_4210.jpeg
    For my example I choose to use two columns and only show four posts.
    Then add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    .custom-masonry-with-button .av-masonry-date {
    	display: none;
    }
    #top .custom-masonry-with-button.av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content-pos {
        vertical-align: bottom;
    }

    Then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    add_filter('avf_masonry_loop_prepare','avia_change_default_link', 10, 2);
    function avia_change_default_link($loop, $entries)
    {
    	foreach($entries->posts as $key => $entry)
        {
            if($entry->post_type == "post")
            {
                $more 	 		 =  "<br /><span class='custom-masonry-more-button avia-button avia-size-x-large avia-position-center avia-color-light'>".__('Read more','avia_framework')."</span>";
    			$loop['content'] =   avia_backend_truncate($entry->post_content, apply_filters( 'avf_masonry_excerpt_length' , 0) , apply_filters( 'avf_masonry_excerpt_delimiter' , ""), "", true, '') . $more;
            }
        }
    
        return $loop;
    }

    If you are not using a child theme I recommend the WPcode plugin this plugin supports PHP code snippets, JavaScript code snippets, & CSS code snippets, for this code you would choose the PHP snippet:
    Enfold_Support_4213.jpeg
    This is the expected results:
    Enfold_Support_4215.jpeg
    Please give this a try.

    Best regards,
    Mike

    #1429606

    Thank you! This was perfect!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Custom Featured Blog Post’ is closed to new replies.