Adăugarea de umbre transformate în copia dvs. cu Divi

Cu noile opțiuni de transformare Divi, puteți crea un design web frumos în timp ce vizualizați toate setările de transformare în timp real. Și prin combinarea diferitelor module între ele, puteți obține unele efecte unice și fără sudură care vă vor ajuta să ridicați aspectul secțiunii la care lucrați. În această postare specială, ne vom concentra pe crearea de umbre transformate pentru copia dvs. utilizând numai opțiunile încorporate ale Divi. Veți putea descărca gratuit fișierul JSON de exemplu.

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.

Desktop

Mobil

Descărcați aspectul secțiunii Transformed Shadows Hero GRATUIT

Pentru a pune mâna pe aspectul secțiunii eroului de umbre transformate gratuit, va trebui mai întâi să îl 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!

Abonați-vă la canalul nostru Youtube

Să începem să recreăm secțiunea erou

Adăugați o secțiune nouă

Spațiere

Primul lucru pe care trebuie să-l faceți este să adăugați o nouă secțiune obișnuită la o pagină nouă sau existentă. Deschideți setările secțiunii și eliminați toate umpluturile implicite de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Revărsare

Treceți la fila avansată și asigurați-vă că deversările secțiunii sunt ascunse. Mai târziu în această postare, vom folosi câteva opțiuni de transformare și ascunderea depășirii va asigura că nimic nu depășește containerul secțiunii.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou 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 aplicând următoarele setări:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Treceți la setările de spațiere, eliminați umplutura de jos implicită și adăugați un spațiu personalizat în partea stângă și dreapta a rândului.

• Căptușeală inferioară: 0 px
• Garnitura stânga: 4vw
• Garnitura dreapta: 4vw

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

Adauga continut

Este timpul să începeți adăugarea diferitelor module, începând cu un modul de text. Introduceți copia la alegere.

Setări text

Treceți la fila de proiectare și modificați setările de text în consecință:

• Font text: Playfair Display
• Alinierea textului: dreapta
• Culoarea textului: #ffffff
• Dimensiune text: 11vw
• Înălțimea liniei de text: 1em

• Lungime verticală a umbrelor textului: 0,02em
• Text Forța de estompare a umbrei: 0,16 em
• Culoare umbră text: rgba (0,0,0,0.44)

Clonați modulul de text nr. 1

Schimbați conținutul

După ce ați finalizat primul modul de text, îl puteți clona și schimba copia duplicatului.

Adăugați un modul de text nou deasupra modulului de text nr. 1

Adauga continut

Treceți la modulul următor, care este un alt modul de text. De data aceasta, plasăm modulul în partea de sus a coloanei. În pașii următori, vom transforma acest modul de text în umbra de text transformată a modulului care urmează. Asigurați-vă că utilizați aceeași copie.

Setări text

Treceți la fila de proiectare și modificați setările de text în consecință:

• Font text: Playfair Display
• Greutatea fontului textului: Bold
• Alinierea textului: dreapta
• Culoare text: rgba (94.150.187,0.28)
• Dimensiune text: 11vw
• Spațiere scrisoare text: 4,5 px
• Înălțimea liniei de text: 1em

Transformă Traducere

Este timpul să transformați modulul pentru a face să arate ca umbra de text transformată a următorului modul! Accesați setările de spațiere și modificați valorile de traducere a transformării.

• Dreapta: 13.9vw
• Jos: -2,1vw

Transformare Rotire

Rotiți și modulul.

• Centru: 291 grade

Transformă Skew

Și creșteți valoarea de înclinare de jos.

• Partea de jos: 30 grade

Clonați modulul de text transformat și plasați deasupra modulului de text nr. 2

Schimbați conținutul

După ce ați terminat de creat modulul de umbră de text transformat, îl puteți clona și plasa deasupra celui de-al treilea modul de text din coloană. Asigurați-vă că modificați copia.

Schimbați setările de text

Treceți la fila de proiectare și schimbați culoarea textului.

• Culoarea textului: # f3e4df

Adăugați spațiu

Pentru a compensa spațiul suplimentar creat de modulul de umbră de text transformat, vom adăuga o marjă superioară negativă.

• Marja superioară: -12vw

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

Adauga continut

Următorul modul de care avem nevoie în coloana 1 este un alt modul de text. Introduceți o descriere la alegere.

Setări text

Treceți la fila de proiectare și modificați setările de text în consecință:

• Font text: Deschideți Sans
• Alinierea textului: dreapta
• Înălțimea liniei textului: 2.3em

Dimensionare

Modificați lățimea modulului în diferite dimensiuni ale ecranului în setările de dimensionare.

• Lățime: 53% (desktop), 70% (tabletă), 90% (telefon)
• Alinierea modulului: dreapta

Adăugați modulul buton la coloana 1

Adăugați o copie

Treceți la următorul și ultimul modul din coloana 1, care este un modul buton. Introduceți o copie la alegere.

Aliniere

Treceți la fila de proiectare și schimbați alinierea butonului.

• Aliniere buton: dreapta

Setări buton

Modificați și setările butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 20 px
• Culoarea fundalului butonului: # 5e96bb
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 50 px
• Buton Font: Playfair Display

Spațiere

Și jucați-vă cu setările de spațiere pentru a completa stilul butonului.

• Marja superioară: 2vw
• Marja inferioară: 3vw
• Căptușeală superioară: 20 px
• Căptușeală inferioară: 20 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

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

Încărcați imaginea 1: 1

Trecem la a doua coloană! Aici vom avea nevoie de două module de imagine. Începeți cu primul modul de imagine și încărcați o imagine cu un raport 1: 1. Aceasta înseamnă că lățimea și înălțimea trebuie să aibă aceeași valoare a pixelilor. Asigurarea faptului că imaginea dvs. este un pătrat vă va ajuta să o transformați într-un cerc în pașii următori.

Dimensionare

Accesați setările de dimensionare ale modulului de imagine și activați opțiunea „Forțează lățimea completă”.

• Forțează lățimea completă: Da

Spațiere

De asemenea, adăugăm o marjă superioară.

• Marja superioară: 2vw

Frontieră

Pentru a transforma modulul de imagine într-un cerc, vom adăuga „50vw” la fiecare colț. Folosirea unei valori foarte mari ne ajută să păstrăm o formă circulară pe diferite dimensiuni de ecran.

Box Shadow

Nu în ultimul rând, vom adăuga o umbră de casetă la modulul de imagine, utilizând următoarele setări:

• Poziție orizontală a umbrei cutiei: -300px
• Box Shadow Vertical Position: -300px
• Culoare umbră: rgba (94.150.187,0.28)

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

Încărcați imaginea 1: 1

Trecem la al doilea modul de imagine din coloana 2. Ne asigurăm, din nou, că imaginea pe care o încărcăm are un raport 1: 1.

Dimensionare

Treceți la fila de proiectare și modificați lățimea.

• Lățime: 62%

Frontieră

Adăugați „50vw” la fiecare dintre colțurile acestui modul de imagine.

Box Shadow

Vom adăuga, de asemenea, o umbră de cutie personalizată.

• Poziție orizontală a umbrei cutiei: -200px
• Box Shadow Vertical Position: 150 px
• Culoare umbră: # d4c1bd

Transformă Traducere

Nu în ultimul rând, schimbați poziția modulului de imagine folosind opțiunea de transformare a transformării și ați terminat!

• Dreapta: -13vw
• Jos: 19vw

previzualizare

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

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să utilizați în mod creativ module de text duplicat pentru a crea umbre de text transformate. Acesta este un mod interesant de a pune copia dvs. în centrul atenției și de a utiliza opțiunile integrate Divi dintr-o altă perspectivă. Sperăm că v-a plăcut acest tutorial și dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.