Hur man anpassar WordPress för att öka konverteringarna

Hur man anpassar WordPress för att öka konverteringarna

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. 

anpassa WordPress för att öka konverteringarna

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.

anpassa WordPress för att öka konverteringarna

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.

Geofli gratis wp-plugin

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 wp plugin gratis

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.

Adv personalisering wp gratis plugin

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.

I så fall wp gratis plugin

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.

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

Så här installerar du WordPress-plugins

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.

hur man installerar wordpress plugins

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.

hur man installerar wordpress plugins

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

hur man installerar wordpress plugins

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

hur man installerar wordpress plugins

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.

hur man installerar wordpress plugins

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 pluginsGoogle 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 SEODetta 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.
  • AkismetDenna 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.

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

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

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

Mega Menu Divi med bilder

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

Mega Menu Divi med bilder

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:

Mega Menu Divi med bilder

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.

hur man lägger till bilder till en megameny

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

hur man lägger till bilder till en megameny

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%” />
hur man lägger till bilder till en megameny

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"

hur man lägger till bilder till en megameny

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.

hur man lägger till bilder till en megameny

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:

Mega Menu Divi med bilder

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

Mega Menu Divi med bilder

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

.

Hur man lägger till anpassade teckensnitt på en WordPress-webbplats

Hur man lägger till anpassade teckensnitt på en WordPress-webbplats

Vill du lära dig hur man lägger till anpassade typsnitt på en WordPress-webbplats?

Varför göra din blogg tråkig genom att använda vanliga typsnitt? Låt din blogg tala om din livfulla personlighet och de ämnen du tar upp med ett brett utbud av anpassade typsnitt. Anpassade typsnitt är en cool funktion som får din blogg att se ut att föredra framför andra.

Låt möta det; vi alla älskar bloggar och webbplatser med rätt typsnitt. De dekorerar inte bara webbplatsen utan hjälper också till att locka användaren till ditt innehåll. Valet av vanliga WordPress-teckensnitt är dock begränsat och beror på vilket tema du använder. Den goda nyheten är att du kan lägga till dem manuellt eller med specialiserade WordPress-plugins.

Och här uppstår två frågor: var man kan få anpassade typsnitt för WordPress och hur man installerar anpassade typsnitt på din hemsida.

Låt oss ta reda på.

Varför ska jag använda anpassade typsnitt?

De dagar då Times New Roman och Georgia ansågs vara de enda typsnitten för text på webbplatser är förbi. Under de senaste åren har teckensnittsutrymmet förändrats totalt med tillkomsten av typsnitt som t.ex Google Fonts och andra.

Idag finns det hundratals gratis typsnitt, informations- och utbildningshjälpmedel och designresurser tillgängliga på Internet. Till skillnad från Adobe Illustrator, Photoshop och andra klassiska appar ger WordPress dig inte full kontroll över standardteckensnitt. Endast vissa WordPress-teman väljer att stödja och använda anpassade typsnitt.

Därför kommer du i den här artikeln att lära dig hur du hittar lämpliga anpassade typsnitt och använder dem på din WordPress-webbplats.

Vikten av att använda anpassade typsnitt

Varför ändra typsnitt, ordindrag, radavstånd, bokstavsavstånd eller teckensnittsmättnad, undrar du? Det visar dock vissa studier typografi förbättrar läsförståelsen.

Mycket beror på typsnittens konstruktion. På en medveten och undermedveten nivå – alla utvärderar innehållet på en webbsida genom design.

Teckensnittsdesign påverkar läsarna, även om de inte uppmärksammar det. Att ge upp teckensnittsdesign innebär att ge upp utvecklingen i sig! Läsarens humör beror på det. Typsnittet gör det lättare att läsa eller tvingar användare att lämna sidan.

Alla webbläsare inkluderar en uppsättning standardteckensnitt. Det betyder att om typsnittet inte är specificerat i sidans CSS kommer standardversionen att användas. Du kan fortfarande använda standardteckensnitten, men de gör det svårare för användarna. Det är därför det är viktigt att använda ett anpassat typsnitt. Om ditt WordPress-tema inte ger dig alternativ för att ändra typsnittet, finns det massor av webbplatser och verktyg som kan hjälpa.

Alternativ för Google Fonts

lägg till anpassade teckensnitt

Många av er känner till Google-teckensnitt. Det finns många fler webbplatser där du kan hitta vackra typsnitt. Vissa av dem är gratis för personligt bruk. Om du behöver kommersiell användning behöver du en licens. Google Fonts och Adobe Edge Fonts är gratis. Det är därför de inte är så unika.

Här är några andra resurser för att hitta typsnitt för gratis och kommersiellt bruk:

  1. Template — På webbplatsen TemplateMonster hittar du allt du behöver för webbdesign. Det finns också många typsnitt och typsnittspaket för personligt bruk för ett litet pris. Dessutom, För att hjälpa dig att välja, presenteras alla typsnitt på broschyrer eller ramar. Varje typsnitt presenteras också med en kommersiell licens.
  2. MyFonts — MyFonts erbjuder för närvarande det största urvalet av typsnitt i världen. Priserna här ligger dock även i det övre segmentet. Så om du har en stram budget kanske det inte är något för dig.
  3. FontSpring — Fontspring säljer nya typsnitt för kommersiellt bruk. Men i nästan varje familj kan 1-2 gratis typsnitt användas för personliga ändamål. Det finns också en separat sektion med gratis typsnitt. Samlingen är levande. Men du måste noggrant studera licensinformationen för ett visst typsnitt innan du laddar ner.
  4. Cufonfonter — Det är också en enorm samling av olika typsnitt. Välj vilken som helst och du kommer att se en sida med detaljerad information om den. Det finns gott om gratis typsnitt, och de är indelade i enskilda sektioner. Sorteringssystemet på CufonFonts är ganska flexibelt och bekvämt. Webfont-stöd ingår också.
  5. Dafont — Ytterligare en tillgänglig samling med 3 500 gratis typsnitt. De flesta av dem är endast avsedda för personligt bruk. En cool DaFont-funktion är ett kategorisystem. Du kan välja typsnitt i stil med serier, tv-spel, vintage etc….

Valet av typsnitt är väldigt frestande eftersom de alla är vackra. Men man ska inte välja mycket. Använd inte mer än två teckensnitt på en webbplats webb. Då kommer utseendet på din webbplats att vara konsekvent. När du har valt dina teckensnitt, se till att ladda upp filerna för varje stil du kommer att använda (vanlig, fet, kursiv, etc.).

Nu när du har valt rätt typsnitt för din webbplats, låt oss ta reda på hur du lägger till det.

Hur man lägger till anpassade teckensnitt till WordPress

Det finns flera sätt att lägga till teckensnitt på en WordPress-webbplats:

  1. Insticksprogram : i det här fallet används olika WordPress-plugins för att underlätta processen.
  2. manuellt : med den här metoden behöver du ett teckensnitt som laddas ner från webbplatsen och ändra CSS-filen.
  3. Teman: Många populära teman har inbyggda alternativ för att anpassa dina typsnitt (observera att vi inte täcker detta alternativ eftersom processen kommer att variera beroende på vilket tema du använder.

Alternativ 1 – Ändra WordPress-teckensnitt med plugins

Om vi ​​inte bryr oss om globala förändringar kan vi installera WordPress-plugins som kommer att ändra typsnitten på din webbplats.

Funktioner i Custom Font Plugins

Programvara med öppen källkod har en fördel för samhällets intresse, och WordPress har också den fördelen. Flera WordPress-plugins låter dig lägga till anpassade typsnitt. Hur väljer man en lämplig plugin när det finns så många? Vilka funktioner har WordPress-plugins för anpassade teckensnitt?

Här är några punkter att tänka på:

  • Möjlighet att använda ett anpassat typsnitt
  • Möjlighet att använda flera typsnitt
  • Rubriker och målkomponenter
  • Bonus: möjligheten att ändra teckensnittsinställningar från den visuella redigeraren

Det är allt. Den första egenskapen i listan är mycket viktig. Du kan fortfarande ladda ner typsnitt från webbplatser som DaFont, Font Squirrel, etc., men du måste kunna ladda upp dem till WordPress.

Låt oss titta på några plugins för WordPress som låter dig ladda upp anpassade typsnitt.

1. Bättre fantastiskt teckensnitt

Detta WordPress-plugin tillåter sina användare att automatiskt kombinera den senaste versionen av Better Font Awesome-typsnitt med CSS, kortkoder och mer. Dessutom uppdateras detta WordPress-plugin automatiskt.

Bättre typsnitt fantastiskt - bästa WordPress typografi plugins

Du hittar som funktioner: regelbundna uppdateringar, en kortkodgenerator, kompatibilitet med andra WordPress-plugins, etc ...

Ladda ner | demo | webbhotell

2. Google-teckensnitt för WordPress

Detta WordPress-plugin består av 877 specialteckensnitt som gör att du kan använda alla typsnitt på dina WordPress-webbplatser. Tack vare sin förhandsvisning i realtid kan du se hur din webbplats kommer att se ut när teckensnittet används. 

Google fonts - bästa WordPress typografi plugins

Dessutom kan du spara det och redigera det på frontend när du hittar den kombination du kommer att njuta av.

Dess funktioner inkluderar: en förhandsvisning i realtid, a ganska avancerad SEO, flerspråkig support, stöd för mer 870 + Google-teckensnitt, enkla uppdateringar och mer.

Ladda ner | demo | webbhotell

3. Fonts Plugin

Fonts Plugin är ett gratis WordPress-plugin som låter användare komma åt biblioteken Google Fonts och Adobe Fonts. Med detta WordPress-plugin kan du välja bland över 1000 Google- och Adobe-teckensnitt, använda flera typsnitt på din webbplats och testa olika alternativ med pluginens förhandsgranskningsfunktion i realtid i WordPress-anpassaren.

bästa wordpress typografi plugins

För fler sätt att anpassa din webbplatstypografi som teckenstorlek, bokstavsavstånd och radhöjd, kan du uppgradera till premiumversionen, Fonts Plugin Pro.Ladda ner | demo | webbhotell

4. Enkel Google Fonts

Easy Google Fonts är ett av de bästa WordPress-plugin-programmen för att anpassa typografin på din webbplats. Precis som Fonts Plugin låter den dig välja bland hundratals Google Fonts och förhandsgranska dem i Customizer innan du lägger till dem på din webbplats.

10 WordPress typografi-plugins för din blogg

Även om det ger tillgång till ett mindre antal Google Fonts, är det unikt genom att det låter dig skapa anpassade teckensnittskontroller och regler i administratörsområdet, som omedelbart visas i WordPress-anpassaren.

Ladda ner | demo | webbhotell

Alternativ 2 – Installera anpassade WordPress-teckensnitt manuellt

Genom att använda @font-face-direktivet kan du koppla ett eller flera typsnitt till din webbplats. Men denna metod har sina för- och nackdelar.

fördelar:

  • Tack vare CSS kan du ansluta teckensnitt i alla format: ttf, otf, woff, svg.
  • Teckensnittsfiler kommer att finnas på din server – du är inte beroende av tredjepartstjänster.

nackdelar :

  • För korrekt teckensnittsanslutning för varje stil måste du registrera en separat kod.
  • Utan att känna till CSS kan du lätt bli förvirrad.

Men det är inte ett riktigt problem om du kan bara kopiera en färdig kod och där du behöver ange dina värden.

Remarque : Innan du börjar, se till att göra det skapa ett barntema för din webbplats. På så sätt kan du göra alla ändringar i ditt barntema och lämna ditt huvudtema så att du enkelt kan uppdatera det om det skulle behövas i framtiden.

Steg 1: Skapa en "fonts"-mapp

I ditt barntema skapar du en ny "fonts"-mapp under: wp-content/themes/ditt-barn-tema/fonter

Steg 2. Ladda upp de nedladdade teckensnittsfilerna till din webbplats

Detta kan göras via din värdkontrollpanel eller via FTP.

Lägg till alla teckensnittsfiler i den nyligen tillagda teckensnittsmappen: wp-content/themes/ Skapa en ny "fonts"-mapp i ditt barntema under: wp-content/themes/ditt-barn-tema/fonter som du skapade.

Steg 3. Importera teckensnitt via stilmall för underordnade tema

Öppna filen style.css av ditt barntema och lägg till följande kod i början av CSS-filen (efter kommentaren om barnetema):

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

var MyWebFont är namnet på teckensnittet och värdet på egenskapen src (data inom parentes inom citattecken) är deras plats (relativa länkar). Vi måste specificera varje stil separat.

Eftersom vi ansluter den normala stilen först, ställer vi in ​​egenskaperna för teckensnittsvikt och typsnittsstil till normal.

Steg 4. När du lägger till kursiv, skriv följande:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

När allt är sig likt är vi de enda som bifogar egenskapen typsnittsstil till kursiv stil.

Steg 5. Lägg till följande kod för att lägga till det fetstilta teckensnittet:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

Där vi ställer in egenskapen font-weight till fetstil.

Kom ihåg att ange rätt plats för teckensnittsfilerna för varje stil.

Steg 6. För att ansluta fet kursiv stil, skriv följande:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

Tja, det är det. Nu när du har kopplat fyra teckensnittsstilar till din webbplats.

Men det finns en anmärkning: den här teckensnittsanslutningen kommer inte att visas korrekt i Internet Explorer 8. Trösten är att det är väldigt få som fortfarande använder IE8.

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.

Slutsats

Vad är det första användarna lägger märke till när de besöker din webbplats? Det stämmer, dess design! Det mesta av designen bygger på korrekt användning av vackra typsnitt. Så du måste ta hand om din webbplats teckensnittsdesign. Lägg till kod eller använd en av plugins som nämns ovan för att bädda in en ny typsnittsstil. Hur du väljer det är upp till dig.

Se till att du inte använder mer än två teckensnitt på samma webbplats. Eftersom ju fler anpassade typsnitt du lägger till på webbplatsen, desto mer kommer webbplatshastigheten att sjunka.

Det är det för den här artikeln som visar hur du lägger till anpassade typsnitt på en WordPress-webbplats. Vi inbjuder dig att prova. Om du har några funderingar eller förslag, vänligen meddela oss inom detta område 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.   

.  

Hur man förbereder en webbplats för Facebook Instant Articles

Hur man förbereder en webbplats för Facebook Instant Articles

I den här handledningen visar vi dig hur du förbereder din WordPress-webbplats för programmet Facebook Instant Articles.

Med programmet Facebook-artiklar omedelbart öppet för alla för innehållsredigerare den 12 april 2016, måste du förbereda din WordPress-blogg för att publicera direkt på Facebook med några taggar.

Över en miljard människor loggar in på Facebook från en mobil enhet varje månad, och prestanda för innehåll som visas med Facebooks mobilapp är viktigare än någonsin. Facebook lanserade Instant Articles i maj 2015 som ett sätt att påskynda leverans av innehåll och leverera den typ av uppslukande upplevelse som användare av mobilappar förväntar sig.

Till en början var programmet begränsat till en utvald grupp av välkända förlag som BuzzFeed, New York Times och BBC News. I april 2016 är programmet dock öppet för alla innehållsredigerare.

Facebook skapar en "Instant Article" när ett korrekt formaterat RSS-flöde är associerat med en godkänd Facebook-sida med Facebooks Business Manager. Förläggare måste ansöka om att få delta i programmet och när de väl har godkänts kommer de att kunna anpassa utseendet och beteendet för Instant Articles.

Om din organisation är aktiv på Facebook och får en betydande mängd trafik från innehåll som delas på det sociala nätverket är det nu möjligt att konfigurera din webbplats för att skapa ett korrekt formaterat RSS-flöde. Att gå med i Facebooks Instant Articles-program är dock inte så enkelt som du kanske tror.

Men innan du börjar, ta dig tid att titta på Hur man installerar en Wordpress temaHur många insticksprogram ska jag installera på Wordpress.

Låt oss börja arbeta!

Vad gör innehållet när du går med i programmet?

Innehållsförläggare som deltar i programmet får stor kontroll över hur deras innehåll visas i Facebook-appen. Förlag kan också sälja annonsutrymme i Instant Articles och behålla 100% eller 70% av annonsintäkterna beroende på om utgivaren eller Facebook säljer utrymmet.

Större kontroll över UX och ökade intäkter är de två motiverna, men den största anledningen till att du behöver gå med i programmet är att Facebook-användare upplever bättre med Instant Articles.

Se även vår handledning om: Hur man skapar en Facebook Pixel kampanj för Wordpress

Facebook hävdar att Instant Articles laddas tio gånger snabbare än vanligt mobilt webbinnehåll, ett påstående som inte har bekräftats oberoende. Instant Articles revolutionerar också genom att använda hela det tillgängliga fönstret på den mobila enheten, vilket gör Instant Articles mycket mer uppslukande än innehåll som visas i en webbläsare.

Vem ska delta i programmet Snabb Items Facebook?

Detta program designades för innehållsredaktörer och andra organisationer som publicerar innehåll regelbundet. I verkligheten kan författare inte gå med i programmet förrän de har minst 50 artiklar redo för granskning. Om din organisation har mer än 50 artiklar kan du överväga att prenumerera på programmet.

Hur man förbereder sig för omedelbara artiklar

Ladda upp dina artiklar till Facebook Är snabba artiklar lika enkla som att installera ett plugin?

Ja och nej.

Att gå med i programmet är en process i 11-steg.

Facebook har försökt göra saker mycket enklare genom att skapa en guide som leder dig genom hela processen, men först kan du börja med att skicka in din organisation för att godkännas av Facebook. Du kan inte ansöka om att gå med i programmet före april, men du kan säga det Facebook att du är intresserad av programmet, vilket antagligen innebär att de kommer att meddela dig när programmet blir tillgängligt.

För tillfället är här 3 saker du behöver göra för att vara redo när programmet faktiskt kommer att lanseras för alla förlag (författare).

Guiden i 4 steg för att bygga din auktoritet genom din blogg Ta reda på det genom att läsa den här artikeln.

Steg ett: Se till att du har en effektiv närvaro på Facebook

Närvaron av din organisation på Facebook och din kännedom om plattformen måste vara effektiv.

Först måste du se till att din organisation har en sida och att du är administratör eller redaktör. Du kan också behöva skapa ett företagskonto med företagets kontohanterare, om din organisation inte har en sida kan du lägga till en sida i ditt konto och lägga till andra medlemmar i din organisation på din sida med företagskontohanteraren.

Direktartiklar hanteras direkt från företagets kontohanteringsgränssnitt, så du måste komma ihåg att konfigurera ditt företagskonto så att du inte behöver göra det senare.

Om du inte använder den kan du ladda ner appen Facebook Pages. Du hittar den på app Store för att använda den på iPhone eller iPad eller på Google Play Store. Du behöver den här appen för att förhandsgranska Instant Articles. Du kan testa funktionen för att se hur den fungerar.

Steg 2: Bygg din RSS för Instant artiklar

Direktartiklar samlas på Facebook med HTML-innehåll som importeras från RSS-flöde formaterat på ett specifikt sätt. För att integrera din webbplats med Instant Articles måste du skapa ett särskilt formaterat RSS-flöde, här är ett plugin du kan använda för det.

Plugin skapat i samarbete med Automattic et avkoda, kan eventuellt läggas till den officiella WordPress-plugin-katalogen. För tillfället kan du bara ladda ner plugin direkt från Github.

fb-artiklar plugin på github

Plugin kommer att laddas ner i ZIP-format och du har två alternativ att installera plugin:

  1. Du kan installera plugin direkt från WordPress-instrumentpanelen med ZIP-filen.
  2. du kan extrahera plugin via en FTP-klient och skicka den direkt till / wp-content / plugins / mappen från din WordPress-installation.

När du har aktiverat plugin kan du komma åt RSS-flödet för din blogg genom att följa följande sökväg:

http://votresite.com/feed/instant-articles.

omedelbara-objekt-foder

Om du har ett nätverk med flera platser kommer plugin att skapa ett RSS-flöde för varje webbplats  "Auto-magiskt". Du kan testa detta genom att skapa ett nätverk för flera platser och besöka URL: en för att bekräfta att allt fungerar normalt.

omedelbara-objekt-multi-feed

För tillfället kommer ingen administrationspanel att installeras av plugin-programmet. Medan readme.txt-filen på Github anger att filter kan användas för att manipulera det som visas i RSS-flödet, har inga instruktioner tillhandahållits och implementeringen av filtren har tillhandahållits och kräver manuell redigering av filerna. . Dessutom nämner anteckningarna att filtren kan förändras över tiden. Vi rekommenderar att du använder standardflödet.

Upptäck också Hur man lägger till ett Facebook-liknande nyhetsflöde på WordPress

Sedan kan du gå vidare och ändra webbadressen genom vilken du vill att funktionen Instant Article ska genereras. För att göra detta måste du öppna filen som heter "facebook-instant-articles.php" och hitta konstanten "INSTANT_ARTICLES_SLUG". I version 0.1 av plugin-programmet finns det i rad 18. Du kan sedan ta bort "snabbartiklar" och infoga den snigel du vill använda.

redigera RSS-flöde slug - Instant Articles

Glöm inte att göra en säkerhetskopia av den här filen på din dator för att återställa filen om ett problem uppstår.

När du har gjort alla nödvändiga ändringar kan du gå till inställningar> Permalänkar. Detta uppdaterar omskrivningsreglerna och den nya snigeln träder i kraft. Nu kanske du kan hitta din webbadress för snabb artikel.

ström url ändrades

Steg 3: Prenumerera på programmet och följ stegen

Nästa steg är att vänta på att Facebook officiellt startar programmet. Om du är en organisation och är intresserad av programmet kan du berätta för honom om Facebook.

Du kan ta dig tid att kolla in den kommande guiden som Facebook har satt ihop. Detta kommer att förbereda dig för att vara redo när programmet blir tillgängligt.

Steg 4: Begränsa flödet till objekt som inte är äldre än 24 timmar

Du kommer bara att göra detta när du har blivit godkänd för programmet.

När du registrerar dig för programmet Instant Articles vill Facebook se minst 50 artiklar i ditt RSS-flöde. När ditt RSS-flöde importeras för första gången kommer Facebook dock att ignorera artiklar som inte har uppdaterats under det senaste dygnet. Av denna anledning, när din organisation läggs till i programmet och ditt flöde importeras, kommer du att kunna ändra flödet att endast inkludera objekt som har ändrats under det senaste dygnet.

För att göra denna ändring måste du ladda ner en kopia av filen “facebook-instant-articles.php” som du kan återställa om något inte fungerar normalt. I denna kopia måste du definiera en konstant "INSTANT_ARTICLES_LIMIT_POSTS" till "true". Det kommer troligen att vara mer meningsfullt om du lägger till denna konstant strax före "if" -villkoret för att definiera huruvida flödet kommer att vara begränsat eller inte. I version 0.1 av pluginet hittar du detta på rad 150.

begränsa rss-flödet till 24 timmar - Instant Facebook Articles

Allt du behöver göra nu är spara dina ändringaroch få tillgång till ditt RSS-flöde. Du kommer att kunna se begränsade artiklar som uppdaterades för 24 timmar sedan.

Kom ihåg att din organisation inte kommer att godkännas om du inte har mer än 50 färdiga artiklar. Så begränsa inte ditt flöde förrän din organisation accepteras i programmet och ditt flöde importeras av Facebook.

Behöver din webbplats en sida med tjänstevillkor? Ta reda på det genom att läsa den här artikeln.

Som du kan se är det inte för alla att gå med i programmet. Och för dem som verkligen är intresserade av SERVICEmåste de mobilisera några ansträngningar för att uppnå sina mål.

Upptäck också några premium WordPress-plugins  

Du kan använda andra WordPress-plugins för att ge ett modernt utseende och optimera greppet på din blogg eller webbplats.

Vi erbjuder dig här några premium WordPress-plugins som hjälper dig att göra det.

1. ARPrice

ARPrice är den mest flexibla och kompletta WordPress premium-plugin för att skapa prisnät. Den innehåller mer än 300 prisnätmodeller och ger alla verktyg du behöver för att skapa unika och lyhörda prisnät samt jämförelsetabeller. Du kan också enkelt skapa en vacker showcase för ditt team.

ARPrice Responsive WordPress Prissättningstabell-plugin

Det är en vacker, intuitiv och unik WordPress-plugin, med sin imponerande visuella redigerare, med realtidsförhandsvisning av anpassningar.

Se också Hur att ta ut en tjänst på din blogg?

Välj en mall och sedan med enkla klick, dra och släpp verktyg för att anpassa ditt prisnät, till minsta detalj. Du kommer att kunna lägga till ett obegränsat antal kolumner, ändra färger, teckensnitt, ikoner och lägga till dina egna bilder och band för meddela en rabatt, Till exempel.

Ladda ner demo | webbhotell

2. PrivateContent

PrivateContent är en kraftfull men ändå lättanvänd lösning för att skapa en riktig registreringsnivå på flera nivåer. Det är en plugin som är kompatibel med den nya europeiska lagstiftningen om skydd av användardata.

PrivateContent-plugin för flera nivåer

Liksom de flesta plugins i den här listan kommer det med en hel mängd fullständiga funktioner som bara väntar på att du ska installera den.

Titta också på Fem smartphone-appar för att skydda dina bilder och videor

Skydda ditt innehåll med detta premium WordPress-plugin och låt prenumeranter komma åt det baserat på den roll eller status de har. Dessutom är det en av de mest sålda pluginsna i denna nisch, och en som förtjänar särskild uppmärksamhet från dig.

Ladda ner | demo | webbhotell

3. WooCommerce Relaterade produkter Slider

plugin WooCommerce Relaterade produkter Slider är ett WordPress-plugin som används för att visa produkter associerade med vackra effekter. Liknande produkter kommer från samma kategori eller samma etikett.

WooCommerce-relaterade produkter Slider - Instant Articles

Detta plugin har några ytterligare alternativ som gör det möjligt för användaren att visa plugin på olika positioner på produktdetaljsidan, användaren kommer att kunna visa upp till 50 produkter i reglaget, anpassa reglaget för utseende och utseende.

Se även vår artikel om 5 WordPress-plugins för att skapa prisnät

Men innan du installerar detta plugin är det viktigt att notera att du måste ha installera WooCommerce i förväg.

Ladda ner | demo | webbhotell

Rekommenderade resurser

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

Slutsats

Här! Det är det för denna handledning, jag hoppas att det hjälper dig att förbereda din webbplats för Facebook Instants-artiklar. Tveka inte att dela med dina vänner på dina favorit sociala nätverk

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 blog skapelse.

Om du har förslag eller kommentarer, lämna dem i vårt avsnitt commentaires.

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

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

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.

skapa svävaranimationer i Elementor

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

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

skapa svävaranimationer i Elementor

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

skapa svävaranimationer i Elementor

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.

skapa svävaranimationer i Elementor

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.

skapa svävaranimationer i Elementor

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

skapa svävaranimationer i Elementor

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.

skapa svävaranimationer i Elementor

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

skapa svävaranimationer i Elementor

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)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

skapa svävaranimationer i Elementor

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.

skapa svävaranimationer i Elementor

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.

.