Hero image issue

Hi Liran,

Does the image has to be dynamic or it's ok to use a static image?

Let me know :)

Hi Ying,

Since the plugin shows a specific post, I don't mind using a static image.

In that case, use a block element - page hero instead of using a WP show posts list in a header element might be easier.

If you are using Generateblocks, the layout of the page hero is very easy to build, I quickly built a demo, and highlighted the settings and structure:
https://www.screencast.com/t/TvM69tgBsL3

Hope it's useful for you :)

Unfortunately, I can't use the Gutenberg editor. Is there perhaps another way?

Then you can try to add a background image to the header element directely.

uncheck the images box in the WP show posts list.

Use some CSS later to adjust the layout.

Let me know :)

Done!

Any chance you can take a look and help me with the CSS code?

Try to add this CSS:

.home .page-hero section#wpsp-30979 {
    max-width: 400px;
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
    bottom: -70px;
}
.page-hero {
    position: relative;
}
.home .page-hero {
    margin-bottom: 70px; /*match the -70px*/
}

Btw maybe usepxinstead of %for paddings of this one.

Let me know if this works :)

It works, thanks!

Can I also make the background image a link?

Based on the current structure, I don't think so...

Unless you can insert an HTML of an image with a link, something like this to the page hero as well.
<a href="image-link"><img alt="Home-hero" src="your-post-link" width=100%" height="auto"></a>

Remove the background image and top/bottom paddings from page hero.

I can have a look then to see if anything else needs to be adjusted :)