18 FREE Pastel Gradients Constructed with Divi’s Gradient Builder

by | Jun 3, 2022 | Etcetera | 0 comments

Together with a gradient to your internet website online is a great way to mix color and add a captivating background to your internet web page. Pastel gradients look in particular surprising in web design since they use lighter colors to create refined blends, making improvements to the internet web page without being too overpowering. With Divi’s new gradient builder, designing a gorgeous gradient is more straightforward than ever. With tricky capacity and intensive customization possible choices, you’ll be capable of create unique, custom designed designs and add them to any phase. In this put up, you’ll be capable of get your palms on 18 FREE pastel gradients built with Divi’s gradient builder. Additionally, we’ll show you methods to enforce the ones gradients into your internet website online with some step-by-step instructions.

Let’s get started!

Sneak Peek

Right here’s a preview of the loose gradients.

18 FREE Pastel Gradients built with Divi's Gradient Builder

pastel gradients

Download The 18 FREE Pastel Gradients

To position your palms on the loose pastel gradients, you’ll first need to download them the usage of the button underneath. To appreciate get right to use to the download you will need to subscribe to our Divi Daily electronic message tick list by way of the usage of the form underneath. As a brand spanking new subscriber, you’ll download a lot more Divi goodness and a loose Divi Construction pack each Monday! For those who’re already on the tick list, simply enter your electronic message take care of underneath and click on on download. You’ll not be “resubscribed” or download further emails.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !necessary; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:previous to { border-top-color: #ffffff !necessary; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:previous to, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:previous to { border-top-color: transparent !necessary; border-left-color: #ffffff !necessary; }
@media most efficient visual display unit and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:previous to { border-top-color: #ffffff !necessary; border-left-color: transparent !necessary; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !necessary; border-left-color: transparent !necessary; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:previous to { background: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !necessary } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .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 powerful { 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 powerful, .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 !necessary;}

Download For Free

See also  Novice’s Information: How one can Use Wealthy Snippets in WordPress

Download For Loose

Join the Divi E-newsletter and we will be able to electronic message you a duplicate of the ultimate Divi Landing Internet web page Construction Pack, plus lots of other excellent and loose Divi resources, pointers and guidelines. Observe along and also you’ll be a Divi take hold of in no time. If you are already subscribed simply sort in your electronic message take care of underneath and click on on download to get right to use the layout pack.

You’ve successfully subscribed. Please check out your electronic message take care of to verify your subscription and get get right to use to loose weekly Divi layout packs!

You’ll import this layout to your internet website online by way of navigating to the Divi Library. Click on at the Import & Export button at the top, then make a choice the import tab. Choose the document you downloaded, then click on on import. The layout will now be available in your Divi Library.

Divi Import Pastel Gradient Layout

You’ll add the layout to your internet web page by way of choosing a premade layout and the usage of the layout from the “Your Saved Layouts” tab.

Divi use saved layout

Recommendations on the way to Add Pastel Gradients to your Design

Create a New Internet web page

Let’s get began by way of the usage of a premade layout from the Divi library. For this design, we will be able to use the Telehealth Landing Internet web page from the Telehealth Layout Pack to sing their own praises our gradients.

See also  The Disaster of Disconnection: Why It’s Time to Reconsider Your Expansion Technique [HubSpot Data]

Add a brand spanking new internet web page to your internet website online and gives it a reputation, then make a choice the technique to Use Divi Builder.

Divi add new page

We will use a premade layout from the Divi library for this example, so make a choice Browse Layouts.

Divi browse layout

Search for and make a choice the Telehealth Landing Internet web page layout.

Divi select layout

Choose Use This Construction in an effort to upload the layout to your internet web page.

Divi use layout

Now we’re ready to build our design.

Together with the Pastel Gradients

If you are following together with the learning, open the layout pack for this educational in every other tab for easy get right to use to the premade gradients. We will be copying the background gradient sorts from this layout to the telehealth layout.

Divi open pastel gradients

Open the module settings for the gradient you need to use in your design and duplicate the background.

You’ll copy the background by way of right-clicking over the Background segment inside the module settings or by way of clicking the three dots next to Background and selecting Copy Background.

Divi Copy Background

While copying and pasting the background from our layout is the easiest way to recreate the look in your private design, listed below are the settings for the gradient we’re the usage of in this educational:

  • Gradient Colors:
    • 5%: #eaeff2
    • 24%: #bfe4ff
    • 55%: #ceceff
    • 77%: #dfd1f9
    • 93%: #e6e3f5
    • 100%: #eaeff2
  • Gradient Sort: Elliptical
  • Gradient Position: Bottom Correct

Divi pastel gradient background settings

Now let’s open the Telehealth layout and add the background gradients. You’ll paste the background gradient to a module, segment, or row by way of clicking the three dots or right-clicking inside the segment settings and selecting Paste Background. You’ll moreover paste the background with the keyboard shortcut Ctrl + Alt + V whilst you hover over the module.

See also  22 Questions To Ask Hiring Managers (and HR) in a Activity Interview

Get began by way of together with the gradient background to the “Reinventing the Wheel” segment.

Divi paste pastel gradient background

For the “Some Problems are More straightforward From the Settee” segment, set the background gradient position to Best Correct so that it blends with the segment above.

  • Gradient Position: Best Correct

Divi adjust gradient position

Next, add the background gradient to each and every of the spherical blurb modules surrounding the image.

We need to keep an eye on the text and icon color for the ones blurbs so that they stand out towards the background gradient.

  • H4 Text Color: #000000

Divi Adjust blurb text color

  • Image/Icon Invert: 100%

Divi adjust image color

Next, add the background gradient to the “Develop into a Member In recent times” row and the testimonial modules inside the next segment.

Divi add Gradient Background to row

Divi add gradient background to testimonials

In any case, add the background gradient to the footer, and likewise you’re carried out!

Divi Add Gradient to Footer

Final End result

Now let’s take a look at the overall design with the pastel background gradients.

Pastel Gradient Telehealth Layout

Final Concepts

Divi’s gradient builder makes it easy to design stunning gradients in an effort to upload to your internet website online. With endless design probabilities, you’ll be capable of create unique backgrounds in only a few clicks. You’ll use the 18 FREE pastel gradients in our layout to get started! If you want to be told additional about Divi’s gradient builder, check out our tutorial for combining background gradients with masks and patterns. Have you ever ever tried Divi’s new gradient builder however? Let us know what you suppose inside the comments!

The put up 18 FREE Pastel Gradients Built with Divi’s Gradient Builder seemed first on Elegant Themes Blog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more


Submit a Comment

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