Elementor: Hur man ändrar en bild när man håller muspekaren över text

Elementor: Hur man ändrar en bild när man håller muspekaren över text

Vill du ändra bild när du håller muspekaren över text med Elementor Page Builder? I den här nya handledningen kommer vi att visa dig hur du gör.

Om du inte har någon aning om vad vi vill prata om idag, inbjuder vi dig att titta på följande video:

ändra en bild när du håller muspekaren över en text med Page Builder Elementor

Låt oss sedan gå tillbaka till varför vi är här.

Upptäck också vår guide om:  Hur man skapar ett effektkort från en portfölj med Elementor

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 sektion med 2 kolumner, och sedan i sidopanelen, 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.

ändra en bild när du håller muspekaren över en text med Page Builder Elementor

På fliken Stil låt oss välja det Bakgrundstyp klicka på klassisk, ändra sedan färg sur# F9F9F9

ändra en bild när du håller muspekaren över en text med Page Builder Elementor

På fliken advanced, ändra alla Interna marginaler sur 25

Låt oss nu ändra kolumnbredden till 40% för den vänstra kolumnen och 60% för den högra kolumnen.

ändra en bild när du håller muspekaren över en text med Page Builder Elementor

I den vänstra kolumnen, låt oss släppa en Textredigeringswidget, klistra sedan in en text i den och ändra Titelstorlek text på Avdelning 3.

På fliken advanced, ange som Interna marginaler 10-25-10-30 respektive för övre, högra, nedre och vänstra interna marginalerna

I avsnittet bakgrund flik advanced, Klicka på ÖVERSIKT, välj sedan bakgrundstyp sur klassisk, låt oss skriva in det färg #DFF5FF et Övergångsperiod sur 0.5.

Om vi ​​håller muspekaren över texten kommer vi att ha möjlighet att upptäcka en magnifik bakgrundsfärg på hover.

Låt oss nu gå till avsnittet gränser, och klicka på ÖVERSIKT, välj sedan Fortsätta för gränstyp et låt oss inaktivera länken mellan gränsen att gå in 4 för vänster kant. Låt oss välja färg #002FA7 och lägg till en övergångslängd till 0.5

Om vi ​​för muspekaren över vår textruta en gång till kommer vi att se en mer framträdande animering med en ram till vänster.

I avsnittet gräns, låt oss gå tillbaka till fliken VANLIGT, låt oss välja kanttyp på Fortsätta, låt oss stänga av bindningen mellan gränserna, ta tag 4 för den vänstra kanten och gör den mycket transparent.

Om vi ​​håller muspekaren över texten en gång till kommer vi att se en mycket smidig övergång.

Läs också: Hur man visar text ovanför en bild med Elementor

Låt oss duplicera den här texten två gånger och ändra texterna för varje innehåll så här.

Dra a i den högra kolumnen Bildwidget, och infoga en bild från vårt bibliotek.

Vi kommer att skapa ett utrymme runt den här bilden genom att gå till Fliken Avancerat i kolumnen och ange 10 – 10 – 10 – 50 för alla interna marginaler av Top, Right, Bottom och Left.

Låt oss välja bilden och i fliken advanced av det senare, låt oss gå till avsnittet Rörelseeffekter sedan i Entréanimation, Välj Fade I

Låt oss gå in på avsnittet advanced från fliken Avancerat och lägg till några klassnamn i fältet CSS-klasser. Så låt oss ta all-img img-1

Låt oss duplicera vår bild 2 gånger.

Låt oss välja den andra bilden och ändra img-1 till img-2 och sedan ändra bilden till en ny bild.

Se även: Hur man skapar ett bildgalleri med Elementor

För den tredje bilden, låt oss bara ändra img-1 till img-3 och sedan ändra bilden till en ny bild.

ändra en bild när du håller muspekaren över en text med Page Builder Elementor

Låt oss välja vår sektion och gå till dess flik advanced. I avsnittet Anpassad CSS, kopiera och klistra in följande kodavsnitt:

selector .all-img{
    display: none;
}
selector .img-1{
    display: block;
}

(Om du inte har det här avsnittet så har du inte Pro-versionen, om du vill fortsätta måste du uppgradera din version).

ändra en bild när du håller muspekaren över en text med Page Builder Elementor

Låt oss välja vår första textredigerare och gå till fliken Avancerat och till Avsnittet Attribut. På fältet attribut, kopiera och klistra in följande kodavsnitt:

data-showme|img-1

Gör detta för andra textredigerare medan du ändrar img-1 till img-2 eller till img-3

Låt oss nu lägga till en HTML-widget på vår sida. Kopiera och klistra in följande skript:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').hover( function(){
        event.preventDefault();
        var showme = $(this).attr('data-showme')
        
        $('.all-img').hide()
        $('.' + showme).show()
        
    })
})
</script>
ändra en bild när du håller muspekaren över en text med Page Builder Elementor

Spara eller uppdatera din sida och förhandsgranska den.

ändra en bild när du håller muspekaren över en text med Page Builder Elementor

Där har du, du har precis gjort den här uppgiften enkelt.

Skaffa Elementor Pro nu!

Slutsats

Där är det ! Det är allt för den här artikeln som visar hur du ändrar en bild när du håller muspekaren över en text. 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.

.

Elementor: Hur man skapar ett effektkort från en portfölj

Elementor: Hur man skapar ett effektkort från en portfölj

Vill du lära dig hur man skapar ett kort med effekten av en portfölj? I den här nya handledningen kommer vi att visa dig hur du gör det med Elementor.

Om du inte har någon aning om vad vi vill prata om idag, inbjuder vi dig att titta på följande video:

skapa ett kort med portföljeffekt

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äs också: Hur man visar text ovanför en bild med 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 välja mellankolumnen och släppa i den här kolumnen Intern sektionswidget. Widgeten Internal Section är konfigurerad med 2 kolumner som standard. Låt oss släppa widgeten under de två kolumnerna Titel med titeln Restaurang, Välj H4 för HTML-taggen och Centrum för inriktning.

På fliken advanced av titelwidgeten, låt oss gå in 30 för Toppmarginal

skapa ett kort med portföljeffekt

Låt oss återigen välja vår interna sektion. Låt oss ändra den i panelen HÖGMOD sur Min höjd och Minsta höjd låt oss ställa in markören på 380. Låt oss sedan ta bort den högra eller vänstra kolumnen i den interna sektionen

skapa ett kort med portföljeffekt

Låt oss släppa det Bildwidget i den interna sektionen och infoga en bild från vårt bibliotek. låt oss välja Hela för Bildstorlek et Centrum för Inriktning.

skapa ett kort med portföljeffekt

OBS: Om du vill ha kompletta sidor som vår, inbjuder vi dig att fånga sidorna med hjälp av Chrome-tillägget GoFullPage men du kan använda en annan också.

Upptäck också: Hur man skapar ett bildgalleri med Elementor

Sedan i fliken Stil, Klicka på PX de Bredd, låt oss ställa in reglaget på 260 och gränsstrålar sur 10

Låt oss sedan ändra Box Shadow genom att ändra Blur till 40 och Diffuse till -10.

skapa ett kort med portföljeffekt

På fliken Avancerat, i avsnittet positionering, Välj absolut för Placera, Horisontell orientering sur Gauche, den decalage sur 0, L 'Vertikal orientering sur Bas.

Låt oss duplicera vår bildwidget två gånger. Oundvikligen kommer de alla att läggas över varandra. Låt oss ta fram Navigatorn så att vi kan komma åt de andra widgetarna som är dolda av den första.

skapa ett kort med portföljeffekt

Låt oss byta ut bilden av den andra widgeten och i dess flik advanced, låt oss ändra dem bottenmarginaler et Gauche genom att komma in 30 för varje. Du kommer nu att se en liten fördröjning, 

Gör samma sak för den tredje bildwidgeten, men använd marginaler 60 för den nedre och vänstra marginalen. Du bör nu ha en översikt över alla tre bildwidgets.

skapa ett kort med portföljeffekt

Låt oss välja vår Internal Section-widget, gå till dess flik advanced och i avsnittet Anpassad CSS, kopiera och klistra in följande kodavsnitt:

selector .elementor-widget-image{
    transition: ease-in-out 0.6s;
}
selector:hover .elementor-widget-image{
    transform: scale(.65);
}
selector:hover .front-img{
    transform-origin: center left;
}
selector:hover .mid-img{
    transform-origin: center top;
}
selector:hover .last-img{
    transform-origin: bottom right;
}

(Om du inte har det här avsnittet så har du inte Pro-versionen, om du vill fortsätta måste du uppgradera din version)

Om du nu håller muspekaren över vår karta får du en zoomanimation

skapa ett kort med portföljeffekt

Låt oss välja vår första bildwidget (den lägsta) och i dess flik advanced, låt oss ta tag front-img för CSS klasser.

För den andra bildwidgeten, låt oss skriva mitten av bild för CSS-klasser.

För den tredje bildwidgeten, låt oss skriva sista bilden för CSS-klasser.

Se även: Hur man skapar ett flikgalleri med bilder med Elementor

Håller vi muspekaren över vår kolumn nu kommer vi att se en vacker animering av innehållet i vår interna sektion.

skapa ett kort med portföljeffekt

Låt oss visa vår sida i surfplatta-läge. Vi kommer att se att bilderna inte kommer att visas korrekt.

skapa ett kort med portföljeffekt

Välj den första bildwidgeten, på fliken Stil, låt oss ändra bredden genom att klicka på PC och sedan ange 150 som bredd. Låt oss göra samma sak med de andra 2 bildwidgetarna.

Låt oss välja vår interna sektion, i dess innehållssektion, ändra Minsta höjd sur 225.

skapa ett kort med portföljeffekt

Låt oss också visa vår sida i smartphone-läge a priori, det ger inga problem. Men om den har någon, låt oss välja vår interna sektion, i dess innehållssektion, låt oss ändra minimihöjden.

Låt oss nu duplicera vår mittkolumn två gånger och sedan ta bort de andra två tomma kolumnerna.

skapa ett kort med portföljeffekt

Låt oss ändra rubrikerna för dessa kolumner och sedan ändra bilderna

Du måste ha en magnifik sektion som här är resultaten:

skapa ett kort med portföljeffekt

Där har du, du har precis gjort den här uppgiften enkelt.

Skaffa Elementor Pro nu!

Slutsats

Där är det ! Det var allt för den här artikeln som visar hur du skapar ett kort med portföljeffekt. 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.

.

Elementor: Hur man skapar ett bildgalleri

Elementor: Hur man skapar ett bildgalleri

Vill du veta hur du skapar ett bildgalleri med Elementor?

Bildgalleri är en av de typer av plugins som kan ersättas av Elementor. Med Elementor installerat och aktiverat på din WordPress-webbplats behöver du inte installera ett nytt plugin för att skapa ett bildgalleri.

Elementor har två widgets som du kan använda för att skapa ett bildgalleri: Basic Gallery och Gallery. Du kan använda widgeten Basic Gallery för att skapa ett bildgalleri. Medan för widgeten Galleri kan du använda den för att skapa ett mer avancerat galleri.

Läs också: Hur man skapar en gradientförloppsfält i Elementor

Om du inte visste, Elementor är ett plugin-tillägg för WordPress-sidor. Du kan använda den för att skapa en webbsida på din webbplats utan att behöva hantera CSS.

Hur man skapar ett bildgalleri i WordPress med Elementor

Innan du börjar, se till att du har Elementor installerat och aktiverat på din WordPress-webbplats. Du kan lägga till bilden antingen på en artikel eller på en sida. Klicka på knappen för att redigera en artikel / sida med Elementor Redigera med Elementor ovanför Gutenberg-redaktören.

Du kommer till Elementor Editor efter att du klickat Redigera med Elementor ovan. Innan du börjar lägga till innehåll i redigeringsrutan kan du först ställa in layouten. För att göra det, öppna inställningspanelen genom att klicka på kugghjulsikonen i nedre vänstra hörnet. Du kan ställa in layouten i alternativet Layout.

Skapa ett bildgalleri med hjälp av widgeten Basic Gallery

När du är klar lägger du till ett nytt avsnitt och drar widgeten Basic Gallery från vänster panel till redigeringsrutan.

Klicka på bildväljaren för att välja de bilder du vill lägga till i galleriet. Om bilderna inte finns i ditt WordPress-mediegalleri ännu, ladda bara upp dem.

Klicka på knappen Skapa ett nytt galleri för att lägga till de valda bilderna i galleriet. Ordna sedan om dem.

Se även: Hur man lägger till bild i text i Elementor

Du kan ställa in bildstorlek, antal kolumner och ljusområdet i blocket Galleri med bilder sous fliken Innehåll.

Hur man skapar ett bildgalleri med Elementor

Du kommer åt fliken Stil för att anpassa galleriet. Du kan ställa in avståndet och kanttypen på blocket Bilder. För att anpassa förklaringen kan du öppna blocket Legend.

Skapa ett bildgalleri med hjälp av widgeten Galleri

Galleri-widgeten erbjuder fler anpassningsalternativ än den grundläggande gallerwidgeten. Du kan använda tre olika layouter: Grid, Justified och Masonry. Du kan också ställa in överläggsfärg, beskrivning, pekande animation etc.

Läs också: Så här fixar du autoplay för video som inte fungerar i Elementor

Observera att Gallery-widgeten endast är tillgänglig på Pro-versionen av Elementor.

Om du vill börja skapa ett bildgalleri med widgeten Galleri drar du det från vänster panel till redigeringsområdet. Klicka på bildväljaren och välj de bilder du vill lägga till i galleriet som du gjorde ovan.

När du har lagt till bilder klickar du på blocket Inställningar under fliken Innehåll. Ställ in galleritypen på alternativet Typ.

Med widgeten Galleri kan du skapa ett bildgalleri med flera flikar enligt följande. Välj bara alternativet Flera olika om du vill skapa ett galleri med flera flikar som den nedan.

Hur man skapar ett bildgalleri med Elementor

Fortfarande i blocket Inställningar, ställa in galleriets layout, antal kolumner, mellanrum mellan bilder, bildförhållande och bildstorlek.

Hur man skapar ett bildgalleri med Elementor

Öppna blocket Täcka över för att aktivera överlägget. Du kan visa titeln och beskrivningen på bilden om du vill.

Om du väljer att visa bildtitel eller bildbeskrivning måste du redigera den enskilda bilden i galleriet. Redigera alt-texten, titeln, bildtexten eller beskrivningen beroende på vad du vill visa på bildpoängen.

Gå till fliken Stil för att anpassa ditt galleri. Det finns 3 alternativblock tillgängliga (4 om du skapar flera flikgallerier).

  • Bild

Från detta block kan du ställa in bildgränsfärg, gränsradie, bildanimering och CSS-filter.

  • Hur man skapar ett bildgalleri med ElementorTäcka över

Med detta block kan du anpassa överlägget. Du kan ställa in överläggets färg, punktanimering och blandningsläge.

  • Innehåll

Med detta block kan du anpassa innehållet i din bild. Innehåll hänvisar till titeln och beskrivningen av bilden som du definierade i blocket super~~POS=TRUNC flik Innehåll.

Du kan ställa in justering, vertikal position, fyllning, textfärg, typografi (typsnitt, teckensnittsfamilj, teckenstorlek) och pekande animering.

Hur man skapar ett bildgalleri med Elementor

När du är klar med att anpassa ditt galleri kan du klicka på knappen PUBLICERA längst ner på vänster panel. Du kan också förhandsgranska din sida först genom att klicka på ögonikonen.

Skaffa Elementor Pro nu!

Slutsats

Här är ! Det är det för den här artikeln som visar hur du skapar ett bildgalleri med Elementor. Om du har några frågor om hur du kommer dit flåt oss veta i 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.

.

Elementor: Hur man skapar ett flikgalleri med bilder

Elementor: Hur man skapar ett flikgalleri med bilder

Behöver du skapa ett bildgalleri med flikar i Elementor?

Som vi ständigt säger är Elementor mer än bara ett plugin för sidbyggare. Det är ett mångsidigt plugin som kan ersätta flera typer av WordPress-plugins samtidigt. Ett av plugin-programmen som kan ersättas av Elementor är Image Gallery-tillägget.

med Elementor, du behöver inte installera något extra plugin till skapa ett bildgalleri på din WordPress-webbplats. Det finns två widgets som Elementor erbjuder för att skapa ett bildgalleri: Basic Gallery och Gallery.

Med Basic Gallery-widgeten - tillgänglig på Elementor Free - kan du skapa ett grundläggande bildgalleri medan Gallery-widgeten låter dig skapa ett mer avancerat bildgalleri, inklusive ett bildgalleri med flikar.

Det här är bra om du vill skapa ett galleri på en fotograferingswebbplats. I den här artikeln ska vi visa dig hur du skapar ett bildgalleri med flikar i Elementor.

Hur man skapar ett bildgalleri med flikar i Elementor

Gallery-widgeten finns tillgänglig på pro-versionen av Elementor. Så se till att du har uppgraderat din Elementor till proversionen om du inte har gjort det. Det finns många fördelar som du får genom att använda Elementor Pro, inklusive möjligheten att skapa ett WordPress-tema utan kodning.

Läs också: Hur man skapar ett bildgalleri med flikar i Elementor

I det här exemplet skapar vi ett landskapsfotogalleri. Bilderna är indelade i tre typer: berg, hav och vattenfall. Vi ska skapa tre flikar för att vara värd för varje typ av landskap plus en flik för att visa alla foton.

För att komma igång, skapa en ny sida och redigera den med Elementor. Du kan också redigera en befintlig sida. Lägg till en sektion och dra Gallery-widgeten till den.

Hur man skapar ett bildgalleri med flikar i Elementor

Under blocket Inställningar under fliken Innehåll, ställa in alternativet Typ sur Flera olika.

Som standard innehåller ditt galleri bara en flik. För att lägga till en ny flik, klicka bara på knappen LÄGG TILL ETT ELEMENT.

Se även: Hur man skapar en gradientförloppsfält i Elementor

Öppna ett av objekten (flikar). Definiera fliketiketten i fältet Titel. Klicka på plusknappen för att välja de bilder du vill lägga till på fliken.

Välj bilderna från ditt WordPress-mediebibliotek. Om du inte har en, ladda bara ner dem. Klicka på knappen Skapa ett nytt galleri -> Infoga galleri för att lägga till galleriet på fliken.

Hur man skapar ett bildgalleri med flikar i Elementor

Öppna de andra objekten (flikar) och upprepa stegen ovan för att ställa in flikens etikett och lägga till bilderna.

Anpassa galleriet

När du väl har lagt till bilder på varje flik kan du anpassa ditt galleri. I blocket Inställningar, Du kan ställa in layout, radhöjd, mellanrum mellan bilder och bildstorlek. Det finns också ett alternativ för att aktivera funktionen Lazy Load.

Öppna blocket Filterfält för att definiera etiketten för huvudfliken (fliken "Alla"), pekaren och animationen.

Öppna blocket Täcka över för att aktivera överlägget. Du kan visa bildens titel och beskrivning när du svävar över en bild genom att ställa in titer och beskrivning.

Om du vill visa titeln och beskrivningen med musen över måste du redigera den enskilda bilden i galleriet och lägga till parametern du definierade (alt text, titel, bildtext eller beskrivning).

Öppna fliken Stil för att anpassa ditt galleri. Det finns fyra block du kan öppna: Bild, överlagring, innehåll och filterfält.

Bild

Detta block gör att du kan ställa in bildens kantfärg, pekande kantfärg, kantbredd, kantradie, CSS-filter och pekande animering.

Hur man skapar ett bildgalleri med flikar i Elementor

Täcka över

Med detta block kan du ställa in överläggsfärg, sväva överläggsfärg, blandningsläge och sväva animering.

Innehåll

Med detta block kan du anpassa bildens innehåll. Innehåll hänvisar till bildens titel och beskrivning. Du kan ställa in justering, vertikal position, fyllning, textfärg och typografi (typsnitt, teckensnittsfamilj och teckenstorlek).

Filterfält

Med detta block kan du anpassa filtret. Du kan ställa in justering, normal färg, pekfärg, aktiv färg, textfärg, mellanrum mellan flikar och typografi.

Du kan manipulera dessa inställningar tills du är nöjd med resultatet. När du är klar klickar du på knappen PUBLICERA / UPPDATERA längst ned till vänster för att publicera eller uppdatera din sida.

Skaffa Elementor Pro nu!

Slutsats

Här är ! Det är det för den här artikeln som visar hur du skapar flikbildsgalleri i Elementor. Om du har några frågor om hur du kommer dit flåt oss veta i 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.

.

Elementor: Hur man zoomar in ett profilkort

Elementor: Hur man zoomar in ett profilkort

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.

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

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.

.

Elementor: Hur man skapar hex-karta med effekt

Elementor: Hur man skapar hex-karta med effekt

Behöver du skapa en hexagonkarta med svävningseffekt med hjälp av den kraftfulla Page Builder Elementor? Om så är fallet, ta reda på i den här artikeln hur du tar dig dit.

Om du vill ha en överblick över vad vi kommer att prata om i den här handledningen, inbjuder vi dig att titta på följande video:

skapa hexagonal karta med svävningseffekt - Elementor

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äs också vår guide om: Hur man lägger till brödsmulor på en webbplats med Elementor

Låt oss skapa ett nytt avsnitt med en struktur till 3 kolumner, 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 Intern sektionswidget – Inre sektion – i mittkolumnen. Denna widget är som standard konfigurerad med 2 kolumner, låt oss ta bort en av dem. Låt oss konfigurera det HÖGMOD sur Min höjd och Minsta höjd låt oss definiera det reglaget till 400.

Lägg till en Inner Section-widget

På fliken Stil, låt oss ställa in bakgrundsbilden genom att välja en bild från ditt bibliotek och sedan ställa in dess position till Överlägsen centrerad, Upprepa på Ej upprepad och storleken på Omslag.

skapa hexagonal karta med svävningseffekt - Elementor

BakgrundsöverläggKlicka på Degradera för Bakgrundstyp, välj och ändra huvudfärgen på #2299EF och plats på 20, sedan sekundärfärgen på #1917 f.Kr och plats på 50, vinkeln på 140 och opaciteten på 0.85

skapa hexagonal karta med svävningseffekt - Elementor

Lägg sedan till a Titelwidget iInre sektion och som Titel, Låt oss ge ett namn och ändra sedan färgen till på fliken Stil i titelwidgeten # FFFFFF. Lägg sedan till a Textredigeringswidget, och i fliken Stil Centrera texten och ändra färgen till # FFFFFF.

Se även: Hur man lägger till bild till pristabellswidget med Elementor

Välj igen Inre sektion, gå till fliken Avancerad, i avsnittet Intern marginal, stiga på 25-2-2-2

Välj den inre sektionen igen och gå till fliken Avancerat och i sektionen Anpassad CSS, kopiera och klistra in följande kod:

/*Traçage Hexagone*/
selector{
    clip-path: polygon(0 25%, 50% 0, 100% 25%, 99% 75%, 50% 100%, 0 75%);
    -webkit-transition: all 0.5s !important;
    transition: all 0.5s !important;
}
skapa hexagonal karta med svävningseffekt - Elementor

Låt oss sedan lägga till det andra kodavsnittet nedan till det föregående:

/*CSS pour Afficher/Masquer la Superposition du dégradé*/
selector .elementor-background-overlay{
    -webkit-transition: all 0.5s !important;
    transition: all 0.5s !important;
    opacity: 0 !important;
}
selector:hover .elementor-background-overlay{
    opacity: 0.85 !important;
}
/*CSS pour Afficher/Masquer l'élément de la colonne*/
selector .elementor-column{
    opacity: 0;
    -webkit-transition: all 0.8s !important;
    transition: all 0.8s !important;
}
selector:hover .elementor-column{
    opacity: 1;
}
skapa hexagonal karta med svävningseffekt - Elementor

Låt oss sedan också klistra in utdraget nedan.

/*CSS d'effet de transition avec ombre*/
selector:hover{
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
}
.hexa-mom::before{
    content: '';
    position: absolute;
    bottom: -70px !important;
    width: 100%;
    color: #fff;
    height: 60px;
    border-radius: 50%;
    background: -webkit-radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
    background: radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
    display: block;
    -webkit-transition: all 0.8s !important;
    transition: all 0.8s !important;
    z-index: 999;
}
.hexa-mom:hover::before{
    opacity: 1 !important;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
}
skapa hexagonal karta med svävningseffekt - Elementor

Låt oss sedan välja mellankolumnen och i fliken advanced, stiga på hexa-mamma i fältet CSS klasser.

skapa hexagonal karta med svävningseffekt - Elementor

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

skapa hexagonal karta med svävningseffekt - Elementor

Låt oss ändra bakgrundsbilden för andra widgets Inre sektion, titeln och innehållet i textredigeraren och även färgerna på övertoningarna för bakgrundsöverlägg. Du bör få ett resultat som ser ut så här:

Här har du precis slutfört denna uppgift 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 skapar en hex-karta med effekt. 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.

.