Crearea unei structuri de proiectare diagonală cu opțiunile de transformare ale lui Divi (descărcare gratuită!)

Căutăm întotdeauna modalități de a extinde posibilitățile de design pe care le aveți cu Divi. Și de când a apărut actualizarea opțiunilor de transformare, au devenit posibile o mulțime de tehnici noi, fără a fi nevoie de cunoștințe de codificare personalizate.

În această postare, vă vom arăta cum să creați o structură de design diagonală uimitoare. Designul pe care îl vom recrea funcționează excelent pentru secțiunea erou și se potrivește cu orice tip de site web pe care doriți să îl configurați. La sfârșitul tutorialului, veți putea descărca gratuit fișierul JSON!

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Să începem să recreăm!

Adăugați o secțiune nouă

Fundal de gradient

Începeți prin a crea o pagină nouă sau a deschide una existentă și adăugați o secțiune obișnuită la ea. Deschideți setările secțiunii și adăugați un fundal degradat utilizând următoarele setări:

• Culoare 1: # ffd633
• Culoarea 2: #efefef
• Direcția gradientului: 217 grade
• Poziția inițială: 45%
• Poziție finală: 45%

Spațiere

Apoi, accesați fila de proiectare și adăugați câteva căptușeli personalizate de sus și de jos.

• Căptușeală superioară: 4vw
• Căptușeală inferioară: 12vw

Revărsare

Trebuie să ne asigurăm că opțiunile de transformare nu depășesc containerul secțiunii. Pentru a realiza acest lucru, vom adăuga o singură linie de cod CSS la elementul principal al secțiunii.

overflow: hidden;

Adăugați rândul # 1

Structura coloanei

Continuați adăugând primul rând folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și permiteți rândului să ocupe întreaga lățime a ecranului. În pasul următor al acestei postări, vom înlocui spațiul pe care tocmai l-am eliminat adăugând câteva valori personalizate de umplere la stânga și la dreapta folosind o unitate de vizualizare. Acest lucru se va asigura că designul rămâne receptiv la toate dimensiunile ecranului.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Continuați și adăugați câteva valori de umplere personalizate la setările de spațiere următoare.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Căptușeală stângă: 25vw (desktop), 16vw (tabletă), 7vw (telefon)
• Căptușeală dreaptă: 25vw (desktop și tabletă), 27vw (telefon)

Afişa

De asemenea, ne asigurăm că coloanele apar una lângă cealaltă pe dimensiuni de ecran mai mici, adăugând o singură linie de cod CSS la elementul principal al rândului.

display: flex;

Adăugați Blurb Module la coloana 1

Adauga titlu

E timpul să începeți să adăugați module! Adăugați un modul Blurb în coloana 1 și introduceți un titlu la alegere.

Încărcați ilustrația

Continuați încărcând o ilustrație la alegere. Cele pe care le vom folosi în acest tutorial fac parte din pachetul de aspect pentru dezvoltatori de aplicații. Puteți descărca ilustrațiile gratuit accesând postarea și descărcându-le la final.

fundal

Apoi, adăugați o culoare de fundal complet albă la modulul Blurb.

• Culoare fundal: #ffffff

Setări text titlu

Treceți la fila Design și modificați setările textului titlului în consecință:

• Titlu Font: Poppins
• Titlu Greutate font: Semi Bold
• Stilul fontului titlului: majuscule
• Alinierea textului titlului: centru
• Dimensiune text titlu: 0,5vw (desktop), 1,6vw (tabletă), 2,4vw (telefon)
• Spațierea literelor de titlu: 1 px
• Înălțimea liniei de titlu: 1.6em

Spațiere

Modificați apoi setările de spațiere.

• Căptușeală superioară: 1,3vw (desktop), 4vw (tabletă), 6vw (telefon)
• Căptușeală inferioară: 1,3vw (desktop), 4vw (tabletă), 6vw (telefon)
• Căptușire stângă: 1vw (desktop), 7vw (tabletă și telefon)
• Căptușeală dreaptă: 1vw (desktop), 7vw (tabletă și telefon)

Frontieră

Continuați adăugând „1vw” în colțurile din stânga sus și din dreapta sus ale modulului Blurb.

Box Shadow

Nu în ultimul rând, adăugați o umbră de cutie la modul folosind următoarele setări:

• Box Shadow Vertical Position: 10 px
• Puterea neclarității umbrei cutiei: 60 px
• Culoare umbră: rgba (39,39,52,0.37)

Clonați modulul Blurb de două ori și plasați duplicatele în coloanele rămase

După ce ați personalizat modulul Blurb, puteți continua și clona de două ori. Plasați duplicatele în cele două coloane rămase ale rândului.

Schimbați duplicatul # 1

Schimbați copierea și ilustrația

Schimbați copia și ilustrația primului duplicat.

Schimbați spațiul

Împreună cu setările de spațiere.

• Marja superioară: -3vw
• Căptușeală superioară: 2,7 vw (desktop), 8 vw (tabletă), 11 vw (telefon)
• Căptușeală inferioară: 2,7vw (desktop), 8vw (tabletă), 11vw (telefon)

Schimbați duplicatul # 2

Schimbați copierea și ilustrația

Modificați și copia și ilustrația celui de-al doilea duplicat.

Adăugați rândul # 2

Structura coloanei

Trecem la rândul următor! Utilizați următoarea structură de coloane:

Fundal de gradient

Fără a adăuga încă module, deschideți setările rândului și adăugați un fundal de gradient la acesta.

• Culoare 1: # fff20a
• Culoare 2: # ffb200
• Direcția gradientului: 165 grade

Dimensionare

Apoi, accesați fila de proiectare și activați opțiunea „Faceți acest rând lățime completă”.

• Faceți acest rând lățime completă: Da

Box Shadow

Nu în ultimul rând, adăugați o umbră de casetă la rând.

• Box Shadow Vertical Position: 0px
• Puterea neclarității umbrei cutiei: 100 px
• Culoare umbră: rgba (0,0,0,0.39)

Adăugați un modul divizor

Vizibilitate

Folosim acest rând numai în scopuri de proiectare, nu pentru a prezenta niciun modul. Dar, pentru a ne asigura că știm exact cum arată rândul, va trebui să adăugăm un modul divizor. Nu vrem să apară modulul, deci asigurați-vă că opțiunea „Afișează divizorul” este dezactivată.

• Show Divider: Nu

Aplicați Opțiuni de transformare la rânduri

Rândul # 1

Transformă Traducere

Acum că am finalizat primele două rânduri, le vom transforma pentru a se încadra în structura de proiectare diagonală pe care ne propunem să o creăm. Începeți prin a deschide setările primului rând și modificați valorile de traducere a transformării.

• Partea de jos: 30vw
• Dreapta: 6vw

Transformare Rotire

Apoi, modificați valoarea de rotire a transformării din stânga.

• Stânga: 37 grade

Rândul # 2

Scară de transformare

Continuați deschizând setarea celui de-al doilea rând și modificați valorile scalei de transformare.

• Partea de jos: 133% (desktop), 171% (tabletă), 176% (telefon)
• Dreapta: 133% (desktop), 171% (tabletă), 176% (telefon)

Transformă Traducere

Împreună cu transformarea valorilor traduse.

• Partea de jos: 12vw (desktop), 1vw (tabletă), 3vw (telefon)
• Dreapta: -2vw (Desktop), -6vw (Tabletă), -4vw (Telefon)

Transformare Rotire

Și rotiți rândul și în setările de rotire a transformării.

• Stânga: 37 grade

Adăugați rândul # 3

Structura coloanei

Trecem la următorul și ultimul rând! Puteți utiliza acest rând și coloanele sale pentru a partaja orice tip de informații doriți. Pentru a recrea designul exact pe care l-ați văzut în previzualizarea acestei postări, selectați următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și permiteți rândului să ocupe întreaga lățime a ecranului.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Adăugați modulul de text nr. 1 în coloana 1

Adăugați conținut H1

E timpul să începeți să adăugați module! Vom începe cu un titlu Modul text. Introduceți un conținut H1 la alegere.

Setări text H1

Apoi, accesați fila de proiectare și modificați setările de text H1.

• Font de titlu: Poppins
• Dimensiune text antet: 3vw (desktop), 5vw (tabletă), 6vw (telefon)
• Distanța între litere de antet: -2 px

Spațiere

Adăugați câteva valori de spațiere personalizate în continuare.

• Marja superioară: -6vw (desktop și tabletă), 11vw (telefon)
• Marja stângă: 10vw

Adăugați modulul de text nr. 2 în coloana 1

Adauga continut

Al doilea modul de care avem nevoie este un alt modul de text. Adăugați un conținut la alegere.

Setări text

Apoi, accesați fila de proiectare și modificați setările de text.

• Font text: Deschideți Sans
• Dimensiune text: 0,8vw (desktop), 1,5vw (tabletă), 2,2vw (telefon)
• Înălțimea liniei de text: 2.6em

Spațiere

Modificați și valorile spațierii.

• Marja superioară: 3vw (telefon), 5vw (telefon)
• Marja stângă: 10vw
• Marja dreaptă: 28vw (tabletă), 20vw (telefon)

Adăugați modulul buton la coloana 1

Adăugați o copie

Următorul și ultimul modul de care avem nevoie este un modul buton. Adăugați o copie la alegere.

Setări buton

Apoi, accesați fila de proiectare și modificați setările butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 0.9vw (desktop), 2.5vw (tabletă), 3.5vw (telefon)
• Culoarea textului butonului: # 000000
• Lățimea chenarului butonului: 1 px
• Culoare margine buton: # 000000
• Raza chenarului butonului: 1 px
• Buton Font: Poppins
• Greutatea fontului: ușoară

Spațiere

Nu în ultimul rând, modelează-ți modulul folosind câteva valori de spațiere personalizate și ai terminat!

• Marja superioară: 2vw (desktop), 5vw (tabletă și telefon)
• Marja stângă: 10vw
• Căptușeală superioară: 1vw
• Căptușeală inferioară: 1vw
• Garnitura stânga: 3vw
• Garnitura dreapta: 3vw

Descărcați secțiunea de proiectare diagonală GRATUIT

Pentru a pune mâna pe secțiunea de proiectare diagonală gratuită, va trebui mai întâi să o descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Gânduri finale

În această postare, v-am arătat cum să creați o structură de design diagonală uimitoare folosind doar opțiunile încorporate ale Divi. Sperăm că acest tutorial vă va ajuta să vă familiarizați cu noile opțiuni de transformare Divi. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!