Divi 5 makes it simple to create polished full-width layouts with robust visible affect. On this unfastened pack, you’ll get 11 Gutterless Sections that are ideal for touchdown pages, hero spaces, portfolios, provider pages, product highlights, eating place web pages, company layouts, structure studios, and extra.
Every phase eliminates the gaps between columns and content material blocks to create daring, edge-to-edge compositions with blank alignment, putting imagery, and trendy construction. Import a piece, change the content material, replace the photographs, and also you’re in a position to move.
Preview
Right here’s a snappy take a look at the 11 Gutterless Sections integrated within the pack. The obtain is additional down the publish.
Obtain 11 Gutterless Sections For Divi 5
Get all 11 sections totally free. Import them into your Divi Library and upload them to any web page within the Visible Builder.
What’s Integrated (10 Exports)
After you obtain and unzip the record, you’ll in finding 11 styled Gutterless Phase exports, plus 1 record containing all layouts.
Styled – Gutterless Phase 1 to 11 (11) → 9 absolutely styled gutterless phase layouts with edge-to-edge columns, daring symbol placement, structured content material blocks, delicate typography, buttons, overlays, and blank spacing that you’ll be able to use as-is or customise.
Styled – Gutterless Sections (All) → Imports all 11 designs into your Divi Library without delay.
How To Use The Gutterless Sections
Stay your obtain folder to hand. We’ll import the recordsdata, upload a piece to a web page, after which change the content material.
1. Import Sections Into The Divi Library
Move to Divi → Divi Library. Click on Import & Export on the peak of the display.
Within the Import & Export Layouts modal, transfer to the Import tab, then click on Make a choice Record and choose your JSON record. Make a choice any Gutterless Phase JSON you’d like to make use of, then click on Import Divi Builder Layouts.
2. Upload A Gutterless 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 choose one among your Gutterless sections.
3. Change The Content material
As soon as the phase is at the web page, changing the placeholder content material handiest takes a couple of clicks. Get started by way of updating the heading, frame reproduction, buttons, hyperlinks, labels, provider names, function textual content, menu main points, portfolio reproduction, and supporting content material to make sure the phase aligns together with your logo and message. Then change for your personal photographs, movies, icons, featured content material, or supporting main points as wanted.
As a result of gutterless sections depend on tight alignment, robust symbol placement, and seamless column relationships, it’s easiest to switch content material one space at a time. This is helping keep the stability between textual content, imagery, buttons, overlays, and adverse house as you customise the design.
If you wish to enlarge or simplify a piece, reproduction or take away current rows, columns, teams, content material blocks, or modules, moderately than rebuilding the design from scratch. That’s one of the simplest ways to keep the unique construction, alignment, spacing, and visible rhythm of the structure.
4. Regulate Kinds (Not obligatory)
Those gutterless layouts are already styled, so you’ll be able to use them in an instant or refine them to raised fit your web page. Replace typography, colours, imagery, overlays, borders, shadows, spacing, backgrounds, buttons, and symbol remedies as wanted the use of the settings within the Content material and Design tabs.
To modify typography, open any Textual content or Heading module and pass to the Design tab. Make bigger the related textual content settings to regulate Font, Font Weight, Textual content Alignment, Textual content Colour, and extra.
To refine the structure styling, open the row, column, crew, or module you need to regulate and use the Content material and Design tabs to tweak Background, Border Width, Border Colour, Border Radius, Field Shadow, Sizing, and Spacing.
In case your phase makes use of full-bleed photographs, cut up content material blocks, overlapping media, darkish overlays, side-by-side playing cards, or editorial-style compositions, stay the ones relationships in thoughts as you edit so the structure stays intentional and balanced.
Use Divi’s responsive modifying gear to fine-tune spacing, stacking, symbol top, column order, textual content alignment, and button placement on smaller monitors so the structure remains polished throughout gadgets.
Pointers For Efficient Gutterless Sections
Gutterless sections paintings easiest when each content material block feels hooked up and intentional. Use those fast tricks to stay your sections blank, trendy, and simple to customise.
Use Robust Imagery
Gutterless layouts frequently depend on edge-to-edge photographs to create affect. Make a choice top of the range visuals with robust composition so the phase feels polished and useful.
Stay Content material Blocks Targeted
With columns sitting at once subsequent to each other, litter can turn out to be noticeable temporarily. Stay headings, reproduction, buttons, and supporting main points centered so each and every space stays simple to scan.
Create A Transparent Visible Hierarchy
Use typography, shade, distinction, symbol scale, and button placement to steer guests in the course of the phase. Crucial message or name to motion will have to be simple to identify.
Steadiness Edge-To-Edge Layouts With Respiring Room
Even with out gutters, your content material nonetheless wishes house to really feel relaxed. Use padding within textual content spaces, playing cards, overlays, and buttons so the structure feels intentional as a substitute of cramped.
Take a look at The Format On Cellular
Gutterless sections can exchange noticeably on pill and make contact with monitors as columns stack. Evaluate your structure on smaller gadgets to make sure photographs crop smartly, content material stays readable, spacing feels balanced, and calls to motion keep simple to faucet.
Get started Development In Divi 5 Nowadays!
Those 11 Gutterless Sections come up with a quick strategy to construct daring, full-width web page sections for touchdown pages, portfolios, eating place web pages, provider pages, product highlights, company layouts, structure studios, and extra. Change for your content material, customise the styling if wanted, and also you’ll have a certified phase in a position in mins with Divi 5’s Visible Builder.
The publish 11 Gutterless Layouts For Divi 5 (Unfastened Obtain!) gave the impression first on Chic Issues Weblog.
WordPress Web Design