Cum să creați cutii de conținut stilate în Divi pentru sfaturi, informații, avertismente și multe altele (descărcare GRATUITĂ)

Căsuțele de conținut stilizate pentru lucruri precum sfaturi, avertismente și alte informații importante sunt materiale utile pentru orice site sau blog. Acestea sunt o modalitate eficientă și convenabilă de a prezenta conținut important cu un design consecvent pe care utilizatorii îl vor aprecia. De exemplu, este posibil să aveți nevoie de un design de casetă de conținut pentru a evidenția un sfat cheie într-un tutorial sau pentru a avertiza utilizatorii despre o posibilă problemă.

În acest tutorial, vă vom arăta cum să construiți 3 modele de cutii de conținut în Divi. Aceste modele de cutii de conținut pot fi modificate cu ușurință cu noi pictograme, scheme de culori și / sau conținut pentru a se potrivi oricărei nevoi. Odată ce vă vom arăta cum să proiectați casetele, vă vom arăta cum puteți utiliza presetările globale ale Divi pentru a facilita implementarea unei noi casete de conținut predefinite cu doar câteva clicuri. Nu este nevoie de niciun plugin!

Să începem!

Trage cu ochiul

Astăzi, vom construi aceste 3 modele principale de cutii de conținut în Divi.

Cu aceste 3 modele principale de casete de conținut, veți putea face personalizări ușoare (cum ar fi pictograma, culoarea și textul) pentru a crea modele nesfârșite de casete de conținut pentru orice ocazie.

Iată 36 de exemple pe care le includem în descărcarea GRATUITĂ de mai jos.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe toate cele 36 de modele de casete de conținut, va trebui mai întâi să descărcați aspectul 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!

Pentru a importa aspectul secțiunii în biblioteca Divi, navigați la biblioteca Divi.

Faceți clic pe butonul Import.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, aspectul secțiunii va fi disponibil în Divi Builder.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Crearea proiectelor de casete de conținut în Divi

Înainte de a începe să proiectăm casetele noastre de conținut, să adăugăm un nou rând cu o coloană la secțiunea implicită din Divi Builder.

Design casetă de conținut # 1

Pentru a crea prima casetă de conținut, adăugați un modul blurb în coloană.

Sub fila conținut, actualizați următoarele:

• Utilizați pictograma: DA
• Pictogramă: vezi captura de ecran
• Culoare fundal: #ffffff
• Culoarea din stânga a gradientului de fundal: # 00529b
• Culoare dreaptă a gradientului de fundal: # bde5f8
• Direcția gradientului: 90 grade
• Poziția de start: 3em
• Poziție finală: 0%

Sub fila Design, actualizați stilul pictogramei după cum urmează:

• Culoare pictogramă: #ffffff
• Aliniere imagine / pictogramă: stânga
• Utilizați dimensiunea fontului pictogramei: DA
• Pictogramă Dimensiune font: 2em

Apoi, actualizați stilurile de text după cum urmează:

• Culoarea textului titlului: # 00529b
• Dimensiune text titlu: 1,5em
• Înălțimea liniei de titlu: 2em
• Culoarea textului corpului: # bde5f8
• Dimensiunea textului corpului: 1em
• Înălțimea liniei corpului: 2em

Odată ce stilurile de text sunt la locul lor, actualizați dimensiunea și căptușeala după cum urmează:

• Lățimea conținutului: 100%
• Lățime maximă: 700 px
• Alinierea modulului: centru
• Garnitura: 2em sus, 2em jos, 5em stânga, 2em dreapta

Apoi adăugați o umbră de casetă subtilă la blurb, după cum urmează:

• Box Shadow: vezi captura de ecran
• Box Shadow Vertical Position: 0px
• Puterea neclarității umbrei cutiei: 88 px
• Puterea răspândirii umbrei cutiei: -10px
• Culoare umbră: rgba (0,0,0,0,17)

Sub fila avansată, vom da pictogramei blurb un stil personalizat, astfel încât să aibă o formă de cerc cu culori de fundal și margini care să se potrivească cu culoarea de gradient de fundal din stânga folosită anterior. De asemenea, vom poziționa pictograma cu o poziție absolută, astfel încât să o putem așeza exact unde dorim, fără a ocupa spațiu real în document.

Pentru a adăuga stilul personalizat, lipiți următorul cod CSS în caseta Blurb Image CSS:

position:absolute;
margin-bottom: 0px;
border: 0.5em solid #00529b !important;
border-radius:50%;
background: #00529b;
transform: translateX(-3.75em);

NOTĂ: La schimbarea schemei de culori a casetei de conținut (sau a modulului de blurb), va trebui, de asemenea, să actualizăm culorile care sunt utilizate în Blurb Image CSS pentru marginea și fundalul pictogramei.

Să verificăm rezultatul final.

Design casetă de conținut # 2

Pentru a crea al doilea design al casetei de conținut, duplicați modulul anterior de blurb pentru a porni proiectul, astfel încât să putem face câteva modificări.

Pentru acest design, vom centra vertical pictograma din partea stângă a blurbului folosind proprietatea grilă CSS.

Sub fila de proiectare, înlocuiți Blurb Image CSS cu următoarele:

margin-bottom: 0px;

Apoi adăugați următorul CSS în caseta Blurb Content CSS:

display: grid;
align-items: center;
justify-content: center;
grid-template-columns: 5em auto;
grid-gap: 2em;

Lățimea coloanei din stânga din grilă (cea care deține pictograma) este setată la 5em , iar coloana din dreapta care conține titlul și textul corpului este setată la automat . Trebuie să potrivim lățimea culorii gradientului stâng cu coloana grilajului cu lățimea de 5em care ține pictograma. Pentru aceasta, actualizați următoarele:

• Poziția de start: 5em

Sub fila Design, actualizați alinierea și dimensiunea pictogramei:

• Aliniere imagine / pictogramă: centru
• Pictogramă Dimensiune font: 3em

Acum nu mai avem nevoie de căptușeala stângă, așa că scoateți-o.

Acum, totul ar trebui să fie aliniat frumos. Verificați rezultatul final.

Design casetă de conținut # 3

Pentru a crea cel de-al treilea design al casetei de conținut, copiați al doilea modul de blurb (caseta de conținut) pe care tocmai l-am terminat.

Odată ce a doua blurb este duplicat, deschideți setările duplicat blurb.

Sub fila Proiectare, schimbați culoarea pictogramei:

• Culoare pictogramă: rgba (255,255,255,0,3)

Apoi, vom adăuga textul etichetei verticale peste pictogramă adăugând CSS personalizat la pseudo-elementul anterior (ceea ce vă permite practic să atașați un design și / sau conținut suplimentar înainte de elementul modulului blurb).

Pentru a adăuga eticheta, lipiți următorul CSS în caseta Înainte de CSS:

content: 'key tip';
bottom:50%;
font-size: 1em;
line-height: 1em;
letter-spacing: 0.4em;
position:absolute;
transform: rotatez(-90deg) translateX(-50%) translateY(3em) !important;
transform-origin: bottom left;
color: #fff;
font-family: inherit;
font-weight: bold;
text-transform: uppercase;
z-index:1;

De asemenea, vom roti pictograma pentru a se potrivi cu textul vertical rotit. Pentru a face acest lucru, adăugați următorul CSS în caseta Blurb Image CSS:

margin-bottom: 0px;
transform: rotateZ(-90deg);

Iată rezultatul final.

Actualizarea designului

Actualizați dimensiunea elementelor casetei de conținut modificând dimensiunea textului corpului

Fiecare dintre casetele de conținut este construit folosind cea mai mare parte unitatea de lungime em (em este relativ la dimensiunea fontului corpului rădăcină elementului). Din acest motiv, casetele de conținut se vor dimensiona perfect atunci când reglați dimensiunea textului corpului în setările de design încorporate ale Divi.

Actualizați culorile CSS personalizate

Pentru designul casetei de conținut # 1, am adăugat un fundal personalizat și o culoare de margine la pictogramă cu CSS personalizat. Asigurați-vă că actualizați culorile utilizate pentru bordură și proprietatea de fundal pentru a se potrivi cu schema de culori a propriului design.

Actualizarea textului etichetei

Pentru caseta de conținut de design # 3, am adăugat o etichetă cu CSS personalizat pe pseudo înainte de a elementului. Pentru a actualiza textul, pur și simplu schimbați valoarea proprietății de conținut din caseta Înainte de CSS.

Reutilizarea casetelor de conținut în Divi

Salvați modulul în biblioteca Divi

Există două modalități principale de a face modulele reutilizabile în Divi. Prima modalitate este salvarea modulului (sau a oricărui element) în Biblioteca Divi.

Odată ce elementul este salvat în bibliotecă, îl puteți găsi în biblioteca Divi când adăugați un element nou la o pagină.

Utilizați presetările globale

A doua modalitate principală de a face un modul reutilizabil în Divi este de a crea o presetare globală pentru acel modul. Odată ce salvați designul unui modul ca preset global, puteți adăuga cu ușurință presetarea globală la orice altă instanță a aceluiași modul.

În acest caz, putem deschide setările pentru fiecare dintre casetele noastre de conținut (sau module blurb) și putem crea o nouă presetare globală pentru fiecare. Pentru aceasta, deschideți setările Blurb Module și faceți clic pe opțiunea presetată din partea de sus. Apoi transformați setările modulului într-o nouă presetare din stilurile personalizate.

Denumiți noua presetare orice doriți și salvați-o.

Repetați acești pași pentru fiecare presetare a modulului blurb pe care doriți să îl creați.

Pentru a crea mai multe casete de conținut în viitor, pur și simplu adăugați un nou modul blurb și selectați pictograma pe care doriți să o utilizați. Apoi activați oricare dintre presetările încărcate făcând clic pe meniul derulant presetat din partea de sus și selectând o presetare la alegere.

Rezultate finale

Iată o ultimă privire asupra celor 3 modele principale de cutii de conținut pe care le-am construit.

Iată 36 de modele pe care le veți putea face cu câteva personalizări ușoare pe care le includem în descărcarea GRATUITĂ de mai sus.

Gânduri finale

Cutiile de conținut stilizate pe care le-am creat pot fi un atu de proiectare util pentru orice site sau blog. Puteți profita de opțiunile de design puternice din Divi pentru a modifica casetele de conținut pentru a se potrivi oricărui design. În plus, cu posibilitatea de a le salva și încărca în biblioteca Divi și / sau de a crea presetări globale, veți putea implementa aceste casete de conținut ori de câte ori doriți, cu doar câteva clicuri. Sperăm că acestea vor fi utile.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!