We're merging with GenerateBlocks! Learn more here.

[Support request] Customize a Post

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Customize a Post

  • This topic has 5 replies, 2 voices, and was last updated 4 years ago by Tom.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #11954

    Hi Tom again , there is a chance i can do something like this one ? https://ibb.co/LNqbq2R

    i have created three posts and add them in my homepage but when i add padding the text goes behind the image and i also need to add some rgba color like the image on the text

    site link https://pharmasept.bee.backtobuzz.com/


    Hi there,

    The best way to achieve something like that is to use one of our cards: https://demos.wpshowposts.com/cards/

    That way we have the overlay working, then it’s just some simple CSS tweaking to achieve that same look I think 🙂


    Hey Tom Thank you , so i did it with overlay , can we fix it as the picture ?

    Thanks in advance


    You can try:

    1. Setting your column gutter to 0
    2. Setting your padding to 0
    3. Adding this CSS:

    #wpsp-86.wpsp-card .wp-show-posts-single .wp-show-posts-image:after {
        content: "";
        box-shadow: inset 20px 0px 25px -11px rgba(0,0,0,0.3);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    #wpsp-86.wpsp-card .wp-show-posts-entry-header {
        background: rgba(255,255,255,0.3);
        padding: 50px;

    Hey Tom thanks for your quick response , i did it as you told me and it looks good but now the posts are not clickable


    Ah, you may need to use javascript to make the entire post clickable.

    For example:

    jQuery( document ).ready( function( $ ) {
        #( '#wpsp-86 article' ).on( 'click', function( e ) {
            var _this = $( this ),
                url = _this.find( 'a' ).attr( 'href' );
            if ( url ) {
                window.location.href = url;
        } );
    } );

    Then add this CSS:

    #wpsp-86 article {
        cursor: pointer;
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.