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

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

Med tanke på den ökande användningen av mobila terminaler sedan slutet av april 2015 har Google straffat webbplatser vars sidor inte är redo för mobil. Följaktligen, för din SEO, måste du se till att din webbplats visas anständigt på stora skärmar såväl som på mindre.

I den här artikeln visar jag dig hur du kan sätta din webbplats på sidan med regeln @media av CSS3.

Det är viktigt att notera att termerna "lyhörd" och "mobilkompatibel" ofta används omväxlande trots skillnaden i deras verkliga betydelse. Att förstå vad var och en betyder är viktigt för att kunna säkerställa att din webbplats uppfyller nödvändiga kriterier för att passa alla skärmstorlekar.

Men tidigare, om du aldrig har installerat WordPress-upptäckt Hur man installerar en Wordpress blogg i fyra steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg 

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

Responsiv och mobilkompatibel

Webbplatser som inte är det varken lyhörd eller mobilkompatibel, visas identiskt på alla skärmar, dvs. versionen för stora skärmar visas överallt. På mindre skärmar måste du rulla sidan horisontellt för att se allt innehåll. De är svåra att navigera på på dessa skärmar. 

Upptäck också dessa 8 WordPress plugins för att anpassa utseendet på din webbplats

En webbplats är Mobile kompatibel när det bara uppfyller det strikta minimum som ska ses på mobilen, vilket inte gör det till en lyhörd webbplats. Till exempel kan en webbplats anses vara mobilkompatibel om du inte behöver navigera horisontellt. Detta gör att dess element blir små och oskiljbara. Du måste sedan zooma in för att läsa dess innehåll.

På deras sida webbplatserna mottaglig anpassa sig perfekt till olika skärmstorlekar. De omdefinierar sina element så att de lätt kan ses och användas på de minsta skärmarna. Det här är den typ av design du vill ha för din webbplats.

Se även vår 10 WordPress plugins för att skapa en bokningsformulär på din webbplats

Nu vet du skillnaden mellan lyhörd och kompatibel mobil. Vi kommer nu att se regeln @media av CSS3 som låter dig uppdatera din webbplats för responsiv eller att skapa ganska enkelt WordPress-teman med responsivt innehåll.

Regeln @media från CSS3

För att göra ditt tema lyhörd behöver du regeln @media av CSS3. I grund och botten kan du definiera de stilar du vill använda för en viss typ (storlek) av skärmen. Du använder den som en annan CSS-regel (med hängslen) med den enda skillnaden att den överlappar andra CSS-regler.

@media mediatyp (uttryck) {css-test-väljare {property1: value1; fastighet2: värde2; }}

I denna struktur elementen inuti regeln @ media funktion endast när typ-av-media anges för att ha upptäckts framgångsrikt. Den typ av media som väljs, du kan ange egenskaperna i form av dimensioner.

Upptäck Hur man använder gränssnitt och användarupplevelse på WordPress

Regeln @media upptäcker för dig vilken typ av skärm som din webbplats besöks med och väljer de regler som bäst passar den här typen av skärm. Alla större webbläsare har redan integrerat regeln @media.

Här är listan för din information: krom , Safari, firefox, IE, Fungera et kant.

Skapa enkelt din webbplats med Elementor

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

Definiera målskärmarna

Om du vill ändra en Wordpress tema befintlig, gör en säkerhetskopia av CSS för den senare för att kunna gå tillbaka om det behövs.

Läs också vår artikel om Hur du gradvis laddar Facebook- och Disqus-kommentarer

Som vi har sett i dess struktur måste du vidarebefordra för att definiera skärmtypen @media vilken typ av skärm du riktar dig till. Här är listan över de olika typerna av skärm:

- alla : för alla typer av skärmar eller för de dimensioner som anges i Uttrycket
- screen : för alla skärmar, antingen mobil, surfplatta, bärbar dator eller skrivbord
- skriv ut : för skrivare, om du vill ha vissa stilar för sidorna som kan skrivas ut
- tal : för skärmläsare, om du vill ha stilar för synskadade.

Det finns också operatörer som du kan lägga före skärmtypen; som inte för att visa stilar för skärmar som är av annan typ än den som anges eller endast för att bara använda stilar på angivna skärmar. Du kan därför ha:

@media endast skärm

Definiera stilar för skärmdimensioner

Du kan använda Uttrycket för att ge mer information om skärmens egenskaper. Efter @media ange och följt av uttrycket. Om du använder mer än ett uttryck bör de alla separeras av och. Här är ett exempel på strukturen:

@media endast skärm och (max-bredd: 640px) {selector-css-exempel {/ * Din vanliga CSS här * /}}

I det här exemplet använder jag max-bredd med ett värde av 640px. Detta för att ställa in en maximal skärmbredd på storleken på en iPhone eller en liten Android-smartphone. Med denna typ av struktur har du kontroll över hur din webbplats ser ut på olika enheter. Här är en lista över egenskaper relaterade till dimensioner som du kan använda i Uttrycket :

Upptäck också vår 8 SEO WordPress plugins för att optimera SEO på din webbplats

- mi-bredd et max-bredd : respektive den lägsta och högsta bredden som krävs för visning av stilar som ingår i regeln @media. Ytterligare en pixel och stilar visas inte.

- mi-höjd et max-höjd : respektive den lägsta och högsta höjd som krävs för att visa stilarna i regeln @media. Eftersom de flesta skärmar är utformade för att rulla upp sidor vertikalt, egenskaper min-höjd et max-höjd är lite använda.

Här är en lista över skärmstorlekar för vissa terminaler:

- IPhone: 640px
- IPad: 1024px
- Tabletter: 1366 pixlar
- Android-smartphone: 640 pixlar, 720 pixlar, 854 pixlar, 960 pixlar
- Android extra stor: 1024px, 1066px
- Windows-telefon: 480
- Windows-telefon stor: 768 pixlar
- unga och gamla: 320 pixlar
- Ultrabook / bärbara datorer: 1366px
- Stationära och TV-apparater: 1920 pixlar

Det finns många andra egenskaper du kan använda i Uttrycket. Om du till exempel riktar dig mot stationära datorer eller TV-skärmar som kan visa bilder i bildförhållandet 16: 9 kan du använda en sådan struktur:

@media endast skärm och (min-bredd: 1920 pixlar) och (enhet-bildförhållande: 16/9) {selector-css-exempel {/ * Din vanliga CSS här * /}}

 För mer kompletta listor och exempel, kontakta w3schools et Mozilla Developpers.

Testa din känsliga funktionalitet på din webbplats

När du modifierar eller bygger din Wordpress tema eller i slutet om du gillar överraskningar måste du testa resultatet för att se om det äntligen är responsivt. Kom ihåg att Google tittar efter webbplatser som inte är responsiva.

Se även dessa 10 WordPress plugins för att skapa flikar på din blogg

Upptäck de bästa verktygen för din webbplats

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

Om du inte har alla mobila enheter som du riktar dig mot finns det (lyckligtvis för våra börser) ett stort antal verktyg för att se hur din webbplats anpassar sig till de olika skärmarna.

Direkt i webbläsaren på din dator kan du använda Window Browser Extension, ResponsiveResize, ResizeMe ou Firesizer. Nedan visas en bild av BlogPasCher i Responsiv designvy som levereras som standard med Firefox.

Det finns också webbplatser avsedda för uppgiften:

Responsivepx

Denna webbplats har det speciella att låta dig själv välja skärmens mått. Observera att den här webbplatsen laddar din i en ram. Så om ditt WordPress-tema var utformat för att inte visas i en ram, är det mycket möjligt att det senare inte visas här.

IPad Peek

https://blogpascher.com/wp-admin/post.php?post=60969&action=edit

Denna webbplats är användbar för att testa din webbplats på de senaste Apple-, iPad- och iPhone-enheterna. Ange bara din URL. Observera att den är föremål för samma ramproblem som responsivepx.

Mobiltelefon Emulator

På den här webbplatsen kan du testa din på små skärmar och på äldre modeller av telefoner som du väljer på höger sida av skärmen. Du kan också konfigurera vissa skärmegenskaper.

Google Mobile Friendly test

Över 11 miljoner verktyg att ladda ner

Envato Elements erbjuder de bästa resurserna för att skapa och utveckla alla aspekter av din webbplats. Du hittar miljontals WordPress-mallar, grafik, ljudresurser och mycket mer. Perfekt för nybörjare.

Detta är ett av de viktigaste testerna, om inte det viktigaste. Ange bara din adress i fältet och klicka på Analysera för att starta testet. Efter testet visar verktyget en rapport och en poäng. Om testet är positivt kommer du inte att bestraffas av Google, desto bättre.

Om du inte är utvecklare rekommenderar jag dig en lista med lyhörda WordPress-teman till att börja med.

Rekommenderade resurser

Upptäck även andra rekommenderade resurser som hjälper dig att bättre locka dina partners och prenumeranter, men också för att förbättra säkerheten på din webbplats.

Slutsats

Här! du vet allt som finns att veta om hur du gör din webbplats eller WordPress-tema lyhörd med regeln @media av CSS3. Om vi ​​saknade ett WordPress-tema som du älskar eller som du föredrar, vänligen lämna en länk i avsnittet commentaires nedan.

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.

Vi inbjuder dig också till dela på dina olika sociala nätverk.

.

%d bloggare gillar denna sida: