Vil du finne ut hvordan du kan tilpasse et WordPress-tema med Elementor-plugin ?

Å tilpasse WordPress-temaet er en av hovedoppgavene når du bygger WordPress-nettsteder. Siden hun kontrollerer utformingen av et nettsted, er det her mange fagpersoner tilbringer mesteparten av tiden sin.

Opprette et tilpasset WordPress-tema innebærer vanligvis å jobbe med temafilene og en kodeditor. Layoutendringer skjer i malfiler, designendringer gjennom CSS. Du må også stadig oppdatere nettleservinduet for å vise tilpasningene dine, noe som kan være litt tungvint.

Heldigvis, med Elementor, denne prosessen blir ekstremt enkel, så det kan være lurt å sjekke den ut.

Men før, la oss oppdage sammen Hvordan installere en WordPress blogg 7 trinn et Hvordan finne, installere og aktivere en WordPress tema på bloggen din.

Så tilbake til hvorfor vi er her.

Hva er et WordPress-tema

Et WordPress-tema er i hovedsak en samling maler som definerer det visuelle utseendet til et WordPress-nettsted.

WordPress-temaet omfatter alt som påvirker utformingen av et nettsted, fra topptekst og bunntekst til fargevalg, layout og mer.

Det er mange temaer tilgjengelig, både gratis og premium, som passer nesten alle bransjer fotograferingsnettsteder, gymklubb nettsteder, nettsteder for frisørsalonger, lov nettstederOg mer.

Hvorfor tilpasse et WordPress-tema?

En av hovedgrunnene til å lage et nettsted er å markedsføre virksomheten din. Hvilken bedre måte å gjøre det på enn å opprette et nettsted unik som fremmer stilen og designen til selskapet.

Kan du forestille deg at Amazon, eBay eller Google er det de er uten deres unike design?

Selvfølgelig ikke, og det er en av grunnene til at vi ønsker å tilpasse et WordPress-tema. Vi ønsker å gjøre det unikt og tilpasse oss selskapets budskap.

Noen ganger, eller rettere, ofte, kjører du gjennom et WordPress-tema som er plaget av dårlig design, farger som ikke går bra sammen, eller et tema som er for tungt og bare påvirker ytelsen på nettstedet. web. WordPress-tema kan være kraftig bortsett fra det som plager deg. Tilpass det og endre dette kan løse alle dine problemer og skape bedre brukeropplevelse.

Hvordan tilpasse et WordPress-tema

Det er flere metoder for å tilpasse et WordPress-tema.

  1. Manuelt, via WordPress-tilpasseren
  2. Med koden
  3. Med Elementor

Hvordan manuelt tilpasse et WordPress-tema

Du kan tilpasse WordPress-temaet du ønsker via den innebygde WordPress Customizer. Gjør du det uten kode, er du ofte begrenset i hva du kan endre. Noen WordPress-temaer premium gir deg flere tilpasningsmuligheter, men i hovedsak er det ikke mange designalternativer for deg.

Før vi dykker dypere i dette området, vil vi påpeke at når du tilpasser et eksisterende WordPress-tema, er det best at du bruker et barnetema og ikke foreldertemaet.

WordPress barnetema

Et barn-tema er et WordPress-tema som har nøyaktig de samme funksjonene og egenskapene til et annet WordPress-tema, overordnet tema. Barnetemaet brukes til å tilpasse og endre tematikken trygt, uten å påvirke overordnetemaet og uten å miste muligheten til å oppdatere det. 

WordPress-tematilpasning

Så nå som vi vet at det er best å jobbe med et barnetema, la oss lære å tilpasse et tema med WordPress Customizer. For å få tilgang til det, gå til oversikten, klikk på Apparence på venstre side og velg Tilpass.

Hovedfunksjonene du kan endre med denne tilpasseren er som følger:

Legge til en webside tittel, logo og ikon

For å legge til eller endre tittelen, logoen eller ikonet ditt, kan du ganske enkelt gå til identitetspanelet på nettstedet. og velg hvert av disse elementene for å endre dem.

Endre fargene på WordPress-temaet

noen WordPress-temaer lar deg endre fargevalgene deres, men ikke alle, og det er de vanligvis WordPress-temaer premie. Hvis WordPress-temaet ditt lar deg endre fargeskjemaet, vil du se dette alternativet når du åpner Customizer.

Lagt til navigasjonsmenyer

Customizer lar deg også enkelt legge til og endre navigasjonsmenyene på nettstedet.

Hvordan tilpasse et WordPress-tema med kode

Du vil legge merke til at under kategorien Utseende har du muligheten til å velge temaredigering. Ved å klikke på den vil du hilse på et vindu med temakoden. Dette alternativet krever god forståelse av CSS-koding og anbefales ikke for nybegynnere.

Her vil du ha tilgang til filer som style.css, features.php, og det er nøyaktig for dette scenariet du trenger et barnetema for ikke å ødelegge nettstedet ditt.

Den andre måten å tilpasse temaet ditt ved å kode, er å laste opp filer ved hjelp av en FTP-løsning. Prosessen innebærer å opprette FTP-legitimasjon gjennom hostingleverandøren din, laste ned og installere en FTP-løsning (som FileZilla), logge på kontoen din og redigere filene dine, som du deretter laster opp gjennom det samme. FTP-løsning.

Oppdag guiden vår om Hvordan installere WordPress med FileZilla

Med mindre du er kjent med koding, anbefaler vi ikke dette alternativet.

Tilpass et WordPress-tema enkelt med Elementor

Du kan gjøre dette direkte fra brukergrensesnittet. Det er ikke nødvendig å endre en enkelt kodelinje eller laste inn nettleservinduet, selv en gang.

Elementor lar deg endre hvert element på nettstedet raskt og enkelt med bare noen få museklikk, og du kan til og med optimalisere disse funksjonene for den mobile plattformen.

Elementor gjør denne prosessen mye enklere ved å bruke dynamisk innhold og lar deg forhåndsvise sidene dine. På denne måten kan du øyeblikkelig se hvordan designendringene vil påvirke ditt nettsted og innhold.

Tilpass topptekst og bunntekst

Elementor gir deg full fleksibilitet når det gjelder utforming av topptekst og bunntekst. Vi vet alle hvor kjedelig det kan være, at du har et WordPress-tema, og du kan ikke endre et enkelt aspekt av topptekst- eller bunntekstdesignet. Du trenger spesialiserte temaer, plugins osv.

Med Elementor er det enkelt.

1. Lag en overskriftmal

Konfigurer først en ny topptekstmal. For å gjøre dette, gå til Elementor> Mine maler.

Slik tilpasser du Wordpress Theme Elementor Header Mal 1

Her er en måte å starte å trykke på Legg til ny-knappen øverst. I den neste skjermen bruker du rullegardinmenyen til å velge Topptekst som den malen som skal designes.

Slik tilpasser du Wordpress Theme Elementor Header Mal 2

Du kan også nå dette skjermbildet ved å klikke på kategorien Overskrift fra forrige skjermbilde og deretter trykke på den store grønne knappen som vises.

Slik tilpasser du Wordpress Theme Elementor Header Mal 3
Den vil forhåndsvalg av toppteksten som maltype. Uansett må du legge til et passende navn for malen (slik at du vet hva den er senere) og deretter fortsette ved å klikke på Opprett mal.

Den vil komme deg hit.

Slik tilpasser du Wordpress Theme Elementor Header Mal 4

Med Elementor Pro kan du velge fra forhåndsdesignede headerblokker. Dette er designmaler som du kan bruke som utgangspunkt for ditt eget design, og det er det vi skal gjøre i dette tilfellet.

Når du holder musepekeren over en toppblokk, klikker du på innfelt lar deg begynne å designe den umiddelbart. Ellers kan du først klikke på bildet for å se en større versjon. Da kan du alltid trykke innfelt ovenfor.

Slik tilpasser du Wordpress Theme Elementor Header Mal 5

Ellers, hvis du vil starte fra bunnen av, bare lukk vinduet ved å klikke X i øverste høyre hjørne.

2. Endre det grunnleggende topptekstdesignet

Etter å ha skrevet inn den nye overskriften, er det første du vil legge merke til at logoen og menyen vi konfigurerte tidligere allerede er der.

Slik tilpasser du Wordpress Theme Elementor Header Mal 6

Nettopp derfor legger vi dem på plass, og vi skal snakke om hvordan vi kan tilpasse dem. La oss imidlertid først se hvordan du tilpasser selve overskriftsdelen.

For å gjøre dette, bare hold musepekeren over den og klikk på redigeringsknappen øverst. Dette åpner en liste over redigeringsalternativer til venstre.

Slik tilpasser du Wordpress Theme Elementor Header Mal 7

Dette er hva du kan kontrollere i de forskjellige menyene:

  • Layout - Kontroller bredden på seksjonen, størrelsen på mellomrommet mellom kolonnene, høyden, vertikale kolonnen og innholdsposisjonen, den tildelte HTML-koden og den generelle strukturen.
  • Stil - Her kan du endre bakgrunnsfargen inkludert sveveeffekterselv legg til bilde eller video Hvis du vil, kan du legge til overlay-, border- og divider-effekter samt endre innstillinger for typografi.
  • avanced - Denne delen lar deg legge til CSS-attributter som margin og z-indeks, animasjoner, ID-er og klasser. Det lar deg også gjøre seksjonen klebrig og kontrollere innstillingene responsive samt legge til noen Tilpasset CSS.

Alt dette er ganske selvforklarende, og du vil raskt få det du ønsker.

3. Tilpass topptekstelementene

Du kan imidlertid ikke bare redigere overskriftsdelen som en helhet, men også elementene som er inkludert i den. For å tilpasse nettstedslogoen, klikker du bare på den. Også dette vil gi deg redigeringsalternativer på venstre side.

Slik tilpasser du Wordpress Theme Elementor Header Mal 8
Når det gjelder logoen, gir dette deg følgende alternativer:

  • Innhold - Endre bildestørrelse, justering og stedet det er knyttet til.
  • Stil - Kontroller bredde og høyde, legg til CSS-effekter og sveveeffekter, ta med kant og skygge hvis du vil.
  • avanced - Her finner du i hovedsak de samme alternativene som for overskriftsdelen.

Bruk innstillingene til å tilpasse logoen slik du vil at den skal vises godt i overskriften. Vær også oppmerksom på at hvert element har sin egen type alternativer, så husk å sjekke hver enkelt ut.

4. Legg til varer

Med Elementor kan du selvfølgelig også legge til elementer i overskriften. Bare klikk på symbolet øverst til høyre for å se hva som er tilgjengelig.

tilpasse et WordPress-tema med Elementor-plugin.
Når du redigerer en overskriftmal, viser Elementor automatisk de aktuelle blokkene øverst på listen, noe som er mest fornuftig under omstendighetene. I dette tilfellet er dette ting som nettstedets logo, nav-menyen og nettstedets tittel.

Så hvis du for eksempel vil legge til nettstedstittelen ved siden av logoen, bare dra og slipp den på den. Imidlertid tillater topptekstmalen vi for øyeblikket å legge den over eller under logoen. Men det er et problem som lett blir løst.

I et tilfelle som dette, hold musepekeren over overskriften og bruk plusssymbolet –+-til å legge til et avsnitt over.

Slik tilpasser du Wordpress Theme Elementor Header Mal 10

Klikk her på den lilla knappen for å velge et tresøyledesign.

Slik tilpasser du Wordpress Theme Elementor Header Mal 11

Dra deretter elementene fra den eksisterende overskriftsdelen til den nye delen og legg til nettstedets tittel i midten.

Slik tilpasser du Wordpress Theme Elementor Header Mal 12

Men vent, stilen er helt annerledes! ikke noe problem. Bare høyreklikk på den eksisterende overskriften og velg Kopiere. Høyreklikk deretter på den nye delen og klikk her Lim inn stil. Elementor vil deretter bruke stilen til den eksisterende delen, som du kan lukke senere. 

Slik tilpasser du Wordpress Theme Elementor Header Mal 13

Du kan gjøre den samme prosessen med alle de andre headerelementene, og selvfølgelig med alle de andre elementene som er inkludert i Elementor.

Tilpass en unik postmal

I Elementor kan du også tilpasse en enkelt innleggsmal. Dette er hvordan :

1. Lag en ny modell

Å lage en mal fungerer på vanlig måte. Denne gangen velger du imidlertid enslig som modelltype. Velg deretter den unike malen du vil redigere nedenfor. I dette eksemplet, det av Post.

Slik tilpasser du Wordpress Theme Elementor Header Mal 14

Hvis du vil lage et nytt sidedesign, rediger du 404-siden (mer om det senere) eller rediger en tilpasset innleggstype spesielt ville du valgt noe annet. I begge tilfeller skriver du inn et navn og fortsetter.

I neste skjermbilde kan du velge mellom de forhåndsdefinerte malene som vanlig. Imidlertid, i dette tilfellet ønsker vi å lage en ny modell fra bunnen av. Så klikk på X øverst til høyre for å lukke dette vinduet.

2. Konfigurer forhåndsvisningen

Sett deretter forhåndsvisningsvinduet til et eksisterende innlegg. Du kan gjøre dette ved å klikke på øyeikonet nederst i redigeringsalternativene Innstillinger.

Slik tilpasser du Wordpress Theme Elementor Header Mal 15

I menyen som åpnes, under Forhåndsvisning dynamisk innhold, velg Publisere. Etter det kan du i neste linje søke og velge et eksisterende innlegg med navn.

Slik tilpasser du Wordpress Theme Elementor Header Mal 16Når du har gjort det, trykk på Påfør & Forhåndsvisning. Selv om du ikke kan se noe på dette tidspunktet (siden det ikke er noe på siden), vil det be Elementor om å bruke dataene i dette innlegget fra nå av. Du vil snart se hva dette betyr.

3. La oss lage delen ovenfor 

Først lager vi delen ovenfor. Her vil du vanligvis finne ting som innleggstittel og metadata som forfatter, dato og kategori.

Det første trinnet er å klikke på skiltet + og lage en seksjonsdel.

Slik tilpasser du Wordpress Theme Elementor Header Mal 17
Når du gjør det, i layout-delen, har du muligheten til å kontrollere bredden, høyden, plasseringen og stilen. I dette tilfellet er det ikke mye å gjøre her. Ikke bekymre deg, du kan alltid gå tilbake og gjøre endringer senere.

Dra deretter posttittelwidgeten til den nye delen.

Slik tilpasser du Wordpress Theme Elementor Header Mal 18

Når du gjør det, sørg for å bruke alle de tilgjengelige alternativene for å justere design og layout til din smak. Her er for eksempel innstillingene mine for å gjøre det:

Slik tilpasser du Wordpress Theme Elementor Header Mal 19

Det er også en kul funksjon som du bør lære. Når du klikker på nøkkelsymbolet for innleggets tittel, kan du legge til statisk innhold før og etter dine dynamiske data.

Hvis du for eksempel lager en mal for en bestemt innleggskategori, for eksempel nyheter eller oppskrifter, kan du legge den til innleggstittelen slik:

Slik tilpasser du Wordpress Theme Elementor Header Mal 20

På den måten vil de dataene dukke opp for hvert innlegg i den kategorien. Jeg har ikke tenkt å bruke dette på dette tidspunktet, men tenkte at dette var en viktig merknad for deg.

Under tittelen på innlegget vil vi sette inn Post Mer info widget for å se postens metadata.

Slik tilpasser du Wordpress Theme Elementor Header Mal 21

Her er innstillingene jeg bruker:

Slik tilpasser du Wordpress Theme Elementor Header Mal 22

I tillegg brukte jeg stylingsalternativene for å få designen til å passe resten av siden. Forsikre deg om at du gjør det samme.

4. Sett opp stolpen

Etter overskriften er det på tide å opprette brødteksten til siden. Hvis du vil at denne delen skal ha en annen utforming enn toppteksten, må du sette opp en ny seksjon. Imidlertid holder jeg det enkelt, så jeg trenger ikke.

Det første vi vil sette inn er det kjennetegnet bildet. For å gjøre dette, kan du plassere widgeten med samme navn under det som allerede er på siden.

Slik tilpasser du Wordpress Theme Elementor Header Mal 23

Jeg endret i utgangspunktet ingen av innstillingene, bare la alt være som det var.

Så er det på tide at innholdet legges ut. Også her har du en tilsvarende blokk.

Slik tilpasser du Wordpress Theme Elementor Header Mal 24
Du vil legge merke til at Elementor trekker automatisk det som allerede finnes på nettstedet når det gjelder innhold og bildeinnlegg. Gjør eventuelle justeringer i utformingen av den nye blokken du trenger, for eksempel å spille med typografiske innstillinger.

Annet enn det, det er alt. Ikke for mye arbeid å gjøre her, slik at vi kan gå videre til siste del.

5. Konfigurer bunnteksten

I dette tilfellet vil vi at bunnteksten skal vise forfatterens profil, delingsalternativer og leserkommentarer. For å gjøre dette, må vi først lage en ny seksjon med to kolonner. For å skape mer plass for forfatterprofilen, kan du sette den til en 66.33-layout.

Slik tilpasser du Wordpress Theme Elementor Header Mal 25

Etter det plasserer widgeten Forfatterboks i venstre seksjon.

Slik tilpasser du Wordpress Theme Elementor Header Mal 26

Sørg for å tilpasse stilen til dine behov. Jeg la til litt bakgrunnsfarge, og justerte innstillingene for typografi litt.

Etter det er det på tide å legge til deleknapper-blokken på høyre side.

Slik tilpasser du Wordpress Theme Elementor Header Mal 27

Du kan se innstillingene mine på skjermdumpen over.

Etter det er det eneste som er igjen å opprette en seksjon en kolonne til og dra og slippe Post Kommentarer-widgeten inn i den.

Slik tilpasser du Wordpress Theme Elementor Header Mal 28

(Forresten, hvis du noen gang har problemer med å finne noen av disse widgetene, bruker du bare søkefunksjonen).

Slik tilpasser du Wordpress Theme Elementor Header Mal 29

Gjør eventuelle justeringer i kommentarfeltet du føler deg nødvendig (jeg forlot den som den er), og du er klar til å legge ut. Her er den ferdige designen:

Slik tilpasser du Wordpress Theme Elementor Header Mal 30

Tilpass arkivmalen

1. Konfigurer WordPress-arkivmalen

Nå vet du allerede løsningen på å lage nye modeller. Den eneste forskjellen er at i dette tilfellet vil du velge Arkiv som modelltype.

Slik tilpasser du Wordpress Theme Elementor Header Mal 31

Etter det får du som vanlig et antall blokker å velge mellom, eller du kan også lage din egen modell fra bunnen av. For arkiver har du imidlertid omtrent bare to widgets Elementor som uansett er viktige.

2. Definer tittelen på arkivet

Den første blokka jeg vil snakke om er arkivtittelen Arkivtittel.

Slik tilpasser du Wordpress Theme Elementor Header Mal 32

I tillegg til de vanlige innstillingene under Stil og avansert, kan du finne et viktig alternativ når du klikker på nøkkelsymbolet under Tittel.

Slik tilpasser du Wordpress Theme Elementor Header Mal 33

Her kan du aktivere og deaktivere om Elementor viser arkivtypen på siden som den delen der det står Forfatter: nedenfor. Dette skjer gjennom knappen under Inkluder kontekst

Forresten, som vanlig kan du forhåndsvise forskjellige arkiver ved å bruke forhåndsinnstillinger (Øyesymbol> Innstillinger). På denne måten kan du se designet for unike kategorier, koder, forfattere og mer. Husk på.

3. Bruk arkivpublikasjonene

Den andre viktige widgeten for arkiver er Archive Posts. Dette bringer alle innleggene som hører til ethvert arkiv på en side. Når du velger en mal, er de allerede der, men du kan også enkelt legge dem til selv med denne blokken.

Slik tilpasser du Wordpress Theme Elementor Header Mal 34

La oss se på alternativene det gir deg å tilpasse arkivsidene:

  • Skin - Velg å vise innleggene dine i et klassisk eller kort stil design.
  • kolonner - Bestemmer antall kolonner der innleggene dine vises.
  • Vis bilde - Aktiver kjente bilder på arkivsider
  • Masonry – Viser elementer i murdesign eller ikke.
  • Bildestørrelse - Størrelsen på bildet Elementor skal bruke på arkivsider.
  • Tittel - Vil du vise innleggstittler eller ikke?
  • Tittel HTML Tag - I så fall, hvilken HTML-kode skal pakkes rundt den?
  • Utdrag - Inkluder utdrag fra innleggene dine, eller vis bare tittelen.
  • utdragslengde - Bestem lengden på ekstraktene.
  • metadata - Definerer metadataene som er tilgjengelige for besøkende.
  • Separator mellom - Skillesymbol mellom metadatainformasjon.
  • Les mer - Inkluder en "les mer" -lenke, ja eller nei?
  • Badge - Lar deg legge til mer informasjon i innlegg, for eksempel kategorier og tagger.
  • Taksonomimerket - Her kan du bestemme hvilken informasjon du vil inkludere.
  • Avatar – Med denne kan du endre profilbildet til forfatterne av artiklene

I tillegg til ovenstående har du noen flere alternativer. Under personsøker, Du kan definere hvordan arkivsøking skal håndteres. Hvordan du for eksempel viser det, antall sider som skal inkluderes og justeringen av teksten.

Endelig Avansert lar deg angi at meldingen skal vises når en besøkende lander på et tomt arkiv. Alt annet bør være kjent. Bare merk at stilalternativene endres avhengig av huden du har valgt.

4. Kontroller antall publikasjoner per arkiv

En rask merknad om arkivmaler. For å endre antall innlegg som vises i et arkiv (eller på bloggsiden din), må du gjøre det i WordPress under Innstillinger> Lesing. 

Slik tilpasser du Wordpress Theme Elementor Header Mal 35

Her er det bare å angi antall innlegg du vil at besøkende skal se.

tilpassing facile WordPress-tema med Elementor

Å tilpasse WordPress-temaer er brødet til mange fagfolk. Selv om dette vanligvis innebærer mye koding og redigering av filer, er dette ikke lenger nødvendig med Elementor.

Som du så ovenfor, er plugin-en en fullverdig WordPress-temaredigeringsprogram. Den lar deg tilpasse hver del av den fra brukergrensesnittet. Du kan redigere nettstedets topptekst, bunntekst, side- og innleggsmaler, arkivmaler og mer.

Med muligheten til å bruke dynamisk innhold og forhåndsvise en hvilken som helst del av nettstedet ditt, kan du implementere alle trendy tilpasninger

Kort sagt, Elementor gjør det enkelt å tilpasse WordPress-temaet. I stedet for møysommelig å gjøre endringer med dusinvis av filer og hundrevis av kodelinjer, kan du raskt gjøre alt på ett sted.

Få Elementor Pro nå!

konklusjonen

Der er den! Det er det for denne artikkelen som viser deg hvordan du tilpasser et WordPress-tema med Page Builder Elementor. Hvis du har noen bekymringer om hvordan du kommer dit, gi oss beskjed innen commentaires.

Du kan imidlertid også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.

Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.

...