[Support request] Personal home page hero

Home Forums Support Personal home page hero

This topic contains 12 replies, has 2 voices, and was last updated by  David 5 months, 2 weeks ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #776156

    Azzurra

    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.

    GeneratePress 2.2.1
    GP Premium 1.7.7
    #776380

    David Customer Support
    #778235

    Azzurra

    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.

    #778611

    David Customer Support

    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.

    #778656

    David Customer Support

    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

    #779080

    Azzurra

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

    #779101

    David Customer Support

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

    #779296

    Azzurra

    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? 🙂

    #779299

    David Customer Support

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

    #779318

    Azzurra

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

    #779444

    David Customer Support

    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.

    #779525

    Azzurra

    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.

    #779629

    David Customer Support

    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.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.