8 Overlay Examples to Inspire More Clicks, Sales & Signups [FREE LOOKBOOK]

Need some inspiration for your overlay design? No problem.

overlay-inspiration
Image source.

Oh, sorry, you didn’t mean an inspirational quote?

Let me try that again.

Inspire more clicks, sales & signups with your overlays

Download our free Spring Overlay Lookbook, featuring 8 oh-so-beautiful, Unbounce-built overlays.

hbspt.forms.create({

css: ”,

portalId: ‘722360’,

formId: ’60c482f8-6c74-409a-8f18-4338a6bece26′,

target: ‘#cta-hb’,

onFormReady: function() {

if (navigator.appVersion.indexOf(‘Win’)!=-1) {

$(‘.hs-form select’).click(function(event) { $(‘.hs-form select .hs-input option’).prop(‘disabled’, false);});

}

},

onFormSubmit: function() {

$(‘.download a.btn’).get(0).click();

}

});

.single-post .section-lib-post .lib-container .entry-content div.blog-cta-form-section .blog-cta-content-with-image label {

display: block;

}

.single-post .section-lib-post .lib-container .entry-content div.blog-cta-form-section .blog-cta-content-with-image label span {

font-size: 17px;

}

.single-post .section-lib-post .lib-container .entry-content div.blog-cta-form-section:hover .blog-cta-content-with-image label span {

color: #fff;

-webkit-transition: 0.2s linear all;

-o-transition: 0.2s linear all;

transition: 0.2s linear all;

}

.single-post .section-lib-post .lib-container .entry-content div.blog-cta-form-section .blog-cta-side-image, .single-resource .section-lib-post .lib-container .entry-content div.blog-cta-form-section .blog-cta-side-image {

width: 61%;

display: inline-block;

margin-left: -191px !important;

}

.single-post .section-lib-post .lib-container .entry-content div.blog-cta-form-section .blog-cta-content-with-image, .single-post .section-lib-post .lib-container .entry-content div.blog-cta-form-section .blog-cta-content-without-image, .single-resource .section-lib-post .lib-container .entry-content div.blog-cta-form-section .blog-cta-content-with-image, .single-resource .section-lib-post .lib-container .entry-content div.blog-cta-form-section .blog-cta-content-without-image {

width: 54%;

display: inline-block;

vertical-align: top;

}

.single-post .section-lib-post .lib-container .entry-content div.blog-cta-form-section .blog-cta-content-with-image .hs-form input.hs-input, .single-post .section-lib-post .lib-container .entry-content div.blog-cta-form-section .blog-cta-content-without-image .hbspt-form input.hs-input, .single-post .section-lib-post .lib-container .entry-content div.blog-cta-form-section .blog-cta-content-without-image .hs-form input.hs-input, .single-resource .section-lib-post .lib-container .entry-content div.blog-cta-form-section .blog-cta-content-with-image .hbspt-form input.hs-input, .single-resource .section-lib-post .lib-container .entry-content div.blog-cta-form-section .blog-cta-content-with-image .hs-form input.hs-input, .single-resource .section-lib-post .lib-container .entry-content div.blog-cta-form-section .blog-cta-content-without-image .hbspt-form input.hs-input, .single-resource .section-lib-post .lib-container .entry-content div.blog-cta-form-section .blog-cta-content-without-image .hs-form input.hs-input {

border-radius: 3px;

-webkit-background-clip: padding-box;

background-clip: padding-box;

padding: 10px 8px;

outline: 0;

border: 2px solid #0098db;

font-weight: 500;

color: #94a6af;

width: 100%;

height: 39px !important;

}

.single-post .section-lib-post .lib-container .entry-content div.blog-cta-form-section.blog-cta-form-section-stacked .blog-cta-content-with-image .hs-form select.hs-input, .single-resource .section-lib-post .lib-container .entry-content div.blog-cta-form-section.blog-cta-form-section-stacked .blog-cta-content-with-image .hs-form select.hs-input {

margin: 0 auto;

height: 39px !important;

}

@media screen and (max-width: 640px) {

.single-post .section-lib-post .lib-container .entry-content div.blog-cta-form-section .blog-cta-content-with-image, .single-post .section-lib-post .lib-container .entry-content div.blog-cta-form-section .blog-cta-content-without-image, .single-resource .section-lib-post .lib-container .entry-content div.blog-cta-form-section .blog-cta-content-with-image, .single-resource .section-lib-post .lib-container .entry-content div.blog-cta-form-section .blog-cta-content-without-image {

width: 100%;

}

.single-post .section-lib-post .lib-container .entry-content div.blog-cta-form-section .blog-cta-side-image, .single-resource .section-lib-post .lib-container .entry-content div.blog-cta-form-section .blog-cta-side-image {

display: none;

}

}

var _socedo = _socedo || [];(function () {var e = [“init”, “track”, “trackLink”], t = function (e) { return function () { _socedo.push([e].concat(Array.prototype.slice.call(arguments, 0))) } };

for (var n = 0; n < e.length; n++) _socedo[e[n]] = t(e[n])})(), _socedo.load = function (e, o) { _socedo._endpoint = e; if (o) { _socedo.init(o) };

var t = document.createElement(“script”); t.type = “text/javascript”, t.async = !0, t.src = (“https:” === document.location.protocol ? “https://&#8221; : “http://&#8221;) + “api.socedo.com/Content/soc.js”;

var n = document.getElementsByTagName(“script”)[0]; n.parentNode.insertBefore(t, n) };

_socedo.load((“https:” === document.location.protocol ? “https://&#8221; : “http://&#8221;) + “api.socedo.com”);

_socedo.track(“58PLQb”, $(“.actions .hs-button”), “signup”);

By entering your email you’ll receive weekly Unbounce Blog updates and other resources to help you become a marketing genius.

Feature image via Shutterstock.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s