Adding text on the Hero Image.
Support Area › Forums › Finesse › Adding text on the Hero Image.
- This topic has 14 replies, 2 voices, and was last updated 7 years, 11 months ago by DenisK.
-
AuthorPosts
-
April 19, 2016 at 17:38 #36443DenisKParticipant
Bill is it possible to move caption text to the right in the Home page hero image. Or is there another or better way to add text to your hero image?
Please review attached file.
Thank you.
Attachments:
April 20, 2016 at 09:07 #36448Bill RobbinsModeratorThere is a hero alignment option for each slide as well as a vertical alignment option. Those are located just above the uploader for the background image of the slide.
Take care,
BillApril 20, 2016 at 09:24 #36452Bill RobbinsModeratorSo more than just right aligning the text, you want to limit its width, is that right? In addition to setting the alignment you can set a maximum width for the caption. Add this to the Custom CSS that’s in the Advanced section of the customizer:
.hero-caption { max-width: 50%; }
Feel free to adjust the 50% to a value that works for you.
Take care,
BillApril 20, 2016 at 10:58 #36462DenisKParticipantThis is what I end up with. Content stay to the left. Trying to change it so it stays to the right. I changed setting hero alignment but that did not seem to help.
.hero-caption {
max-width: 50%;
}this fixed the content overall.
Thank you )
Attachments:
April 20, 2016 at 11:13 #36466Bill RobbinsModeratorLooking at this I noticed a few things. The hero is moved out from under the header and there is only one slide. Considering those two things, I would just skip using a hero on this page and use a Page Builder row to make that layout. It’ll be like creating the row below it. The hero caption just wasn’t made for this, but the page builder was made for things like this. I would just go with it.
You can even create hero sections in a row if you ever want to. In the CSS box that’s in the Attributes section, just set the height of the row to be:
height: 100vh;
and that will make it the full height and width of the browser window (vh stands for viewport height).
See how that works for you,
BillApril 20, 2016 at 13:00 #36473DenisKParticipantThe text does look better using page builder however I cant change the height of the image. I am using a row and if I go right more the image becomes more visible and the content does not look good.
Will you have an idea how to change height here Bill? If not I will go back to my previous settings and put a text there using something else I guess.
Thank you.
Attachments:
April 20, 2016 at 13:16 #36475Bill RobbinsModeratorDid you set a height on the row? That makes it basically the same as a hero. A hero has a height set and a row doesn’t by default, but you can add one. If it worked with a hero, adding a height should do the trick.
April 20, 2016 at 15:34 #36476DenisKParticipantI am not sure what goes wrong, but it is not happening for me. I might try another route. I cant make to work like a hero image.
Thank you much for your help Bill.
April 20, 2016 at 15:47 #36477DenisKParticipantWhen can I set a height for that row ? I did it in attribute.
Thank you
April 20, 2016 at 15:50 #36478DenisKParticipantAs far as it goes for height for me )
Attachments:
April 20, 2016 at 15:52 #36480Bill RobbinsModeratorIt looks like height was added to the row class box instead of the CSS Styles box. If I look in the source of the home page it has this:
<div class="panel-row-style-height100 height 100 fixed-background panel-row-style"
which makes me think the height was added to the row class instead of the CSS styles box. See if switching that up helps.
April 20, 2016 at 15:54 #36481Bill RobbinsModeratorThis reply has been marked as private.April 20, 2016 at 15:54 #36482DenisKParticipantLol I got it Bill.
Finally. Thank you again for your fantastic help and support.
Have a wonderful evening.
April 20, 2016 at 15:54 #36483Bill RobbinsModeratorGlad that did the trick Denis 🙂
April 20, 2016 at 16:02 #36484DenisKParticipantI did get finally now it is just a matter getting the text where I want it.
Thank you again Bill.
-
AuthorPosts
- The topic ‘Adding text on the Hero Image.’ is closed to new replies.