[Resolved] Creating a header with GP Elements

[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:

Can you provide assistance?

[David]

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?

[Zoran]

Hello,

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

[David]

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.

[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!

[David]

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

[Zoran]

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

[David]

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?

[Zoran]

This sounds great!

[David]

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.

[Zoran]

Hi,

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

Thank you for the assistance.

[David]

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

[Author]

Posts