[Resolved] Target header style

[Pedro]

Hello! I would like to place a header as the style of the “Target” template on the home page of my site.

I know it can be done with elements, but I do not know how to do it.

Can you help me?

Thank you!!

[Leo]

Hi there,

Is there a specific part you are wondering about?

Here is the HTML for the hero:

<h1>DON'T LET THE GEARS SLOW YOU DOWN</h1>
<a class="button" href="https://gpsites.co/target/shop/">SHOP NOW</a>

And here are the settings:
https://www.screencast.com/t/nUZu1EI4lb

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Hi leo! I have already added it but I need you to please help me with the following:

– I do not know what the background color code is
– The image I have placed is of very good quality, but in the desktop versions it looks low quality
– I do not know what is the configuration of the “Site header” tab
– I would like to change the color of the button, how can I do it?

Thank you!

[Leo]

– rgba(10,10,10,0.2)

– The image you are using only has width of 1017px. If you want to use full width, then try something like 2000px.

– Site header tab is not used in this page hero.

– Try Colors > Buttons: https://docs.generatepress.com/article/colors-overview/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Hi Leo! Thanks for answering.

Is not there a way to change the color of the header button?

Because if I make the change as you say, they would change the color of all the buttons on the site.

[Leo]

If you want separate button style, change the HTML of the button to:
<a class="button home-hero" href="https://gpsites.co/target/shop/">SHOP NOW</a>

Then the CSS would be:

a.button.home-hero {
    color: #000;
    background-color: #fff;
    box-shadow: 1px 5px 4px rgba(0, 0, 0, 0.5);
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Hi leo!

Thanks for the help, one more thing. I would like to place a shadow and hover like the “Target” template button

What would be the CSS code?

Thank you!

[Leo]

Edited the CSS above.

You can always right-click on the element and use browser inspect tool to see the CSS associated with it:
https://www.screencast.com/t/1xQQevQc

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Thank you so much!

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts