[How to] Create a Typed Text Effect In Unbounce

design

#41

Hi: I got this all to work great in Preview Mode but live it just shows “text” . refreshed, resaved, tried alt browser with same result. Each time the Preview looks fine. Any suggestions? Thanks.

text source

text



#42

hey @Lnegrich, it looks like you have added id="typed" to two span tags (the innermost and second innermost). That could be the issue, as IDs are unique and should only be used once per HTML document. I’d suggest removing the ID from the second innermost span tag and see if that makes a difference!


#43

@Justin - I’ve been having some issues so thought I’d try with the .unbounce file but its not selecting - do I need to use a doc in the file or what? Seems strange, never had a page upload problem like this before


#44

Hi James,

Based on the screenshot you’ve provided, it seems like the file is still archived/zipped.

Unzip it and the file picker should allow you to select it.

Best,
Hristian


#45

Hey @Hristian, I unzipped it but there is no .unbounce files in there


#46

Hi @James_Dixon1,

I just emailed you the unzipped file.

Give that a try.

Best,
Hristian


#47

Brilliant, thanks - its all sorted!


#48

Thanks @Hristian!

Also, sorry @James_Dixon1! Not sure how the hell that .zip file failed so hard… I’ll update the link now.


#49

Update:
The following link should allow you to download the .unbounce file and load it into your account. Sorry about that!

Download the .unbounce file here.


#51

Thanks for sorting this!


#52

Here’s another one I created for my course. Whaddayathink?

http://fetchprofits.com/smartmarketing/

I’d also be very happy for any feedback.

Ash


#53

Hey, I had a question about the cursor CSS. I was able to get the text animation running fine, and the cursor CSS does apply the blinking effect, but for whatever reason, the cursor doesn’t seem to carry over the formatting of the rest of the text in my span.


#54

Looking great, @Ashwin_Satyanarayana!


#55

Love this, such a great feature. May have missed this somewhere in the thread above but it is possible to style the text for mobile without it affecting the desktop version?


#56

Ok, I have tried to do this for a couple of days made little progress. The Scrolling text seem to be working but I cant adjust or change the text color in anyway. Sorry in advanced if I missed something.

Text Box:

.

Javascript:


#57

One of the best scripts yet! :raised_hands:t4:

Did I go overboard?! :joy: :smirk: :arrow_right: http://www.detoxcleansenourish.com/webinar/call/


#58

Love it @Zoe_Tattersall! Looks like you’re addressing quite a few pain points in one single headline. This is the perfect implementation. :smiley:


#59

ALL the pain points! Taken directly for our clients’ feedback on why they did our program or what it helped them with :slight_smile:


#60

That is an awesome implementation, @Zoe_Tattersall. You’ve convinced me to test this out on one of our pages. Using client pain points is brilliant.


#61

Trying to target everyone one of the hardest things – I haven’t actually launched this page, but will keep you guys updated on conversion % once I do :slight_smile: