Archived topic

Personal home page hero

12 replies · Started by Matteo on January 8, 2019

Viewing posts 1–13 of 13

January 8, 2019 at 5:38 am #776156

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.

January 8, 2019 at 7:30 am #776380

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/

January 10, 2019 at 6:48 am #778235

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.

January 10, 2019 at 11:58 am #778611

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.

January 10, 2019 at 12:47 pm #778656

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

January 11, 2019 at 5:38 am #779080

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

January 11, 2019 at 6:05 am #779101

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

January 11, 2019 at 8:08 am #779296

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? :-)

January 11, 2019 at 8:14 am #779299

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

January 11, 2019 at 8:35 am #779318

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).

January 11, 2019 at 10:58 am #779444

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.

January 11, 2019 at 1:34 pm #779525

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.

January 11, 2019 at 6:18 pm #779629

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.

This archived topic is closed to new replies.

Start building better websites today.