-
Hi All: These are probably going to be dumb questions, but I’m learning to use GP Premium without a site-design tool (I’ve used Elementor in the past). So, I’m probably going to get some of the terminology wrong here. But I’m basically trying to duplicate the look & feel I have currently with the Bravada theme on this site: https://discoveringhockinghills.com/
I’m working with a staging site here so I don’t screw up the live one: https://staging-discoveringhockin.siterubix.com/
I don’t really care about the animated titles in the page hero, but that might be cool to add later.
Anyway, I’m just trying to get the full screen header/page hero with merged/transparent header & nav. I think I’ve achieved that so far. Now I have two questions:
1. How do I create a different page header for pages & posts so they display the title and featured image using a full screen header & background image similar to the home page?
2. Is there any way to have more than one header image for the home page and have them rotate whenever the page is loaded or refreshed?
Lastly, when setting the font & weight for my title, is this the right way to do it? Basically in the blank box at the top of the Header Element, I put:
<H1 style="font-family:playfair display; font-size:71px; font-weight:700; line-height:86px;"> Discovering Hocking Hills </H1> <h4> Your Guide to the #1 Tourist Destination in Ohio </h4> <i>Take Only Pictures, Leave Only Footprints, Kill Only Time…</i>Seems like there should be a more efficient way of accomplishing this. LOL
Thank you!
-Dave
-
Hello Dave,
1. How do I create a different page header for pages & posts so they display the title and featured image using a full screen header & background image similar to the home page?
You can use a block element – page hero.
https://docs.generatepress.com/article/block-element-page-hero/2. Is there any way to have more than one header image for the home page and have them rotate whenever the page is loaded or refreshed?
It’s possible, but it will require some custom coding.
Lastly, when setting the font & weight for my title, is this the right way to do it? Basically in the blank box at the top of the Header Element, I put:
you can do that, but I would recommend install GenerateBlocks plugin. And create the hero using
block element - page hero, you will be able to define typography at the block level.But if all h1 will have the same typography, it’s preferrable to set the typography in customizer > typography, as the settings in the customizer are global.
The
header elementis pretty much replaced byblock element - page hero, its only purpose now is to merge the header with page hero/content, here’s a video for your reference: https://youtu.be/TP8mgBQTgGg?si=RTEM3r65SdHhABuc -
Thank you Ying! I will play around with the block element – page hero, and I assume then I would need to also set some “Exclude” display rules on my Header element, correct?
It’s possible, but it will require some custom coding.
Can you give me any hints on where I might begin to rotate 2 or 3 header background images?😊 This isn’t super important, but I would like to do it possible.
you can do that, but I would recommend install GenerateBlocks plugin. And create the hero usingblock element – page hero, you will be able to define typography at the block level.
But if all h1 will have the same typography, it’s preferrable to set the typography in customizer > typography, as the settings in the customizer are global.
Not sure if I fully understand (yet), but I will play around with my typography settings in the customizer. Is GenerateBlocks actually required to do the things I want to do? I don’t really understand what GenerateBlocks adds the GP Premium doesn’t already do.
Thanks!
-
and I assume then I would need to also set some “Exclude” display rules on my Header element, correct?
The header element should only be there for the merge purpose, you do not need to add background image or content in it. So no, I don’t think you need to set Exlude rules.
The random background can be achieved like this, replace
url-1,url-2andurl-3with the actual image URLs.1. Add this PHP：
function random_background() { // Array of image URLs $imageUrls = ['url-1', 'url-2', 'url-3']; // Generate a random index to select a random image URL $randomIndex = array_rand($imageUrls); // Select a random image URL $randomImageUrl = $imageUrls[$randomIndex]; echo '<style> .random-background-container { background-image: url('. $randomImageUrl .'); } </style>'; } add_action('wp_head', 'random_background');2. Add a CSS class to the container that is supposed to have random background image
random-background-container.
https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/3. If the background image’s element type is set to element, then ignore this step. If the background image’s element type is set to pseudo element (when opacity is enabled for background image), you need to change this
.random-background-containerto.random-background-container:before. -
The header element should only be there for the merge purpose, you do not need to add background image or content in it. So no, I don’t think you need to set Exlude rules.
Ohhh! I understand now. I missed that earlier. OK, let me finish watching both videos about the block element – page hero and then see if I can get it working correctly.
I really appreciate the info regarding the random background images too!
-Dave
-
No problem!
Just let me know if there’s anything unclear 🙂
-
Hi Ying, I do have one more question as I’m working with this page hero element.
The header element should only be there for the merge purpose, you do not need to add background image or content in it. So no, I don’t think you need to set Exlude rules.
Since my Front page is a bit different, with the site name and a couple tag lines overlaying the background image, do I need to create one page hero element that only displays on the Front Page, and then a second page hero element for all other pages?
Sorry for all the questions. I’ve only ever used Elementor with GP in the past, so things were much easier. But Elementor introduces way too much “bloat” in my opinion, so I’m trying to learn to use GP natively.
-
, do I need to create one page hero element that only displays on the Front Page, and then a second page hero element for all other pages?
Yes, you can do that 🙂
If your front page is a static page and the page’s content container is set to be full width, you can either build a block element – page hero or build the page hero section directly in the page editor.
-
If your front page is a static page and the page’s content container is set to be full width, you can either build a block element – page hero or build the page hero section directly in the page editor.
Thanks! I guess I need to realize there are multiple ways to accomplish the same outcome. 😉
Can you also explain how the “content container” in GP is different from the “Container” in GenerateBlocks? I’m still trying to understand what GenerateBlocks provides that isn’t already natively available in GP Premium. Or stated another way, why do I need GenerateBlocks? 😊
-
GP’s content container is from GP’s PHP template, it’s a
divelement of the content area, and it restrains how wide the content area (including sidebars) can be.GB’s container is a block for you to create different sections in the content area.
When you add a GB container block to the page editor, you are actually adding the container block into GP’s content container’s content area.
To make it more straightforward, here’s a general HTML structure of a page:
- site header - site content container (content area + sidebar area) - site footerSo for example, if you want the GB container block to be full width (eg. hero section) in the page editor, you have to make the GP content container to be full width first. Hope that makes sense 🙂
-
Ying, with all your excellent help, I made great progress yesterday on my page hero element(s). But I noticed there are some glaring differences between the “Header” element, and the “Block Element – Page Hero”. For example, with the Header element, on the Page Hero tab, I could easily mark it as Full Screen (with a checkbox), set a Background Image, and then give it a black Background Color with some transparency for best readability with my merged header/navigation.
With the Block Element – Page Hero, I don’t see any way to easily set any of those items (full screen and black background with transparency). If I use a dynamic background image in the outer container, I don’t see a way to make it full screen, and I can only adjust Opacity which doesn’t allow good readability with my header nav.
I ended up going with a “Cover” block inside the outer container of a Block Element-Page Hero and got it looking pretty close to what I want. But it seems like I should be able to do all that with the Block Element – Page Hero without using a Cover block. It should at least have the same functionality as the Header element IMHO.
Thankfully I am only working on a staging site at this point. It is https://staging-discoveringhockin.siterubix.com/ if you want to take a look at what I have so far based on what I explained above.
-
With the Block Element – Page Hero, I don’t see any way to easily set any of those items (full screen and black background with transparency).
– page hero elements uses
after_headerhook, so the container block is full width by default, you do not need to make extra settings.– the image transparency can be set via the
Image opacityslider in the Backgrounds panel.https://docs.generateblocks.com/article/backgrounds-options-overview/#Image-opacityBut cover block works as well 🙂
-
Hi Ying. I was referring more to “full screen” from a vertical/height perspective. With the Header Element, the Full Screen checkbox on the Page Hero tab seems to make my background image take up the entire screen – width and height.
With the Block Element – Page Hero, would this have to be done with padding or sizing in the container? Or is it controlled by how much content you actually put in the container?
-
Hi there,
if you add a GB Container Block to the Page Hero ( or anywhere ) you can set is Sizing > Min Height to
100vhto fill the height of the viewport.Using Min Height will allow the container to grow if the content within it requires that.
-
if you add a GB Container Block to the Page Hero ( or anywhere ) you can set is Sizing > Min Height to 100vh to fill the height of the viewport.
Nice, Thank you David! I can see I have a lot to learn after so long using a design tool like Elementor.
I created a second staging site and I’m going to test out some of the GP Site Library templates so I can learn from how ya’ll do things. 😊
-
Glad to be of help.
Your feedback is much appreciated!
- You must be logged in to reply to this topic.