Cum se folosește widgetul Image în Elementor

Trebuie să știți cum să utilizați widgetul Imagine în Elementor?

Cum se spune. „O imagine valorează cât o mie de cuvinte”. Uneori este mult mai ușor să transmiteți un mesaj printr-o imagine.

Se aplică și designului web. Este aproape imposibil să proiectați o pagină web fără a implica un element de imagine. Fiind un instrument care se concentrează pe design, Elementor vă permite să adăugați cu ușurință o imagine la design-ul dvs. furnizând widget-ul Imagine. Puteți pur și simplu să trageți widgetul Imagine în zona de editare pentru a adăuga un element de imagine.

Nu numai că puteți adăuga o imagine statică, dar puteți adăuga și o imagine dinamică în Elementor. Această caracteristică (capacitatea de a adăuga o imagine dinamică) este utilă în special pentru crearea unui șablon personalizat, cum ar fi o singură postare personalizată, o pagină de categorie personalizată, antet personalizat etc. - folosind generatorul de teme al Elementor.

Widgetul Image în sine este disponibil pe ambele versiuni ale Elementor, dar pentru a putea adăuga o imagine dinamică, trebuie să utilizați versiunea pro.

Cum să adăugați o imagine în Elementor

Înainte de a merge mai departe, presupunem că știți deja cum se folosește Elementor. 

Sub editorul Elementor, pur și simplu trageți widgetul Imagine din panoul din stânga în zona de editare, apoi faceți clic pe selectorul de imagini pentru a selecta imaginea pe care doriți să o utilizați.

Adăugarea unei imagini dinamice

Pentru a adăuga o imagine dinamică, puteți trece mouse-ul peste selectorul de imagini, faceți clic pe pictograma bazei de date și selectați tipul de imagine dinamică pe care doriți să o adăugați dintre opțiunile disponibile.

Puteți apoi să faceți clic pe pictograma cheie pentru a selecta alternativa. Soluția în sine este conținutul implicit care trebuie afișat atunci când conținutul dinamic nu este disponibil. În acest caz, Fallback este imaginea implicită de afișat atunci când Elementor nu poate găsi imaginea dinamică.

Personalizarea imaginii

Pentru a personaliza imaginea, puteți accesa fila Stil din panoul de setări (panoul din partea stângă). Înainte de a merge la fila Stil, puteți seta dimensiunea imaginii, alinierea imaginii și puteți adăuga link la imagine în bloc Imagine sub filă Conţinut. 

Citiți și: Cum să gestionați trimiterile de formulare în Elementor

Sub filă Stil, puteți seta raza chenarului, aplica filtre CSS, setați dimensiunea personalizată, opacitatea și aplicați umbra zonei.

• Setarea dimensiunii personalizate

În bloc Imagine sub filă Conţinut, puteți seta dimensiunea imaginii dvs. Dacă doriți să setați o dimensiune personalizată, puteți seta pur și simplu valoarea lățimii și valoarea înălțimii pe bloc Imagine sub fila Stil. Puteți utiliza unitatea de procentaj, pixeli sau lățimea ferestrei de vizualizare (VW).

• Setarea opacității imaginii

Pentru a seta nivelul de opacitate al imaginii, puteți pur și simplu să trageți glisorul de pe opțiunea Opacitate sub filă Stil. Puteți introduce nivelul de opacitate de la 0 la 1.

• Aplicarea filtrelor CSS

Dacă doriți, puteți aplica filtre CSS imaginii dvs. pentru a adăuga anumite efecte de imagine. Există 5 opțiuni de filtrare pe care le puteți aplica: estompare, luminozitate, contrast, saturație și nuanță. Doar faceți clic pe pictograma creion din opțiune Filtre CSS și setați valorile dorite ale filtrului CSS trăgând glisoarele.

• Definiţia border

Pentru a vă face imaginea mai convingătoare, puteți seta și chenarele. Pentru a adăuga chenar, mai întâi selectați tipul de chenar din opțiune Tipul de chenar. Puteți seta apoi lățimea chenarului, culoarea chenarului și raza chenarului.

Apropo, raza marginii este nivelul de înclinare a unghiurilor laterale ale imaginii (dreapta sus, stânga sus, dreapta jos, stânga jos). Cu cât valoarea razei marginii este mai mare, cu atât imaginea ta va fi mai rotunjită.

 

• Aplicarea unei umbre casete

Pentru a aplica o umbră de casetă, puteți pur și simplu să faceți clic pe pictograma creion din opțiune Umbra cutie. Selectați culoarea umbrei și setați valoarea pentru orientarea orizontală, orientarea verticală, nivelul de estompare și nivelul de răspândire.

Setări avansate

Pentru a efectua unele setări avansate asupra imaginii, trebuie să deschideți fila avansat în panoul de setări. Din acesta din urmă puteți defini elemente precum marginea și umplutura, animația de intrare, CSS personalizat etc...

• Setarea marginii și umplutura

Pentru a seta marginea și umplutura imaginii, trebuie să deschideți blocul Avansat.

• Aplicarea unei animații de intrare

Pentru a vă face imaginea mai convingătoare, puteți aplica o animație de intrare. Pentru a face acest lucru, puteți deschide blocul Efecte de mișcare. Din acest bloc puteți seta efectele de defilare, efectul mouse-ului și opțiunea sticky.

Pentru a aplica o animație de intrare, pur și simplu introduceți stilul de animație de intrare în opțiune Animatie de intrare.

• Adăugarea CSS personalizat

Dacă aveți cunoștințe CSS, puteți adăuga și CSS personalizat la widgetul Imagine. Pentru a adăuga CSS personalizat, puteți pur și simplu deschide blocul CSS personalizat și inserați codul dvs. CSS în câmpul disponibil.

• Ascundeți imaginea pe un anumit tip de dispozitiv

În Elementor, puteți utiliza o setare diferită pe un anumit widget pentru diferite tipuri de dispozitive. În plus, puteți seta un widget să fie dezactivat pe un anumit tip de dispozitiv.

De exemplu, puteți dezactiva widget-ul Imagine de pe tabletă. Pentru a face acest lucru, puteți deschide blocul Receptivă. Trageți butoanele pentru a ascunde widget-ul pe un anumit dispozitiv.

• Setarea poziției personalizate

Când adăugați o imagine în Elementor, poziția implicită este setată la static (în mod implicit). Există alte două opțiuni de poziție pe care le puteți seta: Fix et absolut.

- Fix: Dacă selectați această opțiune, imaginea va fi poziționată în raport cu portul de vizualizare al utilizatorului

- absolut : Dacă selectați această opțiune, imaginea va fi poziționată absolut la primul părinte poziționat.

Pentru a seta poziția personalizată, puteți deschide blocul poziționare sub filă Avansat. Selectați poziția personalizată pe care doriți să o setați din opțiune Poziţie și setați decalajul orientării orizontale și orientării verticale.

În scurt

Imaginea este un element important al unui design. Cu siguranță puteți proiecta o pagină fără imagine, dar designul dvs. va fi blând. Puteți utiliza widget-ul Imagine pentru a adăuga un element de imagine la designul dvs. Elementor, indiferent dacă este un șablon sau o temă pentru generatorul de pagini.

Elementor vă permite să adăugați atât o imagine statică, cât și o imagine dinamică (numai versiunea pro). Pe lângă widget-ul Imagine, există și widget-ul Casetă imagine pentru a adăuga un element de imagine cu conținut text. Acest ultim widget menționat este mai potrivit pentru o anumită nevoie, cum ar fi crearea unei secțiuni pentru membrii echipei, a unei secțiuni cu liste de caracteristici și a altor secțiuni care implică conținut de imagine și text.

Obțineți Elementor Pro acum!

2. Pan Zoom Image

Acest plugin vă permite să adăugați cu ușurință funcția de zoom pan pentru imaginile de pe dvs WordPress blog printr-un shortcode. De exemplu, îl puteți integra în articolul sau pagina dvs.

Ca funcționalități, veți avea printre altele: zoomul panoramic pe o singură imagine sau o galerie cu imagini nelimitate, poziția barei de control poate fi sus, dreapta, jos și stânga, partea inferioară a containerului poate fi întunecată, deschisă și nimic din toate acestea; previzualizarea live în tabloul de bord, exemplu de zoom panoramic multiplu pe aceeași pagină etc.

Descoperiți și noi 5 coduri scurte premium plugin-uri WordPress

Descarca | Demo | web hosting

3. Marketing Automation

Ce WordPress plug-in premium oferă o interfață de utilizator simplă și flexibilă, al cărei scop va fi vă ajută să creați cu ușurință un buletin informativ puternic pe site-ul dvs. web. Flexibilitatea acestuia vă va permite să gestionați o gamă largă de evenimente, condiții și acțiuni - astfel încât să vă puteți configura cu ușurință strategia de marketing prin e-mail pentru a o trimite, urmări și profita din aceasta.

Principalele sale funcționalități sunt: ​​posibilitatea de a aplica logica condițională bazată pe reacție și pe comportamentul vizitatorilor, urmărirea acțiunilor vizitatorilor site-ului web, perfectă pentru toate programele de loialitate, excelentă pentru strategiile de marketing care pariază pe recompense, un tablou de bord intuitiv, segmentarea vizitatorilor site-ului, posibilitatea de a face sondaje, notificări sms și prin e-mail, pop-up-uri bazate pe comportamentul vizitatorului, anunțuri banner bazate pe comportamentul vizitatorilor și multe altele.

Descarca | Demo | web hosting

• 10 WooCommerce plugin-uri pentru a crea o dinamică de stabilire a prețurilor
• Cum se moderează comentariile în WordPress
• 6 plugin-uri WordPress pentru a adăuga Authorize.Net pe site-ul dvs. web
• Unele WordPress plugin-uri pentru a se angaja vizitatori