How to Create a Full Page Custom Call To Action Popup in Divi with Bloom

by | Last updated Mar 12, 2020 | Uncategorised | 0 comments

FREE WEBSITE: 

Click Here and find out how you can get a FREE WordPress blog or website with us!

INTRO

How to Create a Divi Popup with Bloom | Full Page Custom CTA Popup

In this tutorial I’ll show you How to design a Unique Looking Divi Popup with Bloom. By the end of this guide you will know how to create a full page custom call to action popup window by using just bloom wordpress plugin.

If you’re new to Bloom plugin you might wanna check out list of step by step tutorials for Bloom plugin where you can find dozens of custom designs and modifications.

So, in today’s tutorial we will re-purpose and modify Bloom opt-in plugin to meet our requirements and design we desire.

Bloom modification we are about to use today is very useful when you have short term promotions or something really beneficial to offer to your website visitors that you don’t want them to miss at any cost.

1

What is Bloom?

So for all of you guys who don’t know about Bloom as of yet I’m gonna quickly explain you what is “Bloom” ?

Bloom is the one of the best wordpress opt-in plugins that easily connects with your email marketing software.

My preferred marketing software is aWeber and if you want to learn more abort email automation and how to set it up, check this link here.

It is also necessary to specify two important things:

  • Bloom is a premium plugin included in the Divi license. If you have subscribed to an Elegant Themes you can download it from your account and use it on an unlimited number of websites.
  • Bloom is compatible with all WordPress themes! 
FREE WEBSITE: 

Click Here and find out how you can get a FREE WordPress blog or website with us!

2

Why to Customize Bloom Opt-in Plugin ?

I know what you thinking. Bloom is coming with hundreds of designs and it can be really difficult to customize it.

And Yes you’re correct – that’s wht any additional customization gives you market advantage, especially if it’s unique, attractive or incentive!

This time we will customize Bloom to create a unique full width full screen call to action without opt-in form like shown on the picture below.

These types of pop-ups are working great if you have special offer that you want your readers to learn more about.

FREE TRAINING: 

Click Here to get your 7 day video training session that shows you how to build an Online Business from scratch!!

3

Create a Bloom opt-in form:

I assume that you already know enough somewhat about bloom plugin, so we gonna skip plugin installation and connecting it with an email software. If you need help with it find more about it on how to setup bloom guide.

So let’s get started already!

Dashboard > Bloom > Optin Forms

Once inside the Optin Forms create a new optin by clicking as follows:

  • New optin
  • Pop up

 This will take you to the setup your optin form page.

Here we need to enter name of our optin form and configure form integration. 

  • Optin name
  • Form integration
    • Email Provider
    • Email Account
    • Email List
  • Next: Design Your Option

On the next page just scroll all the way to the bottom and click on a Next: Customize.

4

Customize Bloom’s Popup – Step By Step Tutorial

This is where the magic happens for us. Please follow instructions carefully to achieve exact look and feel of the popup.

If you get stuck I strongly recommend you to check our YouTube video on How to create a custom bloom popup call to action.

4.1

Add code below to the bloom optin title

Note: Do not copy HTML code below in a visual, make sure optin title is on html before copying.

If you look into html below you will notice that I’ve have added span class cbd_1 and cbd_2 below. I did this so later we can easier optimize look and feel of our popup.

<h2 style="text-align: center;">
	<span class="cbd_1">Divi</span>
</h2>
<p style="text-align: center;">
	<span class="cbd_2">The Most Popular WordPress Theme In The World And The Ultimate WordPress Page Builder</span>
</p>
4.2

Add code below to the bloom optin message

<div class="et_pb_row et_pb_gutters2 et_pb_bloom_row">
	<div class="et_pb_column et_pb_column_1_2">
		<span class="cbd_3">You've never built a WordPress website like this before.</span>
		<a href="https://spirokovac.com/youtube/">
			<button class="doitnow">Try it For Free!</button>
		</a>
	</div>
	<div class="et_pb_column et_pb_column_1_2 et-last-child">
		<img src="https://www.elegantthemes.com/images/divi-preview.jpg" alt="Description Here" />
	</div>
</div>
4.2

Apply custom CSS to meet popup design

Custm css in divi can be added in many different places. Considering that we are building this bloom popup and that we probably are not going to use it on all pages it’s recommended to add custom css code to the custom css section inside the boom plugin itself.

Code below includes all devices optimization so your popup can look amazing all platforms and resolutions.

.et_bloom .et_bloom_popup::after {
  background-color: #fff !important;
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
  animation: none !important;
}

.et_bloom .et_bloom_optin div {
  background: transparent !important;
}

.et_bloom .et_bloom_popup .et_bloom_form_container {
  width: 100% !important;
  max-width: 900px;
  box-shadow: none;
}

.et_bloom .et_bloom_form_container .et_bloom_form_header {
  padding: 0px !important;
}

.et_bloom .et_bloom_form_container span.et_bloom_close_button {
  top: 20px;
  box-shadow: none;
  color: #e3e3e3;
  font-size: 18px !important;
  background: transparent;
}

.et_bloom .et_bloom_form_container .et_bloom_form_text span.cbd_1 {
  color: #3fc5bb;
  font-size: 76px;
  overflow-wrap: break-word;
  text-align: left;
  font-weight: 900;
}

.et_bloom .et_bloom_form_container .et_bloom_form_text span.cbd_2 {
  color: #505c7c;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  overflow-wrap: break-word;
}

.et_bloom .et_bloom_form_container .et_bloom_form_text span.cbd_3 {
  color: #505c7c;
  font-size: 38px;
  font-weight: bold;
  line-height: 1.5;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
  display: none;
}

.et_bloom .et_bloom_form_container .et_pb_bloom_row {
  width: 100%;
  margin-top: 30px;
}

.et_bloom .et_bloom_form_header img {
  max-height: 300px;
  float: left;
}

.et_bloom .et_bloom_form_container button.doitnow {
  background: #3fc5bb !important;
  border: none;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  -webkit-letter-spacing: -1px;
  -moz-letter-spacing: -1px;
  -ms-letter-spacing: -1px;
  letter-spacing: -1px;
  line-height: 1;
  margin: 30px 0px 0px 0px;
  max-width: 100%;
  padding: 20px 12px;
  text-transform: none;
  -webkit-text-decoration: none;
  text-decoration: none;
  width: 100%;
  cursor: pointer;
}

.et_bloom .et_bloom_form_container button.doitnow:hover {
  background: #7be0d9 !important;
}

@media only screen and (max-width:980px) {
  .et_bloom .et_bloom_form_container span.et_bloom_close_button {
    top: 10px;
    right: 30px;
  }

  .et_bloom .et_bloom_form_container .et_pb_bloom_row .et_pb_column {
    width: 48.5%;
    margin-right: 3%;
  }
}

@media only screen and (max-width:720px) {
  .et_bloom .et_bloom_form_container .et_pb_bloom_row .et_pb_column {
    width: 100%;
    margin-right: 0%;
  }

  .et_bloom .et_bloom_form_header img {
    float: none;
  }
}
5

In conclusion….

Bloom Plugin is outstanding, maybe the best popup plugin out there. Best it comes for FREE with Elegant themes.

This popup modification has been proven to work great on many different websites for us so we decided to share it with you guys.

If you love this tutorial and and overall our content you might be interested to check our premium CSS course for Divi, where I’m teaching you in detail, step by step how to do modifications just like this one on your own.

FREE WEBSITE: 

Click Here and find out how you can get a FREE WordPress blog or website with us!

Like this tutorial? You’ll love my CSS Course!

Check out my Divi Beginners Course!

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *