[Support request] Personal home page hero

[Matteo]

Hi,

my current website has this homepage built with Genesis with the help of a developer.

How can I do the same with GeneratePress? Elements? Sections? How?

Thanks.

[David]

Hi there,

you can use the Header Element:

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

Here are some examples:

https://docs.generatepress.com/article/page-hero-examples/

[Matteo]

Someone can do it for me by payment? Do you offer this service?

The example I like are my current homepage or the Backlinko homepage.

[David]

Hi there,

its not really a service we have the time to offer at the moment, let me have a look at the Site and ill let you know or point you in a direction of a developer.

[David]

So, give this a shot.
1. Customizer > Layout > Container – Set to 1140px to match existing.
2. Appearance > Elements > New Header and add this HTML

<div class="header-wrap">
	<div class="column-single">
		<h1 class="hb-title"><span style="color: #da3832;">VINCERE LE</span> ELEZIONI PRIMA <span style="color: #da3832;">DELLE</span>
            ELEZIONI</h1>
        <p class="hb-description">Come vincere le elezioni prima ancora di sapere la data del voto, lasciando ai tuoi
            avversari solo le briciole, e aumentare il consenso in tempi di governo!</p>
        <p><a class="shiny-button" href="URL FOR BUTTON LINK">Inizia da qui</a></p>
	</div>
	<div class="column-single">
		<img src="URL TO IMAGE">
	</div>
</div>

Note you need to update the Button and Image Links.

3. Set the Background image for the Header Element, you can also add a background color and set this to overlay for the faded effect.
4. Set the Display Rules.

This will help with setting up the Header Element:

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

5. Customizer > Additional CSS – and this CSS:

/* Header wrap to create two columns */
.header-wrap {
    display: flex;
}

.header-wrap .column-single {
    flex: 0 0 50%;
    box-sizing: border-box;
}

.header-wrap .column-single:first-child {
    padding: 10px 20px 20px 0;
}

.header-wrap .column-single img {
    vertical-align: middle;
}

/* Change Header to stacked on Mobile */
@media (max-width: 768px) {
    .header-wrap {
        flex-direction: column-reverse;
        justify-content: center;
    }

    .header-wrap .column-single img {
        width: 60%;
        /* Adjust % to change image size */
        max-width: 187px;
        height: auto;
    }

    .header-wrap .column-single:first-child {
        padding: 10px 30px;
    }

    .header-wrap .column-single {
        text-align: center;
    }
}

/* Header Title */
.header-wrap .hb-title {
    margin-top: 15px;
    font-size: 4.25em;
    line-height: 1.125;
}

.header-wrap .hb-description {
    font-size: 1.525;
}

@media only screen and (max-width: 960px) {
    .header-wrap .hb-title {
        font-size: 3.535em;
    }

    .header-wrap .hb-description {
        font-size: 1.325;
    }
}

@media only screen and (max-width: 580px) {
    .header-wrap .hb-title {
        font-size: 1.825em;
    }

    .header-wrap .hb-description {
        font-size: 1.025;
    }
}

/* Shiny Button from original site */
a.shiny-button {
    background-color: #da3832;
    border-radius: 8px;
    color: #fff;
    display: inline-block;
    margin-top: 10px;
    padding: 12px 28px 13px;
    line-height: initial;
}

.shiny-button {
    display: inline-block;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.1;
    font-weight: 400;
    font-family: sans-serif;
    color: #FFF;
    font-size: 12px;
    background-color: #DB0909;
    background-image: -webkit-linear-gradient(top, #e00909 0%, #dd2f2f 48%, #DB0909 49%, #DB0909 82%, #f50b0b 100%);
    background-image: -moz-linear-gradient(top, #e00909 0%, #dd2f2f 48%, #DB0909 49%, #DB0909 82%, #f50b0b 100%);
    background-image: -o-linear-gradient(top, #e00909 0%, #dd2f2f 48%, #DB0909 49%, #DB0909 82%, #f50b0b 100%);
    background-image: linear-gradient(top, #e00909 0%, #dd2f2f 48%, #DB0909 49%, #DB0909 82%, #f50b0b 100%);
    border-color: hsl(0, 30%, 45%);
    -webkit-box-shadow: inset 0 0 1px 1px #f74343, 0 0 1px 3px rgba(0, 0, 0, .15);
    -moz-box-shadow: inset 0 0 1px 1px #f74343, 0 0 1px 3px rgba(0, 0, 0, .15);
    box-shadow: inset 0 0 1px 1px #f74343, 0 0 1px 3px rgba(0, 0, 0, .15);
    -webkit-text-shadow: 1px 1px 1px #790505;
    -moz-text-shadow: 1px 1px 1px #790505;
    -o-text-shadow: 1px 1px 1px #790505;
    text-shadow: 1px 1px 1px #790505;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 12px 30px 12px 30px;
}

a.shiny-button:hover {
    background-color: rgba(255, 255, 255, 0.98);
    color: #333;
}

.shiny-button:hover {
    color: #FFF;
    background-color: #ea0a0a;
    background-image: -webkit-linear-gradient(top, #ef0a0a 0%, #df3e3e 48%, #ea0a0a 49%, #ea0a0a 82%, #f51b1b 100%);
    background-image: -moz-linear-gradient(top, #ef0a0a 0%, #df3e3e 48%, #ea0a0a 49%, #ea0a0a 82%, #f51b1b 100%);
    background-image: -o-linear-gradient(top, #ef0a0a 0%, #df3e3e 48%, #ea0a0a 49%, #ea0a0a 82%, #f51b1b 100%);
    background-image: linear-gradient(top, #ef0a0a 0%, #df3e3e 48%, #ea0a0a 49%, #ea0a0a 82%, #f51b1b 100%);
    border-color: hsl(0, 31%, 48%);
    -webkit-box-shadow: inset 0 0 1px 1px #f74e4e, 0 0 1px 3px rgba(0, 0, 0, .15);
    -moz-box-shadow: inset 0 0 1px 1px #f74e4e, 0 0 1px 3px rgba(0, 0, 0, .15);
    box-shadow: inset 0 0 1px 1px #f74e4e, 0 0 1px 3px rgba(0, 0, 0, .15);
    -webkit-text-shadow: 1px 1px 1px #880606;
    -moz-text-shadow: 1px 1px 1px #880606;
    -o-text-shadow: 1px 1px 1px #880606;
    text-shadow: 1px 1px 1px #880606;
}

That should get you almost there

[Matteo]

Thank you. Now it’s good but I need other changes.

[David]

Awesome, glad to hear that worked. What are other changes so i can advise?

[Matteo]

Too layout mismatch for now. Difficult for me to explain because my staging copy is not accessible if you don’t insert a line in your hosts file and so you can’t see the site.

Maybe it’s more simple for me to ask you: how to exactly replicate the homepage of backlinko.com? 🙂

[David]

Can you provide a screenshot of the site? The site is very similar to backlinko so the markup and that would be very similar.

[Matteo]

Here is the screenshot 1 (above the fold) : https://www.dropbox.com/s/kd3hz9saqygg2mp/Schermata%202019-01-11%20alle%2017.28.42.png?dl=0

Here is the screenshot 2 (below the fold) :
https://www.dropbox.com/s/yua3wo53cvad3nx/Schermata%202019-01-11%20alle%2017.33.50.png?dl=0

But the problems are :

1) How to create the sections below the hero sections as in backlinko?
2) In Settings-Reading I had to choose a static page as homepage and now I see that page below the hero section. Need to remove.
3) Photo and text in the hero section are not resizing correctly based on device (smartphone, tablet, desktop).

[David]

So:

1. Currently you would need to use the GP Sections Module:
https://docs.generatepress.com/article/sections-overview/
to add columns within:
https://docs.generatepress.com/article/creating-columns/

2. Remove the Page from the home requires this CSS:

body.home #page {
    display: none;
}

This should eliminate the gap between the image and the footer.

3. I edited the CSS above, should get you closer.

[Matteo]

I used the sections module and I created the columns.

Here is the results :

1) https://www.dropbox.com/s/k8u6p1a9tfxxghg/Schermata%202019-01-11%20alle%2022.17.11.png?dl=0
2) https://www.dropbox.com/s/vxk3bk4e3fd8tcf/Schermata%202019-01-11%20alle%2022.26.05.png?dl=0

Now I need to fix this things :

1) My photo doesn’t end exactly at the bottom of the hero section.
2) The background image in the hero section need to be more transparent like in the original site : http://www.fabbricapolitica.com
3) The position of the photo in the hero section should be a little bit on the right.
4) The headline and the sub-headline should be greater than now.

[David]

Real tricky to advise when i can’t see the site, but try the following steps:

1. In Header element Set top padding to 120px and bottom padding to 0.
2. In Header element Add a background color of white and set the transparency to 80% by adjusting the slider. And then Set Background color to overlay.
3. Not sure about this but first can you check the Customizer > Layout > Container – and set the container size to 1140px if its not already. This will tighten the header.
4. In Customizer > Typography
> Body set font size to 18px. And set font to Open Sans.
> Heading > H1 set font to Oswald.

Lastly i updated the CSS above to amend font sizing in the header so update this as well.

[Author]

Posts