Divi 5 makes it simple to create structured layouts with sturdy visible rhythm. On this loose pack, you’ll get 5 Tetris Designs that are ideal for touchdown pages, provider sections, function highlights, portfolio sections, product pages, company internet sites, content material blocks, call-to-action spaces, and extra.
Every design makes use of modular blocks, offset playing cards, daring spacing, layered content material spaces, typography, imagery, buttons, and blank grid relationships to create polished sections with a dynamic, puzzle-like format genre. Import a piece, exchange the content material, replace the visuals, and also you’re in a position to move.
Preview
Right here’s a snappy take a look at the 5 Tetris Designs incorporated within the pack. The obtain is additional down the put up.
Obtain 5 Tetris Designs For Divi 5
Get all 5 designs without cost. Import them into your Divi Library and upload them to any web page within the Visible Builder.
What’s Integrated (6 Exports)
After you obtain and unzip the document, you’ll to find 5 styled Tetris Format Segment exports, plus 1 document containing all layouts.
Styled – Tetris Format Segment 1 to five (5) → 5 absolutely styled modular segment layouts with offset content material blocks, layered playing cards, daring visible construction, subtle typography, buttons, pictures, and blank spacing that you’ll use as-is or customise.
Styled – Tetris Format Sections (All) → Imports all 5 designs into your Divi Library without delay.
How To Use The Tetris Designs
Stay your obtain folder at hand. We’ll import the information, upload a piece to a web page, after which exchange the content material.
1. Import Sections Into The Divi Library
Cross to Divi → Divi Library. Click on Import & Export on the height of the display screen.
Within the Import & Export Layouts modal, transfer to the Import tab, then click on Select Record and choose your JSON document. Select any Tetris Format Segment JSON you’d like to make use of, then click on Import Divi Builder Layouts.
2. Upload A Tetris Segment To Any Web page
Open a web page within the Visible Builder and upload a brand new Segment.
Click on Upload From Library and choose considered one of your Tetris Format sections.
3. Switch The Content material
As soon as the segment is at the web page, changing the placeholder content material simplest takes a couple of clicks. Get started by way of updating the heading, frame reproduction, buttons, labels, stats, function textual content, provider main points, captions, hyperlinks, and calls to motion so the segment fits your logo and message. Then change on your personal pictures, icons, screenshots, product visuals, or supporting content material as wanted.
As a result of Tetris-style layouts depend on modular blocks, offset positioning, and robust spacing relationships, it’s best possible to exchange content material one block at a time. This is helping keep the stability between textual content, imagery, playing cards, buttons, and unfavorable area as you customise the design.
If you wish to enlarge or simplify a piece, replica or take away present rows, columns, teams, playing cards, content material blocks, or modules relatively than rebuilding the design from scratch. That’s one of the simplest ways to keep the unique construction, spacing, alignment, and visible rhythm of the format.
4. Modify Kinds (Not obligatory)
Those Tetris Designs are already styled, so you’ll use them instantly or refine them to higher fit your web site. Replace typography, colours, backgrounds, borders, shadows, spacing, pictures, buttons, card therapies, and format sizing as wanted the usage of the settings within the Design tab.
To switch 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, Textual content Measurement, Letter Spacing, Line Top, and extra.
To refine the modular styling, open the row, column, workforce, card, or module you wish to have 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 segment makes use of offset playing cards, stacked blocks, overlapping content material, symbol tiles, stat packing containers, button teams, or uneven spacing, stay the ones relationships in thoughts as you edit so the format stays intentional and balanced.
Use Divi’s responsive enhancing equipment to fine-tune spacing, stacking, block order, symbol measurement, card width, textual content alignment, and button placement on smaller displays so the format remains polished throughout gadgets.
Guidelines For Efficient Tetris Layouts
Tetris-style layouts paintings best possible when each and every block feels deliberately positioned. Use those fast tricks to stay your sections dynamic, arranged, and simple to customise.
Give Every Block A Transparent Function
Each and every card, symbol, stat, button, and textual content house must improve the segment’s major message. Keep away from filling the format with too many competing parts, and let each and every block do one transparent activity.
Use Distinction To Information The Eye
Tetris layouts incessantly come with a number of content material blocks in a single segment. Use distinction, colour, scale, and spacing to steer guests throughout the format and spotlight a very powerful content material first.
Stay Spacing Constant
Even if the format feels playful or offset, spacing must nonetheless really feel intentional. Stay the gaps between blocks, playing cards, pictures, buttons, and textual content spaces constant so the design feels polished as an alternative of random.
Stability Asymmetry With Construction
The enchantment of a Tetris format comes from its modular, uneven really feel. Stability that motion with blank alignment, repeated shapes, constant spacing, and transparent visible hierarchy.
Test The Format On Cellular
Tetris layouts can exchange noticeably on pill and speak to displays as blocks stack. Assessment your format on smaller gadgets to verify content material order nonetheless is sensible, pictures crop smartly, spacing feels balanced, and calls to motion stay simple to faucet.
Get started Development In Divi 5 Lately!
Those 5 Tetris Designs for Divi 5 come up with a quick approach to construct dynamic, modular sections for touchdown pages, provider sections, function highlights, product pages, portfolio layouts, company internet sites, call-to-action spaces, and extra. Switch on your content material, customise the styling if wanted, and also you’ll have a sophisticated segment in a position in mins with Divi 5’s Visible Builder.
The put up 5 Tetris Designs For Divi 5 (Loose Obtain!) gave the impression first on Chic Subject matters Weblog.
WordPress Web Design