[Resolved] Change home image – Pixel site

[Javi]

I am suing Pixel from the Site Library. I can´t figure out how to change the both text and image of the home page (“HELLO, WELCOME TO PIXEL A Photography Portfolio for GeneratePress Sites”).
Pretty sure it´s quite simple.

[Javi]

Just found it!

[Tom]

Glad you found it! 🙂

[Kilian]

I can’t figure it out. Could you please say how to do it? Thanks in advance!

[David]

Hi there,

go to Appearance > Elements. Edit the Header Element that is assigned to the Front Page, there you can change the text and the background image.

[Kilian]

Thanks David! 🙂

[David]

You’re welcome

[Kilian]

Sorry David, as you can see I’m new on this… Could you please tell me how to change the size of the text? The sentence I want to write it’s a bit too long, and it divides the frase in 2 rows. I would like to do the text a bit smaller in order to fit it in one unique line. Thanks again!

[David]

So in the original header the text was output as a H1 with a specific class, it looked like this:

<h1 class="hero">Hello, Welcome to Pixel</h1>

Assuming you have only changed the text ie. Hello, Welcome….. then the CSS Class of hero is effecting the font size. So go to Customizer > Additional CSS and look for this:

h1.hero {
    font-size: 44px; /* Change the pixels */
    padding-bottom: 15px;
    font-weight: 700;
}

And change the font-size 🙂

[Kilian]

Great! I got to solve it following your steps for the H1. hero.
But now, to change the other text where it says “A Photogragpy Portfolio…”. This H2 is not in the Additional CSS. Where should I go to change this?

And in the other hand, is it possible to only change the font-size of the H2 for the mobile content, and not for desktop nor tablet? Thx!

[David]

The H2 can be set in the Customizer > Typography > Headings, it has a separate option for Tablet/Mobile sizes.

[Kilian]

I’ve changed the picture behind these two texts (in Appearance>Elements), but it’s cutted, since I can only see a horizontal portion of the picture. Can I choose which part of the picture to see? I’ve noticed that when I change from desktop to tablet and mobile phone, the part of the picture that you see is different. Thanks once more!

[David]

So in the Header Element you can adjust the top and bottom padding, this will control the height of the container and the aspect ratio of the image. You can adjust it separately for Destkop and Mobile.

There is also the Background position which you can change to adjust which part of the image is always in view.

[Kilian]

Thank you so much David! I’ll continue my website tomorrow. I think it’s been enough questions for today! xD

[David]

You’re welcome. If you need any more help, raise a new Topic where you can add a Site URL privately.

[Author]

Posts