Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #259829


    I’m currently trying to figure out if it’s even possible, but since I can’t give an ‘icon box’ an ID or Class, then it’s quite hard to do. But currently I got a page and when you scroll down a ‘Fullscreen Slider’ appears and then after some now content not related to the slider, but what I would love is to have an ‘icon box’ above the images in the ‘Fullscreen slider’.

    But since I can’t give the ‘icon box’ an ID or Class that’s quite hard to do with CSS.

    What do you recommend I do?


    Actually just solved it myself.

    For those that would like to know a solution for this:
    1. Switch back to Default Editor.
    2. Pick the Magic Wand.
    I wanted the Iconbox in 50/50 page layout, so
    3. Picked 1/2 1/2
    4. Picked Iconbox, and choose icon + title + made the content
    (6.) moved it into the second 1/2 (50%), because I wanted that
    7. Copy it all and switch back to Advanced Layout Editor
    8. Make a Text Block
    9. Paste the copied shortcodes
    10. Within the Text Block lightbox/popup pick text view and make a <div> with an ID around it all and end the </div> (Remember to remove <p> tags that might automatically get there by WordPress.
    11. Open your CSS file style.css or what your using (I’m using child theme, so style.css)
    12. Write the positioning you want.
    13. Whitespace will occur so I removed that with CSS also.

    Here is the codes for what I did
    Within text block

    <div id="NAME OF YOUR ID">
    	[av_one_half first][/av_one_half]
    		[av_icon_box icon='YOUR ICON' font='' position='top' title='YOUR TITLE' link='' linktarget='' linkelement='']

    Within CSS (style.css)

    #after_full_slider_0 { position: relative; margin-top: -105px; background-color: rgba(255,255,255,0.0); }
    #after_full_slider_0.container_wrap { border-top-width: 0px !important; }
    #NAME OF YOUR ID { position: absolute; z-index: 9999; margin-top: -500px; display: block; }

    Anyway, solved the problem myself :)


    Hey Frostholm,

    Could you share the url (or make a screenshot) ? I would love to see what an iconbox looks like on a full-sceen slider… ;)

    Thanks for sharing the solution.


    On Wednesday the website will go live, so I’ll drop a link on that day, but I have noticed one bug in it. I think it comes from enfolds side though. So maybe someone can help me out to make this iconbox become a 100% reality? :)

    This reply has been marked as private.

    Thanks a lot

    This reply has been marked as private.


    Did you solve the issue? I tested the website with IE, Firefox and Chrome (see: ) and I didn’t notice any issue with the IconBox. Btw you can add a custom css class to Icon Boxes: too.

    Best regards,



    The problem is still there. On the ‘Services’ page between the sections ‘Independent Newsletter’ and ‘Trade Shows & Special Events’. The slider inbetween those two sections has an iconbox with the content of ‘Road Shows’, but when you scroll down it doesn’t display until you have scrolled to the end of the fullscreen slider. When you reach that point it suddenly displays. It’s like ‘Road Shows’ put itself behind the ‘Fullscreen Slider’.

    I think it’s something with the ‘Fullscreen Slider’ that effects the ‘iconbox’. I don’t know how to fix this. The ‘Road Show’ iconbox should be displayed at all times above/on the ‘Fullscreen Slider’, not be hidden until you scroll past the slider.

    Here is an image where you can see the iconbox after it has been scrolled past the ‘Fullscreen Slider’:



    Thank you for the update.

    The Road Show icon box is visible, checking on Chrome and Firefox Windows 8.

    The modification that you did is a bit extensive and you said that it can be done easily if only you can add a custom class or ID on the iconbox. Actually you can do it by adding the theme support for custom css class, just follow the instruction on the link Dude suggested. Edit functions.php, find this code:

    if(isset($avia_config['use_child_theme_functions_only'])) return;

    Below, add this code:


    Edit any avia elements like the Icon Box element then scroll below. Add a unique css selector on “Custom Css Class” field. If I am not mistaken, the issue why the iconbox is not showing intermittently is because of the stack or layering order of the color sections so please try to add this on Quick CSS or custom.css:

    #after_section_6.container_wrap {
    z-index: 9999;


Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.