Hur man anpassar WordPress för att öka konverteringarna

ens Passy Guy | Wordpress

Hur anpassar jag WordPress för att öka konverteringarna?

Studier visar att mer 68% av köparna börja undersöka produkter online. När de skriver in ditt företagsnamn eller den produkt de letar efter i Google och landar på din webbplats är det oerhört viktigt att du ger dem relevant information de letar efter.

Det tar mindre än en sekund för användare att fatta ett beslut om din webbplats som avgör om de stannar eller lämnar. 

Om dina potentiella kunder hittar vägen till din webbplats bara för att studsa tillbaka, inte ens en sekund senare, tappar du försäljningen.

Ett bra sätt att kämpa mot denna avvisningsfrekvens extremt snabbt är att förse dina potentiella kunder med relevant personlig information och innehåll.

Sanningen bakom personalisering

Anpassa din WordPress-webbplats Inte bara kommer din avvisningsfrekvens att minska, men det kommer i slutändan att öka dina omvandlingar.

Med tusentals alternativ att välja mellan och tusentals företag att spendera pengar på digital marknadsföring, en webbplats generisk underpresterande kommer inte att översättas till konverteringar och försäljning.

När potentiella kunder hittar exakt den information de letar efter är de mer benägna att stanna, interagera och i slutändan köpa.

Upptäck vårt 4 knep för att minska avvisningsfrekvens på din Wordpress blogg

Studier visar att det är mer sannolikt att konsumenter köper från ett företag som erbjuder en personlig användarupplevelse och att personligt innehåll kan öka effektiviteten i dina marknadsföringsutgifter med 10 till 30 procent.

Med siffror som dessa har du inte råd att inte anpassa din webbplats.

Innehållet du behöver anpassa

Du spenderar mycket tid på att bygga och göra din WordPress-webbplats perfekt, så det kan vara överväldigande när du försöker bestämma vilka delar av innehållet som ska anpassas.

Bilderna på din webbplats är extremt kraftfulla och kan ha en enorm inverkan på dina omvandlingsfrekvenser. Oavsett om dina bilder lägger till ett mänskligt inslag i ditt varumärke, visar detaljer eller guidar konsumenten dit du vill att de ska titta, kan du anpassa denna del av din webbplats till att dina besökare kan relatera till ditt företag. En djupare nivå.

Kontaktinformation - Medan bilder tillåter dig att skapa känslomässiga kontakter med dina besökare, är det enkelt att tillhandahålla rätt kontaktinformation för att anpassa din webbplats. Oavsett om du har enstaka försäljningsrepresentanter för olika platser eller en specifik hjälplinje över natten, så visar dina webbplatsbesökare rätt kontaktinformation omedelbart att de kan kontakta dig och göra shopping enklare. 

Kundrecensioner och vittnesmål - kunder läser recensioner innan de gör ett köp. Av denna anledning blir det allt viktigare att ha kommentarer på din webbplats. Att anpassa dessa kommentarer kan göra dem ännu mer effektfulla. Du kan göra detta genom att visa recensioner av relevanta produkter för någon som har köpt tidigare, eller visa recensioner från någon i en viss region i landet för någon annan i den regionen.

Produktinformation - Om du säljer en produkt eller tjänst som inte är tillgänglig i vissa regioner eller för vissa åldersgrupper kan det vara perfekt att anpassa produktbeskrivningar på detta sätt. Denna teknik gör att du kan leverera relevant information till relevanta kunder utan att förstöra webbsidan för personer som inte behöver den.

Upptäck genom att klicka på den här länken Varför är din avvisningsfrekvens så hög?

Uppmaningar till handling - Beroende på vilken enhet webbplatsbesökaren använder, var de finns och vad som intresserar dem, a uppmaningsknapp är inte alltid relevant eller lockande. Att anpassa uppmaningstexten och länken den skickar din kund till kan göra den mer effektiv än ett alternativ som passar alla.

Artiklar på första sidan blogg och annat innehåll - I den här galna världen av WordPress SEO, de blogginlägg du skriver och annat innehåll som du skapar på din webbplats bör vara relevanta och engagerande för användarna. Att visa innehåll för webbplatsbesökare och blogginlägg som är intressanta och relevanta för dem ger inte bara värde för dina besökare utan ökar nivåerna av engagemang i dina blogginlägg.

För att vinna popularitet med din webbplats kan det vara mycket viktigt att engagera publik som redan är intresserad av det du skriver och är en mer praktisk användning av din tid.

Hur du anpassar din webbplats

Beroende på din produkt eller tjänst finns det många sätt att anpassa din WordPress-webbplats för att öka konverteringarna. Här är några idéer för att få din kreativitet att flyta när du anpassar din webbplats:

Geotargeting

Att anpassa innehåll baserat på besökarnas plats är ett utmärkt sätt att anpassa din webbplats. Du kan ändra bilderna så att de återspeglar bilderna som är relevanta för besökaren, ändra telefonnummer och försäljningsinformation för att visa rätt kontaktinformation baserat på var de handlar och mycket mer.

Se också Hur du ökar din konverteringsfrekvens med OptinLinks e-postfångst-plugin

En storlek passar inte alla när det gäller din webbplats och den information som dina webbplatsbesökare från olika platser letar efter.

I den här bilden kan du se hur University of Montana kan använda geografisk inriktning för att anpassa sin webbplats baserat på platsen för den intresserade studenten som besöker webbplatsen. Istället för ett generiskt meddelande " Läs mer om varför UM passar dig", Besökare till Boston skulle se meddelandet" Montana besöker Boston Och skulle ha möjlighet att boka ett möte för att träffa campusrepresentanten när de är i regionen. Klickfrekvensen för personligt innehåll är nästan dubbelt jämfört med generiskt inlägg.

GeoFli

GeoFli är ett utmärkt WordPress-verktyg för geografisk inriktning och geo-personalisering. Deras WordPress-plugin gör att du enkelt kan anpassa din webbplats baserat på besökarens plats. Med GeoFli kan du välja platsen du riktar dig efter postnummer, stat, land eller till och med rita ditt eget geo-staket.

Det låter dig också geo-omdirigera besökare från vissa platser till olika webbadresser. För att använda GeoFli behöver du bara välja innehållet du vill redigera, välja det område du vill rikta in och redigera kopian eller innehållet för att ge värde till målgruppen.

Anpassning av enhetstyp

Att visa relevant innehåll för användare baserat på den enhet de använder för att söka på nätet är ett utmärkt sätt att minska studsfrekvensen, öka konverteringarna och ge informationen till dina webbplatsbesökare. som de behöver.

Läs också: Så här ökar du konverteringar: ökar begränsade erbjudanden

Att förstå dina kunders vanor kan hjälpa dig med denna form av personalisering. Till exempel är det mer troligt att konsumenter köper från en stationär dator än en smartphone. Att veta detta kan uppmuntra dig att visa produktinköpsinformation på datorn medan du markerar dina affärsvärden och fördelarna med produkter på mobila enheter.

Logik Hop

Logic Hop låter dig anpassa webbplatsinnehåll baserat på hur besökaren anlände till webbplatsen och vilket innehåll de tittade på. Deras WordPress-plugin är ett kraftfullt sätt att leverera personligt innehåll till dina webbplatsbesökare.

För att använda Logic Hop är allt du behöver göra att skapa villkorlig logik på vissa delar av din webbplats och din webbplats kommer att visa dessa avsnitt när villkoren är uppfyllda.

Tidsanpassning

Om du visar unika samtal till handlingar och innehåll baserat på den tid på dagen, veckan eller året besökaren är på din webbplats kan du använda användarmodeller för att öka omvandlingarna.

Läs också vår guide om Så här använder du FOMO på WordPress för bättre omvandlingar

Om du vet att en viss produkt eller tjänst säljer bättre vid en viss tidpunkt kan du anpassa din webbplats så att den kommer att visas under den tiden.

Avancerad anpassning av FlowCraft

Avancerad anpassning av FlowCraft låter dig anpassa webbplatsinnehåll baserat på tid, antal besök och mer. Deras WordPress-plugin gör att du enkelt kan kombinera avsnitt och anpassa det för ännu mer specifika grupper av människor.

Liknar Om så är fallet, för att använda Flow Crafts avancerade anpassning behöver du bara skapa ett villkor och ange vad som ska visas om villkoret är uppfyllt eller inte.

Anpassning av webbplatsens interaktion

Sättet som en konsument interagerar med din webbplats är också ett utmärkt tillfälle att visa dem personligt innehåll. Om de är anslutna och har gjort prejudikat inköp, kan du föreslå liknande artiklar, om de är första gången besökare, kan du visa dem de mest populära artiklarna, och om de hittade din webbplats på grund av en specifik annons kan du visa information som är relevant för denna annons.

Om så är fallet

If-So låter dig anpassa webbplatsinnehåll baserat på besökarens profil eller interaktion med webbplatsen. Detta WordPress-plugin låter dig visa unikt innehåll baserat på datum, användarprofil och mer.

För att använda If-So är allt du behöver göra att välja det villkor du vill rikta in dig och sedan definiera innehållet du vill visa om villkoret är uppfyllt eller inte.

När potentiella kunder kommer till din webbplats har du bara en bråkdel av en sekund för att fånga deras uppmärksamhet och hålla dem intresserade. Att anpassa innehållet på din WordPress-webbplats är därför ett utmärkt sätt att förse besökarna med den information de letar efter och i slutändan öka konverteringarna.

Upptäck Så här spårar du konverteringar på WordPress: Steg-för-steg-guiden

Oavsett om det är att anpassa kontaktinformation baserat på besökarnas platser eller att anpassa bilder baserat på årstid, är värdefullt innehåll nyckeln till att konvertera kunder av hög kvalitet.

Rekommenderade resurser

Ta reda på om andra rekommenderade resurser som hjälper dig att bygga och hantera din webbplats.

• Hur man tar bort ett WordPress-tema från en webbplats
• 10 WordPress WooCommerce-plugins att använda på din blogg
• Hur hittar jag en sponsor och tjänar pengar på din blogg?
• Hur man importerar och exporterar navigationsmenyer i WordPress
• Så skyddar inloggningssidan på din Wordpress-blogg

Slutsats

Här är ! Här slutar vår guide om hur du anpassar WordPress för att öka konverteringarna. Om du har några commentaires eller förslag, tveka inte att berätta för oss i avsnittet reserverat för dessa.

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 framför allt dela den här artikeln på dina olika sociala nätverk.

. 

Så här installerar du WordPress-plugins

ens Passy Guy | Wordpress

I den här artikeln kommer vi att visa dig hur du installerar WordPress-plugins

Som ett av de mest populära innehållshanteringssystemen (CMS) erbjuder WordPress stor flexibilitet och massor av anpassningsalternativ. Den erbjuder ett brett utbud av WordPress-plugins, som låter dig ändra funktionaliteten på din webbplats.

WordPress har sin egen katalog, som levereras med gratis och premium plugins. Dessa plugins låter dig lägga till olika funktioner, allt från kontaktformulär och personliga nyhetsbrev till webbcachelagring och WordPress-säkerhet.

Vissa plugins kan också modifiera din WordPress-webbplats till en funktionell webbutik med en WooCommerce plugin eller en e-Learning-plattform med LMS-plugins. I själva verket kan du till och med skapa ditt eget WordPress-plugin.

I den här handledningen kommer vi att visa dig steg-för-steg-processen för att installera WordPress-plugins med tre olika metoder.

I slutet av den här artikeln kommer vi också att inkludera några tips du kan följa när du letar efter nya WordPress-plugins för att förbättra din webbplats.

Men innan du börjar, ta reda på om du aldrig har installerat WordPress Hur man installerar en Wordpress-blogg 7 steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg 

Tillbaka till varför vi är här.

Hur man installerar WordPress-plugins från den officiella plugin-katalogen

Det enklaste sättet att installera WordPress-plugins är att komma åt den officiella plugin-katalogen via ditt WordPress-adminområde. Denna WordPress-pluginkatalog är dock begränsad till endast gratis plugin-alternativ.

Logga in på din WordPress-instrumentpanel och navigera till Tillägg->Lägg till. Fortsätt att söka efter plugin-programmet i sökfält. Du kan också bläddra bland utvalda, populära eller rekommenderade plugins genom att klicka på flikarna till vänster.

Till exempel om du letar efter plugin MonsterInsights, kommer du att se det som det första resultatet. Klicka på knappen Installer nu för att börja installera plugin-programmet.

Vänta tills processen är klar och klicka på knappen aktivera för att börja använda detta WordPress-plugin.

När du har aktiverat insticksprogrammet, kontrollera och konfigurera inställningar av plugin genom att gå till Tillägg -> Plugins installerade. 

Hur man manuellt installerar WordPress-plugins

Ett annat sätt att installera WordPress-plugins är att manuellt ladda upp plugin-filerna via din WordPress-instrumentpanel.

Den här metoden låter dig installera ett plugin som kanske inte finns i den officiella WordPress-katalogen men tillgängligt från tredjepartsmarknadsplatser, som t.ex. CodeCanyon et Codester.

Innan du startar installationsprocessen för plugin måste du först ladda ner filen ZIP av plugin från den källa du väljer.

Navigera sedan till ditt WordPress-administratörsområde och klicka Tillägg -> Lägg till. Nästa, lokalisera T-knappenhöja en förlängning längst upp till vänster på sidan.

Välj filen på din dator ZIP plugin du vill ladda ner och klicka sedan installera nu.

Vänta tills plugin-installationen har slutförts och tryck på Aktivera tillägg.

Använda en FTP-klient för att installera WordPress-plugins

Det finns flera premium- och anpassade WordPress-plugins som kräver att du installerar dem manuellt med en FTP-klient. För en nybörjare kan processen vara något mer komplicerad eftersom du först måste lära dig hur du konfigurerar en FTP-klient.

Oroa dig inte, följande guide guidar dig steg för steg. Allt du behöver göra är att följa stegen.

först, extrahera plugin-zip-filen och spara den i en mapp på din dator. Tänk på att den extraherade plugin-filmappen är den du behöver ladda upp via FTP-klienten.

Anslut sedan din webbplats till FTP-servern. För att göra detta, hitta FTP-informationen för din värdleverantör.

När du är inloggad, navigera till din FTP-klient – ​​för det här exemplet använder vi filezilla. Där anger du dina inloggningsuppgifter och trycker på knappen Connection Rapide. Gå sedan till panelen fjärrplats och sök mappen wp-content / plugins /.

I panelen lokal webbplats, ladda upp den extraherade plugin-mappen från din dator till mappen wp-content/plugins/ från din server.

När överföringen är klar kommer WordPress-pluginen att installeras på din webbplats.

För att aktivera plugin-programmet måste du komma åt din WordPress-instrumentpanel. Navigera till avsnittet Tillägg-> Plugins installerade, leta reda på plugin-programmet och klicka sedan aktivera.

Vad ska man komma ihåg när man väljer ett WordPress-plugin?

Det finns många plugins i WordPress plugin-katalogen och ännu fler tillgängliga på tredje parts webbplatser. Det här antalet alternativ kan verka överväldigande, särskilt för nybörjare som försöker ta reda på vad som är rätt för deras webbplats.

Följande avsnitt kommer att visa dig några viktiga saker att tänka på när du väljer ett plugin för din webbplats.

Regelbundna uppdateringar.

WordPress släpper regelbundna uppdateringar för att hålla sitt system uppdaterat. Det är så de förbättrar prestandan, upprätthåller säkerheten, fixar buggproblem och lägger till nya funktioner.

Så innan du installerar något plugin, överväg dessa punkter:

Se till att han är rätt för jobbet

• Senaste uppdateringen. Att välja ett WordPress-plugin som uppdateras ofta kan hindra dig från att begå säkerhetsintrång. Det visar också att utvecklarna fortfarande aktivt underhåller och förbättrar plugin-programmet.
• Antal installationer. Detta nummer visar hur populärt nämnda WordPress-plugin är. Generellt gäller att ju fler aktiva installationer ett plugin har, desto bättre är kvaliteten.
• Publik. Användarrecensioner och kommentarer kan hjälpa dig att väga för- och nackdelar med ett specifikt plugin. Detta ger dig insikt i hur pluginet fungerar i realtidssituationer.
• Kompatibilitet. Ett plugin som får regelbundna uppdateringar från sina utvecklare är vanligtvis kompatibelt med den senaste versionen av WordPress. Kontrollera alltid beskrivningsfliken för att se vilken version av WordPress som behövs för att köra plugin-programmet.

Innan du laddar ner och installerar något plugin på din WordPress-webbplats, se till att kontrollera påståendena från utvecklarna. Läs pluginens dokumentation, kolla in pluginens supportforum och läs recensioner.

Att söka igenom blogginlägg är också en bra praxis eftersom många webbplatser tillhandahåller plugin-recensioner.

vid BlogPasCher, granskar och testar vi också WordPress-plugins med olika funktioner inklusive meny plugins, Google Analytics plugin-program et granska plugins.

.

Installera ett plugin i taget

När du testar ett plugin i WordPress, kom ihåg att installera och testa varje plugin individuellt. På så sätt kan du snabbt se om det orsakar några problem för din webbplats och om du kan fixa dem.

Om du bestämmer dig för att testa flera olika plugins på WordPress, kom ihåg att avaktivera den tidigare plugin innan du provar en annan.

När du har flera inaktiva plugins är det också bäst att ta bort dem eftersom för många installationer kan överbelasta din WordPress-webbplats och påverka dess prestanda.

Använd endast ett plugin för varje funktion

Även om WordPress-plugins lägger till nya funktioner och förbättrar funktionaliteten på din webbplats, kan en installation av för många av dem sakta ner din webbplats.

Faktum är att varje gång du installerar WordPress-plugins lägger du till ny kod på din webbplats. När de används överdrivet kommer plugins att skicka för många HTTP-förfrågningar för att ladda deras resurser, såsom CSS-formatmallar, JavaScript-filer och bilder, vilket kommer att sakta ner hastigheten på din webbplats.

Dessutom kan installation av WordPress-plugin-program som utför liknande funktioner orsaka konflikter, potentiellt bryta en eller båda plugins. Så det bästa är att installera ett WordPress-plugin för varje funktion.

Till exempel, Yoast SEO et AISEO har liknande funktionsuppsättningar – välj bara en för att undvika plugin-konflikter.

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du installerar WordPress-plugins på din blogg eller webbplats. Du har nu möjlighet att förbättra funktionaliteten på din webbplats även om du inte har några tekniska förkunskaper eller färdigheter.

Om du inte är säker på vilket plugin du ska börja med, fundera på vad din nuvarande webbplats saknar. Granska sedan tillgängliga plugins och jämför viktiga faktorer som kompatibilitet, recensioner och senaste uppdateringen.

Här är några av våra rekommenderade viktiga WordPress-plugins för att komma igång:

• Yoast SEO. Detta plugin hjälper till att förbättra ditt WordPress-blogginlägg och din sida SEO genom sökordsoptimering och metabeskrivningar
• Elementor ou Beaver Builder. Hjälper dig att bygga din webbplats genom att tillhandahålla ett lättanvänt dra-och-släpp-gränssnitt.
• W3 Total Cache ou WP Super Cache. Ökar din webbplats prestanda och minskar laddningstiden med cachning och integration med CDN.
• Google XML-webbplatskartor. Genererar automatiskt XML-webbplatskartor för bättre sökmotoroptimering.
• Akismet. Denna plugin upptäcker och filtrerar bort skräppost i dina kommentarer och kontaktformulär för att förhindra skadliga attacker.

Andra rekommenderade resurser

Vi inbjuder dig också att konsultera resurserna nedan för att gå vidare i greppet och kontrollen av din webbplats och blogg.

• Hur man skapar en kortkod i WordPress
• Hur man skapar ett enkelt Gutenberg Block WordPress-plugin
• Hur man förstår WordPress Dashboard
• Hur man skapar ett enkelt WordPress-plugin

Slutsats

Det är allt för den här guiden som visar hur du installerar WordPress-plugins. Om du har några funderingar eller förslag, vänligen meddela oss inom commentaires.

Du kommer dock också att kunna konsultera vår medel, 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.

under tiden, dela den här artikeln på dina olika sociala nätverk.   

.  

Divi: Hur man lägger till bilder till en Mega-meny

ens Gaetan | Wordpress

Vill du ha en Mega Menu Divi med bilder för att illustrera innehållet i menyn? Följ vår handledning om hur man lägger till bilder till en Mega-meny?

Vi älskar att interagera med bilder online. Med det i åtanke är det vettigt att lägga till en bild på din webbplats när det är möjligt. 

Dessutom är att lägga till bilder i en megameny ytterligare ett utmärkt tillfälle att ge dina användare den interaktion de behöver.

Bilder förbättrar också menyn genom att fånga deras uppmärksamhet för att ytterligare förenkla navigeringsprocessen.

undersökningen

Innan vi hoppar in i den här handledningen, låt oss ta en titt på resultatet vi vill uppnå.

Skapande av megamenyn

För att komma igång måste vi först skapa menyn. 

För det här exemplet skapar vi ett huvudmenyalternativ som heter “Mega meny” med fyra undermenyalternativ nedan. Var och en av de fyra undermenyalternativen har tre undermenyalternativ.

Gå till WordPress-instrumentpanelen och klicka sedan på Utseenden> Menyer

Klicka på "Skapa en ny meny", ge den ett namn och klicka på "Skapa meny".

Se till att aktivera menyegenskapen CSS Classes genom att klicka på fliken Tillbehör skärmen längst upp till höger på skärmen Menyer och kontrollera CSS klasser.

Du kan nu lägga till dina menyalternativ till den nya menyn du skapade.

Låt oss först skapa menyalternativet som kommer att vara överordnat till alla andra menyalternativ. Det här är länken som visar din megameny när du svävar.

För att skapa detta menyalternativ, skapa en anpassad länk med följande parametrar:

• URL: http://#
• Navigeringstitel: Mega Menu
• CSS-klasser: megameny

Ordna/dra nu de fyra menyalternativen (var och en med tre egna underpunkter) för att bli underposter till den överordnade Megameny-länken.

När länkarna har lagts till i menyn, scrolla ner till 'Réglages du meny' längst ned på menyskärmen och välj 'Huvudmeny' för visningsplats. Slutligen, klicka på 'Spara meny'

Så här ser vår megameny ut hittills:

Lägger till bilder till megamenyn

Nu när menyn är klar är det dags att lägga till bilderna.

Läs också: Hur flyter jag blogginlägg i DIVI?

Få bilderna

Börja med att få fyra bilder. Dessa bilder bör relatera till de fyra undermenyalternativen (Om, Serviceleverans, Vårt arbete och Kontakta oss).

Använd en fotoredigerare för att skala ner och beskära varje bild till 500px bred och 300px hög.

Lägg till dessa bilder till WordPress-biblioteket. Klicka på Media > Lägg till.

Dra dina bilder till sidan för att lägga till dem eller klicka på 'Välj filer'

Infoga bilder i Mega-menyn

Återgå till menysidan i WordPress-instrumentpanelen.

I det här exemplet är länken högst upp i den första kolumnen " Handla om ". 

Klicka på pilen till höger om objektet " Handla om ". I rutan Navigationsetikett lägger du till önskad bild med hjälp av html-taggen img direkt före texten " Handla om ". Bildtaggen ska se ut så här:

<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />

För att hitta webbadressen till bilden, gå till Media > Mediebibliotekklickar du på bilden du vill lägga till. 

I popup-skärmen Bilaga detaljer, hitta webbadressen i det högra avsnittet och klicka sedan "Kopiera URL till urklipp"

Gå nu tillbaka till menyalternativets konfiguration " Handla om " på menysidan och byt ut texten "Infoga bildadress" genom att klistra in din bild-URL med ctrl + v.

Innan du avslutar konfigurationsalternativen för menyalternativet " Handla om ", hitta textrutan CSS Classes och ange klassen "mega-link".

Detta gör att vi kan lägga till en anpassad stil senare.

Upprepa denna process för att lägga till följande tre bilder till var och en av undermenyalternativen med klassen "mega-länk". (I det här exemplet är de återstående tre objekten "Tjänsteleverans", "Vårt arbete" et " Kontakta oss ".)

Resultat

Gå till din webbplats och håll muspekaren över megamenylänken. Nu ska din megameny se ut så här:

Observera att när du håller muspekaren över var och en av bilderna tonas bilderna in med undermenyn direkt nedan. Detta beror på att bilden är en del av den länken, så om du klickar på den kommer du till den associerade webbadressen.

Sista handen

För det här sista steget, lägg till lite anpassad css till menyn för att göra textteckensnittet större och centrerat. Ge även en ramradie runt bilden för att få den att se renare ut.

Gå till i WordPress-instrumentpanelen Divi> Temalternativ . 

Rulla ner till rutan Anpassad CSS, ange CSS nedan och klicka 'Spara ändringar' :

.mega-link > a {
    text-align: center;
    font-size: 20px !important;
    text-transform: uppercase;
    font-weight: 400 !important;
    letter-spacing: 3px;
}
 
.mega-link > a img {
    margin-bottom: 8px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
 
}

Slutresultat

Du är klar!

Om du har följt alla steg i denna handledning, här är resultatet du bör få.

Ladda ner DIVI nu!!!

Slutsats

Du har en Divi megameny med bilder utan att behöva använda ett plugin. Den här typen av menyer fungerar särskilt bra för e-handelswebbplatser som har mycket innehåll och kräver produktbilder. Vi hoppas att denna handledning kommer att vara användbar för dina nästa Divi-projekt.

Om du behöver fler element för att slutföra dina webbplatsskapande projekt, bläddra också i vår guide på WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.

Men under tiden, dela den här artikeln på dina olika sociala nätverk.

.

Elementor: Hur man skapar en animation när man svävar

ens Passy Guy | Wordpress

Vill du skapa en svävningsanimation med Elementor?

I den här handledningen kommer vi att använda en burk pepsi som vi kommer att sväva över och som kommer att avslöja en beskrivning om den.

Vi inbjuder dig att kolla in följande video för att få en uppfattning om vad vi vill visa dig.

Infoga ett enstaka kolumnavsnitt och välj sedan i sidofältet Minsta höjd sur HÖGMOD

på minsta höjd klick VH dra sedan reglaget till 100. Alltid i fliken Layout définir 650 comme largeur.

Välj kolumnen och på sidofältet på fältet Vertikal inriktning välj Miljö.

På fliken Stil, ändra bakgrundsfärgen genom att klicka på färgväljaren och skriv #D37636 sedan i avsnittet gräns, låt oss ta tag 20 för alla kantstensradier.

På fliken advanced, stäng av stoppningsbindning och typ 75 för interna marginaler haut et Bas et 25 för interna marginaler Gauche et Droite.

Dra sedan en widget i kolumnen inre sektion. Låt oss ta bort en av kolumnerna från den interna sektionen.

I kolumnen i den återstående inre delen släpper du Titelwidget och ändra titeln till Pepsi kärlek.

Läs också vår guide om: Hur man skapar ett effektkort från en portfölj i Elementor

Sedan, i fliken Stil, ge texten en vit färg och för typografin ställ in Taille sur 32i Radhöjd sur 1.2, teckenavstånd sur 0.5.

Under Titelwidget, släpp a Textredigeringswidget och redigera texten. I fliken Stil, ändra textfärgen till vit och Taille typografi på 16i Radhöjd sur 1.5 ochteckenavstånd sur 0.5.

På fliken advanced ändra marginalen Bas sur -10.

I avsnittet positionering flik advanced, ändra Bredd sur personnalisé och Bredd Anpassad ställ in det senare till 310.

Under stycket lägger vi till en knappwidget med för text Läs Mer.

På fliken Stil ge knappen färgen Vit och textfärg ställ in den på Noire.

Välj nu kolumnen för inre delen, i avsnittet advanced flik advanced stäng av länken och klicka på procentsatsen och ställ sedan in marginalen Gauche sur 20 och i Intern marginal definiera det av Gauche sur 20.

Dra nu bild-widget ovanför Intern sektion infoga en bild. Vi har valt för exemplet en bild på en drink som är lätt att hitta på webben.

När du har infogat bilden, konfigurera Bildstorlek sur Hela och uppriktning låt oss klicka vidare Centrum.

På fliken advanced, gå till avsnittet Placera sur Bredd välj Online (Auto)På Placera välj absolut och Horisontell orientering välj Höger sedan shift ange -9.9 och på shift av vertikal orientering ange -105.

Gå längre ner på Transformeringssektion definiera ändra storlek sur 0.5.

Välj nu kolumnen för Intern sektion och i fliken advanced ange namnet på css-klasser pepsi text.

Välj sedan vårt huvudavsnitt, gå till avsnittet Anpassad CSS av hans Tab Avancerad,  kopiera och klistra in följande kod:

/*Hover Animation CSS*/
selector{
    --transition: 0.5s;
    --circle-color: #313F69;
    --content-background: #D27838;
    --mobile-height: 670px;
    --mob-top: 320px;
}
selector .elementor-widget-wrap,selector .elementor-widget-container,selector .elementor-widget-image,.pepsi-text,selector > .elementor-widget-wrap:before,selector{
    transition: all var(--transition) !important;
}
selector > .elementor-widget-wrap:before{
    content: "";
    background: var(--circle-color);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 20px;
    clip-path: circle(120px at center);
}
selector:hover > .elementor-widget-wrap:before{
    clip-path: circle(400px at center);
    background: var(--content-background);
}
selector:hover .elementor-widget-image{
    right: -200px !important;
}
selector:hover .elementor-widget-image .elementor-widget-container{
    transform: scale(1);
}
selector .pepsi-text{
    opacity: 0;
    visibility: hiddin;
}
selector:hover .pepsi-text{
    opacity: 1;
    visibility: visible;
}
selector:hover .pepsi-text .elementor-widget-wrap{
    margin-left: 0px !important;
}
/*Responsive*/
@media (max-width: 767px) {
selector{
    height: var(--mobile-height);
}  
selector .elementor-widget-image .elementor-widget-container{
    transform: scale(1);
}
selector:hover .elementor-widget-image{
    right: 68px !important;
    top: var(--mob-top) !important;
}
selector:hover .pepsi-text .elementor-widget-wrap{
    margin-top: -265px !important;
}
}

OBS! Om du inte har det här avsnittet måste du gå till Pro-version av Elementor.

Om vi ​​nu vill ta bort bakgrundsfärgen från texten väljer vi vår huvudkolumn och inaktiverar bakgrundsfärgen på fliken Stil.

För närvarande kommer din animation att köras normalt i webbläsaren.

Animation på surfplatta verkar också vara perfekt

Men på smartphone visas det inte normalt. Låt oss lösa det här problemet.

Låt oss visa webbläsaren

I webbläsaren väljer du Sektion (se till att du fortfarande är i smartphone-läge) och sänker Bredd sur 320

Välj sedan huvudkolumnen och i dess flik Avancerad, ställ in alla innermarginaler till 25

I webbläsaren väljer du bilden och i fliken StilKlicka på PX de Bredd och ställ in den på 180.

På fliken advanced du Bildwidget, fortsätt Placeraoch välj absolutI horisontell förskjutning ange 75 och vertikal förskjutning ange 236. Kort sagt, se till att centrera din bild i mitten av cirkeln med hjälp av de olika offseten.

Du kan nu förhandsgranska din animation på olika enheter.

Skaffa Elementor Pro nu!!!

Slutsats

Så ! Det var allt för den här artikeln som visar hur du skapar en animation när du svävar i Elementor. Om du har några funderingar kring hur du tar dig dit vill vi gärna höra från dig 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.

.