Un aspect reutilizabil pentru crearea de modele de cadre unice cu Divi

Construirea de modele de cadre unice pentru rândurile dvs. cu Divi poate fi o modalitate utilă (și distractivă) de a pune în scenă creativ conținutul paginii. Combinând divizoarele de secțiune Divi cu o structură compactă de rânduri, puteți explora nenumărate posibilități de proiectare pentru încadrarea conținutului. Este posibil să fi văzut deja această tehnică prezentată în tutoriale anterioare sau în unele dintre aspectele noastre premade. Dar, astăzi, m-am gândit că îți voi arăta o modalitate ușoară de a explora această tehnică de proiectare pentru tine. În acest tutorial, vă voi arăta cum să construiți rapid un aspect de secțiune reutilizabil care poate fi salvat în biblioteca dvs. Apoi, puteți utiliza acel aspect pentru a explora noi modele de cadre și scheme de culori. Aspectul funcționează încadrând rândul dvs. cu un design unic, astfel încât toate structurile de coloane și modulele pot fi utilizate în interiorul rândului.

Să începem.

Crearea aspectului de proiectare a cadrelor reutilizabile

Pentru a începe lucrurile, să creăm o nouă secțiune cu un aspect cu o coloană. Nu este nevoie să adăugăm module în acest moment. În schimb, vom proiecta rândul și secțiunea noastră mai întâi, astfel încât să ne putem umple rândul cu orice conținut dorim ulterior.

Proiectează rândul

Actualizați setările rândului după cum urmează:

Culoare fundal: # 333333
Alinierea rândurilor: centru
Lățime personalizată: 775 px
Lățimea jgheabului: 2
Căptușeală personalizată: 130 px sus, 130 px jos, 50 px stânga, 50 px dreapta
Marjă personalizată: 0 px sus, 0 px jos

Proiectați secțiunea

Actualizați setările secțiunii după cum urmează:

Culoare fundal: #ffffff
Stilul divizorului superior: vezi captura de ecran
Culoare divizor superior: #ffffff
Stilul divizorului inferior: vezi captura de ecran
Culoare divizor de fund: #ffffff

Apoi, veți seta căptușeala de sus și de jos la 0 px și veți crea spațiu de sus și de jos folosind un chenar după cum urmează:

Căptușeală personalizată: 0 px sus, 0 px jos
Lățimea marginii superioare: 5vw
Culoarea chenarului superior: #ffffff
Lățimea marginii inferioare: 5vw
Culoarea chenarului inferior: #ffffff

Crearea spațiului pentru secțiune folosind o margine de sus și de jos va maximiza spațiul disponibil pentru divizorul de secțiune care se va suprapune rândului. În acest fel puteți alege orice înălțime a separatorului pentru design.

Salvați aspectul în biblioteca dvs.

Asta este pentru structura de aspect de bază a designului rândului încadrat. În acest moment, dorim să salvăm această secțiune în biblioteca Divi pentru a utiliza aspectul secțiunii pentru proiectele viitoare.

Faceți clic pe pictograma Salvare în bibliotecă din meniul secțiunii.

Apoi introduceți un nume pentru aspect (ceva de genul „Aspect cadru rând”) și faceți clic pe butonul Salvare în bibliotecă.

Finalizarea proiectării cadrului # 1

Acum că avem aspectul secțiunii salvat pentru eforturi viitoare, să adăugăm un conținut la rândul nostru pentru a finaliza primul exemplu de proiectare.

Schimbarea structurii coloanei

Pentru acest design, cred că adăugarea unei galerii de imagini cu șase coloane va fi plăcută. Structura coloanei mici ne va permite să creăm un mic grup de imagini încadrate frumos în interiorul rândului îngust.

Pentru a face acest lucru, schimbați mai întâi structura rândului într-un aspect cu șase coloane.

Adăugarea de conținut la rând

Apoi adăugați trei module de imagine (cu imagini) în fiecare coloană. Folosesc imagini cu mai multă orientare portret (mai degrabă decât peisaj) cu dimensiuni / dimensiuni diferite.

Iată designul final.

Sfat de proiectare bonus

Înainte de a continua să explorăm mai multe posibilități de proiectare a cadrelor, am vrut să subliniez un truc ușor pentru extinderea cadrului dvs. pe o parte a paginii. Pentru a face acest lucru, accesați setările secțiunii și adăugați un gradient de fundal după cum urmează:

Culoarea din stânga a gradientului de fundal: # 333333
Culoare dreaptă a gradientului de fundal: #ffffff
Direcția gradientului: 90 grade
Poziția inițială: 50%
Poziție finală: 0%

Verificați acest design.

Personalizarea aspectului pentru diferite modele și conținut de cadre

Posibilitățile interesante ale acestui aspect simplu sunt, cel puțin, numeroase. Personalizând schema de culori, stilul divizorului, aspectul coloanelor și conținutul modulului, puteți crea tot felul de modele diferite de aspect. În plus, puteți utiliza acele funcții Divi interesante, cum ar fi „Găsiți și înlocuiți”, pentru a face schimbări pe scară largă a schemei de culori în câteva clicuri.

Iată procesul de bază pentru actualizarea aspectului:

1. Încărcați aspectul secțiunii salvate pe pagină
2. Actualizați schema de culori a secțiunii folosind „Găsiți și înlocuiți”.
3. Schimbați stilul divizorului
4. Personalizați rândul cu o nouă structură de fundal și coloane.
5. Adăugați module la coloanele dvs.

Cu acest proces, explorarea noilor modele ar trebui să fie destul de distractiv! Hai sa continuăm.

Design cadru # 2

Pentru următorul design, vom folosi aspectul secțiunii salvate pe care l-am creat mai devreme. Pentru a face acest lucru, faceți clic pentru a adăuga o nouă secțiune în generatorul vizual. Apoi selectați fila Adăugare din bibliotecă și faceți clic pe aspectul secțiunii din listă.

Acum suntem gata să personalizăm secțiunea pentru un nou design.

Pentru a schimba schema de culori utilizată pentru acest aspect, putem convoca unele puteri de proiectare Divi folosind funcția Găsiți și înlocuiți. Accesați setările secțiunii duplicate și faceți clic dreapta pe culoarea de fundal și selectați „Găsiți și înlocuiți”.

În modalitatea Căutare și înlocuire, actualizați următoarele:

În cadrul: Această secțiune
Înlocuiți cu: # 443850
Selectați Înlocuiește toate

Aceasta va înlocui culoarea albă utilizată pentru fundalul secțiunii, chenarul și separatoarele cu o culoare nouă.

Acum actualizați setările secțiunii cu un nou stil divizor:

Apoi actualizați setările rândului cu o culoare albă de fundal și o umbră de casetă pentru a finaliza noul design al cadrului pentru rând.

Pentru conținut, să încercăm un aspect cu cinci coloane, cu câteva blurbs. Continuați și actualizați aspectul coloanei pentru rândul dvs. într-un aspect cu cinci coloane.

Apoi adăugați un text în prima coloană. Scoateți textul conținutului implicit și lăsați doar textul titlului. Apoi înlocuiți imaginea blurb cu o pictogramă stea. Actualizați setările de proiectare după cum urmează:

Culoare pictogramă: # 7d8491
Pictogramă Dimensiune font: 80 px
Orientare text: centru

Duplicați modulul blurb și actualizați setările după cum urmează:

Culoare pictogramă: # 8cd845
Pictogramă Dimensiune font: 50 px

Acum copiați sau copiați și lipiți aceste două module într-un model în cele cinci coloane cu trei module în fiecare coloană.

Iată designul final.

Proiectare cadru # 3

Pentru al treilea design de cadru, trebuie mai întâi să încărcăm aspectul secțiunii salvate, așa cum am făcut anterior pentru al doilea design.

După aceea, putem folosi găsirea și înlocuirea pe culoarea de fundal a secțiunii (așa cum am făcut în designul anterior) pentru a înlocui culoarea albă utilizată pentru fundalul secțiunii, separatorul și chenarul cu o culoare albastră frumoasă. Pentru a face acest lucru, accesați setările secțiunii, faceți clic dreapta pe culoarea de fundal și selectați Găsiți și înlocuiți. Apoi actualizați următoarele:

În cadrul: Această secțiune
Înlocuiți cu: # 1e3888
Selectați Înlocuiește toate

Apoi actualizați divizorul de secțiune cu un nou stil divizor de sus și de jos (norii):

Apoi, accesați setările de rând. Acordați rândului un fundal degradat după cum urmează:

Culoare stânga gradient de fundal: implicit (# 2b87da)
Gradient de fundal Culoare dreaptă: # 1E3888 (aceeași culoare ca fundalul secțiunii)
Tipul de gradient: Radial (pentru a da rândului un aspect rotund „asemănător norului”)
Poziție finală: 83% (pentru a ascunde puțin marginile rândurilor)

Acum, tot ce trebuie să facem este să adăugăm conținut la rândul nostru încadrat. Să adăugăm un modul Apel la acțiune pe rând și să actualizăm setările după cum urmează:

Adăugați „#” în caseta de introducere a linkului pentru a afișa butonul
Folosiți culoarea de fundal: NU

Culoare text titlu: # ffc338
Culoarea textului butonului: # ffc338

Iată designul final.

Dar mobil?

În caz că vă întrebați. Iată cum vor arăta designurile pe dispozitivele mobile.

Gânduri finale

Modelele de cadre create în acest tutorial sunt menite să evidențieze posibilitățile de proiectare, mai degrabă decât să prezinte piese de design complet lustruite. Din acest motiv, m-am concentrat asupra proiectelor de cadre și am folosit exemple de bază de conținut. Sperăm că cel puțin vă vor inspira să explorați noi modele jucându-vă cu diferite divizoare de secțiuni, scheme de culori și conținut.

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

Noroc!