Container Element în Elementor

Notă! Unele linkuri de pe această pagină pot fi linkuri afiliate, ceea ce înseamnă că, dacă alegeți să efectuați o achiziție, pot câștiga un mic comision fără costuri suplimentare pentru dvs. Apreciez foarte mult sprijinul dvs.!

Loading

Container Element în Elementor

Cu container element în Elementor puteți acum valorifica puterea flexbox CSS. Scopul principal din spatele flex este de a oferi posibilitatea de a modifica lățimea, înălțimea și ordinea fiecărui articol, pentru a umple cel mai bine spațiul disponibil al containerului. Această caracteristică va înlocui secțiunea, coloana și funcționalitatea secțiunii interioare curente a editorului Elementor.

Container Element
Container Element
Important!
Utilizați cu prudență. Vă rugăm să nu utilizați Developer Edition pe site-urile de producție. Versiunile Developer Edition, la fel ca versiunile beta, pot să nu fie stabile. Utilizați-l numai în medii de probă și faceți o copie de rezervă a întregului site înainte de a actualiza.

Compatibilitate Inversă

Dacă aveți un site web Elementor existent sau doriți să utilizați șabloane mai vechi din bibliotecă care utilizează secțiuni, nu vă faceți griji. Secțiunile, coloanele și secțiunile interioare preexistente vor continua să funcționeze ca întotdeauna și pot fi editate. În navigator veți vedea că containerele sunt marcate cu o pictogramă. Acest lucru vă permite să faceți tranziția către containere în propriul ritm.

Backwards-Compat
Backwards-Compat
Sfat:
Deși nu este posibil să creați o secțiune nouă (doar containere), puteți să duplicați o secțiune existentă sau să salvați în biblioteca de șabloane și să importați/editați după cum este necesar dacă designul dvs. necesită acest lucru.

De ce ar trebui folosit Container Element

Container Element oferă soluții mai optimizate pentru elementele imbricate. Puteți adăuga mai multe widget-uri în același container și le puteți alinia relativ fără a fi nevoie de coloane sau secțiuni interioare suplimentare, îmbunătățind astfel performanța paginii dvs.

Vezi exemplu:

Cum să adăugați Container Elements

Container Element este în prezent un experiment. Pentru a activa containerele, navigați la Tabloul de bord > Elementor > Setări > Experimente.

Adăugarea cu Opțiunea de Container Nou

  1. Din fereastra editorului principal, faceți clic pe semnul + pentru a crea un container nou.
  2. Selectați un aspect flexibil prestabilit care se potrivește cel mai bine designului dvs.
  3. Adăugați conținutul dvs. la noul aspect.
Sfat:
Containerele suplimentare pot fi adăugate utilizând widgetul Container sau duplicarea din navigator.

Adăugarea cu Widgetul Container

Adăugarea cu Widgetul Container
Adăugarea cu Widgetul Container
  1. Din panoul editor, trageți un widget Container pe pagina dvs. sau în orice container existent.
  2. Alegeți opțiunile Rând sau Coloană din direcție.
  3. Adăugați cu ușurință widgeturi Container suplimentare sau duplicați din panoul de navigare.

Editarea Proprietăților Containerului

Controale de Aspect

Controale de Aspect
Controale de Aspect

Container

  1. Lățime – Folosiți glisorul sau introduceți manual o valoare pentru a seta lățimea dorită a containerului în PX, % sau VW.
  2. Înălțime minimă – Folosiți glisorul sau introduceți manual o valoare pentru a seta lățimea dorită a containerului în PX sau VH.
  3. Direcție – Din selectorul drop-down alegeți Implicit, Rând, Coloană, Rând reversat sau Coloană inversată
  4. Aliniați elementele – Alegeți alinierea dvs. din pictogramele Flex Start, Center, Flex End sau Stretch.
  5. Justificare conținut – Alegeți justificarea din pictogramele Flex Start, Center, Flex End, Space Between, Space Around, Space uniform.
  6. Spațiere – Folosiți glisorul sau introduceți manual valori pentru a crește sau a micșora spațiul dintre elemente în proprietatea decalajului flexibil.
  7. Wrap – Din pictograme alegeți Fără Wrap, sau Wrap, aceasta va defini dacă articolele sunt forțate într-o singură linie (Fără Wrap) sau pot fi distribuite în mai multe linii (Wrap).
  8. Aliniați conținutul – (Dacă wrap este activat) Selectați preferința de aliniere din meniul drop-down între implicit, centru, început flexibil, capăt flexibil, spațiu între, spațiu în jurul sau spațiu uniform.

Controale Adiționale

  1. Overflow – Din selectorul drop-down, alegeți Implicit sau Ascuns.
  2. Etichetă HTML – Din meniul derulant, selectați eticheta HTML cea mai potrivită pentru containerul dvs. din opțiuni.

Faceți Clic pe un Container cu o Etichetă „A”.

Puteți face clic pe orice container selectând mai întâi opțiunea „a” din eticheta HTML de mai sus. O opțiune de link va apărea mai jos. Introduceți adresa URL sau utilizați opțiunile dinamice făcând clic pe pictograma stivă.

Container cu o Etichetă A
Container cu o Etichetă A

Stiluri de Containere

Containerul poate fi personalizat folosind Tabul Stil

Stiluri de Containere
Stiluri de Containere

Opțiuni de Stil

Următoarele pot fi setate atât pentru starea normală, cât și pentru starea hover.

Fundal

  1. Tip de fundal – Selectați tipul de fundal, culoarea, gradientul, imaginea sau prezentarea de diapozitive.
  2. Culoare (fond): Din selectorul de culori, selectați culoarea (culorile) pentru câmp.
  3. Imagine: Faceți clic pentru a selecta sau încărca o imagine sau imagini dacă tipul de prezentare de diapozitive este folosit în biblioteca media pentru a le utiliza ca imagine de fundal a containerului dvs.

Suprapunere de Fundal

  1. Tip de fundal – Selectați tipul de fundal, culoarea, gradientul, imaginea.
  2. Culoare (fond): Din selectorul de culori, selectați culoarea (culorile) pentru câmp.
  3. Imagine: Faceți clic pentru a selecta sau a încărca o imagine în biblioteca media pentru a o folosi ca imagine de fundal suprapusă a containerului dvs.
  4. Opacitate: Folosiți glisorul sau introduceți manual o valoare în câmp.

Chenar

  1. Tip de chenar: Din meniul drop-down, selectați între solid, dublu, punctat, punctat sau canelat.
  2. Lățime (chenar): Introduceți o valoare aleasă în câmpuri bazată pe px, em sau %.
  3. Culoare (chenar): Din selectorul de culori, alegeți culoarea de fundal pentru chenar.
  4. Raza chenarului: Introduceți o valoare aleasă în câmpuri bazată pe px, em sau %.
  5. Box Shadow: Faceți clic pe pictograma creion pentru a deschide opțiunile de proprietăți ale umbrei.

Shape Divider

  1. Alegeți să afișați în partea de sus sau de jos a containerului.
  2. Tip: Faceți clic pe meniul drop-down pentru a alege stilul Shape Divider.
  3. Culoare: Alegeți o culoare.
  4. Lățimea: Setați lățimea Shape Divider.
  5. Înălțime: Setați înălțimea Shape Divider.
  6. Întoarceți: Întoarceți direcția Shape Divider.
  7. Aduceți în față: Forțați-vă Shape Divider să fie în fața altor obiecte.
Shape Divider
Shape Divider

Tab-ul Comenzi Avansate

În fila Avansat puteți seta manual lățimea containerului și alte proprietăți. Aceste setări paralele vor suprascrie setările containerului părinte.

Tab-ul Comenzi Avansate
Tab-ul Comenzi Avansate

Aspect

Următoarele setări avansate pot fi aplicate containerului.

  1. Align Self – Selectați pictograma care se potrivește cel mai bine nevoilor dvs. Opțiunile sunt flex start, center, flex end și stretch.
  2. Comanda – Selectați din pictograme pentru a alege începutul, sfârșitul sau personalizat.

Adăugarea de Elemente la Container

Adăugarea de Elemente la Container
Adăugarea de Elemente la Container

Când adăugați widget-uri în containerele dvs., va folosi opțiunea Direcție. Alegeți între opțiunile Rând, Coloană sau Inversat, în funcție de nevoile și aspectul dvs. Utilizați opțiunea Gap pentru a adăuga spațiu între elemente. Utilizați proprietățile de aliniere și justificare pentru un control și mai mare asupra designului dvs.

Lățimea fiecărui widget poate fi setată în fila Avansat. În exemplul de mai sus, toate elementele ocupă acum un container utilizând opțiunea Wrap în loc să utilizeze coloane sau secțiuni interioare, reducând astfel cantitatea de separatoare și îmbunătățind performanța paginii dvs.

Widget Advanced Tab Flex Settings

Când containerele sunt activate, fiecare widget va avea opțiuni suplimentare de flexibilitate în fila Avansat care au fost optimizate.

Widget Advanced Tab Flex Settings
Widget Advanced Tab Flex Settings

Aspect

  1. Margin: Introduceți o valoare în câmp bazată pe PX, EM, % sau REM.
  2. Padding: Introduceți o valoare în câmp bazată pe PX, EM, % sau REM.
  3. Lățime: Utilizați glisorul sau introduceți manual o valoare pentru a seta lățimea widgetului pe baza PX, % sau VW.
  4. Align Self – Selectați pictograma care se potrivește cel mai bine nevoilor dvs. Opțiunile sunt flex start, center, flex end și stretch.
  5. Ordine – Selectați din pictograme pentru a alege începutul, sfârșitul sau personalizat.
  6. Poziție: Utilizați meniul drop-down pentru a selecta dintre implicit, absolut sau fix. Dacă sunt selectate fie Absolut, fie Fix, devin disponibile și următoarele opțiuni.
  • Orientare orizontală: Setează punctul de referință orizontal pentru poziționarea absolută, cu opțiuni de Start sau Sfârșit.
  • Offset: Modifică punctul de referință orizontal cu valoarea decalajului.
  • Orientare verticală: Setează punctul de referință vertical pentru poziționarea absolută, cu opțiuni între Start sau Sfârșit.
  • Offset: Modifică punctul de referință vertical cu valoarea decalajului
  1. Z-index: Setați Z-Index. Aflați mai multe despre Z-Index.
  2. ID CSS: Setați un ID CSS pentru secțiunea dvs.
  3. Clase CSS: Setați clase CSS pentru secțiunea dvs.
Notă! Ați găsit util acest articol? Atunci veți aprecia sprijinul oferit de Elementor în realizarea acestui tutorial. Experimentați construcția unui site cu Elementor astăzi și obțineți un site web modern, pre-securizat, pre-optimizat. Alegeți licența care vi se potrivește astăzi, treceți la versiunea Pro.

Documentație adițională

S-ar putea să te intereseze și:

Despre Admin Staff

Comunitatea WordPress este un Blog strict Educativ pentru utilizatorii de WordPress. Nu este Agenție de WEB, Publicitate sau Marketing! Dacă sunteți firmă și aveți nevoie de sfaturi vă ajut cu plăcere, pentru contracte de colaborare, vă rog contactați agenții specializate, care vă pot oferi documentația fiscală necesară. Sunt pasionat de WordPress și tot ce se leagă de mediul online din 2011, scriu din pasiune și-mi place să ajut, doar prin prisma acestui fapt că-mi place să fac bine oamenilor care au aceeași pasiune. Blog-ul este monetizat prin link-uri de afiliere și Google Adsense, unde se plătesc taxe legale de către platformele respective. Dacă dorești să susții acest blog, sunt deschis pentru donații. Vă mulțumesc pentru înțelegere! George CRIȘAN , Administrator Comunitatea WordPress!

Lasă un comentariu