Creating a header with GP Elements

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?

Hello,

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

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.

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!

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

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

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?

This sounds great!

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.

Hi,

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

Thank you for the assistance.

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