[Resolved] how change demo (mellow) home page image

[khan]

I imported the mellow theme from the site library. now I am trying to change the home page image but i cant.how can i change the hero image?
plz give me a simple solution.

[David]

Hi there,

the Site uses a Header Element, which is located in Dashboard > Appearance > Elements:

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

[Matt]

Hi David,

I went into Appearance >> Elements and I see “Home Hero” within it, however when I click Edit, it’s just a blank element with only the Display Rules and Internal Notes… Not sure where to find the actual image on the homepage for Mellow.

Please help.

Thank you!

[Leo]

So this is not what you are seeing?
https://www.screencast.com/t/qhMQKWhhh

If so please try disabling all plugins except GP Premium to test.

Let me know 🙂

[Matt]

Hi Leo, I had activated the Classic Editor (not a fan of Gutenberg) so I didn’t have the option. I deactivated that and saw the same screenshot and was able to help. Thank you!

[Leo]

My recommendation would be to start learning the block editor – it’s really good once you are through the learning curve.

The classic editor itself will no longer be supported by WordPress at the end of this year: https://make.wordpress.org/core/2018/11/07/classic-editor-plugin-support-window/

[Matt]

Great to know, thank you!!! We’ll start learning it over here

[Leo]

No problem 🙂

[Latinx]

Hello,

I’m starting a new site using GP Premium and the Mellow blog theme.

There is a picture already set in the Hero image as the default. It’s the one with the guy in front of the mountain lake.

Need to replace the image.

Questions:

1. When I open the Appearance > Elements > Home Hero, I see that image in a “Container” element, but I do not see how to replace it with a different image. When I click it, all I get is the cursor in a box where I can add text. How do I replace the image?

2. I looked at other sample images on the site, and they vary – most are about 1920 wide but different heights. I don’t want the image to be too small (blurry on a large screen) or too large (slow loading). Is there a recommended size for the images?

Your help is appreciated!

[Elvin]

Hi Latinx,

1. When I open the Appearance > Elements > Home Hero, I see that image in a “Container” element, but I do not see how to replace it with a different image. When I click it, all I get is the cursor in a box where I can add text. How do I replace the image?

You can select the Container block and check it’s Background tab.

Here’s a video reference on how it’s done – https://share.getcloudapp.com/wbuzYjq9

2. I looked at other sample images on the site, and they vary – most are about 1920 wide but different heights. I don’t want the image to be too small (blurry on a large screen) or too large (slow loading). Is there a recommended size for the images?

These are just mock-ups and are meant to be replaced by the user. There are no exact recommendation but ideally, if you wish hi-res, at least have image resolutions at around 1920×1080 and have the image size set to “full” as shown here – https://share.getcloudapp.com/jkuvmd2J

[Latinx]

Hi Elvin,

Thanks for this information. Very helpful! I was able to change the default image to my custom image.

I’m having another issue now.

Before I changed the image, I could see that the design of the page allowed a layered appearance. The top of the two posts overlapped the lower part of the hero image.

After I changed the image, the posts do not overlap the bottom of the image. My site does not look like the demo of the Mellow theme.

Here is a link to the home page I am developing: https://annc12.sg-host.com/

The tops of the posts on my home page do not overlap the hero image.

Question: How was the overlap done, and how can I get it working for my site?

Many thanks!

[Elvin]

This issue occurs when your Block Element’s content area has an extra empty Paragraph block after the GB Container Block holding the background image.

To address this, try opening the Block Element with the Hero and check the list of blocks inside its contents. You’ll likely see a Paragraph block. You’ll have to remove it so the CSS intended to make things overlap would work again. 🙂

[Latinx]

Thanks, Elvin!

That was exactly what was wrong. There was an empty paragraph after the container block.

🙂

[Elvin]

No problem. Glad you got it sorted. 🙂

[Author]

Posts