Duplicated Page Needs CTA To Link To Separate Pages


#21

Dude…so helpful! This is great.

However, how do I get the buttons for CTA located more centered like how you have it in your Hunter multi step form??


#22

Good question :wink:

Looks like you got it:

Good stuff :blush:


#23

Haha yup! Figured that part out.

Here’s a rough idea of what I’m trying to nail down (link below) somehow, but having some trouble with a few elements…Once I get it all figured out once, then it’s just rinse and repeat.

What do you think?? Going to figure this out! :slight_smile:

http://imgur.com/a/w1ET6


#24

NICE!

Yeah, that’s definitely doable.

Let me know when you knock it out - I’d love to see it in action. :blush:


#25

Check it out… https://www.trytootles.com/

Got that part figured out.

Now, wanted to see if you could give me a suggestion when it came to CTA’s. I only want the left CTA (back button) to appear after the first click on the right CTA (continue button).

On the find slide, I want to turn the right CTA (Continue button) into a Get Started button.

How should I approach this?? It’s coming together.


#26

Nice!

To have the CTAs only appear on the ends of the slide - update the slider settings to “Hide at each end” and also uncheck “Infinite repeat slides”

To turn the CTA into a Get Started button you would need to do the following:

  1. Add an additional link using the same class names as the “Next” button
  2. Add a combo class to that and change the position to absolute, bottom right
  3. Then, move the button -53px within position:absolute
  4. Next, change the z-index to 1.
  5. Lastly, change the z-index of the originally next button to 2

You can view how the solution looks at the following video:

Hopefully this helps :blush:


#27

Awesome! If you check out the page, it sorts of looks like what you did. However, my final CTA looks off for some reason.

What do you think this is? Did I miss something??

It’s coming together! Looks great.


#28

Oh, looks awesome!

Looks good to me:

Good job :blush:


#29

The final CTA with the original next CTA have different alignments though…right?


#30

Did what you said haha but for some reason one if more far up than the other. Let me know if you see what I mean… close!


#31

Oh, feel free to edit the position to your liking :wink:


#32

haha cool! Thanks again for all the help


#33

Any idea why the CTA buttons don’t appear on Safari desktop or mobile Chrome out of curiosity?


#34

Because they are positioned absolute - you will need to resize the wrapper to 100vh.

In regards to Safari: I’m not sure. That’s a good question. When I get some time I’ll check on an emulator.


#35

For Safari:
Change the height of slider-wrapper from 100vh to 100%:

Then, test again in Safari.

Hopefully this helps :blush:


#36

Nope! Just tried across a few devices. Chrome seems to be the only one working.


#37

Feel free to test different sizes within you Safari Inspector to get the results you are looking for.

Just tested 500px on hero-slider, and it seems to work as expected for desktop (I haven’t tested all browsers or all devices):

Hopefully this helps


#38

That’s odd…

None of my CTA are appears outside of Chrome.


#39

Try 500px on the class hero-slider (or any height that you deem appropriate).

You can work in Webflow using Safari to see how the change will affect the website in that browser. The following video is the solution being completed in the Safari browser:


#40

Awesome! It’s all coming together.

Will keep you posted when it’s all done to check out. Excited about it.

Thanks again for all the help. Feel free to reach out whenever.

Cheers,
J