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.
På fliken Stil låt oss välja det Bakgrundstyp klicka på klassisk, ändra sedan färg sur# F9F9F9
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.
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å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.
(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).
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:
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.
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:
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.
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
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
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.
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å.
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.
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.
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.
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:
Håller vi muspekaren över vår kolumn nu kommer vi att se en vacker animering av innehållet i vår interna sektion.
Låt oss visa vår sida i surfplatta-läge. Vi kommer att se att bilderna inte kommer att visas korrekt.
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.
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.
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:
Där har du, du har precis gjort den här uppgiften enkelt.
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.
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.
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.
Du kan ställa in bildstorlek, antal kolumner och ljusområdet i blocket Galleri med bilder sous fliken Innehåll.
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.
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.
Fortfarande i blocket Inställningar, ställa in galleriets layout, antal kolumner, mellanrum mellan bilder, bildförhållande och bildstorlek.
Ö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.
Tä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.
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.
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.
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.
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.
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.
Ö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.
Ö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.
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.
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.
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.
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.
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.
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é.
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.
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.
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:
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 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.
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.
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.
på 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
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.
Låt oss sedan välja mellankolumnen och i fliken advanced, stiga på hexa-mamma i fältet CSS klasser.
Låt oss duplicera denna kolumn 2 gånger och ta bort de andra 2 kolumnerna.
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.
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.
Sekretess och cookies: denna webbplats använder cookies. Genom att fortsätta att surfa på denna webbplats godkänner du vår användning av den.
För att ta reda på mer, inklusive hur du kontrollerar cookies, se följande:
Cookies policy
