This article will show you that it is not difficult to customize Bloom's popup.
I propose you 5 original ideas for modify the design of your Bloom popups to optimize the conversion rate and get more subscriptions to your newsletter!
1 – What is Bloom?
Maybe it's good to remember what it is. "Bloom" ? This sometimes unknown plugin is a very good plugin for WordPress !
Indeed, it allows you to link a registration form to your newsletter sender (also called Provider).
In other words, Bloom is a plugin that allows you to retrieve the email addresses of your visitors and store them in your email marketing lists like MailChimp, SendingBlue, MailPoet etc.
It is also necessary to clarify two important things:
- Bloom is a premium plugin included in the Divi license. If you have subscribed to License Elegant Themes, you can download it from your account and you can use it on a unlimited number of sites.
- Bloom is compatible with any WordPress theme! You do not have to use this plugin only on your Divi sites.
2 - Why customize Bloom?
Bloom's settings already offer many design options.
Whether at the level of the popup display or at the level of its appearance, Bloom allows you to choose images, colors, type of appearance, animation etc...
But is that still enough? Aren't you tired of seeing these unwanted popups appear when you quietly visit a website? Barely arrived on the site, you are "jumped" to register for the newsletter. For my part, I click on "close" if I really want to read more, or if the content is not interesting, I leave the site... What if everyone does what I do?
What to do to succeed in getting email from your readers that you can then convert into prospects and then into customers if you are "good"?
The email marketing still has a long life ahead of him If we believe everything we read about the subject and find that all the current sites do have a newsletter registration form…
How, then, to get this famous "email" so coveted? And why would the Internet user entrust it to another site?
Each site tries to pull its pin from the game: some encourage readers to subscribe in exchange for a Lead Magnet, while others offer really exciting content and readers can only sign up!
What if you proposed both? And if, in addition, your Was popup really original, attractive, incentive, pretty? What do you think the Internet user would do? Would he let himself be tempted?
Here's a good idea: customize Bloom popup to increase conversion rate !
3 – Create an optin Bloom form: general case
Before seeing in detail the examples of custom popups, I propose you to quickly return to the creation of a Bloom optin form. We will partially need this information when explaining customizations that follow...
3.1 – Step 1: Choose the type of popup
Once you have installed the Bloom plugin, you can start to create your first doptin form.
For this, go to the tab Bloom > Optin Form then click "New Optin".
For examples of customizations that will follow, I propose to use the type POP UP (top left).
Validate your choice by clicking on « Next: design your choice ».
3.2 – Step 2: Connect the form with your "provider"
The next step will allow you to connect the Bloom optin form to your Provider, i.e. your « newsletter mailing solution » (MailChimp, Sendinblue, MailPoet etc...).
This step is required to validate your form.
It is thanks to this connection that you will be able to retrieve your visitors' email addresses in order to store them in your email marketing lists.
Once your connection is established, confirm your choice by clicking « Next: design your choice ».
3.3 – Step 3: Choose the popup design
At this stage, Bloom proposes to choose a design template for your popup.
Although there are many choices, these popups all look alike... That's exactly why I'm offering you this tutorial, by the way...
For all examples of customizations that follow, choose the first template (top left).
Then confirm your choice by clicking « Next: customerize ».
3.4 - Step 4: Set the popup design
Step 4 allows you to set the "design" tab. Here you will find several parameters that may vary according to your needs and the purpose of customization:
- Enter the "catching" title of your optin.
- Upload your image if necessary (this will not be the case with all the suggested customization suggestions below).
- Add an image animation if needed.
- Set the display of the form fields (colors, layout etc.).
- Set a "success message": this will appear when the visitor sends the form.
- Validate your choice by clicking on « Next: display settings ».
3.5 - Step 5: Other settings
In the tab Display settings, you will find several popup display options.
Read the options carefully and make your choices: you can come back later if you need.
Validate your choice by clicking on "Next: Success Action".
3.6 - Step 6: success message and popup validation
Finally, you will arrive at the last step where you will simply click on Save & Exit to save your popup.
4 - Original ideas for customizing Bloom's popup
Now that we have just recalled the steps to create the form, I propose 5 original ways to easily customize the appearance of your Bloom popup with CSS only. This means that a beginner will be able to do so without much code knowledge.
4.1 – Bloom #1 customization: offset image
Here's a nice popup...
You will tell me: "I don't really see how this popup is original... »
Yet this is what she would look like without customization:
I propose, then, these few lines of code to allow the image to be shifted and get out of the popup:
1 – CSS to shift the image up and left:
.et_bloom .et_bloom_form_header.split img {
position: absolute;
top: -100px;
left: -100px;
}2 - Make everything "outside the frame" visible:
.et_bloom .et_bloom_form_container div {
overflow: visible !important;
}3 – Add a left margin to shift the text and avoid it being hidden behind the image:
.et_bloom .split .et_bloom_form_text {
padding-left: 25% !important;
}4 - Add a little margin at the bottom of the text so that it is not "pasted" to the fields:
.et_bloom .et_bloom_form_container .et_bloom_form_header {
padding-bottom: 30px;
}Here is the final code that I used to get this result (to copy and paste into your style sheet or directly into the tab Appearance > Customize > Additional CSS) :
.et_bloom .et_bloom_form_header.split img {
position: absolute;
top: -100px;
left: -100px;
}
.et_bloom .et_bloom_form_container div {
overflow: visible !important;
}
.et_bloom .split .et_bloom_form_text {
padding-left: 25% !important;
}
.et_bloom .et_bloom_form_container .et_bloom_form_header {
padding-bottom: 30px;
}I specify that the offset image (the gift image) was correctly inserted during the bloom setting (step 3.4 – tablet #2 of this article).
Of course, do not hesitate to modify this code according to your needs and projects...
4.2 – Bloom #2 customisation: background gradient/opacity
This other customization of bloom looks like the previous one, the difference that I change the background color with a gradient color... This brings a nice effect that changes the anthracite background that is seen everywhere...
Here's what popup would look like without these customizations:
To get this result, just get the full CSS code from popup #1 and add a gradient-transparent background:
.et_bloom .et_bloom_popup::after {
background: rgba(255,93,177,1);
background: -moz-linear-gradient(left, rgba(255,93,177,1) 0%, rgba(167,3,237,0.4) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,93,177,1)), color-stop(100%, rgba(167,3,237,0.4)));
background: -webkit-linear-gradient(left, rgba(255,93,177,1) 0%, rgba(167,3,237,0.4) 100%);
background: -o-linear-gradient(left, rgba(255,93,177,1) 0%, rgba(167,3,237,0.4) 100%);
background: -ms-linear-gradient(left, rgba(255,93,177,1) 0%, rgba(167,3,237,0.4) 100%);
background: linear-gradient(to right, rgba(255,93,177,1) 0%, rgba(167,3,237,0.4) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5db1', endColorstr='#a703ed', GradientType=1 );
}To obtain the appropriate CSS code for your degraded and transparent background, you can help yourself with this site that offers a gradient generator in CSS.
4.3 – Bloom customization #3: background image
I wonder if this customization of Bloom would not be my favorite... She changes popups that we're used to seeing!
The popup is transparent and the background, usually anthracite-opaque, has been replaced by a background image.
Here is what the popup would look like without the following CSS code:
Here are some explanations:
1 – Add an image in background :
.et_bloom .et_bloom_popup::after {
background-image: url("placez l'URL de votre image");
}Note that this image was previously added to my media library and that I recovered its URL.
2 - Make the background of Bloom's popup transparent:
.et_bloom .et_bloom_optin div{
background: transparent !important;
}Here is the final code that I used to get this result (to copy and paste into your style sheet or directly into the tab Appearance > Customize > Additional CSS) :
.et_bloom .et_bloom_popup::after {
background-image: url("placez l'URL de votre image");
}
.et_bloom .et_bloom_optin div{
background: transparent !important;
}I would point out that no image was inserted into the parameters of the boom popup (step 3.4 – tablet #2 of this article).
4.4 – Bloom Customization #4: background image + background image
This customization is a variant of the previous... Here is what this popup would look like without adding CSS that you will find next:
Explanation:
1 – Add a background image (recover the URL of the previously uploaded image in your media library). In this case, this image is the semi-transparent background with the raindrops.
.et_bloom .et_bloom_popup::after {
background-image: url("placez l'URL de votre image");
}2 - Make it completely transparent in the background of Bloom's popup (and without shadow):
.et_bloom .et_bloom_optin div{
background: transparent !important;
box-shadow: none;
}3 – Make everything "outside the frame" visible:
.et_bloom .et_bloom_form_container div {
overflow: visible !important;
}4 – Declare the image (the cloud) so that it is placed behind the fields:
.et_bloom .et_bloom_form_header.split img {
position: absolute;
top: -100px;
left: 0px;
z-index: -1;
}5 - Enlarge image size (cloud) if needed:
.et_bloom .et_bloom_form_header.split img {
max-width: 100%;
}6 - Change the margins and alignments of the text and form:
.et_bloom .et_bloom_form_container .et_bloom_form_content {
padding: 0px;
}
.et_bloom .et_bloom_form_container .et_bloom_form_header {
padding: 0px;
}
.et_bloom .et_bloom_form_header h2 {
text-align: center
padding-left: 10%;
padding-right: 10%;
}Here is the final code that I used to get this result (to copy and paste into your style sheet or directly into the tab Appearance > Customize > Additional CSS) :
.et_bloom .et_bloom_popup::after {
background-image: url("placez l'URL de votre image");
}
.et_bloom .et_bloom_optin div{
background: transparent !important;
box-shadow: none;
}
.et_bloom .et_bloom_form_container div {
overflow: visible !important;
}
.et_bloom .et_bloom_form_header.split img {
position: absolute;
top: -100px;
left: 0px;
z-index: -1;
}
.et_bloom .et_bloom_form_header.split img {
max-width: 100%;
}
.et_bloom .et_bloom_form_container .et_bloom_form_content {
padding: 0px;
}
.et_bloom .et_bloom_form_container .et_bloom_form_header {
padding: 0px;
}
.et_bloom .et_bloom_form_header h2 {
text-align: center
padding-left: 10%;
padding-right: 10%;
}4.5 – Bloom Customization #5 : Gif + background color
I think this popup is great! It's just that I've rarely seen (not to say never) a popup to subscribe to a newsletter with an animated image (GIF)...
It's so easy to do!
Here is what the popup would look like without the customization CSS:
Explanation:
1 – CSS to shift the GIF up and left (+ size change if needed):
.et_bloom .et_bloom_form_header.split img {
position: absolute;
top: -180px;
left: -200px;
z-index: 9999;
max-width: 60%;
}2 - Make everything "outside the frame" visible:
.et_bloom .et_bloom_form_container div {
overflow: visible !important;
}3 – Add margins (padding) if needed:
.et_bloom .split .et_bloom_form_text {
padding-left: 13% !important;
}
.et_bloom .et_bloom_form_container .et_bloom_form_header {
padding-bottom: 30px;
}4 - Add a background color with opacity:
.et_bloom .et_bloom_popup::after {
background-color: rgba(140, 196, 162, 0.85);
}You can help yourself with this site to convert your Hex colors to RGBA.
Here is the final code that I used to get this result (to copy and paste into your style sheet or directly into the tab Appearance > Customize > Additional CSS) :
.et_bloom .et_bloom_form_header.split img {
position: absolute;
top: -180px;
left: -200px;
z-index: 9999;
max-width: 60%;
}
.et_bloom .et_bloom_form_container div {
overflow: visible !important;
}
.et_bloom .split .et_bloom_form_text {
padding-left: 13% !important;
}
.et_bloom .et_bloom_form_container .et_bloom_form_header {
padding-bottom: 30px;
}
.et_bloom .et_bloom_popup::after {
background-color: rgba(140, 196, 162, 0.85);
}Note that to achieve this result, I inserted a GIF using a URL obtained on Giphy (see: Gif with transparent bottom) when designing my popup :
5 - In conclusion...
Are these 5 personalization ideas from Bloom Have you been inspired? Do you have any other ideas?
Any CSS customization is really personal: here, I give you leads to explore!
It's up to you to own them so that it fits the needs of your project.
Note also that it will be necessary to check the rendering in mobile version, it may be necessary (or surely) to optimize the Divi media queries…
Also read: how to make Bloom compatible with GDPR
16 Comments