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

    Hi, I have set up an icon list on my dev site http://gd3.geneticdigital.co.uk/?portfolio=rosemont-pharmaceuticals which I want to replicate across a number of pages. It’s something that will get updated so I wanted to be able to produce the same list as a widget so I could edit it from a single point. I’ve copied the code below from the page above and placed it into a widget and although it displays correctly, it doesn’t animate the way it should (see here http://gd3.geneticdigital.co.uk/?page_id=3033). Is there a way of achieving what I need?

    Thanks

    <div class=”avia-icon-list-container avia-builder-el-9 avia-builder-el-no-sibling “><ul class=”avia-icon-list avia-icon-list-left avia_animate_when_almost_visible avia_start_animation”>
    <li class=”avia_start_animation”><span data-av_iconfont=”entypo-fontello” data-av_icon=”” aria-hidden=”true” class=”iconlist-char”></span><article itemtype=”http://schema.org/CreativeWork&#8221; itemscope=”itemscope” class=”article-icon-entry”><div class=”iconlist_content_wrap”><header class=”entry-content-header”><h4 itemprop=”headline” class=”iconlist_title”>Get a Quote</h4></header><div itemprop=”text” class=”iconlist_content”><p>Contact us to see how we can help you shape your app or mobile project</p>
    <div class=”avia-button-wrap avia-button-right avia-builder-el-10 el_before_av_button avia-builder-el-first “><span data-av_iconfont=”entypo-fontello” data-av_icon=”” aria-hidden=”true” class=”avia_button_icon”></span><span class=”avia_iconbox_title”>Contact Us Now</span></div>
    </div></div><footer class=”entry-footer”></footer></article><div class=”iconlist-timeline”></div>
    <li class=”avia_start_animation”><div class=”iconlist_icon avia-font-entypo-fontello”><span data-av_iconfont=”entypo-fontello” data-av_icon=”” aria-hidden=”true” class=”iconlist-char”></span></div><article itemtype=”http://schema.org/CreativeWork&#8221; itemscope=”itemscope” class=”article-icon-entry”><div class=”iconlist_content_wrap”><header class=”entry-content-header”><h4 itemprop=”headline” class=”iconlist_title”>Download</h4></header><div itemprop=”text” class=”iconlist_content”><p>Our white paper A Guide to Healthcare & Medical App Development</p>
    <div class=”avia-button-wrap avia-button-right avia-builder-el-11 el_after_av_button el_before_av_button “><span data-av_iconfont=”entypo-fontello” data-av_icon=”” aria-hidden=”true” class=”avia_button_icon”></span><span class=”avia_iconbox_title”>Download Now</span></div>
    </div></div><footer class=”entry-footer”></footer></article><div class=”iconlist-timeline”></div>
    <li class=”avia_start_animation”><div class=”iconlist_icon avia-font-entypo-fontello”><span data-av_iconfont=”entypo-fontello” data-av_icon=”” aria-hidden=”true” class=”iconlist-char”></span></div><article itemtype=”http://schema.org/CreativeWork&#8221; itemscope=”itemscope” class=”article-icon-entry”><div class=”iconlist_content_wrap”><header class=”entry-content-header”><h4 itemprop=”headline” class=”iconlist_title”>mHealth Workshop</h4></header><div itemprop=”text” class=”iconlist_content”><p>A free workshop aimed at helping you understand how you can capitalise on the market opportunities being offered by the growth in mHealth & mobile apps</p>
    <div class=”avia-button-wrap avia-button-right avia-builder-el-12 el_after_av_button avia-builder-el-last “><span data-av_iconfont=”entypo-fontello” data-av_icon=”” aria-hidden=”true” class=”avia_button_icon”></span><span class=”avia_iconbox_title”>Learn More</span></div>
    </div></div><footer class=”entry-footer”></footer></article><div class=”iconlist-timeline”></div>
    </div>

    #237683

    Hi Rustybucket!

    You can save templates you have created using Avia Layout Builder and load them on other pages http://i.imgur.com/pkv1y7C.jpg

    Best regards,
    Yigit

    #237687

    Hi, yes I’ve done that but if I make a change to one of the items in the icon list in the template, how do I save the template again so the change is reflected across all the page using it?
    Cheers

    #237688

    Hi!

    Unfortunately there is no easy way (easier let’s say) of doing it. You can save new template and load on your other pages. You can also enable debugging mode to see shortcodes under Avia Layout Builder. Please see – http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/

    Regards,
    Yigit

    #237690

    OK, so as an alternative, are you able to say why the widget idea is not animating correctly and is there a fix for this as that seems like a solution which will give the flexibility.
    Cheers

    #237693

    Hey!

    Sorry i missed that part. Now i took another look to your second page but it does function fine on my end. Can you elaborate on issue?

    Best regards,
    Yigit

    #237700

    Hi, yes if you look at this page http://gd3.geneticdigital.co.uk/?portfolio=rosemont-pharmaceuticals into which I’ve added the icon list as normal, the list has a lovely animation as you start to scroll the screen.

    However if you look at this page http://gd3.geneticdigital.co.uk/?page_id=3033 You will see they do not animate correctly. On this page I have created a widget with below code which I copied from the source of http://gd3.geneticdigital.co.uk/?portfolio=rosemont-pharmaceuticals and then used the Widget Area from the content elements to display it on the page but the animation is not working the same way.
    Cheers

    <div class=”avia-icon-list-container avia-builder-el-9 avia-builder-el-no-sibling “><ul class=”avia-icon-list avia-icon-list-left avia_animate_when_almost_visible avia_start_animation”>
    <li class=”avia_start_animation”><span data-av_iconfont=”entypo-fontello” data-av_icon=”” aria-hidden=”true” class=”iconlist-char”></span><article itemtype=”http://schema.org/CreativeWork” itemscope=”itemscope” class=”article-icon-entry”><div class=”iconlist_content_wrap”><header class=”entry-content-header”><h4 itemprop=”headline” class=”iconlist_title”>Get a Quote</h4></header><div itemprop=”text” class=”iconlist_content”><p>Contact us to see how we can help you shape your app or mobile project</p>
    <div class=”avia-button-wrap avia-button-right avia-builder-el-10 el_before_av_button avia-builder-el-first “><span data-av_iconfont=”entypo-fontello” data-av_icon=”” aria-hidden=”true” class=”avia_button_icon”></span><span class=”avia_iconbox_title”>Contact Us Now</span></div>
    </div></div><footer class=”entry-footer”></footer></article><div class=”iconlist-timeline”></div>
    <li class=”avia_start_animation”><div class=”iconlist_icon avia-font-entypo-fontello”><span data-av_iconfont=”entypo-fontello” data-av_icon=”” aria-hidden=”true” class=”iconlist-char”></span></div><article itemtype=”http://schema.org/CreativeWork” itemscope=”itemscope” class=”article-icon-entry”><div class=”iconlist_content_wrap”><header class=”entry-content-header”><h4 itemprop=”headline” class=”iconlist_title”>Download</h4></header><div itemprop=”text” class=”iconlist_content”><p>Our white paper A Guide to Healthcare & Medical App Development</p>
    <div class=”avia-button-wrap avia-button-right avia-builder-el-11 el_after_av_button el_before_av_button “><span data-av_iconfont=”entypo-fontello” data-av_icon=”” aria-hidden=”true” class=”avia_button_icon”></span><span class=”avia_iconbox_title”>Download Now</span></div>
    </div></div><footer class=”entry-footer”></footer></article><div class=”iconlist-timeline”></div>
    <li class=”avia_start_animation”><div class=”iconlist_icon avia-font-entypo-fontello”><span data-av_iconfont=”entypo-fontello” data-av_icon=”” aria-hidden=”true” class=”iconlist-char”></span></div><article itemtype=”http://schema.org/CreativeWork” itemscope=”itemscope” class=”article-icon-entry”><div class=”iconlist_content_wrap”><header class=”entry-content-header”><h4 itemprop=”headline” class=”iconlist_title”>mHealth Workshop</h4></header><div itemprop=”text” class=”iconlist_content”><p>A free workshop aimed at helping you understand how you can capitalise on the market opportunities being offered by the growth in mHealth & mobile apps</p>
    <div class=”avia-button-wrap avia-button-right avia-builder-el-12 el_after_av_button avia-builder-el-last “><span data-av_iconfont=”entypo-fontello” data-av_icon=”” aria-hidden=”true” class=”avia_button_icon”></span><span class=”avia_iconbox_title”>Learn More</span></div>
    </div></div><footer class=”entry-footer”></footer></article><div class=”iconlist-timeline”></div>
    </div>
    #237723

    Hey Yigit

    This seems to be the part that’s not executing correctly when displayed within the widget area.

    <ul class="avia-icon-list avia-icon-list-left avia_animate_when_almost_visible avia_start_animation">

    What do you think?
    Cheers

    #237752

    Sorry to pester you Yigit, but did you think of a solution to this one?
    Cheers

    #238347

    Hi!

    I suggest to use a column element and the “icon list” element to add the icons to your website and to stay away from the “widget” workaround. If you really want to use a widget try to insert the icon list shortcode into the widget area and do not tuse he html code of the shortcode output. You can generate the list shortcode by clicking the “Magic wand” icon in the TinyMCE (visual editor) toolbar. Then copy the shortcode content from the editor into your textwidget.

    Best regards,
    Peter

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.