Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 28, 2017 at 4:59 am #767857
    EnlightenedMedia

    How can I add a button, with hover effects, LayerSlider WP?

    Sorry if this is already answered somewhere – there are so many threads and I’ve already searched, did not find a recent clear answer.

    Thanks.

    March 28, 2017 at 6:30 am #767881
    John Torvik

    Hey EnlightenedMedia,

    You need to enable the debug mode to see all the shortcodes following this tutorial: http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/ and create and paste the button shortcode at Layer Slider.

    Best regards,
    John Torvik

    March 28, 2017 at 7:02 am #767898
    EnlightenedMedia

    Hi John, thanks for your reply, I need some clarification:

    So after I enable the debug mode, I create the kind of button I want and the copy that code which looks like this?:
    [av_button label='Get Started' link='manually,http://' link_target='' size='large' position='center' icon_select='no' icon='ue801' font='entypo-fontello' color='custom' custom_bg='#004f67' custom_font='#ffffff' admin_preview_bg='']

    But where inside the Layer Slider do I paste the shortcode?

    March 28, 2017 at 7:25 am #767912
    John Torvik

    Hi,

    I am sorry about these instructions, I misunderstood some points in your question.

    To add a button in the Layer Slider, follow the steps below:

    1 – Go to your Dashboard > Layer Slider and click on your slider

    2 – Create a new text layer clicking here: http://prntscr.com/epbvpb

    3 – After it, go to the Link & Attributes to add the link and in Styles to style your button.

    4 – Let me know when you finish it because to have a hover effect will be necessary a custom CSS code, so, finish it and share with me the link that`s using this slider.

    Best regards,
    John Torvik

    March 29, 2017 at 7:46 am #768631
    EnlightenedMedia

    Hi John, thanks for the instructions. This is the page with the slider:

    April 4, 2017 at 5:42 am #771499
    Ismael

    Hi,

    Please post the login details in the private field so that we can check the layer. Or edit the layer then go to the Link & Attributes panel. Apply a unique class or id (ex: “custombuttonclass”) to the button layer then declare the hover state of the element in the Quick CSS field. Ex:

    .custombuttonclass:hover {
   background-color: blue;
   color: orange; 
}

    Best regards,
    Ismael

    April 20, 2017 at 4:26 pm #780627
    Momentummediaab

    Hi, I have done all the above, but can´t get it to work on Enfold (4.0.2)? Do you know why?

    Best regards,
    Joel

    April 21, 2017 at 7:27 am #781006
    Rikard

    Hi,

    Could you post a link to the site in question so that we can take a closer look please? Next time please open a new thread. Also please update to the latest version of the theme (4.0.5): http://kriesi.at/documentation/enfold/updating-your-theme-files/

    Best regards,
    Rikard

    April 21, 2017 at 9:14 am #781061
    Momentummediaab

    Absolutly! The site is updated.

    class: layer_knapp

    css:
    .layer_knapp:hover {
    background-color: #000;
    color: #fff;
    }

    April 22, 2017 at 6:12 am #781536
    Rikard

    Hi,

    That class is assigned to a paragraph, you are looking to target the link, correct? If so please use this CSS instead:

    .layer_knapp a:hover {
background-color: #000;
color: #fff;
}

    Best regards,
    Rikard

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