button with scroll

[jiant]

Hi

Is possible to insert a button with this function:

-when you click on it scroll down on the same page to a determined text or photo.

 

Thank you

[Laura]

Hello, yes, just add an ID to the element and to the button url
for example
Image ID pic1
button url #pic1

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[jiant]

Thank you very much

What about to scroll from a button to a contact form

[jiant]

or a concrete text

[Kieran_SQ]

Hi Jiant,

The process is the same for all elements that have an ID so you can link to any HTML element you desire that has a # ID/value. This will work with images, titles, forms, fields etc so long as it has an ID.

Thanks,

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[jiant]

Thank you Kieran

Could you write me and example, I try it but I can´t .

[Kieran_SQ]

Hi,

You do not need to manually create buttons (shortcodes) with KLEO, you can do this on any page via the WP Bakery Page Builder (formerly Visual Composer).

Here is an example of the KLEO Button shortcode generated in WP Bakery

[kleo_button title="Button Title" href="#IDofMyElement" icon="0"]

This will output the below HTML on the page

<a class="btn btn-default" href="#IDofMyElement">Button Title</a>

I have attached a screenshot of the fields I edited so you can see for yourself. The field titled URL (Link) is where you will set the ID for your element which is always preceded by a #

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

Attachments:

You must be logged in to view attached files.

[jiant]

Hi, I really appreciate your help, but there is no way to scroll.

Can you take a look at the attachments please?

Thank you for helping me.

Attachments:

You must be logged in to view attached files.

[Kieran_SQ]

Hi,

In the first screenshot you will need to place the ID of the element that you wish to scroll to in the field titled ‘URL (Link)’.

In the second screenshot you can assign the button itself it’s own ID. There is no need to assign the button it’s own ID if you do not wish to. Assigning the button it’s own ID will allow you to specify particular CSS for the button and allow you to scroll to the button.

If the element you wish to scroll to does not yet have an ID you will need to populate the field from the second screenshot with your desired ID (without any # symbol, just the name). You will then be able to use that ID in your button’s URL field using the # followed by your ID. The # tells the browser that we’re targeting content that is on the page.

Thanks,

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[jiant]

Thank you very much for your help..

I made everything step by step but nothing! Should I activate something on kleo option settings panel?

Thank you

[Kieran_SQ]

Hi,

There is no setting to enable this, this a default behavior of HTML. If you wish you can send admin credentials in a private reply and I can set this this up for you.

I will need to know the URL of the page where the button is, exactly which button you wish to use and exactly what element you wish to target.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Author]

Posts