-
AuthorPosts
-
July 15, 2015 at 9:19 am #473557
Hi guys,
I noticed how a few sites allow for display of headline with a really nice ‘shadow’ effect.
This is especially good with light background images and/or white font headlines, because the headline stands out without compromising the background image, all in a balanced effect that is quite pleasant and effective.Here is an example: http://www.upsidehl.com/membership/
Can this be recreated with Enfold?
Thank you.
Antonio
July 15, 2015 at 9:31 am #473563Hi aborlotti ;
you can try this :
.av-special-heading {text-shadow: 0px 1px 1px #000 !important;}
July 15, 2015 at 9:34 am #473564Thank you @begrafiks, I’ll try that! What if I want it to show on a particular page, rather than site wide? Do I need to insert the page ID somewhere? And should I put it in the Quick CSS field or in a codeblock element?
Thank you for your help. Much appreciated!
July 15, 2015 at 9:46 am #473569Hi aborlotti ;
in the Quick CSS,
insert (your-page-id-number) before the code in order to target a specifique page :.page-id-007 .av-special-heading {text-shadow: 0px 1px 1px #000 !important;}
- This reply was modified 9 years, 5 months ago by begrafiks.
July 15, 2015 at 10:35 am #473594Thank you so much @begrafiks! You helped me a lot, I really appreciate.
July 16, 2015 at 6:43 am #474083Hey!
Thanks for the help @begrafiks! @abortolotti, please let us know if you should need any further help.
Best regards,
RikardNovember 23, 2015 at 12:29 pm #540700Thank You @Rikard,
The code provided by @begrafiks works great, however I would need to have it apply only to the first section of the page and not to all the Headings in the entire page.
How would I go about that?
the page is http://www.vacationrentalworldsummit.com/black-friday-2015/
and I’d like to have a marked shadow for the headings in the first section only (what you see inside the background image).Thank you so much.
Antonio
November 23, 2015 at 1:04 pm #540734Hey!
You can turn on custom CSS field for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and give your element a custom class and then change the code to following one
.your-custom-class .av-special-heading {text-shadow: 0px 1px 1px #000 !important;}
Cheers!
YigitNovember 23, 2015 at 3:58 pm #540959Thanks @Yigit.
I followed your instructions, enabled custom CSS field for ALB elements, then named the element “headline1”.
I then inserted the following in quickCSS:
.headline1 .av-special-heading {text-shadow: 0px 2px 2px #000 !important;}
but I haven’t seen anything happening. Where am I wrong?
Also I’d want the headline to appear on top of the page where it is now and to do that I added a -180 whitespace element, but this way it gets totally cut on mobile phones.
How can I get the ehadline to show on the top of the page like it is now, without having the issue on mobile?
Thanks
Antonio
November 23, 2015 at 4:05 pm #540970Hi!
Please change the code to following one
.av-special-heading.ab-headline2 { text-shadow: 0px 1px 1px #000 !important; }
Cheers!
YigitDecember 2, 2015 at 4:17 pm #545935Thank you Yigit.
You can mark this as solved
Antonio :)
-
AuthorPosts
- The topic ‘Is it possible to create this headline effect?’ is closed to new replies.