[Resolved] Target header style

Home Forums Support Target header style

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #890721
    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!!

    #890882
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #894462
    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!

    #894595
    Leo
    Staff
    Customer Support

    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/

    #894603
    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.

    #894680
    Leo
    Staff
    Customer Support

    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);
    }
    #895354
    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!

    #895412
    Leo
    Staff
    Customer Support

    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

    #895451
    Pedro

    Thank you so much!

    #895516
    Leo
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.