Sticky

The Master List of Unbounce Tips, Scripts & Hacks

  • 24 March 2016
  • 8 replies
  • 7504 views

Userlevel 7
Badge +1
  • Former Community Manager @ Unbounce
  • 831 replies

 

 

⛔️

 

Some of these tips go way beyond the scope of the Unbounce page builder and incorporate third-party elements such as HTML, Javascript and CSS.

 

Since these scripts are not built-in supported product features, Unbounce is unable to support or guarantee these codes in any way, shape or form. Also be aware that, while rare, the possibility exists for custom scripts to break or lose functionality as we update our app.

 

These tips are intended to serve as examples for developers looking to try new things with Unbounce. If you are uncomfortable with this, please seek the assistance of an experienced developer before moving forward. In other words, proceed at your own risk. ⚠️

 

We also recommend leaving a comment on each tip that you implement, as it allows our product team to get better visibility into which codes/features are popular in the Community (which in turn gives us better visibility into which features we could build into the app).

 

We’ve put together a list of time saving tips, nifty scripts and all-around crafty hacks that allow you to do even more with Unbounce. Some of these tips have been created by our team, but the majority have been submitted by members of our very own community.

 

Table of Contents

 

Unbounce Builder: Tips, Scripts & Hacks

 

Looking for ways to push the Unbounce Page Builder even further? Use the tips & scripts below to supercharge your Unbounce Landing Pages and Popups & sticky bars.
 

Popups

Landing Page (Beginner)

These tips are fairly easy to use and require minimal editing of html/javascript/css.

Landing Page (Advanced)

These tips generally require some advanced knowledge of html/javascript/css.

 

User Submitted Solutions

 

 

Do you have any design, conversion or landing page tips? Or are you doing something super unique with Unbounce but don’t see it listed above?
 

Write up a tutorial and share it in the Unbounce Community!

 


8 replies

Userlevel 7
Badge +3

Excellent list and one that’s been much need. 

 

I just posted a new [How-to] that you might want to take a look at and possibly add to the list. 

 

 

Best,

Hristian

 

Absolutely Awesome (AA for short moving forward!), will save a lot of time and effort for people trawling for answers. Bookmarked and hopefully, we can add even more to this as we go along 🙂

New bookmarklet tool to edit/open Unbounce pages on the fly from the page itself without searching it in the CMS

Add an edit button to your bookmarks bar that, when pressed, opens the current page (or one if its variants) in the Unbounce editor.

20180613134038(prod)

The button will open the Unbounce editor of the page you are on without the need to search for it in the list of all pages.

It’s simple to install it, just drag an drop the “Open in Unbounce” button from this page to your bookmarks bar and that’s it !!

Feel free to contribute as this is an open source project hosted on Github.

😀

enjoy !!

Userlevel 7
Badge +4

Very cool! It works. Thanks!

Userlevel 7
Badge +1

New post for all you ecomm marketers! How To Add A Stripe Checkout On Your Unbounce Landing Pages 💥

Easy way of changing desktop version if you accidentally created mobile first, because it’s 2020 and 80% of traffic is mobile:

Problem: I created a carefully crafted mobile landing page only to learn that I was supposed to do the other way around (desktop first), which makes no sense, considering majority of traffic being mobile. Without any developer knowledge, it’s impossible to fix because you can ctrl + drag stuff around but eventually you can’t delete/add elements or, most importantly, change font size in desktop without altering and destroying the mobile version.

Solution: The fix is actually pretty easy. The landing page is divided into sections and thankfully Unbounce let’s you hide sections of your choice in either view (mobile/desktop). So what you need to do is to make an added section or a duplicate section.

If you create an additional section, you can simply hide it from the mobile view and then copy the required content into the new section in the desktop view and if all is done, hide the mobile sections from the desktop view.

With duplicate sections it’s the same. Make a duplicate in mobile view and hide it. In the desktop view you hide the original (mobile) one and start editing the duplicate etc.

Hope this helps someone 🙂

PS. Duplicating copy is not good for SEO. If the content is created to show up on organic search results, be careful. Otherwise… for paid traffic or for a landing page where traffic is directed… this should be good.

Hello! how is it possible to resize a group of elements keeping all the proportions? I tried putting the elements (pictures and texts) inside a big box and than move everything together long the page (this is ok) but I can not resize to make it smaller… any suggestions?
thank you

Badge

Can you make this multi step form? Please let me know.
Form page link:http://unbouncepages.com/gatheredhere-lp/
I want this type of form immediately. Thanks

Reply