Download & Use 5 Asymmetrically Curved 1/2 Column Backgrounds with Divi

Last Updated on September 22, 2022 by 40 Comments

Download & Use 5 Asymmetrically Curved 1/2 Column Backgrounds with Divi
Blog / Divi Resources / Download & Use 5 Asymmetrically Curved 1/2 Column Backgrounds with Divi
Play Button

Combining asymmetrically curved background with vibrant gradient colors is a design trend that grew in 2017 and keeps existing and growing in 2018. To help you follow that trendΒ seamlessly in 2018, we’ve created five different background images that you can use on 1/2 column backgrounds in combination with column gradient backgrounds.

Further down this post, you will be able to download these background images including the Photoshop file for free and use them for your next projects. Note that these background images are aimed explicitly at 1/2 column backgrounds and will fulfill their purpose in that specific situation only. If you want to make them apply to other column structures, you will need to change the image dimensions of each image within the Photoshop file.

Result

Before we dive into the tutorial, let’s take a look at the entire result and the 1/2 column background images you will be able to download for free in the next part of this post.

1/2 Column Background 1

asymmentric

1/2 Column Background 2

asymmentric

1/2 Column Background 3

asymmetric

1/2 Column Background 4

asymmentric

1/2 Column Background 5

asymmetric

Download This Tutorial’s Files

To lay your hands on the free images & Photoshop files, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter 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.

Download & Use 5 Asymmetrically Curved 1/2 Column Backgrounds with Divi

Subscribe To Our Youtube Channel

Recreate Section

Section Settings

Background Color

Before adding the 1/2 column background images, you’ll need to add a standard section to an existing or new page. Once you do, add β€˜#f3f2f2’ as the background color of the section.

asymmetric

Add a New Row

Column Structure

Continue by adding a row with two equal columns to the section you’ve just created.

asymmetric

Column 1 Gradient Background

Then, open your row settings and add the following gradient background (or any other gradient background you’d wish to use) to the first column:

  • First Color:Β #e02b20
  • Second Color:Β #8300e9
  • Column 1 Gradient Type: Linear
  • Column 1 Gradient Direction: 180deg
  • Column 1 Start Position: 0
  • Column 1 End Position: 100

asymmetric

Column 1 Background Image

Next, go ahead and locate whichever one of the 1/2 column background images you want to use in the folder you’ve downloaded at the beginning of this post and add it as your background image along with the following settings:

  • Column 1 Background Image Size: Cover
  • Column 1 Background Image Position: Center
  • Column 1 Background Image Repeat: Repeat
  • Column 1 Background Image Blend: Normal

asymmetric

Column 2 Gradient Background

Scroll down and add a gradient background to the second column of your row as well (again, this could be another gradient background that matches your color palette as well):

  • First Color: #2b87da
  • Second Color: #edf000
  • Column 2 Gradient Type: Linear
  • Column 2 Gradient Direction: 180deg
  • Column 2 Start Position: 0
  • Column 2 End Position: 100

asymmetric

Column 2 Background Image

Add the 1/2 column background image of choice to the second column as well while using the same options as you did for the first column.

asymmetric

Add Custom Padding to Tablet for Each Column

To make sure the column backgrounds look good on tablet as well, apply some extra custom padding of ’50px’ to the top and bottom of each column (on the tablet only).

asymmetric

Add a Blurb Module to the First Column

Choose an Icon

Next, add a Blurb Module to your first column, enable the β€˜Use Icon’ option and select an icon of choice.

asymmetric

Background Color

Then, open the Background subcategory and add β€˜rgba(255,255,255,0.95)’ as your blurb background color. This slightly transparent white color will allow your gradient background to shine through your Blurb Module without affecting the readability of your content.

asymmetric

Icon Settings

Move on to the Design tab and apply the following settings to the Image & Icon subcategory:

  • Icon Color:Β #e02b20
  • Image/Icon Placement: Top
  • Use Icon Font Size: Yes
  • Icon Font Size: 46px

asymmetric

Text Settings

Then, open the Text subcategory next and make sure the following settings apply:

  • Text Color: Dark
  • Tet Orientation: Center

asymmetric

Sizing

Scroll down the Design tab, open the Sizing subcategory and use the following settings for it:

  • Width: 70%
  • Module Alignment: Center

asymmetric

Spacing

Then, open the Spacing subcategory and use the following custom margin and padding for your Blurb Module:

  • Top Margin: 100px
  • Bottom Margin: 100px
  • Top Padding: 50px
  • Right Padding: 50px
  • Bottom Padding: 50px
  • Left Padding: 50px

asymmetric

Border Settings

Continue by opening the Border subcategory and add ’10px’ to each one of your Blurb Module’s corners:

asymmetric

While still being in the Border subcategory, use the following border style for the top and bottom:

  • Border Width: 5px
  • Border Color: #FFFFFF
  • Border Style: Solid

asymmetric

Box Shadow

Lastly, apply the following box shadow to your Blurb Module as well:

  • Box Shadow Horizontal Position: 0px
  • Box Shadow Vertical Position: 2px
  • Box Shadow Blur Strength: 18px
  • Box Shadow Spread Strength: 0px
  • Shadow Color:Β rgba(0,0,0,0.3)
  • Box Shadow Position: Outer Shadow

asymmetric

Clone Blurb Module & Place in Second Column

Change Icon

Now that you’ve finished the Blurb Module, you can save yourself some time, clone it and place it in the second column as well. The first thing you’ll need to do is choose a different icon that matches the content you’re sharing.

asymmetric

Change Icon Color

Change the color of your icon into a color that matches your column gradient background as well. In this case, the new icon color is β€˜#2b87da’.

asymmetric

Try Using the β€˜Luminosity’ Blend Mode

Blend Mode of Blurb Module

To top it off, you can also use β€˜Luminosity’ as the Blend Mode of your Blurb Module to make the gradient background colors shine through the icon and text.

asymmetric

Mobile Version Tweak

Result

Phones have a more limited screen size than tablets and desktops. That’s why we’ll need to make small modifications to the row that appears on mobile. Before we show you what to do precisely, let’s take a look at the difference.

Before

asymmetric

After

asymmetric

Clone Row

Now, to make the mobile version look as good as it does on desktopΒ and tablet, start by cloning the row you’ve created.

Change Visibility of Desktop & Tablet Row

Then, open the row for desktop and tablet, go to the Advanced tab and disable the row on phone.

asymmetric

Change Visibility of Mobile Row

Likewise, you’ll need to disable the row for mobile on tablet and desktop.

asymmetric

Change Sizing of Row

And to make the column background images look good on mobile, go to the Design tab, open the Sizing subcategory and use the following settings:

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

asymmetric

Result

Now that we’ve gone through all of the steps, let’s take a final look at the stunningΒ result you can achieve by using the five different 1/2 column background images on your website in combination with a Blurb Module.

1/2 Column Background 1

asymmentric

1/2 Column Background 2

asymmentric

1/2 Column Background 3

asymmetric

1/2 Column Background 4

asymmentric

1/2 Column Background 5

asymmetric

Final Thoughts

In this post, we’ve shared 5 different 1/2 column background images that you can use for your next projects. You can download these background images for free at the beginning of this post and use them without any restrictions. These asymmetrically curved background images in combination with gradient backgrounds are a design trend that grew in 2017 and continues growing in 2018. If you have any questions or suggestions; make sure you leave a comment in the comment section below!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! πŸ‘‡

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow πŸ‘‡

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How πŸ‘‡

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Divi 5 Update: Public Alpha Version 1

Divi 5 Update: Public Alpha Version 1

Posted on October 12, 2024 in Divi Resources

The Divi 5 Public Alpha is available for testing. As we progress towards the final release, we’ll update Divi 5 every two weeks, appearing as a standard update in your WordPress dashboard. If you use Divi 5, you’ll notice an update notification for Public Alpha Version 1 today. Divi 5 will...

View Full Post
New Starter Site For Writers (Quick Install)

New Starter Site For Writers (Quick Install)

Posted on October 11, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level. This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post
How To Migrate Your Website To Divi 5 (Public Alpha)

How To Migrate Your Website To Divi 5 (Public Alpha)

Posted on October 9, 2024 in Divi Resources

Divi 5 Public Alpha is available, so you’re probably excited to explore its new features and improvements. Transitioning from Divi 4 to Divi 5 involves a few important steps. This post will help you migrate smoothly from Divi 4 to Divi 5 Public Alpha, allowing you to take full advantage of Divi...

View Full Post

40 Comments

  1. Can anyone help please?

    Starting with the tutorial above at:

    “Add a New Row
    Column Structure.
    Continue by adding a row with two equal columns to the section you’ve just created.”

    I can do this, adding two 1/2 columns.

    At this step:

    “Column 1 Gradient Background”

    The problem starts. There is no way to select and style a column, there is only a “+ Insert Module(s)” in each of the half columns.

    How can I style the background for the column? (It is not selectable).

    Here is a screenshot of what I see: https://www.dropbox.com/s/mtinnfz6itxjd2v/blurb-tutorial.png?dl=0

  2. hi. I do the same. but there is a glitch. The picture in the background is not shown completely. climbs right and left. why?
    the picture is cropped to the right and left

  3. It’s very nice and creative. Well explained. Thank you for the effort.

    • You’re welcome, thanks for your comment Sreeni! πŸ™‚

  4. Hello!
    Good tutorial, very good. I will apply this to my website too.

    But, this only covers 1/2 column and telling to adjust the background image size to fit other column sizes.

    Can you tell me what size images should be to fit the other column sizes?

    • Glad you like it, Ted! Haven’t tried making them fit other column types but I think the smaller a column gets, the more background color in height the images will need.

    • Just to get notifications!

  5. Maybe the video is clear in explaining the steps (I don’t have time to watch), but this blog — and your other tutorials — are anything but helpful. Why don’t you create a tutorial the way it’s supposed to be made: show the steps building up from nothing to the end result. Instead, you show the settings for every step, on top of the end result? If you’d do it the right way, people can see what they should be seeing after completing each step if they follow the tutorial.

    • Thanks for your feedback, Roland. I’ll keep that in mind for future tutorials πŸ™‚

  6. That is a great tutorial. Thanks Donjete

    • You’re welcome, Ray! πŸ™‚

  7. This is without a doubt one of the best tutorials I’ve ever seen. Great explanations, the pace is just right, easily understandable and Charming presenter.
    Can’t tell you how many tutorials I’ve dropped midstream! This is Great! Thanks…

    • Thanks for your awesome feedback, Bill!! πŸ™‚

  8. I do love that you read and answer every reply! (Hint to the rest of you!)

    • Always nice to connect with the community, Randy πŸ™‚

  9. Donjete,

    Thank you for the video tutorials you do and for making this available. You’re a good teacher and a great example to follow.

    • You’re oh-so-welcome, Joan!! πŸ™‚

  10. Interesting idea. So the background image you are adding to this, is actually a white png acting as a mask to create the shape? I like this!

    • Yep, using the same color as the section for the image background color and a transparent shape to make background colors that are set in Divi come through πŸ™‚ thank you for your comment, Jamie!

  11. Thanks Donjete. You are a great teacher. You made a complex topic so easy to follow step by step. This is very useful and your video instruction is very helpful.

    • Glad you feel that way, David!

  12. That’s really fun, thanks πŸ™‚

    • You’re welcome!!

  13. Great tutorial, great design. Thank you so much!

    • You’re absolutely welcome, Alfred πŸ™‚

  14. I really appreciate these tutorials. I am a novice (and not very creative) and would have no grasp of the power of Divi if it were not for these articles. I see things on the Web and wonder how in the world they do that, not knowing I own a tool that can easily do it!
    I also appreciate the free downloads and see how they save people a lot of time. But if I am ever going to understand Divi I must walk through these tutorials step by step, and l-e-a-r-n. So thanks very much.

    • That’s exactly what these tutorials are for, to learn πŸ™‚ thanks for your comment, Gene!

  15. Thumb up. Great tutorial. Thanks!

    • Glad you like it, Fabian!

  16. Is there any limit to the creativity at ET?

    Great work!!

    • The sky is the limit! Thanks Richard πŸ™‚

  17. That’s really fun. You have opened a new possibility.

    I hope this gets noted: I GREATLY appreciate that you provide the modules for download. That is HUGE for playing with these ideas. Thank you. ET should make files available for all tutorials they post—even when prepared by 3rd parties.

    I have 1 question. The Visual Builder gives me nightmares when I create separate mobiles sections. Any work flow suggestions?

    • Great to hear your feedback, Chris! πŸ™‚ Whenever I struggle with a module for one or another reason, I switch over to Wireframe View to open the settings and switch back to the real-time builder right away

      • Thank you! I appreciate the tip. I’ll try it.

  18. looks good if you just have to go for that style.

    • Thanks, Richard πŸ™‚

  19. That was the best video tutorial on Divi I’ve seen yet.. really clear fast and extremely helpful to see how to accomplish the design. I hope she does more of these.. Thank you!

    • Thanks for these kind and motivating words πŸ™‚

  20. Interesting idea. Always enjoy seeing this kind of Divi content. Keep it coming. ?

    • Thank you, Britt! πŸ™‚

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today