[Resolved] Layout Design Like SiteLibrary (Charge)

[Sanu Kumar]

Hey

Can I create the same like this: https://www.loom.com/share/15bca21675164b4e9ba333b76b28b6fe
from Site Library.

I want to give this in an archive section.

[Elvin]

Yes you can definitely replicate this.

Can you link us to the site you’re trying to apply this?

Thank you.

[Sanu Kumar]

https://www.masteryblogging.com/

[Elvin]

Can you specify which part of the site do you want this applied?

If its on the “Most recommended posts”, you can try this CSS code:

article.elementor-post.elementor-grid-item {
    background-color: rgba(0,0,0,0.02);
    transform: scale(1);
    box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
    transition: all 0.1s ease-in;
}

article.elementor-post.elementor-grid-item:hover {
    transform: scale(1.01);
    box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.3);
}

[Sanu Kumar]

I want to apply in the archive section like someone clicks on my blogging category, it shows layout like that here: on my blog page https://www.masteryblogging.com/blog/.

[Elvin]

Try this out.

.uagb-block-4849a8de .uagb-post__items article {
    background-color: rgba(0,0,0,0.02);
    transform: scale(1);
    box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
    transition: all 0.1s ease-in;
}

.uagb-block-4849a8de .uagb-post__items article:hover {
    transform: scale(1.01);
    box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.3);
}

[Leo]

Hey Sanu,

Can you check with the plugin support (Elementor and UAGB) if Elvin’s code above doesn’t work?

Please be mindful that the questions here should be directly related to the GeneratePress theme or GP Premium plugin:
https://www.screencast.com/t/W7vOHMRsn

We appreciate your understanding 🙂

[Sanu Kumar]

Hmmm, my bad.

I didn’t check when I posted a question.

I have removed UAGB and elementor, now is there any chance to make like this: https://www.loom.com/share/15bca21675164b4e9ba333b76b28b6fe

I found it from site-library of GP.

I want to achieve it only on Archive Section like, in this page: https://www.masteryblogging.com/

or if someone searches or go to my category wise page….can we make it?

[Leo]

The content from that page is all coming from Elementor.

Am I missing something?

[Sanu Kumar]

ohh again sorry, it was the homepage….🙏

Here it is: https://www.masteryblogging.com/blogging/

This link is only of Blogging category,,,I want in all category pages (don’t know archive page and category both are same)

[Elvin]

Hi,

You can try this out.

.generate-columns-container > article > .inside-article {
    background-color: rgba(0,0,0,0.02);
    transform: scale(1);
    box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
    transition: all 0.1s ease-in;
}

.generate-columns-container > article:hover > .inside-article:hover {
    transform: scale(1.01);
    box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.3);
}

[Sanu Kumar]

thanks, Elvin

It worked but the only thing I need is could you help me to fix the text, means the text is touching the border so I need to give padding left and right.. how to make this

[Elvin]

You can try this CSS.

.generate-columns-container > article > .inside-article > .entry-header, .entry-summary, .entry-meta {
    padding-left: 20px;
    padding-right: 20px;
}

Just change the px value to your preference.

[Sanu Kumar]

it helped.

[Elvin]

Nice one. Feel free to open a new topic if you have any other concerns.

Cheers. 😀

[Author]

Posts