hur man bygger en WordPress-webbplats 2021 i 6 steg. En A till Z-Guide

 hur man bygger en WordPress-webbplats 2021

Tillbaka 2017 fanns det en möjlighet hos företaget jag arbetade med att lära mig webbdesign.

jag började lära mig HTML, CSS och Javascript. Jag gillade det ganska mycket. Tills jag stötte på mina första buggar. Senare fick jag ett sidoprojekt: en faktisk webbplats. Jag var glad, mina kollegor var där för mig när jag bad om hjälp.

några månader senare arbetade jag på ett pro-bono WordPress-uppdrag för en icke-statlig organisation.

Låt mig säga att vi var på resemarknaden och jag gjorde marknadsföring. Men det fanns denna kultur för att ge människor möjlighet att lära sig nya färdigheter.

jag är DIY-typen och insåg att inlärningskurvan för inlärningskod är mycket längre än väntat. Med WordPress fungerade saker annorlunda.

Snabbspolning framåt, 2020 slutade jag arbeta för Colibri makers, Colibri är en populär WordPress dra och släpp sidbyggare.

det är så enkelt idag med sådana verktyg. WordPress kan verkligen ge människor möjlighet att bygga en webbplats från början på nolltid. Och inspiration för webbplatser är bara … över hela internet.

nu, här är steg:

  1. Välj ditt domännamn
  2. skaffa webbhotell
  3. bekanta dig med WordPress-gränssnittet
  4. installera ett WordPress-tema
  5. Bygg din WordPress-webbplats
  6. installera viktiga WordPress-plugins

för att ha några steg ain inte tillräckligt för att ha en supercalifragilisticexpialidocious webbplats, Jag har en bonus för dig i slutet av guiden: UX design tips och tricks.

men innan jag hoppar in i ämnet vill jag skina ett ljus på ett annat ämne. Det tar inte lång tid, jag lovar.

hur mycket kostar en WordPress-webbplats?

om vi ska göra en kostnadsfördelning för en WordPress-webbplats, här är vad vi bör inkludera:

  • att köpa en domän: priserna kan börja på $15/år
  • Hosting förvärv: priserna börjar så lågt som $8 / år
  • WordPress tema. Beroende på anpassningsnivåerna och hur många funktioner du vill inkludera kan du börja med $0. Om du inte vill nöja dig med en grundläggande webbplats kretsar årliga WordPress-temaplaner runt $70.
  • WordPress plugins. Många av dem är gratis, men om du vill ha avancerade alternativ måste du uppgradera till en betalningsplan.

det betyder att den mest grundläggande webbplatsen börjar från $23/år. I det ögonblick du vill ha avancerade temafunktioner kommer kostnaden att stiga till cirka $100 / år.

när du uppgraderar plugins kan du sluta betala runt $200-500 per år.

om du vill ha något skräddarsytt, och du måste ringa in en WordPress-utvecklare, kan kostnaderna gå över $1000 under det första året.

för nätbutiker, kostnaderna kan öka avsevärt, eftersom du behöver massor av funktioner, och prestanda och säkerhet är top of mind.

nu när vi rensar ut detta är det dags att gå till botten med vårt ämne idag: hur man skapar en WordPress-webbplats 2021.

Välj ditt domännamn

 välj din webbplats domännamn

källa: https://unsplash.com/photos/N1XUwR8iOf0

om du inte visste det ännu är domännamnet ditt företagsnamn eller produktnamn. Namn kan vara riktigt kraftfulla, så var inte hastig när du väljer ditt domännamn. Om du känner att du får kalla fötter, oroa dig inte, det finns verktyg där ute som kan hjälpa dig.

Tips och tricks för webbplatsdomännamn att välja

jag gjorde lite brainstorming för en webbplatsdomän för ett företag för ett tag sedan och insåg att ”Wazz” lät ganska intressant. Det är kort, lätt att komma ihåg. Men det ögonblick jag googlade det, ja….låt mig säga, jag brast i skratt. I brittisk slang menade det”urinering”. Verkligen folk, gör din forskning.

senare ville jag namnge min fotografiwebbplats. Jag analyserade”moonshine”. Det kändes så trevligt, romantiskt, sagolikt … förutom att det inte var det.det verkar som om det betydde ”olagligt destillerad eller smugglad alkohol”.

så se till att din namngivning är unik, minnesvärd och inte har någon konstig betydelse på engelska eller ett annat populärt språk (t.ex. spanska) om du vill gå internationellt. Om du är ett lokalt företag kan du hoppa över det här.

Låt oss nu titta lite på en liten checklista för att välja ett domännamn för din WordPress-webbplats:

  • gör en lista med relevanta nyckelord för ditt företag/produkt. Tänk på hur användarna ska känna efter att ha använt produkten. Låt oss säga att du har en hudproduktlinje baserad på naturliga ingredienser. Din lista kan innehålla ord som” hud”,” vård”,” säker”,” naturlig”,” vacker”,” fräsch ” etc. Använd ett verktyg som Namelix eller Novanym för att skapa domännamn.
  • kontrollera betydelsen av ditt nyfunna domännamn. Jag googlar alltid det så här ”{infoga namn här} mening”. Jag kommer att sluta med ordboksförklaringar. Därefter går jag till Google bilder och ser hur det matchas. Kanske finns det en sångare med det namnet, en manga tecknad namn, etc. Om så är fallet måste du göra om processen.
  • leta efter domännamnet på Facebook eller LinkedIn för att se om det finns en företagssida med det namnet.
  • kontrollera om det finns en webbplatsdomän tillgänglig för försäljning. För många webbplatser är ”.com” den bästa toppdomänen (TLD), följt av ”.org”,”. net” eller”. Io”.
  • Köp ditt domännamn. Du kan göra det via en domänregistrator som GoDaddy eller via din webbhotell.

och detta leder oss till vårt nästa kapitel.

skaffa webbhotell

varje webbplats du någonsin har besökt är värd på en server. Detta innebär att du måste skaffa webbhotell från en webbhotell.

med tanke på att vi bygger en WordPress-webbplats kan du välja en värdplan från WordPress.com eller någon annan tredjepartsleverantör.

Låt mig rensa något innan vi fortsätter. Det finns wordpress.com och wordpress.org. skillnaden är att på WordPress.com du kan vara värd och bygga en webbplats. Från WordPress.org du förvärvar vanligtvis teman och plugins för din webbplats, som är värd någon annanstans. Du kan jämföra WordPres.com planer här.

denna guide hypotes är att du verkligen vill bygga ett varumärke och ha full kontroll över din webbplats. Det betyder att du går till en tredjepartsleverantör.

det finns tre huvudsakliga värdtjänster: delad hosting, VPS och hanterad hosting. I den första situationen delas serverresurserna mellan fler webbplatser. På lång sikt, om dessa webbplatser växer, och din också, kan du stöta på prestandaproblem. Du kanske inser att du behöver en VPS-tjänst eller en hanterad värdplan.

så du måste ha detta i åtanke när du väljer en webbhotell: vilka är dina affärsmål?

om du går med VPS hosting kommer resurser fortfarande att delas, men du får viss kontroll över dem. Du kommer också att se förbättringar när det gäller säkerhet och prestanda.

Managed hosting är en typ av tjänst som heter” Baccarat la carte”. Du får din egen fysiska server allt för dig själv, och du kommer att se en ökning av prestanda och säkerhet.

definitivt kan saker bli mer komplicerade än detta, men jag ville bara måla den stora bilden av värd.

Nästa, när du analyserar planerna, ta en närmare titt på:

  • prissättning
  • Lagring
  • Support
  • prestanda

vissa webbhotell har några extra funktioner packade som domänutbud (t.ex.: Namecheap), webbplatsbyggare (t. ex.: GoDaddy), e-handelsalternativ etc.

nu har du förmodligen märkt några webbplatser som använder ”HTTP” eller ”HTTPS”. Vad är det med dem?

HTTP är grunden för den moderna webben. Den ansluter webbläsare och servrar, och fungerar på begäran-svar basis. Nu betyder extra ” s ” att anslutningen till webbplatsen är krypterad och data som delas med webbplatsen är säker.

låt oss säga att en användare gör en betalning på din webbplats eller loggar in på ett konto. Informationen som användaren skriver in kommer att vara privat. Säker från hacking. Detta händer genom SSL-tekniken, som står för ”Secure Sockets Layer.”För konsumenter ser” HTTPS ” signaler förtroende, eftersom du kan skydda deras data och integritet. Detta innebär att du måste skaffa ett SSL-certifikat.

se till att din valda plan innehåller detta också.

i det ögonblick du förvärvar din värdplan, och du har ställt in dina inloggningsuppgifter, kommer den enda saknade delen att vara WordPress själv. De flesta webbhotell där ute låter dig installera WordPress från deras instrumentpanel/guide. Det är allt ganska intuitivt.

Hur loggar du in på din webbplats? Lätt peasy. Skriv bara in webbläsaren din webbplatsadress och Lägg till den ”/wp-admin”, enligt nedan.

wp admin

bekanta dig med WordPress-gränssnittet

WordPress-instrumentpanelen har 9 avsnitt. Låt oss ta en titt på dem.

WordPress-inställningar

WordPress Allmänna inställningar

inuti det här avsnittet finns det 7 fler menyalternativ. Jag beskriver kortfattat de viktigaste sakerna som behöver göras här.

  • Under ”Allmänt” kan du ställa in webbplatsens titel, tagline, URL, tidszon, tid & datumformat och språk.
  • Under ”läsning” kommer du att ”berätta”WordPress vilken sida fungerar som Hemsida, och vilken är din ”blogg”. Detta är ett viktigt steg. Du väljer också hur många blogginlägg som kan visas på en sida eller om du vill att din webbplats ska indexeras av Google.
  • Under ”diskussion” du kommer att göra bloggen kommentarer setup.
  • inuti ”Media” kan du fastställa de maximala dimensionerna i pixlar som ska användas när du lägger till en bild i mediebiblioteket.
  • inuti” permalänkar ” ställer du in formatet på dina webbadresser.
  • du kan definiera dina sekretesspolicysidor i ”Sekretess”.

det bästa sättet att närma sig panelen ”Inställningar” är att ange alla dessa objekt och fylla i den saknade informationen, bara för att se till att du inte hoppar över något viktigt. Saker är ganska enkla, så få inte kalla fötter. Alla inställningar kan göras på mindre än 30 minuter.

WordPress-sidor och inlägg

vad du behöver veta är att ditt innehåll kommer att gå in i ”sidor” eller ”inlägg”. Här spenderar du 95% av din tid.

”sidorna” är statiska. Du kan ha en” hemsida”,” tjänster ”sida,” kontakta oss ” sida, du får poängen. Under inlägg kan du ha dina senaste bloggartiklar, kanske din portfölj. Det här är dynamiska sidor eftersom de automatiskt placerar ditt senaste webbplatsinnehåll högst upp.

 WordPress dashboard-inlägg och sidor

när du väljer ”inlägg” från instrumentpanelen kan du skapa ett inlägg, visualisera alla inlägg och hantera taggar och kategorier.

WordPress dashboard-inlägg

du kan skapa ett nytt inlägg om du väljer ”Lägg till nytt” enligt ovan, eller gå till ”alla inlägg” och välj sedan ”Lägg till nytt”.

Lägg till nya WordPress-inlägg

samma fungerar för sidor.
vad du ser i dina ”alla sidor” eller ”alla inlägg” är några standardsidor och inlägg som distribueras av ditt tema.

redigera en sida i WordPress

nu, hur kan du redigera ett inlägg eller en sida?

när du håller muspekaren över dina standardsidor och inlägg ser du några alternativ: Redigera, snabbredigera, papperskorgen, visa. I skärmdumpen ovan finns också”redigera i Colibri”. Detta beror på att vi installerade ett plugin som låter dig anpassa sidor med Colibri WordPress builder (men vi pratar lite senare om detta).

WordPress media

alla dina media går in här: bilder och videor. Du kan dra och släppa dem eller ladda upp dem.

WordPress dashboard - Media library

du kan också lägga till media från ditt inlägg/sida nivå. Jag ska visa dig mer om ämnet senare.

WordPress kommentarer

den 4: e instrumentpanelen avsnittet kallas ”kommentarer”. Här kan du hantera dina inlägg kommentarer. Du får massor av spam kommentarer som kan flyttas till spam eller papperskorgen. Du kan godkänna de relevanta.

WordPress kommentarer

menyn” Utseende ”

WordPress utseende meny - standard

på denna nivå kan du:

  • Sök efter, installera och aktivera ett tema (mer information i följande kapitel).
  • anpassa widgets för att lägga till innehållsblock i webbplatsens sidofält, sidfot och andra områden.
  • definiera din WordPress-webbplats menyer.
  • Lägg till en bakgrundsbild på din webbplats.
  • redigera koden för ditt tema i ”Temaredigerare” (rekommenderas endast om du är utvecklare).

nu, när du aktiverar vissa plugins, kan du se några nya menyalternativ under ”Utseende”. I det här fallet, eftersom vi har aktiverat Skyline-temat, ser vi ett alternativ att ställa in det under ”SkylineWP-Inställningar”. Varje tema kan komma med sin egen inställning.

SkylineWP WordPress konfigurationspanel

”installera Plugins” är det andra extra menyalternativet som läggs till av Skyline-temat. Här ser du några plugin-rekommendationer som fungerar bra med Skyline.

detta leder oss till vårt nästa menyalternativ.

Plugins

det finns många funktioner som inte bara kan hanteras av tema, till exempel SEO-optimering, SEO-revision, webbplatssäkerhet och säkerhetskopiering, tabeller, formulär, e-handelsfunktioner och mer. Plugins är här för att kompensera för bristen på sådana alternativ.

här är en liten handledning om hur du installerar, aktiverar och inaktiverar plugins. Det är allt intuitivt och användarvänligt.

användare

WordPress-användare

på den här nivån bestämmer du vem som har tillgång till din webbplats. Du kan ge tillgång till bidragsgivare, gästförfattare, redaktörer och mer, beroende på dina behov.

verktyg

WordPress dashboard - verktyg

Under ”verktyg” har du möjlighet att importera och exportera verktygsdata till och från andra innehållshanteringssystem (t.ex. Bloggare).

det finns också ett avsnitt ”Site health”, som visar viktig information om din WordPress-konfiguration och objekt som kräver din uppmärksamhet, med några råd.

eftersom vi måste respektera sekretesspolicy, här kan du exportera eller radera personuppgifter för dina användare.

och med detta har vi förpackat WordPress dashboard-kapitlet.

Låt oss komma till mer intressanta affärer.

så här installerar du ett WordPress-tema

för detta måste du gå till din WordPress admin dashboard, klicka på ”utseende” från den vänstra menyn och sedan ”Teman”.

WordPress-Teman

klicka sedan på knappen ”Lägg till ny”.
du ser en massa mallar som dyker upp, och du kan filtrera dem efter senaste, utvalda, popularitet…eller efter funktioner.

Välj WordPress-Teman efter funktioner

vi är stolta över att säga att våra egna Mesmerize och Colibri-teman listas i de 20 mest populära WordPress-teman.

när du väljer ett tema klickar du på ”Installera” och sedan på ”Aktivera”.

 installera WordPress-tema

aktivera WordPress-temat

du kan också aktivera ditt WordPress-tema om du går tillbaka till utseende – >teman.

hela installationsprocessen förklaras också i vår handledning.

nu är du redo att rocka och rulla!

via GIPHY

Bygg din WordPress-webbplats

i WordPress beror din webbdesign på ditt valda tema. Om du behöver något extra, ja…du kan behöva hitta något för att fylla i de saknade funktionerna.

vanligtvis har varje WordPress-tema 2 Mönster: En för bloggen och en för sidorna. Färgerna är begränsade, det finns inga speciella anpassningar. Det betyder att plugins vid en viss tidpunkt kommer att vara till nytta.

nu har WordPress-Teman en temaanpassare med grundläggande funktionalitet. De passar bra för dem som inte behöver några anpassade funktioner och vill bygga sin webbplats riktigt snabbt. När du behöver kan du lägga till dina egna CSS-stilar. Se bara till att välja ett tema som har en layout som matchar din egen vision.

Hur kan du anpassa ett tema? Gå bara över till utseende- > anpassa.

 anpassa WordPress-teman

från vänster sida kan du välja vad du vill ändra: innehåll, meny och mer. På höger sida finns din förhandsgranskning av webbplatsen. Du kan ändra texten i realtid genom att klicka på pennikonen.

på andra sidan historien har vi WordPress-byggare. De är plugins som hjälper dig att bygga riktigt unika webbplatser. Du kan ändra ditt temas layout helt.

i vårt fall installerar Skyline en sådan byggare som heter Colibri, vi kommer att använda den som ett exempel.

beroende på versionen av temat, den gratis eller betalda, har du olika element att spela med: från rubriker, specifika sidavsnitt, till mindre komponenter som uppmaningar, flikar, räknare, dragspel och mer.

du kan redigera ditt tema som tidigare, från utseende- > anpassa, eller ta genvägen, som visas nedan.

Customizer genväg när du använder WordPress webbplats byggare

vilka förändringar? Du får tillgång till fler funktioner i Anpassaren.

 WordPress-block och komponenter i Anpassaren

förutom att använda anpassaren finns det ett annat alternativ för webbplatsanpassning i WordPress – standardredigeraren. Du kan komma åt det från alternativet ”Redigera” under varje inlägg och sida. När du lägger till ett nytt inlägg eller en ny sida kommer du också direkt in i standardredigeraren (om du inte har en byggare aktiverad).

 redigera sidor i standard WordPress-redigeraren

så, i vårt nästa kapitel går vi djupt med hur man:

  1. skapa en WordPress-webbplats med en WordPress-sidbyggare
  2. skapa en WordPress-webbplats med standard WordPress-redigeraren

A. hur man bygger en WordPress-webbplats med gratis webbplatsbyggare

WordPress-webbplatsbyggare hjälper dig att ta WordPress Customizer till en helt ny nivå. Du kommer att kunna anpassa allt: rubriker, sidinnehåll, sidfot, navigeringsmenyer, global, individuell styling, du heter det! Ingen design eller kodning färdigheter som behövs!

det är vanligtvis en dra och släpp-process. Och du behöver inte oroa dig för mobildesignen, byggarna har responsivitetsaspekten täckt.

så här justerar du webbplatsinställningarna i Anpassaren

titta på din vänstra sidopanel. Bläddra nu ner till”Allmänna inställningar”.

 WordPress Allmänna inställningar-WordPress builder panel

här kan du ställa in:

  • din webbplats namn.
  • det övergripande färgschemat och typografin på din webbplats.
  • mallar för blogg, sidhuvud och sidfot: vilka bakgrunder som ska användas, avstånd, gränser, skuggor etc.
  • avstånd: inuti knappar,kolumner etc.
  • Anpassad CSS Styling

hur man skapar innehåll i WordPress med hjälp av byggare

som tidigare nämnts, om du vill skapa en ny webbsida, gå över till ”sidor” och välj ”Lägg till ny”. Du kommer att dirigeras till standard WordPress-redigeraren där du namnger din sida. Välj sedan”Redigera med Colibri”.

när du vill redigera en befintlig WordPress-sida klickar du bara på ”Redigera i Colibri”.

Customizer-genväg när du använder WordPress-webbplatsbyggare

så här lägger du till avsnitt på dina WordPress-sidor

varje ” + ” – tecken på vänster sida öppnar ett fönster med block och komponenter. Du kan bläddra ner tills du hittar en design du vill ha, eller bara skriva in en kategori. Här är de kategorier som finns i Colibri builder: Hero Accent, handla om, funktioner, innehåll, uppmaning till handling, blogg, räknare, portfölj, Fotogalleri, vittnesmål, kunder, Team, kontakt, F. A. Q., och prissättning.

 lägga till block på en WordPress-sida

dessa är fördefinierade mallar som matchar det färgschema du väljer.
genom att välja ett av blocken, genom att klicka på ” + ” – tecknet som visas på blocket, kommer blocket att placeras längst ner på sidan.

du kan flytta dem vart du vill genom att dra och släppa avsnittet från den vänstra sidopanelen.
 hur man flyttar WordPress-block

det finns också ett alternativ för ”tomma” block.

tomma block i WordPress

detta innebär att du kan anpassa dem hur du vill. I slutändan kan du till och med spara din design för senare användning.

från inställningsikonen längst upp till höger i varje avsnitt kan du justera antalet objekt per rad, Du kan ordna om objekt, lägga till nya block och till och med ta bort hela avsnittet.

ändra blocklayout

så här anpassar du delar av din WordPress-sida

om du vill ändra texten i dina avsnitt kan du göra det in-line, vilket betyder inuti själva avsnittet, live.

in-line redigering är inte tillgänglig för texter på knappar. De kommer att hanteras i panelen till vänster.

om du vill ändra en bild från din webbplats är det allt intuitivt. Börja med att välja din bild.

bilder i WordPress

du kan också se den inuti panelen till vänster. Klicka på bilden. Du ser ett nytt fönster som dyker upp och ber dig ladda upp en bild eller välja en från biblioteket. Om du väljer att ladda upp kan du göra det genom att dra och släppa.

 ladda upp bilder till WordPress

nu går tillbaka till panelen som jag just nämnde, den har 3 huvudalternativ: Layout, stil och avancerad. När du väljer ett avsnitt från förhandsgranskningen av webbplatsen till höger ser du motsvarande panel i avsnittet.

 anpassa WordPress-sektioner och block

Låt oss ta dem en efter en:

  • Layout

Panelstruktur

här kan du justera behållarens bredd och höjd på strukturnivå. . Enkelt uttryckt är behållaren det faktiska utrymmet som ett block upptar. Inuti behållaren placerar du innehållet (text, bilder).

du kan också justera avståndet mellan ditt innehåll och hur nära toppen eller botten det placeras.

du kan också lägga till nya rader i ditt block.

  • stil

Styling ett avsnitt

på den här nivån kan du anpassa bakgrunden till ditt block eller lägga till avdelare. Avdelare är visuella signaler som signalerar när en webbplatsavsnitt slutar eller börjar.

 WordPress ddividers

  • avancerad

avancerade block och sektioner WordPress redigering

här kommer det roliga, folk!

från typografi och Avstånd till lyhördhet, det är här du kan komma in i de minsta webbplatsinformationen.

du kan skapa variationer beroende på elementets tillstånd: normal eller hover.

om du väljer ett visst element i en blogg, Låt oss säga en rubrik, kommer samma panel att visas till vänster.

rubrikredigering

det betyder att du kan gå mer granulär med din redigering.

på tal om rubriker och mer granulära element heter dessa ”komponenter”. Låt oss se hur du kan spela med dem.

hur man använder komponenter på din WordPress-webbplats

komponenterna hänvisar till rubriker, reglage, avdelare, knappar, karuseller, prissättning och mer. De kan nås på samma sätt som block. De sitter sida vid sida och de har dra och släpp-funktionalitet. Colibri erbjuder 40 komponenter.

lägga till WordPress-komponenter
som tidigare nämnts kan du justera dem från panelen till vänster om du går till ”layout”, ”style” eller ”advanced”.

Mobilrespons

i en värld med flera enheter är det viktigt att ha en helt responsiv webbplats. Som standard är Skyline ett mobilt responsivt tema. Detta innebär att dess sektioner kommer att justeras enligt olika enheter. Om du vill förhandsgranska hur din WordPress-webbplats ser ut på surfplattor eller mobil kan du göra det när du spelar med kontrollerna längst ner till vänster.

 göra en WordPress-webbplats responsiv

du kan också välja att dölja vissa funktioner på mobilen, till exempel i alternativen ”avancerat”.

hur man bygger en meny i WordPress Customizer

låt oss nu säga att du har utformat dina sidor och du måste lägga till dem i en meny. I panelen till höger har du alla dina sektioner, beställda från topp till botten, som på din webbplats. Sidfoten är ditt sista avsnitt. Under det ser du några extra funktioner.

webbplats meny skapande i WordPress customizer

här kan du skapa din meny.

när du har valt” Skapa ny meny ” får du namnge din meny och välja en placering för den (sidhuvud, sidfot, sidor etc.).

när du väljer ” nästa ”kan du lägga till dina sidor i menyn, från alternativet” Lägg till objekt”. Det kan inte bli enklare än så här.

 lägga till objekt på en webbplatsmeny i WordPress

hur man arbetar med WordPress widgets

jag har redan nämnt att widgets är innehållsblock som du kan lägga till i webbplatsens sidofält, sidfot och andra områden.

när du använder ett WordPress builder-plugin använder du bara widgets för dina WordPress-sidofält, eftersom du har fördesignade sidfotlayouter.

vanligtvis används sidofält av bloggsidor. Varje tema har olika widgetalternativ, från sökfält, senaste inlägg och kommentarer, sociala widgets, till bilder och videor. Låt oss säga att du vill visa din Instagram-profil i ett sidofält, det finns en Instagram WordPress-widget för det.

 sidebar widgets för WordPress blogg

WordPress widgets

en av mina favorit widgets är den som möjliggör anpassad HTML-redigering. Jag tycker att det är riktigt kraftfullt.

detta sägs, du är ganska klar. Grattis, din WordPress-webbplats är igång!

låt oss nu kolla den andra metoden för att bygga webbplatser i WordPress.

B. Hur man bygger en WordPress webbplats med standard WordPress editor (Gutenberg)

jag kommer att göra detta riktigt snabbt. Denna redaktör är fortfarande ny i WordPress (det är standard WordPress-redigeraren sedan December 2018), men den utvecklas kontinuerligt tack vare gemenskapens bidrag.

den klassiska WordPress-redigeraren såg ut så här:

klassisk WordPress editor

nu har vi:

standard WordPress editor

nu behöver du veta att inte alla teman är kompatibla med den här nya redigeraren. Du måste hitta en Gutenberg-redo.

layoutdesign med standard WordPress-redigeraren är begränsad. Det är också baserat på block. Nu, som du förmodligen har fått reda på i föregående kapitel, kan Block vara ganska mycket allt: rubriker, bilder, knappar, videor etc.

 Block manager i Gutenberg editor

nu, varför jag inte insisterar på ämnet: om du letar efter Gutenberg-recensioner är de senaste 1-stjärniga recensionerna. Det är inte en bra upplevelse. Även om det redan har varit 2 år från lanseringen, och många uppdateringar i mitten, är detta fortfarande i sin linda. WordPress förlitar sig nu på samhället för att skapa nya block så att redigeringsupplevelsen kan utvecklas.

just nu fungerar verktyget som en textredigerare, med låg effekt på stylingsidan.

det finns verktyg där ute som Kadence, som kan hjälpa dig, men vi är inte där än.

installera viktiga WordPress-plugins

WordPress-ekosystemet är tillverkat av teman och plugins

det finns tusentals WordPress-plugins tillgängliga där ute som kan utöka funktionaliteten eller lägga till nya funktioner på din webbplats.

Detta är en mycket kort handledning om hur man installerar ett plugin.

våra plugin rekommendationer

Plugin typ vad det gör rekommendation
WordPress builder ger ditt tema dra och släpp funktioner Colibri
SEO WordPress plugins minimala webbplatsändringar som kan hjälpa det att rangordna organiskt Yoast SEO
formulär WordPress plugins använd formulär för att fånga värdefulla användardata (med deras samtycke, naturligtvis). Forminator
e-postmarknadsföring utveckla marknadsföringskampanjer för att hålla kontakten med dina prenumeranter och kunder. Mailchimp för WordPress
säkerhets plugins rensa skadlig kod och skydd mot obehöriga inloggningar. Jetpack
E-handel WordPress plugins för att hjälpa dig att skapa en onlinebutik. WooCommerce
Media Library manager för att hjälpa dig att organisera dina media. Filfågel
anti-spam förhindra att din webbplats publicerar skadligt innehåll. https://akismet.com/
Analytics hjälper dig att förstå din trafik och användarbeteende. Google Analytics

låt oss nu gå lite in i ett annat ämne: sidhastighet.

både dina besökare och Google bryr sig mycket om din webbplatshastighet.

Varför Google?

hastighet är en viktig faktor som tar hänsyn till när man rankar organiskt, vilket betyder här:

Google organiska resultat

Varför är webbplatshastigheten dålig för användarna, och i slutändan du?
Tja, om du erbjuder dem en dålig upplevelse, kanske de inte engagerar sig i ditt erbjudande eller kanske inte ens kommer tillbaka när som helst snart.

enligt 2018-forskning från Google lämnar 53% av mobilanvändarna en webbplats som tar längre tid än 3 sekunder att ladda (Holy Moly!).

och ta en titt på det!

 webbplatsladdning

hur påverkar sidbelastningen mobila besökare (Obs: bounce betyder att du lämnar webbplatsen)?
.
så, hur kan du åtgärda detta, och även förbättra din totala webbplats prestanda så att du inte kommer att få tummen ner från både dina användare och Google?

jag har valt 2 avslappnade lösningar (det finns många fler där ute, men ganska tekniska).

Brasilien optimera bilder
dina webbplatsbilder ska inte laddas upp i sin ursprungliga storlek. Försök också gå med PNG istället för JPEG (de har färre färger).
Smush är vårt föredragna WordPress-plugin för bildkomprimering. Du kommer inte att se någon synlig kvalitetsminskning och din sidhastighet kommer att optimeras.

cachelagring i cachelagringsprogram
enkelt uttryckt tillhandahåller cache tillfällig lagring för innehåll som ska nås senare. Din webbplats laddas annorlunda om den nås för första gången eller 5: e gången av samma besökare.

Varför är det så?
när du hanterar webbläsarens cachning sparar din webbläsare en kopia av filer från en webbplats på användarens enhet
(hårddisk, mobiltelefon). När en webbplats cachas behöver webbläsaren bara ladda nya eller uppdaterade delar av en sida och behöver inte initiera en ny serverförfrågan. Samma sak händer om du klickar på ”tillbaka” – knappen, din webbläsare visar sidan från cache. Detta är
också super användbart när det handlar om en långsam internetuppkoppling, sidorna laddas snabbt.

vill du förstå mer om hur caching fungerar? Läs vidare här.

de verktyg som vi rekommenderar här är:
W3 Total Cache (W3TC) förbättrar SEO och användarupplevelsen på din webbplats genom att öka webbplatsens prestanda och minska laddningstiderna.
kolibri i Brasilien. Detta har också några extra funktioner som vi älskar, som komprimering av Javascript, HTML & CSS-filer.

nu, Hur kan du kontrollera hur snabbt din webbplats laddas?
Google har bara verktyget för att hjälpa dig med det, och ger också några fixing ideas.

Bonus: UX design tips och tricks

kom ihåg mig att säga ”himlen är gränsen” med WordPress sida byggare?

Tja … det finns alltid ett ”men”. När du designar en webbplats bör du alltid ha i åtanke din
publik, eller köparen personas (som marknadsförare vilja säga). Du måste ge dem en fantastisk upplevelse på din webbplats, Det är vad UX står för (användarupplevelse).

nu finns det vissa regler som du bör följa för att ge en friktionsfri användarupplevelse.

Möt användarnas behov
användare på en webbplats vill inte tänka för mycket. De behöver användbar information som kan skummas och förstås med lätthet. De behöver inte en upplevelse som består av många klick eller mycket fram och tillbaka.

människor letar efter omedelbar tillfredsställelse: hitta vad de behöver snabbt och enkelt. Om detta inte händer på din webbplats Letar de efter en annan.

visuell hierarki

inte alla webbplatsdelar behandlas lika, vissa är viktigare än andra (formulär, knappar, rubrik, värdeförslag etc.).

Var vill du att din användare ska landa på? Var Vill du att han ska klicka?

använd visuella ledtrådar för att hjälpa honom att uppnå vad du vill. Alla element på sidorna ska fungera som en reseguide.

visuella signaler

forskare har upptäckt att användare som läser från vänster till höger skannar webbplatser i ett Z-format mönster.

Z-form

det betyder att det är där du ska rikta din viktigaste information.

Enkel navigering

du bör hålla navigeringsfältet enkelt, gå inte in för många alternativ. Du kan sluta med en paradox val situation när användarna blir överväldigade med möjligheterna.

sidor ska vara internt länkade till andra relevanta sidor så att navigeringen är smidig och användaren ska inte klicka på ”tillbaka” många gånger för att komma till tidigare sidor.

använd vitt utrymme. Vitt utrymme gör att information kan organiseras i områden med smältbart innehåll. Detta gör att användarna känner sig mer bekväma och inte överväldigade av massor av data.

samma färgschema (konsistens)

Undvik super mörka eller superintensiva färger på din webbplats. De kan skicka användare bort. Du kan använda starkare färger för att markera viktiga aspekter av din webbplats.

färgkonsistens

använd färger som är lika balanserade. Här är lite inspiration.

och en sak till innan du går vidare till nästa UX-designprincip. Färger har betydelser runt om i världen, de är kopplade till olika känslor. Denna infographic kommer att lysa ett ljus på ämnet.

color emotion guide

använd effektiv skrivning

använd inte överdriven och clickbait kopia. Skriv med sunt förnuft, på ett naturligt språk, Använd inte jargong (inte alla är bekanta med vissa tekniska ord).

clickbait

Använd max. 3 typsnitt i högst 3 punktstorlekar — högst 18 ord eller 50-80 tecken per textrad som Smashing Magazine rekommenderar.

använd socialt bevis

varför ska jag lita på dig, ditt företag eller dina produkter?
vi människor är sociala varelser. Vi lever i samhällen, vi har vänner och familj. De kan vara våra influencers. Vi bryr oss mycket om deras åsikt.
.
Låt mig lista ut några exempel för dig:
Xiaomi betyg och recensioner

 betyg

● vittnesmål

 vittnesmål

● Nej. kunder (”du är i gott sällskap”).

clients
● Kundlogotyper

logotyper
fallstudier i Brasilien backas upp av resultat

fallstudier
press i Brasilien med och utmärkelser

tryck på

också, om du vill ta reda på om de senaste designtrender, de kustnära kreativa människorna gjorde en fantastisk infografik om ämnet.

slutsatser

vi kan kalla det en wrap tycker du inte?

vi ville gå den Korta vägen, för att inte överväldiga dig med information. Men i slutändan är djävulen i detaljerna. Vi gav dig bara helikoptervyn.

saken är att du kan ha din webbplats igång på mindre än 2 timmar. Men ju fler funktioner, sidor, innehåll du vill lägga till, desto längre tid tar det. Och försummar du aldrig de senaste webbdesigntrenderna.

en sista sak men om du är DIY-typen måste du definitivt ta vår Colibri-byggare för en snurr!

här är en video om hur man bygger en WordPress-webbplats med massor av funktioner.

nu, om du gillade den här artikeln, och du vill lära dig mer om hur du utformar en WordPress-webbplats, se till att prenumerera på vår Youtube-kanal och följ oss på Twitter och Facebook!

Lämna ett svar

Lämna ett svar

Din e-postadress kommer inte publiceras.