Vill du lära dig hur man zoomar på ett profilkort med plugin-programmet för sidbyggare Elementor ?
I denna nya handledning Elementor, visar vi dig hur du applicerar en Zoom-effekt på ett profilkort, samtidigt som du avslöjar namnet på profilen och dess sociala nätverksikoner.
Om du inte har någon aning om vad vi vill prata om idag, inbjuder vi dig att titta på följande video:
Låt oss sedan gå tillbaka till varför vi är här.
För att slutföra den här handledningen behöver du Pro-versionen av Elementor, eftersom vi kommer att använda anpassad CSS-kod som endast stöds av den här versionen avElementor.
Låt oss skapa en ny sektion med en struktur med tre kolumner, och sedan i panelen, låt oss definiera HÖGMOD sur Min höjdoch sedan Minsta höjd låt oss klicka vidare VH och ställ in reglaget på 100.
Låt oss lägga till en widget Intern sektion i mittkolumnen. Widgeten Internal Section är som standard konfigurerad med 2 kolumner, låt oss ta bort en av dem. Låt oss konfigurera resten i panelen genom att ändra dess HÖGMOD sur Min höjd och Minsta höjd låt oss ställa in markören på 400.
På fliken Stil, låt oss ändra Bakgrundsöverlägg. Klicka på klassisk på bakgrundstypen och välj en bild från biblioteket och välj i bildinställningarna Centrerad Centrerad på position Omslag på Storlek. Opacitet på 1 och
I avsnittet gränser klick % och gå in 4 för alla kantstensradier.
Ställ reglaget på i antal rutor 0 sur Horisontell, À 70 sur Vertikal, À 63 sur Flou, À -60 sur diffusor. Du bör se en vacker skuggeffekt under din bild.
I inre sektion skjut på Titelwidget. Som titel anger Steve Jobs, i stilfliken, välj färgen vit # FFFFFF. Välj storlek i typografin 20.
Välj sedan kolumnen för den interna sektionswidgeten och i stilfliken, välj typ av kant genom att klicka på Solid, alla bredder på 1 och färgerna på #FFFFFF.
På fliken advanced, ändra marginalerna till 15 och interna marginaler på 20.
Infoga nu ikonerna för sociala medier genom att dra widgeten Ikoner för sociala medier till den interna sektionen.
Redigera länkar till sociala medier på fliken Innehåll genom att klicka på Varje socialt nätverk. Om du vill lägga till andra sociala nätverk klickar du på knappen Lägg tillär ett element
I ikonfältet, klicka på Ikonbibliotek och i sökfältet skriv de första bokstäverna i ditt sociala nätverk, så snart du hittar det, välj det och klicka på knappen Infoga.
Gå sedan till fliken Stil, i avsnittet icon, ändra färgen till personnalisé.
Läs även vår guide om; Hur man lägger till paginering med Elementor
på Huvudfärg, ställ in transparensen på minimum.
på Sekundär färg, välj färg # FFFFFF. På Storlek, ange 20, Intern marginal på 0.4.
Klicka nu på fliken advanced, och i avsnittet positioneringKlicka på personnalisé. på anpassad bredd, stiga på 0.
Upptäck också Hur man använder färgväljaren med Elementor
på Placera, välj absolut, på Shift 15På Vertikal orientering välj Basoch shift sur 20.
Välj igen Intern sektion och i fliken advanced, i avsnittet Anpassad CSS (Om du inte har det här avsnittet, uppgradera snabbt till proversionen av Elementor för att fortsätta)
Kopiera och klistra in följande kod i det här avsnittet:
/*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 bör du inte se mycket, men om du håller muspekaren över bilden bör du se en zoom applicerad på bilden.
Kopiera och klistra in följande kod efter föregående kod för att visa eller dölja vissa element i kolumnen:
/*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;
}Så fort du håller muspekaren över bilden gäller zoomningen på bilden, och namnen och ikonerna för sociala nätverk visas.
Låt oss duplicera denna kolumn 2 gånger och ta bort de andra 2 kolumnerna.
Ändra bakgrundsbilden för interna sektioner, samt namn och länkar till sociala nätverk.
Där har du, du har precis gjort den här uppgiften enkelt. Förhandsgranska bara din surfplatta och smartphone och försök ändra marginalerna så att de matchar varje enhet.
Skaffa Elementor Pro nu!
Slutsats
Så ! Det var allt för den här artikeln som visar hur du använder en zoomeffekt på ett profilkort. Om du har några funderingar kring hur du tar dig dit låt oss veta inom commentaires.
Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
