- This topic has 23 replies, 2 voices, and was last updated 4 months ago by David.
October 14, 2020 at 6:56 am #1488495Lee
I’m trying to create a page hero (heading) for the front page of my website. I’m trying to achieve something similar to the link provided. I’ve played around with the padding options for ages but I don’t seem to be getting anywhere close. Could you please help me achieve this?
Also notice, that when the page of what I’d like to achieve is cut down to mobile size, the image within the header responds by appearing below the text – rather than with the text running inside the image (as it does with mine). I’d also like to achieve this.
Lee.October 14, 2020 at 7:46 am #1488562DavidStaffCustomer Support
you may be better off using a Block Element instead of the Header Element:
If you install the GenerateBlocks plugin you will be able to add a Container Block for the background, a Grid Block for columns etc…October 15, 2020 at 3:21 am #1489995Lee
Ah I see. Thanks for this.
If I’m only going to be using this specific Block once on the front page, is it worth creating a Block as such, or would it be any different to create the block within the actual page?
Also, if I was to use a Block, would this affect SEO with keywords and stuff?
Many thanks again,October 15, 2020 at 3:43 am #1490023DavidStaffCustomer Support
For sure – you could create this directly in the Page Editor.
I would still recommend using the GenerateBlocks plugin instead of the Core Blocks.
Ie. use Container Block instead of Group Block.
You will need to set the Page Builder Container to Full Width:
Then construct your page using Container Blocks.
Each container will allow to create full width or contained content.
For the Merged header you would simply remove the content from your header element and just leave the merge site header option enabled.
NO – blocks aren’t treated any differently in regards to SEO.October 15, 2020 at 3:56 am #1490044Lee
Brill. I’ll give this a shot. Thanks again.October 15, 2020 at 4:16 am #1490068DavidStaffCustomer SupportOctober 15, 2020 at 7:54 am #1490571Lee
OK, so can you tell me if I’m on the right track here.
I’ve created a Block Element that’s now visible on the front page. I’m a little confused as to how I’d merge into the logo and navigation though? Could you help me achieve this please?
Many thanks again.October 15, 2020 at 7:58 am #1490580DavidStaffCustomer Support
You still need to create a separate Header Element.
Do not add any content to the element or change any other settings, just go to the Site Header tab, set it to Merge with Content and edit the header / nav colors to suit.October 16, 2020 at 3:37 am #1491679Lee
Got ya! Brilliant, thank you.
And one final thing regarding this, when I minimise the screen to view the front page on a mobile, I’d like the text to appear above the image, as it does via the link attached.
Many thanks again,October 16, 2020 at 3:59 am #1491708DavidStaffCustomer SupportOctober 16, 2020 at 4:01 am #1491711Lee
I think I could make it transparent.October 16, 2020 at 4:10 am #1491723DavidStaffCustomer Support
Select the Container Block and under Advanced > Additional CSS Class add –
Set the Background Color for the Container Block to #f6f7f8 – this will match the color in your image.
Now can you give the Left hand Grid Block a minimum height in its Settings > Layout. Make it around 300px.
Then select the Right hand Grid Block, select Layout > Mobile Tab and in the Order field add
Once thats done ill provide some CSS to reposition the image.October 16, 2020 at 4:23 am #1491737Lee
I’ve added the CSS class, and changed the colour.
However, when I select the left hand grid block within the container and then select Layout, I only see options for Container Width, Vertical Alignment, and Remove Vertical Alignment?
Am I on the right track?
Many thanks again.October 16, 2020 at 4:41 am #1491755DavidStaffCustomer SupportOctober 16, 2020 at 4:46 am #1491763Lee
Brill. Thank you.
Ok, I’ve done all of that. Is there anything else I need to do?
- You must be logged in to reply to this topic.