Doriți să aflați cum să măriți un card de profil cu pluginul de generare de pagini Elementor ?
În acest nou tutorial Elementor, vă vom arăta cum să aplicați un efect Zoom pe un card de profil, dezvăluind în același timp numele profilului, precum și pictogramele rețelei sociale ale acestuia.
Dacă nu aveți idee despre ce vrem să vorbim astăzi, vă invităm să vizionați următorul videoclip:
Apoi să revenim la motivul pentru care suntem aici.
Pentru a finaliza acest tutorial, veți avea nevoie versiunea Pro a Elementor, deoarece vom folosi cod CSS personalizat, care este acceptat numai de această versiune aElementor.
Să creăm o nouă secțiune cu o structură de 3 coloane, apoi în panou, să definim Înălțime pe Înălțime minşi apoi Inaltimea minima hai să facem clic VH și setați glisorul la 100.
Să adăugăm un widget Sectiunea interna în coloana din mijloc. Widgetul Secțiunea internă este configurat implicit cu 2 coloane, să ștergem una dintre ele. Să configuram restul în panou modificându-l Înălțime pe Înălțime min și Inaltimea minima să setăm cursorul pe 400.
În filă Stil, hai să modificăm Suprapunere de fundal. Faceți clic pe clasic pe tipul de fundal și selectați o imagine din bibliotecă, iar în setările imaginii, selectați Centrat Centrat pe Poziție Acoperi pe Dimensiune. Opacitate pe 1 si
În secțiunea frontiere click pe % si intra 4 pentru toate razele bordurilor.
În numărul de casete, setați glisorul la 0 pe Orizontală, A 70 pe Vertical, A 63 pe neclară, A -60 pe difuzor. Ar trebui să vedeți un efect de umbră frumos sub imaginea dvs.
In sectiunea interna glisați Widget pentru titlu. Ca titlu, introduceți Steve Jobs, în fila Stil, selectați culoarea albă # FFFFFF. În tipografie, selectați Dimensiunea 20.
Apoi selectați coloana din Widget-ul Internal Section și în fila Stil, selectați tipul de chenar făcând clic pe Solid, toate lățimile pe 1 și culorile pe #FFFFFF.
În filă avansat, schimbați marginile în 15 iar marginile interne pe 20.
Acum inserați pictogramele social media trăgând widgetul Social Media Icons în secțiunea Internă.
Editați linkurile rețelelor sociale din filă Conținut făcând clic pe Fiecare rețea socială. Dacă doriți să adăugați alte rețele sociale, faceți clic pe butonul Adăugație un element
În Câmpul de pictograme, faceți clic pe Biblioteca de pictograme și în bara de căutare introduceți primele litere ale rețelei dvs. de socializare, imediat ce o găsiți, selectați-o și faceți clic pe butonul Inserare.
Apoi accesați fila Stil, în secțiune icoană, schimbați culoarea în Personnalisé.
Citiți și ghidul nostru despre; Cum să adăugați paginarea cu Elementor
pe Culoare principală, setați transparența la minim.
pe Culoare secundară, selectați culoarea # FFFFFF. Pe Dimensiune, introduceți 20, Marja internă activată 0.4.
Acum faceți clic pe filă avansat, iar în secțiunea poziționareFaceți clic pe Personnalisé. Sigur latime personalizata, introduce 0.
Descoperă și tu Cum să utilizați Color Picker cu Elementor
pe Poziţie, selectați absolut, pe Shift 15Pe Orientare verticală choisir Bas, Și Decalaj pe 20.
Selectați din nou Sectiunea interna iar în filă avansat, în secțiune CSS personalizat (Dacă nu aveți această secțiune, faceți upgrade rapid la versiunea pro a Elementor pentru a continua)
Copiați și inserați următorul cod în această secțiune:
/*CSS de superposition d'arrière-plan avec Zoom-In*/
selector{
overflow: hidden !important;
}
selector .elementor-background-overlay{
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
-webkit-transform-origin: left;
transform-origin: left;
}
selector:hover .elementor-background-overlay{
-webkit-transform: scale(2);
transform: scale(2);
}A priori nu ar trebui să vedeți prea multe, dar dacă treceți cu mouse-ul peste imagine ar trebui să vedeți un zoom aplicat imaginii.
Acum copiați și inserați următorul cod după codul anterior pentru a afișa sau a ascunde anumite elemente ale coloanei:
/*CSS pour Masquer/Afficher un élément de la colonne*/
selector .elementor-column{
opacity: 0;
-webkit-transition: all 0.75s !important;
transition: all 0.75s !important;
}
selector:hover .elementor-column{
opacity: 1;
}Acum, de îndată ce treceți cu mouse-ul peste imagine, zoomul se aplică imaginii și apar numele și pictogramele rețelelor sociale.
Să duplicăm această coloană de 2 ori și să ștergem celelalte 2 coloane.
Schimbați imaginea de fundal a secțiunilor interne, precum și numele și linkurile rețelelor sociale.
Iată, tocmai ai făcut această sarcină cu ușurință. Doar previzualizați munca pe tabletă și smartphone, încercând să modificați marginile pentru a se potrivi cu fiecare dispozitiv.
Obțineți Elementor Pro acum!
Concluzie
Asa de ! Asta este pentru acest articol care vă arată cum să aplicați un efect de Zoom pe un card de profil. Dacă aveți nelămuriri despre cum să ajungeți acolo, anunțați-ne în termen comentarii.
Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
