Gå till innehållet

Hur du anpassar ditt WordPress-tema med Elementor

Divi: det enklaste WordPress-temat att använda

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. [Rekommenderas]

Anpassa ditt WordPress-tema är en av de viktigaste uppgifterna när du bygger WordPress-webbplatser. Eftersom hon kontrollerar utformningen av en webbplats är det här många yrkesverksamma tillbringar större delen av sin tid.

Att skapa ett anpassat WordPress-tema innebär vanligtvis att arbeta med temafilerna och en kodredigerare. Layoutändringar sker i mallfiler, designändringar genom CSS. Du måste också hela tiden uppdatera webbläsarfönstret för att visa dina anpassningar, vilket kan vara lite besvärligt.

Lyckligtvis med Elementor, denna process blir extremt enkel, så du kanske vill kolla in den.

Men innan, låt oss upptäcka tillsammans Hur man installerar en Wordpress-blogg 7 steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg.

Sedan, tillbaka till varför vi är här.

Vad är ett WordPress-tema

Ett WordPress-tema är i huvudsak en samling mallar som definierar det visuella utseendet på en WordPress-webbplats.

WordPress-temat omfattar allt som påverkar utformningen av en webbplats, från sidhuvud och sidfot till färgschema, layout och mer.

Det finns många teman tillgängliga, gratis och premium, som passar nästan alla branscher som fotograferingswebbplatser, gymklubbwebbplatser, frisörswebbplatser, lag webbplatserOch mer.

Varför anpassa ett WordPress-tema?

En av de främsta anledningarna till att bygga en webbplats är att marknadsföra ditt företag. Vilket bättre sätt att göra detta än att skapa en unik webbplats som främjar företagets stil och design.

Kan du föreställa dig att Amazon, eBay eller Google är vad de är utan deras unika design?

Naturligtvis inte, och det är en av anledningarna till att vi vill anpassa ett WordPress-tema. Vi vill göra det unikt och anpassa oss till vårt företags budskap.

Ibland, eller snarare, ofta, kör du igenom ett WordPress-tema som plågas av dålig design, färger som inte går bra tillsammans, eller ett tema som är för tungt och som bara påverkar webbplatsens prestanda. webb. WordPress-tema kan vara kraftfullt förutom det som stör dig. Anpassa den och ändra den här saken kan lösa alla dina problem och skapa bättre användarupplevelse.

Hur du anpassar ett WordPress-tema

Det finns flera metoder för att anpassa ett WordPress-tema.

  1. Manuellt via WordPress-anpassaren
  2. Med kod
  3. Med Elementor

Hur man anpassar ett WordPress-tema manuellt

Du kan anpassa ditt WordPress-tema du väljer genom den inbyggda WordPress Customizer. Om du gör det utan kod är du ofta begränsad i vad du kan ändra. Vissa premium WordPress-teman ger dig fler anpassningsalternativ, men i själva verket finns det inte många designalternativ för dig.

Innan vi dyker djupare i detta område vill vi påpeka att när du anpassar ett befintligt WordPress-tema är det bäst att du använder ett barntema och inte föräldertema.

WordPress barn tema

Ett barntema är ett WordPress-tema som har exakt samma funktioner och egenskaper som ett annat WordPress-tema, föräldertema. Barnetema används för att säkert anpassa och ändra temat, utan att påverka föräldertema och utan att förlora förmågan att uppdatera det. 

WordPress tematilpassare

Så nu när vi vet att det är bäst att arbeta med ett barntema, låt oss lära oss att anpassa ett tema med WordPress Customizer. Gå till din instrumentbräda genom att klicka på Apparence på vänster sida och välj Personifiera.

De viktigaste funktionerna som du kan modifiera med den här Customizer är följande:

Lägga till en webbplatstitel, logotyp och ikon

För att lägga till eller ändra din titel, logotyp eller ikon kan du helt enkelt gå till webbplatsen Identitet. och välj var och en av dessa element för att ändra dem.

Ändra färgerna på WordPress-temat

Vissa WordPress-teman låter dig ändra deras färgscheman, men inte alla, och de är i allmänhet premium WordPress-teman. Om ditt WordPress-tema låter dig ändra färgschema ser du det här alternativet när du går in i Customizer.

Lade till navigationsmenyer

Med Customizer kan du enkelt lägga till och ändra navigeringsmenyerna på webbplatsen.

Hur du anpassar ett WordPress-tema med kod

Du kommer att märka att under fliken Utseende har du möjlighet att välja temaredigeraren. Genom att klicka på den hälsas du av ett fönster med temakoden. Detta alternativ kräver god förståelse för CSS-kodning och rekommenderas inte för nybörjare.

Här har du tillgång till filer som style.css, features.php, och det är exakt för det här scenariot som du behöver ett barntema för att inte bryta din webbplats.

Det andra sättet att anpassa ditt tema genom att koda är att ladda upp filer med en FTP-lösning. Processen innebär att skapa FTP-referenser via din webbhotell, ladda ner och installera en FTP-lösning (som FileZilla), logga in på ditt konto och redigera dina filer, som du sedan laddar upp genom samma. FTP-lösning.

Upptäck vår guide om Hur man installerar WordPress med FileZilla

Om du inte är bekant med kodning rekommenderar vi inte det här alternativet.

Anpassa ett WordPress-tema enkelt med Elementor

Du kan göra detta direkt från användargränssnittet. Det finns inget behov av att ändra en enda rad med kod eller ladda om ett webbläsarfönster, ens en gång.

Elementor låter dig ändra varje element på webbplatsen snabbt och enkelt med bara några musklick och du kan till och med optimera dessa funktioner för mobilplattformen.

Elementor gör denna process mycket lättare genom att använda dynamiskt innehåll och låter dig förhandsgranska dina sidor. På detta sätt kan du omedelbart se hur designändringarna kommer att påverka din faktiska webbplats och innehåll.

Anpassa sidhuvud och sidfot

Elementor ger dig full flexibilitet när det gäller att utforma dina sidhuvuden och sidfot. Vi vet alla hur tråkigt det kan vara att du har ett WordPress-tema och att du inte kan ändra en enda aspekt av sidhuvud- eller sidfotdesignen. Du behöver specialiserade teman, plugins etc.

Med Elementor är det enkelt.

1. Skapa en rubrikmall

Konfigurera först en ny rubrikmall. För att göra detta, gå till Elementor> Mina mallar.

Hur du anpassar wordpress-temaelement eller rubrikmall 1

Här är ett sätt att starta genom att trycka på knappen Lägg till ny längst upp. På nästa skärm använder du rullgardinsmenyn för att välja Header som den typ av mall som ska utformas.

Hur du anpassar wordpress-temaelement eller rubrikmall 2

Du kan också nå den här skärmen genom att klicka på fliken Header från föregående skärm och sedan trycka på den stora gröna knappen som visas.

Hur du anpassar wordpress-temaelement eller rubrikmall 3
Det kommer att förvala rubriken som malltyp. Hursomhelst måste du lägga till ett lämpligt namn för mallen (så att du vet vad det är senare) och fortsätter sedan genom att klicka på Skapa mall.

Det kommer dig hit.

Hur du anpassar wordpress-temaelement eller rubrikmall 4

Med Elementor Pro kan du välja mellan fördesignade rubrikblock. Det här är designmallar som du kan använda som utgångspunkt för din egen design, vilket är vad vi ska göra i det här fallet.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

När du håller muspekaren över ett rubrikblock klickar du på Insert låter dig börja designa det omedelbart. I annat fall klickar du först på bilden för att se en större version. Då kan du alltid trycka på Insert ovan.

Hur du anpassar wordpress-temaelement eller rubrikmall 5

Annars, om du vill börja från början, stänger du bara fönstret genom att klicka X i det övre högra hörnet.

2. Ändra den grundläggande rubrikdesignen

När du har angett den nya rubriken är det första du märker att logotypen och menyn som vi konfigurerade tidigare redan finns.

Hur du anpassar wordpress-temaelement eller rubrikmall 6

Det är just därför vi sätter dem på plats och vi kommer att prata om hur vi kan anpassa dem. Låt oss dock först se hur du anpassar själva rubrikavsnittet.

För att göra detta, håll bara muspekaren över den och klicka på redigeringsknappen längst upp. Detta öppnar en lista med redigeringsalternativ till vänster.

Hur du anpassar wordpress-temaelement eller rubrikmall 7

Här är vad du kan kontrollera i de olika menyerna:

  • Layout - Kontrollera sektionens bredd, storleken på utrymmet mellan kolumner, dess höjd, dess vertikala kolumn och dess innehållspositionering, dess tilldelade HTML-tagg och den allmänna strukturen.
  • Stil - Här kan du ändra bakgrundsfärgen inklusive svävaeffekteräven lägg till bild eller video om du vill, lägg till överläggnings-, kant- och delningseffekter samt ändra typografiska inställningar.
  • Avancerad - Denna del låter dig lägga till CSS-attribut som marginal och z-index, animationer, ID och klasser. Det tillåter dig också att göra avsnittet klibbigt och kontrollera inställningarna responsiva samt lägga till några Anpassad CSS.

Allt ovanstående är ganska självförklarande, och du får snabbt vad du vill.

3. Anpassa huvudelementen

Du kan emellertid inte bara redigera rubrikavsnittet som en helhet, utan också de objekt som ingår i det. Klicka på den för att anpassa webbplatslogotypen. Även detta ger dig redigeringsalternativ på vänster sida.

Hur du anpassar wordpress-temaelement eller rubrikmall 8
När det gäller logotypen ger detta följande alternativ:

  • Innehåll - Ändra bildstorlek, justering och plats till vilken den är länkad.
  • Stil - Kontrollera bredd och höjd, lägg till CSS-effekter och svävaeffekter, inkludera kant och skugga om du vill.
  • Avancerad - Här hittar du väsentligen samma alternativ som för rubrikavsnittet.

Använd inställningarna för att anpassa logotypen som du vill att den ska visas i rubriken. Observera också att varje artikel har sin egen typ av alternativ, så se till att kolla in var och en.

4. Lägg till artiklar

Med Elementor kan du naturligtvis också lägga till element i rubriken. Klicka bara på symbolen längst upp till höger för att se vad som är tillgängligt.

Hur du anpassar wordpress-temaelement eller rubrikmall 9
När du redigerar en rubrikmall visar Elementor automatiskt relevanta block högst upp i listan, vilket är mest förnuftigt under omständigheterna. I det här fallet är det saker som webbplatsens logotyp, nav-menyn och webbplatsens titel.

Så till exempel, om du vill lägga till webbplatsens titel bredvid logotypen, dra och släpp den på den. Men den rubrikmall vi har valt gör det möjligt för oss att lägga till den ovanför eller under logotypen. Men det är ett problem som lätt kommer att lösas.

I ett sådant fall, håll muspekaren över rubriken och använd plussymbolen -+-för att lägga till ett avsnitt ovan.

Hur du anpassar wordpress-temaelement eller rubrikmall 10

Klicka här på den lila knappen för att välja en tre-kolonnsdesign.

Hur du anpassar wordpress-temaelement eller rubrikmall 11

Dra sedan elementen från det befintliga rubrikavsnittet till det nya avsnittet och lägg till webbplatsens titel i mitten.

Hur du anpassar wordpress-temaelement eller rubrikmall 12

Men vänta, stilen är helt annorlunda! inga problem. Högerklicka bara på den befintliga rubriken och välj Kopia. Högerklicka sedan på det nya avsnittet och klicka här på Klistra in stil. Elementor tillämpar sedan stilen på det befintliga avsnittet, som du kan stänga senare. 

Hur du anpassar wordpress-temaelement eller rubrikmall 13

Du kan göra samma process med något av de andra sidhuvudelementen och naturligtvis med alla andra element som ingår i Elementor.

Anpassa en unik postmall

I Elementor kan du också anpassa en enda inläggsmall. Här är hur :

1. Skapa en ny modell

Att skapa en mall fungerar på vanligt sätt. Men den här gången väljer Single som modelltyp. Välj sedan den unika mallen du vill redigera nedan. I det här exemplet, det av Inlägg.

Hur du anpassar wordpress-temaelement eller rubrikmall 14

Om du vill skapa en ny siddesign, redigera din 404-sida (mer om det senare) eller redigera en anpassad inläggstyp särskilt skulle du välja något annat. I båda fallen anger du ett namn och fortsätter.

På nästa skärm kan du välja mellan de fördefinierade mallarna som vanligt. Men i det här fallet vill vi skapa en ny modell från början. Så klicka på X längst upp till höger för att stänga det här fönstret.

2. Konfigurera förhandsgranskningen

Ställ sedan in förhandsgranskningsfönstret till ett befintligt inlägg. Du kan göra detta genom att klicka på ögonikonen längst ned i redigeringsalternativen Inställningar.

Hur du anpassar wordpress-temaelement eller rubrikmall 15

I menyn som öppnas under Förhandsvisning dynamiskt innehåll, välj Publicera. Därefter kan du i nästa rad söka och välja ett befintligt inlägg efter namn.

Hur du anpassar wordpress-temaelement eller rubrikmall 16När du har gjort det trycker du på tillämpas & Förhandsvisning. Även om du inte kan se någonting på det här stället (eftersom det inte finns någonting på sidan), kommer det att säga Elementor att använda uppgifterna i det här inlägget från och med nu. Du kommer snart att se vad det här betyder.

3. Låt oss skapa avsnittet ovan 

Först skapar vi avsnittet ovan. Här hittar du vanligtvis saker som inläggstitel och metadata som författare, datum och kategori.

Det första steget är att klicka på skylten + och skapa ett enda kolumnavsnitt.

Hur du anpassar wordpress-temaelement eller rubrikmall 17
När du gör det, i layoutavsnittet, har du möjlighet att kontrollera dess bredd, höjd, positionering och stil. I det här fallet är det inte mycket att göra här. Oroa dig inte heller, du kan alltid gå tillbaka och göra ändringar senare.

Dra sedan posttitelwidgeten till det nya avsnittet.

Letar du efter de bästa WordPress-teman och plugins?

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

Hur du anpassar wordpress-temaelement eller rubrikmall 18

När du gör det, se till att använda alla tillgängliga alternativ för att anpassa design och layout till din smak. Här är till exempel mina inställningar för att göra det:

Hur du anpassar wordpress-temaelement eller rubrikmall 19

Det finns också en cool funktion som du bör lära dig. När du klickar på nyckelsymbolen för inläggstiteln kan du lägga till statiskt innehåll före och efter din dynamiska data.

Om du till exempel skapar en mall för en viss inläggskategori, som nyheter eller recept, kan du lägga till den i inläggets titel:

Hur du anpassar wordpress-temaelement eller rubrikmall 20

På så sätt skulle den informationen dyka upp för varje inlägg i den kategorin. Jag tänker inte använda det här just nu, men tyckte att det var en viktig sidoanteckning för dig.

Under titeln på inlägget kommer vi att infoga Inlägg Info widget för att visa inläggets metadata.

Hur du anpassar wordpress-temaelement eller rubrikmall 21

Här är inställningarna jag använder:

Hur du anpassar wordpress-temaelement eller rubrikmall 22

Dessutom använde jag stylingsalternativen för att få designen att passa resten av sidan. Se till att du gör samma sak.

4. Ställ in stolpen

Efter rubriken är det dags att skapa sidan på sidan. Om du vill att den här delen ska ha en annan design än rubriken måste du ställa in ett nytt avsnitt. Men jag håller det enkelt, så jag behöver inte.

Det första vi vill infoga är den presenterade bilden. För detta kan du placera widgeten med samma namn under det som redan finns på sidan.

Hur du anpassar wordpress-temaelement eller rubrikmall 23

Jag ändrade i princip ingen av inställningarna, lämnade bara allt som det var.

Då är det dags för innehållet att publicera. Även här har du ett motsvarande block.

Hur du anpassar wordpress-temaelement eller rubrikmall 24
Du kommer att märka att Elementor automatiskt drar det som redan finns på webbplatsen för visat innehåll och inlägg. Gör eventuella justeringar av utformningen av det nya blocket som du behöver, till exempel att spela med de typografiska inställningarna.

Annat än så är det allt. Inte för mycket arbete att göra här så att vi kan gå vidare till den sista delen.

5. Konfigurera sidfoten

I det här fallet vill vi att sidfoten ska visa författarens profil, delningsalternativ och läsarkommentarer. För att göra detta måste vi först skapa ett nytt avsnitt med två kolumner. För att skapa mer utrymme för författarprofilen kan du ställa in den till en 66.33-layout.

Hur du anpassar wordpress-temaelement eller rubrikmall 25

Efter det placerar widgeten Författare Box i vänster sektion.

Hur du anpassar wordpress-temaelement eller rubrikmall 26

Se till att anpassa stilen efter dina behov. Jag lade till lite bakgrundsfärg och justerade inställningarna för typografi något.

Efter det är det dags att lägga till delningsknapparna på höger sida.

Hur du anpassar wordpress-temaelement eller rubrikmall 27

Du kan se mina inställningar på skärmdumpen ovan.

Efter det är det enda som återstår att skapa en sektion en kolumn till och dra och släppa widgeten Post Kommentarer i den.

Hur du anpassar wordpress-temaelement eller rubrikmall 28

(Förresten, om du någonsin har problem med att hitta några av dessa widgetar, använd bara sökfunktionen).

Hur du anpassar wordpress-temaelement eller rubrikmall 29

Gör eventuella justeringar av kommentarerna som du känner dig nödvändiga (jag lämnade den som den är) och du är redo att posta. Här är den färdiga designen:

Hur du anpassar wordpress-temaelement eller rubrikmall 30

Anpassa arkivmallen

1. Konfigurera din WordPress-arkivmall

Nu vet du redan lösningen på att skapa nya modeller. Den enda skillnaden är att du i detta fall kommer att välja arkiv som modelltyp.

Hur du anpassar wordpress-temaelement eller rubrikmall 31

Efter det får du som vanligt ett antal block att välja mellan eller så kan du också skapa din egen modell från början. Men för arkiv har du ungefär bara två Widgetar Elementor som är viktiga ändå.

2. Definiera titeln på arkivet

Det första blocket jag vill prata om är arkivtiteln Arkiv titel.

Hur du anpassar wordpress-temaelement eller rubrikmall 32

Förutom de vanliga inställningarna under Stil och avancerad, kan du hitta ett viktigt alternativ när du klickar på nyckelsymbolen under Titel.

Hur du anpassar wordpress-temaelement eller rubrikmall 33

Här kan du slå på och av om Elementor visar arkivtypen på sidan som den del där det står författare: nedan. Detta sker via sou-knappen Inkludera kontext

Förresten, som vanligt kan du förhandsgranska olika arkiv med förhandsgranskningsinställningar (ögonsymbol> inställningar). På så sätt kan du se designen för unika kategorier, taggar, författare och mer. Kom ihåg det.

3. Använd arkivpublikationerna

Den andra viktiga widgeten för arkiv är Archive Posts. Detta ger alla inlägg som tillhör ett arkiv på en sida. När du väljer en mall är de redan där, men du kan också lägga till dem själv med det här blocket.

Hur du anpassar wordpress-temaelement eller rubrikmall 34

Låt oss ta en titt på alternativen det ger dig för att anpassa dina arkivsidor:

  • Hud - Välj att visa dina inlägg i en klassisk eller kort stil design.
  • Kolonner - Bestämma antalet kolumner som dina inlägg visas i.
  • Visa bild - Aktivera visade bilder på arkivsidor
  • Murverk - Visar inlägg i murverk eller inte.
  • Bildstorlek - Storleken på bilden Elementor ska använda på arkivsidor.
  • Titel - Vill du visa inläggstitlar eller inte?
  • Titel HTML Tag - Om så är fallet, vilken HTML-tagg ska lindas runt den?
  • Utdrag - Inkludera utdrag från dina inlägg eller visa bara titeln.
  • Utdragslängd - Bestäm längden på extrakten.
  • metadata - Definierar postmetadata som är tillgängliga för besökare.
  • Separator mellan - Separatorsymbol mellan metadatainformation.
  • Läs mer - Inkludera en "läs mer" -länk, ja eller nej?
  • märke - Gör att du kan lägga till mer information till inlägg, till exempel kategorier och taggar.
  • Taxonomi-märke - Här kan du bestämma vilken information som ska inkluderas.
  • Avatar - Med detta kan du ändra profilbilden för inläggens författare 

Förutom ovanstående har du några fler alternativ. Under personsökning, du kan definiera hur arkivsökning ska hanteras. Till exempel hur du visar det, antalet sidor som ska inkluderas och justeringen av texten.

Hur som helst, Advanced Open water låter dig definiera meddelandet som ska visas när en besökare landar i ett tomt arkiv. Allt annat borde vara bekant. Observera bara att stilalternativen ändras beroende på vilken hud du har valt.

4. Kontrollera antalet publikationer per arkiv

En snabb anteckning om arkivmallar. För att ändra antalet inlägg som visas i ett arkiv (eller på din bloggsida) måste du göra det i WordPress under Inställningar> Läsning. 

Hur du anpassar wordpress-temaelement eller rubrikmall 35

Här anger du bara antalet inlägg du vill att dina besökare ska se.

personalisering facile WordPress-tema med Elementor

Att anpassa WordPress-teman är bröd och smör för många proffs. Även om detta vanligtvis innebär mycket kodning och redigering av filerna, med Elementor är detta inte längre nödvändigt.

Som du såg ovan är plugin-programmet en fullverdig WordPress-temaredigerare. Det låter dig anpassa alla delar av det från sitt användargränssnitt. Du kan redigera webbplatshuvud, sidfot, sid- och inläggsmallar, arkivmallar och mer.

Med möjligheten att använda dynamiskt innehåll och förhandsgranska alla delar av din webbplats kan du implementera alla trendiga anpassningar

Kort sagt, Elementor gör det enkelt att anpassa ditt WordPress-tema. Istället för att noggrant göra ändringar med dussintals filer och hundratals kodrader, kan du snabbt göra allt på ett ställe.

Skaffa Elementor Pro nu!

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
0 aktier
del
tweet
Enregistrer