Okay
  Public Ticket #357525
Bouncing arrow
Closed

Comments

  • Stine started the conversation

    Hi,

    I've imported the Initial Demo content and really like the bouncing arrow on the "moving image" home section, but I much prefer the "parallax slider." 

    Without an arrow it's just not very clear what to do when you enter the website and all you're met with is a full width slider.. I've been trying to copy/paste between the files in ../sections, but I am no wiz with functions. I would love it if someone could help me out with implementing this!


    Cheers! :)

  •  1,973
    Support replied

    Hi, I will give you the directions on how to adapt the implementation:

    the bouncing arrow can be found in /sections/home-section_moving_background.php

    lines 145 to 149

    the $arrow_class is constructed so that the arrow will have a light color on dark backgrounds and the other way around.

    the implementation of full width parallax slider is in /sections/home_section_parallax_slider.php but you must put the code overlaying the slider.

    thanks

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Stine replied

    Hi, thank you for your reply!

    But I'm sorry, I don't understand your explanation. The code on line 145 to 149 is all well, but where to put it, what does it mean to put it overlaying the slider, and what about the fuctions codes for it? I'm trying to implement the codes in line 84-94 which seem to be concerning the arrow, but it doesn't show up.

    Thanks again,

    Cheers

  •  1,973
    Support replied

    Hi there I see the arrow, problem solved? 

    thanks

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Stine replied

    It is oddly placed at the top of the page, and it also only bounces on the first slide...

    Where I've placed that code in parallax_slider.php - from line 61 - is the only place which makes it appear on the page, but obviously it's not quite right. I've used lines 145 to 149 from moving_background.php as instructed, but I'm not aware how to "put the code overlaying the slider" as you said. You did not mention line 84 to 92 from moving_background.php, but I included these anyway as it seemed to concern the arrow, but I'm not sure if 'home_moving_bknd_text_color' has to be changed? 

    I'm sorry to be so slow at this, but php functions are not my field. If you could explain exactly what lines to copy and exactly where to place them I would be very grateful! 

    I don't even need this exact bouncing arrow if that's too complicated a matter - I would just like an arrow on the parallax slide that will make it more clear for the visitors that they should scroll down from the slider, and which preferably is of the same style as to match the "back to top" arrow on the bottom.

    Cheers

  •  1,973
    Support replied

    Place the code outside the ul not inside. Outside the slider.

    And then you can add your custom css for it to make it appear on top (or bottom) of the slider.

    thing is for parallax slider I cannot give you other solution since the slider is constructed without the overlaid html content

    you can consider also the overlay slider as home option - this one takes the home page content overlaid on top of the slider.

    thanks

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Stine replied

    Thanks for your advice, I switched to overlay slider, and managed to place the arrow. My issue now it linking it to the next section of the site (#about in my case):

    I tried adding #about as the Link URL in each slide in Home Options and changing the link in the document to ['home_overlay_slider_link_url'], but this did nothing. Changing the whole link directly to <a href="#about"> makes it jump abruptly to the next section instead of sliding, like on the the moving background home section. Is there a way to do this?

    Sorry to be so difficult, I'm greatly appreciating any help!

    Cheers

  •  1,973
    Support replied

    Hi,

    you must add class="move" to your a tag but I see some js errors in the page related with Google Maps API and I don't exactly now where exactly are coming from.

    these may break the smooth scrolling (which is js based)...

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Stine replied

    That worked perfectly, thank you very much!

    I added custom styling options for the map in the head section in Theme Options, might this be the cause of the js error? I must have mucked something up underway somewhere because the nav bar now appears at the top of the page when entering, and disappears immidiately when I scroll. Is there a simple way to fix this?

    Thanks!

  •  1,973
    Support replied

    Not sure where the error is comning from. if you provide wp admin credentials (in a private ticket) i can have a look over the configuration.

    thanks

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •   Stine replied privately