[Resolved] Creating a header with GP Elements

Home Forums Support [Resolved] Creating a header with GP Elements

Home Forums Support Creating a header with GP Elements

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #693292
    Zoran

    Hi,

    I’m trying to create a website with this specific design and I cannot think of a way to make a header like this for every page:
    Header replication

    Can you provide assistance?

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #693310
    David
    Staff
    Customer Support

    Hi there,

    so is this just the Icon / Text / Image row that you want to add to the header?
    And is there a Site Header above this?

    #693460
    Zoran

    Hello,

    Yes the Icon / Text / Image row is what I am referring to. There is no header above this.

    #693727
    David
    Staff
    Customer Support

    So will each of the icon / text / image be dynamic? ie. different for each page. For example the image could be the featured image, the icon and text could be Custom Fields.

    #693867
    Zoran

    Yes, those will be different for each page. I haven’t made a header like this one so far, so I really appreciate the help!

    #693998
    David
    Staff
    Customer Support

    Are you using any plugins? Page Builder or Custom Fields?

    #694026
    Zoran

    I am using Elementor. Not using custom fields but I can.

    #694263
    David
    Staff
    Customer Support

    so a few options, figuring out the best one is the hard part.
    So you could use a Header Element:
    https://docs.generatepress.com/article/header-element-overview/

    Header element has template tags like:
    {{post_title}} which pulls in the post title.
    {{custom_field.name}} pulls in the ‘named’ custom field.
    So you could construct the content dynamically using Custom Fields. One for each of the variables.

    For the icon the Custom field would have a URL and be output in an img tag.
    For the featured image we could create a simple shortcode.
    Then its just a case of some markup and CSS to form the columns and style.

    Interested?

    #694416
    Zoran

    This sounds great!

    #694736
    David
    Staff
    Customer Support

    So ok, so a few steps.

    1. Create a new Page. Screen Options > Custom Fields > Check box.

    2. Add Custom fields and save – for this example they are:
    header_field1 a line of text
    header_field2 a line of text
    header_icon URL to the icon image

    Name them what you like and amend HTML below accordingly.

    3. Create Featured Image shortcode with this PHP Snippet:

    add_shortcode('featured_img', 'fi_in_content');
    
    function fi_in_content($atts) {
        global $post;
        return get_the_post_thumbnail($post->ID);
    }

    You can use the [featured_img] shortcode anywhere.

    4. Appearance > Elements > New Header. Add this markup in the content:

    <div class="flex-row">
    	<div class="icon">
    		<img src="{{custom_field.header_icon}}">
    	</div>
    	<div class="header-card">
    		<h1>
    			{{post_title}}
    		</h1>
    		<h2>
    			{{custom_field.header_field1}}
    		</h2>
    		<h3>
    			{{custom_field.header_field2}}
    		</h3>
    	</div>
    	<div class="header-image">
    		[featured_img]
    	</div>
    </div>

    You can change the markup accordingly, the header-card pulls in H1 Post title and then your two custom fields. Use whatever markup you need.

    Then Set the Display Rules and save.

    5. Now the CSS:

    .flex-row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-line-pack: center;
        align-content: center;
    }
    
    .flex-row div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    
    .flex-row div {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        min-width: 250px;
        margin: 2% 0;
    }
    
    .flex-row .icon {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 20%;
        flex: 1 0 20%;
        margin-right: 2%;
        padding: 2%;
        border: 2px solid #efefef;
        border-bottom-width: 3px;
        text-align: center;
    }
    
    .flex-row .icon img {
        height: auto;
        width: 100%;
    }
    
    .flex-row .header-card, .flex-row .header-image {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 30%;
        flex: 1 0 30%;
    }
    
    .flex-row .header-card {
        background-color: #efefef;
        padding: 2%;
        text-align: center;
    }
    
    .flex-row .header-image img {
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    If that all works, then you can use a Layout Element to disable the Featured Image on those pages so it doesn’t show twice.

    #695816
    Zoran

    Hi,

    You are awesome! I made a few adjustments and it works great!

    Thank you for the assistance.

    #695852
    David
    Staff
    Customer Support

    Awesome! Would be great to see the site when its ready 🙂 Glad to be of help.

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.