Divi 5 makes it simple to create structured layouts with robust visible rhythm. On this loose pack, you’ll get 5 Tetris Designs that are ideal for touchdown pages, carrier sections, function highlights, portfolio sections, product pages, company web sites, content material blocks, call-to-action spaces, and extra.
Each and 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, change 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 integrated within the pack. The obtain is additional down the submit.
Obtain 5 Tetris Designs For Divi 5
Get all 5 designs at no 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 totally styled modular phase 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 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 height of the display.
Within the Import & Export Layouts modal, transfer to the Import tab, then click on Make a choice Record and make a selection your JSON document. Make a choice 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 make a selection certainly one of your Tetris Format sections.
3. Change The Content material
As soon as the phase is at the web page, changing the placeholder content material best takes a couple of clicks. Get started by way of updating the heading, frame replica, buttons, labels, stats, function textual content, carrier main points, captions, hyperlinks, and calls to motion so the phase suits your logo and message. Then switch for 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 easiest to switch content material one block at a time. This is helping keep the stability between textual content, imagery, playing cards, buttons, and destructive area as you customise the design.
If you wish to extend or simplify a piece, reproduction or take away present rows, columns, teams, playing cards, content material blocks, or modules fairly 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. Alter Types (Not obligatory)
Those Tetris Designs are already styled, so you’ll use them immediately or refine them to raised fit your web site. Replace typography, colours, backgrounds, borders, shadows, spacing, pictures, buttons, card remedies, and format sizing as wanted the use of the settings within the Design tab.
To switch typography, open any Textual content or Heading module and move 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 Peak, and extra.
To refine the modular styling, open the row, column, workforce, card, 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 offset playing cards, stacked blocks, overlapping content material, symbol tiles, stat 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 easiest when each block feels deliberately positioned. Use those fast tricks to stay your sections dynamic, arranged, and simple to customise.
Give Each and every Block A Transparent Goal
Each card, symbol, stat, button, and textual content house must reinforce the phase’s major message. Steer clear of filling the format with too many competing parts, and let every block do one transparent task.
Use Distinction To Information The Eye
Tetris layouts incessantly come with a number of content material blocks in a single phase. Use distinction, colour, scale, and spacing to steer guests in the course of the format and spotlight crucial 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.
Steadiness Asymmetry With Construction
The enchantment of a Tetris format comes from its modular, uneven really feel. Steadiness that motion with blank alignment, repeated shapes, constant spacing, and transparent visible hierarchy.
Take a look at The Format On Cell
Tetris layouts can trade noticeably on pill and contact displays as blocks stack. Overview your format on smaller gadgets to ensure content material order nonetheless is sensible, pictures crop neatly, spacing feels balanced, and calls to motion stay simple to faucet.
Get started Construction In Divi 5 As of late!
Those 5 Tetris Designs for Divi 5 provide you with a quick technique to construct dynamic, modular sections for touchdown pages, carrier sections, function highlights, product pages, portfolio layouts, company web sites, call-to-action spaces, and extra. Change for your content material, customise the styling if wanted, and also you’ll have a cultured phase in a position in mins with Divi 5’s Visible Builder.
The submit 5 Tetris Designs For Divi 5 (Free Download!) gave the impression first on Elegant Themes Blog.
0 Comments