Divi 5 will provide you with a flexible option to assemble polished visual sections with clean layouts, trendy styling, and lightweight design portions. In this free pack, you’ll get 5 SVG Sections for Divi 5 that you simply’ll have the ability to use so to upload decorative graphics, illustrated content material subject material blocks, testimonial visuals, profile accents, score portions, and additional for your web site. The ones sections use SVG-based design details to create crisp, scalable visuals that look sharp all the way through show sizes.
All SVG portions are added by the use of Divi’s Code Module, making them easy to try, modify, and restyle when you’re relaxed improving SVG markup. One segment moreover uses an Image Module with a nested SVG part that defines a clipPath for the quote mask have an effect on. Import a little, exchange the content material subject material, modify the styling, and likewise you’re ready to move.
What makes this freebie in particular valuable is the mix of ready-to-use designs and just right, flexible code. The ones sections include a few color alternatives, CSS custom designed homes for speedy customization, and clean development, so that you’ll have the ability to are compatible them for your emblem while holding the whole lot delicate on any tool.
Preview
Proper right here’s a handy guide a rough check out the 5 SVG Sections included inside the pack. The download is further down the submit.
Download 5 SVG Sections For Divi 5
Get all 5 sections for free of charge. Import them into your Divi Library and add them to any internet web page inside the Visual Builder.
@media most simple show and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:forward of { 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:forward of { 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 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 Unfastened
Join the Divi Newsletter and we can e mail you a replica of the ultimate Divi Landing Internet web page Construction Pack, plus plenty of selection very good and free Divi property, tips and techniques. Apply along and also you’re going to be a Divi seize in no time. If you’re already subscribed simply kind for your e mail maintain below and click on on download to get admission to the construction pack.
You will have successfully subscribed. Please check out your e mail maintain to confirm your subscription and get get admission to to free weekly Divi construction packs!
What’s Integrated (6 Exports)
After you bought and unzip the file, you’ll to seek out 5 styled SVG segment exports, plus 1 file containing all layouts.
Styled – SVG Section 1
This absolutely styled SVG segment choices decorative SVG artwork that can be used as a visual accent, function block, or design-forward content material subject material segment. What makes this one unique is the cosmic scene within a tall, elegant pill. It choices palms gently reaching against a glowing sun, surrounded by the use of flowing lines, stars, and a crescent moon. One style provides a rich, deep teal background with delicate strokes for a night-sky in point of fact really feel, while the others function a bold orange outline and a vibrant blue-and-pink combo.
Built with clean paths and simple CSS variables for color and stroke width, it’s super easy to customize and looking forward to animations.
Styled – SVG Section 2
This absolutely styled SVG segment choices an illustrated graphic that works smartly for promotional content material subject material, product highlights, ecommerce messaging, or emblem storytelling. The illustration has quite a few persona, as a result of the dynamic motion lines, floating stars, and sense of fun movement. It uses a vibrant pink stroke with just right color fills controlled by the use of simple CSS, making it super easy to test your emblem colors.
Styled – SVG Section 3
This segment is a fully styled testimonial-style segment that uses a visual mask have an effect on to frame content material subject material additional dynamically. It uses an Image module with a nested part to create a clip-mask have an effect on the use of SVG code. It shapes the background {photograph} in a novel, herbal, asymmetrical form, gently curved on one facet for a modern, flowing look. The mix of a clipped image and bold text creates a standout framed have an effect on that feels ingenious, rather than a certain rectangular box. It’s lightweight, completely responsive, and easy to customize.
Styled – SVG Section 4
This construction is easiest imaginable for testimonials, staff highlights, social proof, purchaser status, or community-focused content material subject material. It uses a number of 3 bold, playful SVG shapes, each and every designed to frame spherical profile footage with persona. Available in vibrant colors and bold strokes, they add energetic visual hobby spherical headshots. The straightforward, scalable SVG paths lead them to lightweight, completely responsive, and easy to recolor or animate, serving on your staff or purchaser profiles in point of fact really feel fun instead of abnormal.
Styled – SVG Section 5
This segment uses compact icon-style portions for rankings, critiques, function highlights, or small supporting visuals. What makes this one unique is its bold, calendar-style icons that use clean, thick strokes and just right CSS custom designed homes for primary and secondary colors, giving you a few color permutations correct out of the sector. Because of vector-effect: non-scaling stroke inside the code, the lines stay crisp and loyal without reference to how small or massive you’re making the icon. It’s lightweight, completely responsive, and super easy to colorize.
Styled – SVG Sections (All) → Imports all 5 designs into your Divi Library at once.
How To Use The SVG Sections
Keep your download folder handy. We’ll import the information, add a little to a internet web page, and then exchange the content material subject material and SVG styling as sought after.
1. Import Sections Into The Divi Library
Move to Divi → Divi Library. Click on on Import & Export at the peak of the show.
Throughout the Import & Export Layouts modal, switch to the Import tab, then click on on Select File and select your JSON file. Select any SVG Section JSON you’d like to use, then click on on Import Divi Builder Layouts.
2. Add An SVG Section To Any Internet web page
Open a internet web page inside the Visual Builder and add a brand spanking new Section.
Click on on Add From Library and select regarded as one in all your SVG sections.
3. Change The Content material subject material
As quickly because the segment is on the internet web page, change the placeholder content material subject material. Change the headings, body text, captions, buttons, footage, testimonials, names, rankings, icons, and supporting copy so the segment aligns at the side of your web site.
On account of the ones designs use SVG portions as part of the visual development, it’s best possible to exchange the typical content material subject material first forward of improving the SVG markup. That is serving to you understand how the segment reads at the side of your precise copy in place.
4. Edit The SVG Code In moderation
All the SVG artwork in the ones sections is added by the use of Code Modules. To customize those visuals, open the similar Code module and try the SVG markup.
Not unusual SVG edits include changing fill colors, stroke colors, stroke widths, opacity values, gradients, shape colors, and other inline SVG attributes. Make small edits and preview the segment after each and every industry to quickly catch any missing tags or broken markup.
For instance, to change colors in Section 1, seek for the hex code values straight away after the opening style tag.
Alternate the color-stroke and color-fill values with new hex values. Divi will exchange the colors in precise time, letting you view changes as you’re hired.
If you’re improving the quote mask segment, phrase that the mask have an effect on is handled another way. It uses an Image Module with a nested SVG part that defines the clip path.
When customizing that segment, be careful now not to remove the SVG part or industry the clip path ID (located in Advanced tab > Attributes) with the exception of you moreover exchange each place where that ID is referenced.
To search out the SVG in Section 3, open the Image module, enlarge the Portions risk group, and click on at the edit icon of the nested Code module.
5. Regulate Sorts In Divi
The ones SVG sections are already styled, so that you’ll have the ability to use them instantly or refine them to better suit your site. Change typography, colors, spacing, backgrounds, borders, shadows, sizing, and responsive settings the use of Divi’s Design tab.
To modify typography, open any Text or Heading module and transfer to the Design tab. Magnify the similar text settings to keep watch over Font, Font Weight, Text Alignment, Text Color, and additional.
To refine the encircling segment construction, open the segment, row, column, group, or module you wish to have to keep watch over and use the Design tab to tweak Border, Box Shadow, Sizing, and Spacing.
Use Divi’s responsive improving tools to fine-tune spacing, stacking, image measurement, SVG scale, text alignment, and button placement on smaller shows.
Pointers For The usage of SVG Sections Effectively
SVG sections artwork best possible when the visuals improve the message rather than distract from it. Use the ones rapid tips to keep your sections polished, flexible, and easy to customize.
Keep The SVG Supporting The Primary Message
Decorative SVG portions should data attention against the segment’s content material subject material. Use headings, fast copy, and clear calls to movement to make the design in point of fact really feel intentional.
Use Consistent Colors
SVGs can include a few fills, strokes, gradients, and opacity values. Keep your palette centered so the segment fits your emblem and remains easy to scan.
Edit SVG Code In Small Steps
When running inside a Code Module, make small changes and preview continuously. A missing bracket, a changed ID, or a missing ultimate tag can impact how the SVG displays.
Stay Masks, Clip Paths, And IDs
Some SVG effects depend on inner IDs, masks, or clip paths. Must you edit those values, make certain that every one related references are up to the moment too. This is in particular necessary for the Quote SVG mask segment.
Check out The Construction On Mobile
SVG visuals can scale beautifully, alternatively spacing and stacking nevertheless matter. Evaluation each and every segment all the way through tablet and get in touch with views to ensure the SVG artwork, text, buttons, footage, and supporting portions keep balanced.
Get began Construction In Divi 5 In recent years!
The ones 5 SVG Sections give you a snappy method so to upload crisp, scalable visuals to landing pages, service pages, product pages, testimonial sections, promotional layouts, and additional. Import the layouts, exchange the content material subject material, customize the SVG styling where sought after, and use Divi 5‘s Visual Builder to refine each and every segment on your web site.
The submit 5 SVG Sections For Divi 5 (Loose Obtain!) appeared first on Chic Subject matters Weblog.
0 Comments