-
AuthorPosts
-
August 17, 2017 at 5:34 pm #840526
Hi,
I’m looking to do something really simple and would like to know if something more simple than LayerSlider exists to do that.
I want to do this thing where images change on the background with 3 buttons on it: http://imgur.com/a/N6tel
Actually I didn’t find any solution (a simple slider in background with the possibility to put content on it): do you know if there is a solution?
Cheers,
Théau
August 18, 2017 at 12:29 am #840668Hey Demaup,
You can use the Fullwidth Easy Slider, which comes with two buttons built-in, but you can copy another button from the wand tool on any post or page in the default editor, and paste in the Caption to create a third button.
Here is an example button code I copied from the HTML of my demo:<a href="#" class="avia-slideshow-button avia-button avia-color-light avia-multi-slideshow-button" data-duration="800" data-easing="easeInOutQuad">Learn more</a>
Here is the backend of where I pasted it:
Here is the front end:
Note that this just happens to be the Enfold demo I have today, but I think you’ll get the idea.Best regards,
MikeAugust 18, 2017 at 2:10 pm #840870Hi Mike,
I’ll try that!
Thanks :)
August 19, 2017 at 6:38 am #841154July 14, 2020 at 6:09 am #1230157Hi Mike, great solution in creating a button but i was wondering how to align it with the other buttons? (e.g. button1 and button2)
https://greeknextdoor.com/wp-content/uploads/2020/07/2020-07-13_22-05-36.png
https://greeknextdoor.com/wp-content/uploads/2020/07/2020-07-13_22-05-22.png
July 14, 2020 at 12:50 pm #1230278Hi,
Thanks for the screenshots and login, to move your added button next to the slider buttons, on the home page, try adding this code to the end of your functions.php file in Appearance > Editor:function custom_script(){ ?> <script> (function($){ $(document).ready(function(){ $( '#top.home #fullscreen_slider_1' ).each(function() { $( this ).find( '.avia-caption-content p a.avia-slideshow-button' ).css("margin-left","20px").insertAfter( $(this).find('a.avia-slideshow-button-2') ); $( this ).find( '.avia-caption-content p:last-child' ).remove(); }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'custom_script');
Then clear your browser cache and check.
Best regards,
MikeJuly 14, 2020 at 7:06 pm #1230388Awesome! Thank you, your solutions works great!
July 14, 2020 at 8:19 pm #1230425Hey kevinlw85,
I’m glad Mike was able to help. If you need additional help, please let us know here in the forums.
Best regards,
Jordan Shannon -
AuthorPosts
- You must be logged in to reply to this topic.