Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar.

Vill du lära dig hur man zoomar profilkort med Elementor sidbyggarplugin?

I den här nya Elementor-handledningen kommer vi att visa dig hur du använder en zoomeffekt på ett profilkort, samtidigt som vi visar profilens namn 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 av Elementor.

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.

3 kolumn sektion

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.

Lägg till en Inner Section-widget

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.

I boxskugga ställer du in reglaget på 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. I Typografi väljer du Storlek 20.

Skapa enkelt din webbplats med Elementor

Elementor låter dig skapa Enkelt och gratis vilken webb- eller bloggdesign som helst med ett professionellt utseende. Sluta betala mycket för en webbplats du kan göra själv.

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.

tillämpa en zoom på en karta med Elementor

Infoga nu ikonerna för sociala medier genom att dra widgeten Ikoner för sociala medier till den interna sektionen.

Redigera länkarna till det sociala nätverket 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

Vill du sälja dina produkter på internet?

Ladda ner WooCommerce gratis, de bästa plugins för e-handel för att sälja dina fysiska och digitala produkter på WordPress och enkelt skapa din onlinebutik. Perfekt för nybörjare.

Huvudfärg, ställ in transparensen på minimum.

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

Placera, välj absolut, på Shift 15Vertikal 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.

tillämpa en zoom på en karta med Elementor

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.

tillämpa en zoom på en karta med Elementor

Låt oss duplicera denna kolumn 2 gånger och ta bort de andra 2 kolumnerna.

tillämpa en zoom på en karta med Elementor

Ä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.

.

0 aktier
del
tweet
Enregistrer