Button VS Classic Button behavior

Support
#1

Hello there :slight_smile:

I’m having problems with the new Buttons from X Pro v- 1.2.7

On my test page: https://vikasayoga.com/test-page , I have 2 buttons.

1 classic button and 1 Button.

The problem is:
On the classic button I have an ID (download-brochure) that will trigger a pop-up from Thrive Leads

and here everything works fine, but on the Button I add the same ID and it doesn’t work and I don’t have idea why.

Can someone help me to understand how to fix this please??

Thank you so much for any help.

#2

Hi there,

First of all please make sure that you do not add the same ID at the same time for both buttons as it is not a valid HTML code. The ID should be unique on the page.

Secondly, I think you are experiencing the problem in the element because the new button element has additional wrapper tags and that is why you need to change the Javascript code to detect the actual anchor tag of the button.

For more information please read this article:

To check the generated HTML code of the new button and find the proper hierarchy of tags I suggest that you use the Google Chrome Developer Toolbar:


Thank you.

1 Like
#3

Hi Christopher,

Thank you very much fr your quick reply.
It helped me a lot.

The Article you linked helped a lot to understand the different parts of an element.
Also, with Google Chrome Developer Toolbar I was able to check the correct ID of the buttons I wanna add a popup.

I’m working on the page I wanna make the real changes : https://vikasayoga.com/yoga-teacher-training/universal-yoga/
and the buttons are working fine.

I have another button but it’s on a Classic Card Element and for some reason I can’t find the ID for that button.

So basically the idea it’s have the same behavior on that button but because it’s not a Button element but a Classic Card

If I change the ID like is this screenshot is not making any difference obviously:

Inspecting the element, I can find the button but not the ID of that particular button:

Thanks again for all the useful help :slight_smile:

#4

Hi there,

You are right, the button inside the Card is whole another ball game. As the button is nested inside the card element you need to use the hierarchy system of the CSS for the selector.

So your selector will be #apply-universal .x-face-button

The space between the #apply-universal and .x-face-button tells that the button is inside the wrapper which has the apply-universal ID.

Thank you.

#5

Hi Christopher,

Thanks for the reply :slight_smile:

Right now, what I have for the normal Buttons is working fine.
I’m using Thrive Leads where I create a Lead Group with a Lightbox Form.
The trigger for this Lightbox is here:

I’m just a little confused about how and where to put the #apply-universal .x-face-button

Thanks once again

#6

Hi again,

I figure out that this option for Thrive Leads, the Lead Groups, doesn’t do what I want so I have to use the ThriveBox.

In this case, for each form I have a shortcode like this: [thrive_2step id=‘8872’]Trigger goes here[/thrive_2step]

I just wanna know the best way to implement this on the Buttons. According to their tutorial, I have to wrap a button with that shortcode but can’t find how.

Any help will be appreciated :slight_smile:
Best Regards

#7

Wrapping the button element or the button inside the card is not possible. In this case, you will need to use the Button shortcode. You will need to insert that in a Text element.

Thanks.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.