Divi 5‘s fashionable design equipment make it simple to construct playful, cloud-style sections. Those are cushy playing cards that really feel gentle, versatile, and very best for groups, options, tags, or CTAs. On this unfastened pack, you’ll in finding 8 Cloud Sections, each and every crafted for easy shapes, refined intensity, and fast edits. Drop them into any web page and change the content material.

Preview

Let’s check out all 8 Cloud Sections on this pack. The obtain is additional down the publish.

Subscribe To Our Youtube Channel

Obtain 8 Cloud Sections For Divi 5

Get all 8 cloud sections free of charge. Import them into your Divi Library and upload them to any web page.

Download the Files

.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:prior to { border-top-color: #ffffff !necessary; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:prior to, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:prior to { border-top-color: clear !necessary; border-left-color: #ffffff !necessary; }
@media handiest display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:prior to { border-top-color: #ffffff !necessary; border-left-color: clear !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: clear !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 { colour: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:prior 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 robust { 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 robust, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !necessary;}

See also  Using DevOps and Kinsta’s staging environments for WordPress web site construction

Obtain For Unfastened

Sign up for the Divi Publication and we will be able to electronic mail you a duplicate of without equal Divi Touchdown Web page Structure Pack, plus heaps of alternative wonderful and unfastened Divi sources, pointers and methods. Apply alongside and you are going to be a Divi grasp very quickly. If you’re already subscribed merely kind on your electronic mail deal with under and click on obtain to get right of entry to the format pack.

DOWNLOAD

You have got effectively subscribed. Please test your electronic mail deal with to substantiate your subscription and get get right of entry to to unfastened weekly Divi format packs!

What’s Integrated (9 Exports)

While you obtain and unzip the folder, you’ll in finding all 9 format exports smartly arranged as particular person sections and a complete “All Sections” pack.

Default – Particular person Sections (8) → In a position-made designs.
Default – All Sections (1) → Complete pack of all designs.

How To Use The Cloud Designs

Stay your obtain folder shut through to start out uploading them on your Divi web site.

1. Import Sections Into The Divi Library

First, we’ll wish to import the layouts on your Divi website. Pass to Divi → Divi Library. Click on the Import & Export button on the peak of your display screen.

When the Import & Export Layouts modal seems, make a choice the Import tab and click on Make a choice Record to find the JSON recordsdata for your pc.

Make a choice the Default – Cloud Sections (All) report and click on it to import it.

As soon as the report is loaded, click on Import Divi Builder Layouts to put in them.

As soon as imported, all 8 Cloud Segment layouts will seem within the Divi Library.

2. Upload A Cloud Segment To A Web page

Navigate to Pages → All Pages. Open a web page within the Visible Builder (or create a brand new one).

Click on the black “+” within the Visible Builder. When the Insert Segment modal seems, click on the Upload From Library tab.

Select the Cloud segment you need so as to add.

Click on Use This Segment to load it.

In spite of everything, save the web page through clicking the Save button on the peak proper of the Visible Builder.

Customizing The Cloud Sections

Those sections send with ready-made format, spacing, and typography types. You’ll be able to tweak anything else on the Segment, Row, Column, or Module stage to compare your logo.

Divi 5’s format controls permit speedy association of cloud pieces whilst keeping up responsiveness.

1. Regulate Structure With Flexbox

Divi 5’s Flexbox format machine guarantees your Cloud Segment pieces are responsive and fantastically organized.

Open the Row settings, and click on at the Column.

Pass to the Design tab → Structure.  Modify the Route (Row), permit Wrap, and tweak the Horizontal Hole and Vertical Hole to keep watch over how pieces float and stack throughout gadgets.

This guarantees your sections stay blank and arranged, whether or not considered on Desktop, Pill, or Cellular.

2. Edit The Cloud Pieces

Every cloud merchandise is a styled container with customizable parts.

Open the Column or Module the use of the Layers View. Modify the Border → Radius to fine-tune the rounded “cloud” form.

Adjust Background settings for fills or gradients, Sizing for dimensions, Spacing for inner padding, and Field Shadow for refined intensity.

Change avatar pictures in an Symbol Module.

Replace Icons, and edit labels in a Textual content Module.

If the design features a CTA, replace the module textual content and hyperlink.

3. Customise The Designs

Divi 5’s Visible Builder makes customization intuitive. After loading a Cloud Segment, you’ll be able to edit module types to compare your logo colours, fonts, or aesthetic.

You’ll be able to rearrange parts the use of drag-and-drop controls and Divi’s Global Design Variables to use constant styling throughout more than one sections directly.

Get started Construction In Divi 5 As of late

Those 8 Cloud Sections are a snappy means so as to add persona on your Divi 5 builds. Obtain them, drop them into any web page, and tailor the labels, avatars, and CTAs on your content material. Flex-based wrapping and responsive controls deal with the format, permitting you to concentrate on design.

The publish 8 Cloud Sections For Divi 5 (Free Download) seemed first on Elegant Themes Blog.

read more