Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • July 15, 2015 at 9:19 am #473557
    abortolotti

    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 #473563
    begrafiks

    Hi aborlotti ;
    you can try this :
    .av-special-heading {text-shadow: 0px 1px 1px #000 !important;}

    July 15, 2015 at 9:34 am #473564
    abortolotti

    Thank 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 #473569
    begrafiks

    Hi 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;}

    page id

    • This reply was modified 9 years, 4 months ago by begrafiks.
    July 15, 2015 at 10:35 am #473594
    abortolotti

    Thank you so much @begrafiks! You helped me a lot, I really appreciate.

    July 16, 2015 at 6:43 am #474083
    Rikard

    Hey!

    Thanks for the help @begrafiks! @abortolotti, please let us know if you should need any further help.

    Best regards,
    Rikard

    November 23, 2015 at 12:29 pm #540700
    abortolotti

    Thank 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 #540734
    Yigit

    Hey!

    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!
    Yigit

    November 23, 2015 at 3:58 pm #540959
    abortolotti

    Thanks @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 #540970
    Yigit

    Hi!

    Please change the code to following one 

    .av-special-heading.ab-headline2 {
    text-shadow: 0px 1px 1px #000 !important;
}

    Cheers!
    Yigit

    December 2, 2015 at 4:17 pm #545935
    abortolotti

    Thank you Yigit.

    You can mark this as solved

    Antonio :)

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Is it possible to create this headline effect?’ is closed to new replies.