- This topic has 11 replies, 2 voices, and was last updated 5 years, 7 months ago by David.
-
AuthorPosts
-
October 4, 2018 at 7:01 am #693292Zoran
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?
October 4, 2018 at 7:23 am #693310DavidStaffCustomer SupportHi 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?October 4, 2018 at 9:03 am #693460ZoranHello,
Yes the Icon / Text / Image row is what I am referring to. There is no header above this.
October 4, 2018 at 3:22 pm #693727DavidStaffCustomer SupportSo 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.
October 4, 2018 at 11:06 pm #693867ZoranYes, those will be different for each page. I haven’t made a header like this one so far, so I really appreciate the help!
October 5, 2018 at 3:04 am #693998DavidStaffCustomer SupportAre you using any plugins? Page Builder or Custom Fields?
October 5, 2018 at 3:40 am #694026ZoranI am using Elementor. Not using custom fields but I can.
October 5, 2018 at 7:49 am #694263DavidStaffCustomer Supportso 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?
October 5, 2018 at 11:31 am #694416ZoranThis sounds great!
October 6, 2018 at 4:18 am #694736DavidStaffCustomer SupportSo 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 imageName 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.
October 8, 2018 at 12:03 am #695816ZoranHi,
You are awesome! I made a few adjustments and it works great!
Thank you for the assistance.
October 8, 2018 at 1:31 am #695852DavidStaffCustomer SupportAwesome! Would be great to see the site when its ready 🙂 Glad to be of help.
-
AuthorPosts
- You must be logged in to reply to this topic.