Archived topic
need help with trying to make a page wide image at top of my home page
27 replies · Started by Douglas on March 18, 2022
I saw a fucntion that made my hero image go to the top of the menu and header bars
That's called Merge, it's a feature in the Header element.
This video should help: https://youtu.be/TP8mgBQTgGg
i tried the 400 padding below, and that just left a gap so its no good.
Make sure the value is added as paddingnot margin.
then i removed the bottom 400 spacing, updated, but it still remains. how come? i also purged the cache
It's not there, clear your browser cache as well.
HI Fernado, u still out there ?
Fernando will be off duty on Friday and Saturday.
Would you like to wait for him? He'll be back on Sunday :)
nope that is ok Ying. You have helped me before and thx i am at a point where i have the sidebar setup just right.
i got my hero image setup and then wanted to move it up the top of the page and eliminate those colored bars for menus. i saw this on an example one of you guys showed me in the past. F had me add padding, i tried it and ended up w a big blank area under the image. i can't get rid of it.
so can u help me w those two things? site is in private area
thx
Doug
1. By mentioning the big gap, do you mean this?
https://www.screencast.com/t/q9tSVkydgeIh
If so, it's the first container block on your home page, you can remove it.
When Fernando asked you to add paddings, I think he was pointing the container block in the block element where the lady is.
2. Do you want the remove the pink top bar?
If so, go to appearance > widgets, remove all the widgets from the top bar.
3. Do you want to merge the page hero (the lady) with the navigation (menu)?
If so, watch this video:
https://youtu.be/TP8mgBQTgGg
hi Y
no, this isn't making any sense for me. Can u plz get Fernando to look at this. He was the guy who gave me those instructions that need to be addressed. thx
Hi Douglas,
Ying is correct. :)
The padding should be added to the Container in the Block Element - Page Hero displayed in your Front page.
Let’s tackle this one issue at a time, starting with the Page Hero.
First, let’s delete the spacing: https://www.screencast.com/t/q9tSVkydgeIh
To delete this.
1. Edit Home: https://share.getcloudapp.com/YEury7DR
2. Then delete this Container: https://share.getcloudapp.com/geumq5OE
Now, let’s increase the padding of the Page Hero Container to show the “Hands”.
1. Go to Appearance > Elements and Edit “My Page Hero - home page”: https://share.getcloudapp.com/nOuRnqKv
2. Then, edit the Top padding: https://share.getcloudapp.com/xQuqABRR/annotate
If you want to remove this: https://share.getcloudapp.com/6quZPjo9
1. Click this: https://share.getcloudapp.com/DOu49bKe
Try something high like 800px. Test other values as well.
Kindly let us know how it goes. We’ll proceed with the other issues afterwards. :)
ok Ferando, thx man. that looks good.
now two things. one : i want to put an email capture box in the right hand side of the hero image.
and two, i would like the sidebar widget to line up horizontally with the "Our lastest Articles" title. right now there is quite a bit of white space above our latest articles, and none on top of the widget. it makes things look out of kilter. thx
hey thx again F, i appreciate it. almost there.
Let’s tackle the spacing first.
You’ll need to delete the Paragraph Block you have to remove the unnecessary space it adds: https://share.getcloudapp.com/P8u1kXy2
The Headline Block also has Paddings which adds to the space: https://share.getcloudapp.com/lluE9X2W
Try to remove this. Then, go to Appearance > Customize > Layout > Container and set the top padding as you prefer: https://share.getcloudapp.com/Z4u76G64
Set the padding values for Appearance > Customize > Layout > Sidebars as well.
Now, with regards to the “Email Capture Box”, you’ll first need a third party plugin for this: https://wordpress.org/plugins/search/email+capture/
Also see: https://www.wpbeginner.com/showcase/best-email-capture-tools/
You would need to see if the plugin you add will have a Block or shortcode which you can add. You can then add this inside the Container Block of your Page Hero.
You’ll be able to align it horizontally center through the alignment settings of the Container Block.
And, align it vertically center through adding appropriate padding values (equal top and bottom paddings).
See: https://share.getcloudapp.com/YEurX4BN
Hope this clarifies. :)
u know what; i go in and change those values and i see no changes on the page. why is that?
Hi Douglas,
Do you see the changes in the editor?
If so, but not on the front end, it means you have cache hasn't been cleared.
Can you try clear cache? Including your browser cache.
hey F; website is below. those instructions arent' causing any changes to the page. can u look at my site and see what i am referring to? it is the front page, hero image, just below it there is a gap and on the right hand widget column, the widgets are up tight to the image. it is looking very uneven and i want to level it off. either by moving the widget column down, or the next text under the image up. thx
Hi Douglas,
I tried viewing your changes and I can still see the Paragraph Block and the top padding of the Headline Block. I can also see the Featured image is turned on once more which is also adding more space.
Let’s do this step by step.
1. Edit the Home page: https://share.getcloudapp.com/o0uR6650
2. Delete this Paragraph Block: https://share.getcloudapp.com/Bluo44kn
3. Remove the Top padding of this Headline Block: https://share.getcloudapp.com/DOu4DDbq
4. Now go to Appearance > Elements and edit My Page Hero: https://share.getcloudapp.com/jkuvLLzK
5. Toggle this on: https://share.getcloudapp.com/z8uL66Nl
Do these first and see how it goes. We can add appropriate spacing afterwards. :)