Having a multipurpose sales banner will definitely come in handy (and save you time) during those crucial times of the year when promotions are all the rage. That’s why we are offering this multipurpose sales banner for Divi as a FREE download! This sales banner can easily be customized to fit your needs with only a few tweaks of some text and a background image. Designing the sales banner in Divi is easy enough that you won’t have to settle for image banners that often look a little grainy on the web. So, in addition to the free download, I’m going to show you how to design the sales banner in Divi from scratch.

Let’s get started!

What’s Included

Here is a peek at the sales banner design included in the download.

divi sales banner

divi sales banner

divi sales banner

divi sales banner

divi sales banner

Download The Sales Banner Design for FREE

To lay your hands on the sales banner design for free, you will first need to download them using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}

Download For Free

Download For Free

Join the Divi Newlsetter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Loading the Layout to the Divi Library

After you download the file, unzip it. You will find that it contains a file named “sales-banner-design.json”. This is what you will load to your Divi library. Now go to your wordpress dashboard and navigate to Divi > Divi Library. Then click the import button at the top of the page. From the portability popup window, select the Import tab and choose the sales-banner-design.json file. Then click the Import Divi Builder Layouts button.

Now to import the layout to your page, simply create a new page and deploy the visual builder. Then select “Choose a Premade Layout”. From the load from library popup, select the tab “Your Saved Layouts” and then click on the Sales Banner Design layout from the list. That’s it!

How to Create the Sales Banner from Scratch in Divi

Adding the Section Background

To get things started, create a new page. After you give your page a title, deploy the visual builder and select the “Build From Scratch” option. Then add a new section with a one column row.

Before you start adding any modules to the row, give your section a background gradient color (The color doesn’t matter at this point. We just need a background color in order to see all the white design elements we will be using for our sales banner.)

divi sales banner

Customizing the Rows for the Sales Banner

Before we add our modules to the row, let’s first give our row a custom width of 700px and take out any top or bottom spacing so that our row will sit nicely on top of the other row we will be adding underneath. Go to the row settings and update the following:

Custom Width: 700px
Gutter width: 1
Custom Margin: 0px top, 0px, bottom
Custom padding: 0px top, 0px bottom

divi sales banner

Now duplicate the row two times so that you have a total of three identical rows. These will be used to build our sales banner.

divi sales banner

Adding the Top Border Frame with Adjacent Text

To build our sales banner, we begin with a top border with some text to the left. To do this we will be using a divider module and a text module. First, create a new text module and add a few words of content in the content box.

Content: “Online Only”

divi sales banner

Continue to the design tab and update the following:

Text Font Weight: Bold
Text Font Style: TT
Text Text Color: rgba(255,255,255,0.9)
Text Text Size: 15px
Text Letter Spacing: 2px
Text Line Height: 1em
Width: 22% (desktop), 25% (tablet), 40% (smartphone)
Module Alignment: left
Custom Margin: 0px top, -15px bottom
Custom Padding: 0px top, 0px bottom

This custom margin is a bit premature since our divider hasn’t been added yet, but it is necessary to line up the text so that it is perfectly adjacent to the divider soon to be added.

divi sales banner

Now add a divider module under the text module in the same row. Then update the divider settings as follows:

Color: rgba(255,255,255,0.9)
Divider position: bottom
Divider weight: 15px
Height: 15px
Width: 78% (desktop), 75% (tablet), 60% (smartphone)
Module Alignment: Right
Custom Margin: 0px top, 0px bottom
Custom Padding: 0px top, 0px bottom

divi sales banner

Of course, you will need to adjust the width of your border depending on the width of your text module when customizing the design for your own needs.

Next we need to add one more divider module to connect our divider to the right border of the row we will be designing next.

To to this, duplicate the divider module and update the following:

Width: 15px
Custom Margin: -1px bottom

divi sales banner

Adding the bottom border frame with Adjacent Text

To create the bottom border frame, we can use the same element we created in the top border frame of our top row. Only this time we will start with the 15px wide divider module. Go ahead and copy the 15px divider module and paste it into the third (bottom) row. Then update the module alignment to left instead of right.

divi sales banner

Next, copy the longer divider module from the top row and paste it under the 15px divider in the bottom row. Then adjust the following:

Width: 75% (desktop), 70% (tablet), 50% (smartphone)
Module Alignment: left

divi sales banner

Finally, copy over the text module in the top row and paste under the two divider modules in the bottom row. Then update the following:

Content: “Starts Nov 1st”
Width: 25% (desktop), 30% (tablet), 50% (smartphone)
Module Alignment: Right
Custom margin: -15px top, 0px bottom
Custom Padding: 15px left

divi sales banner

Adding the Text Modules to the Middle Row

Now we are ready to start add the text modules to our middle row which will hold our main sales banner text. We will be stacking three text modules on top of each other. Go ahead and add the first text module to the middle row.

divi sales banner

Then update the following:

Content: “Everything 20% Off”
Background Color: rgba(255,255,255,0.9)

divi sales banner

Text Font Weight: Semi Bold
Text Font Style: TT
Text Text Color: #000000
Text Text Size: 34px (desktop), 20px (smartphone)
Text Letter Spacing: 2px
Text Line Height: 1em
Text Orientation: Center
Custom Padding: 2vw top, 2vw bottom, 5vw left, 5vw right

Giving the text a black color over a white background is essential for maximizing the screen blend mode effect that will allow the text to blend with the section background. We will add the screen blend mode to the row a little later on.

divi sales banner

Now duplicate the text module to jumpstart the design of the next text module. Then update the content with the following html:

<h2 style="border: 7px solid #000000;">Fall Sale</h2>

divi sales banner

The inline styling simply adds a black border around the heading text. Again, the black color will work with the screen blend mode to expose the section background with the text.

Then update the following:

Heading 2 Font Weight: Bold
Heading 2 Font Style: TT
Heading 2 Text Color: #000000
Heading 2 Text Size: 100px (desktop), 80px (tablet), 60px (smartphone)
Heading 2 Letter Spacing: 2px
Custom Margin: 0px top
Custom Padding: 0px top, 0px bottom

divi sales banner

For the last text module, duplicate the first text module in this middle row and paste it under the second text module.

Then update the following:

Content: “Shop Now”
Text Font Style: TT, U (underlined)
Custom Margin: 0px top
Custom Padding: 1vw top, 2vw bottom

divi sales banner

Styling the Middle Row

The final phase of this design is to add a border to the middle row and a screen blend mode effect. To do this, open the middle row settings and update the following:

Custom Padding: 15px left, 15px right
Right Border Width: 15px
Right Border Color: rgba(255,255,255,0.9)
Left Border Width: 15px
Left Border Color: rgba(255,255,255,0.9)
Blend Mode: Screen

divi sales banner

The screen blend mode allows the text to blend the background image to show through the text for a cool effect!

Check out the final result.

divi sales banner

divi sales banner

Adding a Link to Your Sales Banner

Since this is a sales banner, you will want to maximize the clickable space on the banner to increase conversions. To do this, you can add a link to the entire middle row. Simply open the middle row settings and enter a row link URL to redirect to your desired page.

divi sales banner

Adding Different Section Backgrounds for Unique Designs

With this new sales banner design, you can easily update the background image to create unique designs.

Here are a few examples.

divi sales banner

divi sales banner

divi sales banner

divi sales banner

Final Thoughts

I hope this sales banner design comes in handy for all those web promotions needed throughout the year. The design is built to serve as a multipurpose sales banner that can easily be updated with new text and section background images for a completely new look. You can even add a video background as well!

I look forward to hearing from you in the comments.

Cheers!

The post Download a FREE Multipurpose Sales Banner Design for Divi appeared first on Elegant Themes Blog.



Source link

error: Content is protected !!