Divi 5 will provide you with a versatile solution to construct polished visible sections with blank layouts, trendy styling, and light-weight design components. On this unfastened pack, you’ll get 5 SVG Sections for Divi 5 that you’ll be able to use so as to add ornamental graphics, illustrated content material blocks, testimonial visuals, profile accents, score components, and extra for your web site. Those sections use SVG-based design main points to create crisp, scalable visuals that glance sharp throughout display sizes.
All SVG components are added via Divi’s Code Module, making them simple to investigate cross-check, alter, and restyle if you’re comfy enhancing SVG markup. One segment additionally makes use of an Symbol Module with a nested SVG component that defines a clipPath for the quote masks impact. Import a bit, replace the content material, alter the styling, and also you’re waiting to move.
What makes this freebie particularly precious is the mix of ready-to-use designs and good, versatile code. Those sections come with more than one colour choices, CSS customized homes for speedy customization, and blank construction, so you’ll be able to fit them for your logo whilst preserving the whole thing mild on any software.
Preview
Right here’s a snappy take a look at the 5 SVG Sections incorporated within the pack. The obtain is additional down the put up.
Obtain 5 SVG Sections For Divi 5
Get all 5 sections without spending a dime. Import them into your Divi Library and upload them to any web page within the Visible Builder.
@media most effective display 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 !vital; border-left-color: clear !vital; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !vital; border-left-color: clear !vital; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { colour: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:prior to { background: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !vital } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .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 sturdy { 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 sturdy, .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 !vital;}
Obtain For Loose
Sign up for the Divi E-newsletter and we can electronic mail you a duplicate of without equal Divi Touchdown Web page Structure Pack, plus lots of alternative superb and unfastened Divi sources, pointers and tips. Apply alongside and you’re going to be a Divi grasp very quickly. If you’re already subscribed merely kind to your electronic mail deal with under and click on obtain to get right of entry to the format pack.
You’ve effectively subscribed. Please test your electronic mail deal with to verify your subscription and get get right of entry to to unfastened weekly Divi format packs!
What’s Incorporated (6 Exports)
After you obtain and unzip the report, you’ll in finding 5 styled SVG segment exports, plus 1 report containing all layouts.
Styled – SVG Phase 1
This totally styled SVG segment options ornamental SVG paintings that can be utilized as a visible accessory, characteristic block, or design-forward content material segment. What makes this one distinctive is the cosmic scene inside of a tall, chic pill. It options palms gently achieving towards a sparkling solar, surrounded via flowing traces, stars, and a crescent moon. One model gives a wealthy, deep teal background with refined strokes for a night-sky really feel, whilst the others characteristic a daring orange define and a colourful blue-and-pink combo.
Constructed with blank paths and easy CSS variables for colour and stroke width, it’s tremendous simple to customise and waiting for animations.
Styled – SVG Phase 2
This totally styled SVG segment options an illustrated graphic that works neatly for promotional content material, product highlights, ecommerce messaging, or logo storytelling. The representation has a number of character, because of the dynamic movement traces, floating stars, and sense of amusing motion. It makes use of a colourful purple stroke with good colour fills managed via easy CSS, making it tremendous simple to compare your logo colours.
Styled – SVG Phase 3
This segment is an absolutely styled testimonial-style segment that makes use of a visible masks impact to border content material extra dynamically. It makes use of an Symbol module with a nested component to create a clip-mask impact the use of SVG code. It shapes the background photograph in a singular, natural, asymmetrical shape, gently curved on one facet for a contemporary, flowing glance. The mix of a clipped symbol and impressive textual content creates a standout framed impact that feels inventive, reasonably than a undeniable oblong field. It’s light-weight, totally responsive, and simple to customise.
Styled – SVG Phase 4
This format is best for testimonials, staff highlights, social evidence, buyer standing, or community-focused content material. It makes use of a collection of 3 daring, playful SVG shapes, every designed to border round profile pictures with character. To be had in colourful colours and impressive strokes, they upload full of life visible passion round headshots. The straightforward, scalable SVG paths cause them to light-weight, totally responsive, and simple to recolor or animate, serving to your staff or buyer profiles really feel amusing as an alternative of peculiar.
Styled – SVG Phase 5
This segment makes use of compact icon-style components for scores, critiques, characteristic highlights, or small supporting visuals. What makes this one distinctive is its daring, calendar-style icons that use blank, thick strokes and good CSS customized homes for number one and secondary colours, supplying you with more than one colour permutations proper out of the field. Due to vector-effect: non-scaling stroke within the code, the traces keep crisp and constant regardless of how small or massive you are making the icon. It’s light-weight, totally responsive, and tremendous simple to colorize.
Styled – SVG Sections (All) → Imports all 5 designs into your Divi Library directly.
How To Use The SVG Sections
Stay your obtain folder at hand. We’ll import the recordsdata, upload a bit to a web page, after which replace the content material and SVG styling as wanted.
1. Import Sections Into The Divi Library
Cross to Divi → Divi Library. Click on Import & Export on the height of the display.
Within the Import & Export Layouts modal, transfer to the Import tab, then click on Make a selection Report and make a choice your JSON report. Make a selection any SVG Phase JSON you’d like to make use of, then click on Import Divi Builder Layouts.
2. Upload An SVG Phase To Any Web page
Open a web page within the Visible Builder and upload a brand new Phase.
Click on Upload From Library and make a choice one in every of your SVG sections.
3. Replace The Content material
As soon as the segment is at the web page, change the placeholder content material. Replace the headings, frame textual content, captions, buttons, pictures, testimonials, names, scores, icons, and supporting replica so the segment aligns along with your web site.
As a result of those designs use SVG components as a part of the visible construction, it’s absolute best to replace the common content material first prior to enhancing the SVG markup. This is helping you notice how the segment reads along with your actual replica in position.
4. Edit The SVG Code In moderation
The entire SVG paintings in those sections is added via Code Modules. To customise the ones visuals, open the related Code module and investigate cross-check the SVG markup.
Commonplace SVG edits come with converting fill colours, stroke colours, stroke widths, opacity values, gradients, form colours, and different inline SVG attributes. Make small edits and preview the segment after every exchange to briefly catch any lacking tags or damaged markup.
For instance, to modify colours in Phase 1, search for the hex code values instantly after the hole genre tag.
Substitute the color-stroke and color-fill values with new hex values. Divi will replace the colours in actual time, letting you view adjustments as you’re employed.
If you’re enhancing the quote masks segment, be aware that the masks impact is treated another way. It makes use of an Symbol Module with a nested SVG component that defines the clip trail.
When customizing that segment, watch out no longer to take away the SVG component or exchange the clip trail ID (positioned in Complex tab > Attributes) except you additionally replace each and every position the place that ID is referenced.
To find the SVG in Phase 3, open the Symbol module, make bigger the Parts possibility crew, and click on the edit icon of the nested Code module.
5. Modify Types In Divi
Those SVG sections are already styled, so you’ll be able to use them straight away or refine them to raised fit your web site. Replace typography, colours, spacing, backgrounds, borders, shadows, sizing, and responsive settings the use of Divi’s Design tab.
To switch typography, open any Textual content or Heading module and cross to the Design tab. Enlarge the related textual content settings to regulate Font, Font Weight, Textual content Alignment, Textual content Colour, and extra.
To refine the encircling segment format, open the segment, row, column, crew, or module you need to regulate and use the Design tab to tweak Border, Field Shadow, Sizing, and Spacing.
Use Divi’s responsive enhancing gear to fine-tune spacing, stacking, symbol measurement, SVG scale, textual content alignment, and button placement on smaller monitors.
Guidelines For The use of SVG Sections Successfully
SVG sections paintings absolute best when the visuals give a boost to the message reasonably than distract from it. Use those fast tricks to stay your sections polished, versatile, and simple to customise.
Stay The SVG Supporting The Primary Message
Ornamental SVG components will have to information consideration towards the segment’s content material. Use headings, brief replica, and transparent calls to motion to make the design really feel intentional.
Use Constant Colours
SVGs can come with more than one fills, strokes, gradients, and opacity values. Stay your palette targeted so the segment fits your logo and stays simple to scan.
Edit SVG Code In Small Steps
When operating inside of a Code Module, make small adjustments and preview ceaselessly. A lacking bracket, a modified ID, or a lacking remaining tag can have an effect on how the SVG presentations.
Keep Mask, Clip Paths, And IDs
Some SVG results rely on inside IDs, mask, or clip paths. If you happen to edit the ones values, make sure that all similar references are up to date too. That is particularly vital for the Quote SVG masks segment.
Test The Structure On Cell
SVG visuals can scale fantastically, however spacing and stacking nonetheless subject. Overview every segment throughout pill and contact perspectives to make sure the SVG paintings, textual content, buttons, pictures, and supporting components stay balanced.
Get started Construction In Divi 5 Lately!
Those 5 SVG Sections provide you with a quick means so as to add crisp, scalable visuals to touchdown pages, provider pages, product pages, testimonial sections, promotional layouts, and extra. Import the layouts, replace the content material, customise the SVG styling the place wanted, and use Divi 5‘s Visible Builder to refine every segment to your web site.
The put up 5 SVG Sections For Divi 5 (Free Download!) seemed first on Elegant Themes Blog.
0 Comments