- This topic has 9 replies, 3 voices, and was last updated 3 years, 10 months ago by
.
-
Posts
-
Hi,
I am trying to create a Hero Page on only the front page that can go Full Width and adjust to a Full Screen mode.
I was able to do this under Elements, and now I am trying to place text over the image and have it set on the bottom right (just like the container below the Page Hero on the attached link.) I do not see an option to place a Headline Block and control the margin or padding within the Elements setting page. Is custom HTML and CSS the only way to put the text and style it?
As I was researching, I came across David’s response to another user on other posts:
David mentioned that it might be easier to create the Hero using the Block Editor in both posts if the user is only trying to put one hero page. If I choose this Block method, is there an option to set the hero container to go Full Width, while keeping the other containers at the default 1200px width and adjusting to a Full Screen mode, similar to Element’s way?
Many thanks.
Customer Support
Hi Sinartus,
Without using custom CSS you should be able to do as such for your Page Hero. To set a text at the bottom right section of a Page Hero – Block Element, you can do either of the following.
1. Set the bottom padding of your Container Block to 0, and then set an appropriate top padding: https://share.getcloudapp.com/RBumwd4G.
2. The other way, is to set a minimum height, and the set the vertical alignment to bottom: https://share.getcloudapp.com/8Lu0QJb4Align the Headline Block to the right for either.
As for your second inquiry, you may do this. One approach is to set the Content padding left and right to 0. Then, set a Contained width for the other sections in your pages, excluding the one you’ll be using as a Page Hero.
Hope this helps! Kindly let us know if further assistance is needed.
Hi Fernando,
Thank you so much for the screenshots. Those are helpful. As for setting the Content Padding left and right to 0, where do I access this setting?
I asked about HTML and CSS for creating a Header through the Appearance > Elements > Create New Header method. In this case, is the only way to add text on top of the Hero image through HTML and CSS?
Thanks again.
The Content Padding settings can be altered in Appearance > Customize > Layout > Container > Content Padding.
To clarify, are you wanting to specifically use HTML and CSS to add to your Page Hero?
If so, you could also achieve this through a Block Element with a Custom HTML Block: https://share.getcloudapp.com/9Zuo2E7d
Then, you may add CSS through Appearance > Customize > Additional CSS.
You may also add HTML through a Header Block.
Kindly let us know.
Hi, i wounder if the HERO picture should be resized to 400×700 pixel? I building with elementor pro. here is my website uppsalasolceller.se
Hi Fernando,
Ok, noted on the location of the Content Padding. I appreciate your help.
I am asking about the HTML because when creating the Page Hero through Appearance > Elements > Create New Header; there seems no other way to write the text on top of the Hero image. I am bringing this up because there is a Full Screen option through this method, whereas making a Page Hero through the Block doesn’t seem to give the same option for Full Screen.
Thanks!
I see. Thank you for clarifying!
There is indeed a full screen option for Page Hero – Block Elements.
You would simply need to set the minimum height to
100 vhwhich mean it would occupy100%of the viewport height.You can the set your Header Element to just have the merge functionality.
If you would like to do it via Header Element, an HTML you can try is:
<h6 class="my-text"> Taipei Performing Art Center </h6>Then, add this CSS in Appearance > Customize > Additional CSS:
h6.my-text { font-family: Roboto Mono, monospace; text-align: right; color: var(--base-3); padding-right: 40px; padding-bottom: 0; margin-bottom: 0; }I would suggest using a Page – Hero Element though as it would be easier to modify.
Hope this helps!
Hi Johan Apel,
May you kindly start a new topic, with description of the issue? We’ll try our best to assist you in the new topic.
Hope to hear from you soon!
Hi Fernando,
Just simply wonderful! I will take your advice and stick with using a Page Hero Element. I can’t thank enough for your patience and help. Cheers!
You’re welcome Sinartus! Cheers!
- You must be logged in to reply to this topic.
