[Support request] mellow homepage

[Friso]

Hi,

In the site library you can see that on the homepage of the Mellow theme, the blogposts are displayed on top of the header image.
How can I get this same effect? On my homepage the blog posts are all displayed below the header image.

I saw there was a previous post about this, but the answer was erased.

kind regards,
Friso

[Ying]

Hi Friso,

This CSS should bring the content up, but you’ll need to change the elementor section’s background color to transparent instead of #eeeeee, in order to have the same effect as mellow.

div#page {
    margin-top: -200px;
    position: relative;
    z-index: 100;
}

[Friso]

Thanks Ying! Where do I insert this code?

[Ying]

You can add it to customizer > additional CSS.

[Friso]

thanks very much Ying.

[Ying]

No problem 🙂

[Friso]

Hello Ying,

It only cuts off part of the top image.

you wrote: you’ll need to change the elementor section’s background color to transparent instead of #eeeeee, in order to have the same effect as mellow.

Do you know where I can do this in elementor?

(I changed background colour in general site configuration to #00000000) but that doesn’t help?

[Friso]

I did it here: https://elementor.com/help/background-site-settings/

[Elvin]

Hi there,

You’ll have to do it to the main section that contains all the content on the home page.

The settings you’ll have to tweak are:

z-index: set it to a value higher than one.
padding-top: set it to 0.
margin-top: set it to a negative value of your preference. (try -120px)
background-color: set it to none or transparent.

[Friso]

I’m totally lost I’m affaid. I don’t understand how to easily edit pages in GeneratePress…

[Friso]

It is to much css and other coding stuff for me I’m afraid, just to get the thema displayed in the same way as in the library showcase of GeneratePress.

[Friso]

When I would like change things like it is written here:
https://docs.generatepress.com/article/adjusting-the-featured-images/

On the site itself I get the message:
This page uses a Hero-element (some options don’t work / not applicable).

When I try to edit the page, I only see the header Image, but not the blog posts?

[David]

Hi there,

the site uses a Header Element to create the Merged Site Header Effect seen on the Front Page:

https://docs.generatepress.com/article/header-element-overview/

And for the hero section ie. the large background image with text over the top = that is added using a Block Element:

https://docs.generatepress.com/article/block-element-page-hero/

The Elements can be found in Dashboard > Appearance > GeneratePress.

[Author]

Posts