Inspiration.
Det er mit mål for dig.
En masse WP-brugere har endnu ikke indset, hvor kraftfuld WordPress er, så lad dette indlæg være en kilde til inspiration, mens du opdager nye værktøjer og taktikker til at tilpasse dit WordPress-websted.
Du vil brande dit websted, personliggøre dit indhold og endda foretage ændringer i administrationsinstrumentbrættet.
Når du er færdig med at læse, har du et smukkere, fuldt branded websted.
Der er meget at lære her, så bookmarkér denne side, så du kan komme tilbage og blive færdig, hvis du har brug for mere tid.
Lad os komme i gang med den største tilpasningstaktik af alle…
- Vælg et nyt tema
- Skift til en statisk hjemmeside
- Skab en brugerdefineret hjemmeside
- Opnyt din skrifttype
- Ændre antallet af indlæg pr. side
- Aktiver uendelig rulning
- Brug konsekvente Featured Images
- Skriv et brugerdefineret uddrag til hvert indlæg
- Anpas, hvordan dit websted ser ud på Facebook
- Føj dine sociale ikoner til
- Add social sharing buttons
- Føj en kontaktformular
- Opret en landingsside
- Opret en brugerdefineret menu
- Få din menu til at være “klæbrig”
- Anpas dine farver
- Føj dit logo til fanen i browseren
- Føj et baggrundsbillede til
- Opret en loginside med branding
- Anpas WP admin
- Ajourfør dit visningsnavn
- Vis en brugerdefineret avatar
- Føj en forfatterboks til
- Føj en “Om mig”-widget
- Kontroller, hvilke sider widgets vises på
- Tilføj kategoribeskrivelser
- Anpas teksten i bunden
- Anpas de e-mails, som WordPress sender
- Apas din 404-side
- Mester HTML-widget
- Konklusion
Vælg et nyt tema
Den hurtigste måde at foretage en dramatisk ændring af dit websted på er at skifte WordPress-temaer.
Skift af temaer vil øjeblikkeligt ændre alt ved dit websteds design.
Men der er et problem…
Der er mere end 10.000 WordPress-temaer at vælge imellem!
Du kan nemt bruge dage på at gennemse og gennemgå temaer. Det er der faktisk mange, der gør!
Hver uge sender folk mig en e-mail og siger, at de har kigget på hundredvis af temaer, før de valgte et af mine.
Hvis du vil spare tid, så følg min guide til, hvordan du vælger det perfekte tema til dit websted.
Hvis du vil afprøve et nyt design med det samme, har vi selvfølgelig 19 gratis WordPress-temaer, som du kan få vist direkte fra dit WP-dashboard.
Den næste nemme måde at foretage en stor ændring af dit hjemmesides design på er at skifte fra dine seneste indlæg til en statisk side på hjemmesiden.
Skift til en statisk hjemmeside
Her er et insidertip:
Alle WordPress-websteder bør bruge en statisk hjemmeside.
Ja, selv hvis du er en blogger. Faktisk især hvis du er blogger!
Du får flere abonnenter og tjener flere penge med dit websted, hvis du gør mere end at liste dine nyeste indlæg.
For eksempel kan din hjemmeside indeholde en e-mail-optin-formular for at opbygge dine abonnenter og derefter promovere et par af dine bedste indlæg i stedet for blot at vise dine nyeste indlæg.
Denne ændring er nem at foretage fra WordPress-dashboardet. Du skal blot vende denne indstilling til en statisk side:
Og du kan følge med i denne enkle videovejledning:
Selvfølgelig spekulerer du nu sikkert på, hvordan du opretter en brugerdefineret hjemmeside. Det er også nemt at gøre med det rigtige værktøj.
Skab en brugerdefineret hjemmeside
Du kan bruge Elementor til at designe en brugerdefineret hjemmeside.
Hvis du ikke er bekendt med det, er Elementor et side builder-plugin, og som “page builder”-delen antyder, kan du bruge det til at oprette helt brugerdefinerede sider.
Denne dybdegående videovejledning vil lære dig at bruge Elementor:
Abonner på Compete Themes på Youtube
For at komme i gang kan du installere Elementor på dit websted ved at søge efter det i menuen Plugins eller ved at downloade det fra wordpress.org.
Når du har installeret Elementor på dit websted, kan du besøge en hvilken som helst side og klikke på knappen “Rediger med Elementor” for at starte editoren.
Du vil blive ført til denne grænseflade:
I venstre side af skærmen er alle de forskellige tilgængelige widgets, som du kan trække-og-slippe ind i sidens indholdsområde.
For at lave en brugerdefineret side skal du blot tilføje de ønskede widgets i sidens indholdsområde. Hver enkelt har et væld af tilpassede muligheder inkluderet, som f.eks. dette:
Gutenberg har lignende blokke, men widgets i Elementor kan tilpasses meget mere.
Men at tilføje og tilpasse hver widget én ad gangen kan virke som en masse arbejde. For at gøre tingene nemmere har Elementor stilfulde præfabrikerede blokke, som du kan indsætte på enhver side:
Endnu bedre, Elementor har færdige salgssider, som du kan indsætte i din pagge med et enkelt klik.
Du kan gennemse de præfabrikerede hjemmesider, indsætte din favorit og derefter udskifte tekst og billeder for at få en perfekt pasform.
Der er en del gratis salgssider, men de fleste af de bedste er kun tilgængelige i Elementor Pro.
Så for at opsummere, hvordan det hele fungerer…
Du vil stole på dit tema til de fleste af siderne på dit websted, men når du har brug for en helt tilpasset side, f.eks. til din hjemmeside, er dette et godt tidspunkt at bruge Elementor på. Faktisk er jeg selv som temaudvikler begyndt at oprette sider med Elementor i stedet for at kode dem selv, fordi det er så hurtigt og enkelt.
Tjek Elementor ud →
Nu, hvor du kender til side builders, skal vi vende tilbage til globale tilpasninger af webstedet.
Opnyt din skrifttype
Den skrifttype, du vælger, har stor betydning for karakteren af dit websted.
Det er derfor, du måske bliver irriteret, hvis du ikke har fået lov til at vælge din skrifttype.
Jeg gætter på, at dit tema ikke har brugerdefinerede skrifttyper, hvis du læser dette, så her er en enkel og gratis løsning:
Installer Google Fonts Typography-plugin.
Dette plugin giver dig fuld adgang til Google Fonts-biblioteket, som er de facto skrifttypekilden for internettet.
Jeg bruger Google Fonts i alle mine temaer, og jeg kender ingen temaudviklere, der bruger noget andet.
Når du har installeret Google Fonts Typography-plugin’et, finder du et nyt panel i Tilpasningsværktøjet, hvor du hurtigt kan skifte skrifttype på hele dit websted.
Jeg har en detaljeret videovejledning om at ændre din skrifttype med Google Fonts Typography, hvis du vil have trinvise instruktioner.
Hvis du bruger et af vores temaer, finder du også Google Fonts fuldt integreret i dit tema i PRO-opgraderingen af dit tema.
Nu er her en anden hurtig gevinst til at justere præsentationen af dit websted.
Ændre antallet af indlæg pr. side
Som standard viser WordPress ti indlæg på din hovedblogside og arkiver (kategorier, tags, forfatter og dataarkiver).
Ten er en god standardindstilling, men hvad hvis du har et layout med flere kolonner, som f.eks. layouts i Challenger Pro?
Besøgende vil scrolle forbi alle ti indlæg i et enkelt swipe. Dit websted vil fungere bedre, hvis du inkluderer flere indlæg, f.eks. 16 eller 20 i stedet.
Du kan gå til menuen Læseindstillinger (Indstillinger > Læsning) og hurtigt ændre antallet af indlæg pr. side med denne indstilling:
Enkel, ikke?
Når nogen når til slutningen af dine indlæg, kan de klikke på paginering for at finde mere, men der er en anden tilpasning, der er bedre end simpel paginering.
Aktiver uendelig rulning
Være ærlig.
Hvor ofte klikker du rent faktisk på pagineringens links nederst på en blog?
Jeg gør det nogle gange, men det eneste, jeg nogensinde klikker på, er linket til den næste side med indlæg. Når du ved det, har du så virkelig brug for andet end en “flere indlæg”-knap?
Infinite scroll giver besøgende mulighed for at rulle ned ad en side og automatisk indlæse indlæg, mens de ruller. Selv om dette kan fungere godt for nogle websteder, er der en lille justering, der har tendens til at fungere bedre. Den løsning er at inkludere en “load more”-knap efter dine indlæg, som her:
Besøgende kan klikke på knappen for at indlæse indlæggene automatisk uden at genindlæse hele siden.
Det gratis WordPress Infinite Scroll-plugin gør et fremragende stykke arbejde, men du skal være komfortabel med at redigere noget kode i dit tema.
Hvis du ønsker en kodefri løsning, er der en funktion til uendelig rulning inkluderet i Jetpack. Ikke alle temaer er kompatible, men alle 19 af vores temaer fungerer med Jetpack.
Infinite scroll får dine besøgende til at læse flere indlæg og bruge længere tid på dit websted. Mens vi er ved dette emne, er her faktisk to andre måder at tilpasse dit websted på, så de besøgende læser flere af dine indlæg.
Brug konsekvente Featured Images
Du bruger vel Featured Images, ikke?
For at sikre, at vi er på samme side, kan du bruge denne indstilling i sidebaren på ethvert indlæg eller enhver side til at tilføje et Featured Image:
Og billedet vises derefter på bloggen og indlægssiden på denne måde:
Featured Images vil hjælpe hvert indlæg med at få mere opmærksomhed og flere klik, hvilket betyder flere læsere og abonnenter.
Men der er mere til det.
Nogle WordPress-brugere tænker kun på ét indlæg ad gangen, når de vælger Featured Images, og det får deres blog til at se usammenhængende ud.
Når du vælger Featured Images, skal du sørge for at holde et ensartet udseende.
For eksempel holder jeg mig normalt til vektorgrafik til Featured Images her på Compete Themes-bloggen.
Vælg en konsekvent æstetik til Featured Images på dit websted, og det vil give et smukkere design.
Jeg bruger Vecteezy til vektorgrafik, og Unsplash er den bedste kilde til gratis, professionelle fotografier. Du kan også lide Canva til at tilføje en indlægstitel oven på dine billeder.
Hvis du vil have din blog til at være endnu mere lokkende, skal du følge dette næste tip.
Skriv et brugerdefineret uddrag til hvert indlæg
Jeg kan ikke tro, hvor få mennesker der skriver brugerdefinerede uddrag!
I editorens højre sidebar finder du denne boks med uddrag:
Så længe du bruger et velkodet tema, vil det uddrag, du skriver der, blive vist på bloggens hovedside og i arkiverne.
Der er to grunde til at skrive et brugerdefineret uddrag til hvert indlæg.
For det første bruger dit tema sandsynligvis de første 25 ord. Tror du ikke, at du kan skrive en mere lokkende teaser til dit indlæg end blot at tage de første 25 ord? Besøgende vil klikke mere, hvis du skriver overbevisende uddrag.
For det andet kan du sørge for, at uddraget passer godt ind i designet, når du skriver brugerdefinerede uddrag. Hvis standardlængden ser for lang eller for kort ud, kan du løse problemet ved at skrive manuelle uddrag.
Det vil også få dit websted til at fungere bedre på de sociale medier, hvis du følger denne næste tilpasningstaktik.
Anpas, hvordan dit websted ser ud på Facebook
Hvis du har fulgt mine to sidste tips, vil du elske den måde, som dine indlæg ser ud, når de deles på Twitter og Facebook.
Men!
Du skal tilføje “Open Graph”-tags til dit websted. Den nemmeste måde er at installere Yoast SEO-plugin’et.
Yoast SEO vil optimere dit websted, så det rangerer bedre i Google. Jeg vil ikke komme for langt ud på et sidespor, for dette indlæg handler om webdesign og ikke om søgemaskineoptimering, så du kan læse disse SEO-tutorials, hvis du vil have mere information om alt det.
Den anden ting Yoast SEO gør er at tilføje Open Graph-tags til dit websted 😁
Open Graph-tags vises i kildekoden på hver side på dit websted og fortæller sociale medier som Facebook, hvilket indhold de skal bruge, når nogen deler dit websted.
Hvis du tilføjer et Featured Image og skriver et brugerdefineret uddrag, er det det det indhold, som Facebook viser, når indlægget deles, men kun hvis du har tilføjet Open Graph-tags.
Med Yoast SEO har du også mulighed for at tilføje et andet billede kun til Facebook og/eller Twitter.
Hvor sejt er det?
Du kan bruge et almindeligt fotografi som dit Featured Image, men have en anden version med titlen overlejret, kun til når folk deler indlægget på Facebook.
Mens vi taler om sociale medier, er denne næste tilpasning vigtig for at opbygge dit publikum.
BONUS TIP: For at spare tid skriver jeg en brugerdefineret metabeskrivelse for hvert indlæg, indtaster den i Yoast og genbruger den derefter som indlægets brugerdefinerede uddrag.
Denne WordPress-tilpasning er død simpel.
Hvis du vil have folk til at følge dig, skal du gøre det nemt!
De fleste temaer i disse dage har sociale ikoner indbygget, som Mission News-temaet, der indeholder ikoner for mere end 50+ sociale medier.
Når nogen klikker på et af ikonerne, fører det den besøgende direkte til din sociale profil. Dette er en god måde at få folk til at følge dig på den platform, de foretrækker.
Selv om det er godt at tilføje sociale ikoner i headeren og/eller footeren på dit websted for at opbygge dit publikum, bør du også overveje at tilføje sociale delingsknapper.
Jeg vil ikke forvirre dig, så lad mig gøre dette klart.
I sidste trin anbefalede jeg at tilføje linkede ikoner til dine sociale profiler i headeren på webstedet. Det er bare links.
Sociale delingsknapper skal tilføjes i dine indlæg, som her:
Når nogen klikker på en af disse knapper, åbnes der en ny fane med indlægget udfyldt og klar til at blive delt.
Der er tonsvis af plugins at vælge imellem, men min nye favorit er Scriptless Social Sharing.
Det problem, jeg har med de fleste plugins til deleknapper, er, at de gør dit websted for langsomt. Scriptless Social Sharing indeholder de essentielle funktioner og intet mere. Det indlæses super hurtigt og fungerer fantastisk på desktop og mobil.
Med al den nye trafik, du får, vil du gerne foretage nogle flere tilpasninger for at gøre dit websted mere rentabelt.
Føj en kontaktformular
Hvis du sælger tjenester på dit websted, så er det indlysende at tilføje en formular, så kunderne kan komme i kontakt.
Men en kontaktformular er en vigtig del af ethvert websted. Du ved aldrig, hvilke muligheder der kan komme på din vej.
Når det kommer til at tilføje en kontaktformular, er WPForms mit yndlings-plugin.
Det er utroligt tilpasningsdygtigt og nemt at bruge. Plus, premium-opgraderingerne tager virkelig tingene til det næste niveau.
Min guide om, hvordan du tilføjer en kontaktformular til WordPress, vil føre dig gennem alle trinene.
Hvis du ikke sælger tjenester, eller du allerede har en kontaktformular, vil du måske oprette en ny landingsside.
Opret en landingsside
En landingsside er en side på dit websted, som besøgende lander på. Med andre ord sender du ny trafik hertil for at konvertere dem til abonnenter og/eller kunder.
Hvis du har succes med at drive trafik til dit websted, er det tid til at oprette et tilbud på en landingsside og sende besøgende dertil.
Jeg anbefaler at bruge Elementor-plugin’et til at oprette en brugerdefineret landingsside. De har færdige landingssider og site kits, som du kan bruge som udgangspunkt.
Et trick med landingssider er, at du enten fjerner al navigation eller begrænser navigationen på den pågældende side. For at gøre dette skal du vide, hvordan du opretter brugerdefinerede menuer.
Selv om det afhænger af, hvilket tema du vælger, vil dit websted sandsynligvis udsende hver “Side” i hovedmenuen.
Dette er ikke ideelt.
Du vil gerne oprette et brugerdefineret sæt links til din menu og potentielt et par menuer, som du viser på forskellige sider på dit websted.
For at oprette en brugerdefineret menu skal du følge trinene i denne videovejledning:
Du lærer, hvordan du tilføjer links til alle indlæg, sider eller endda eksterne URL’er i din menu. Du kan også omarrangere dem og oprette dropdown-menuer med lethed.
Føj denne næste tilpasning til for at gøre dit websted endnu nemmere at navigere på.
Du har scrollet et stykke ned i dette indlæg nu, men hvis du kigger øverst på skærmen, kan du se, at den primære menu stadig er synlig.
Hvis du altid holder din menu fast i toppen af skærmen, bliver det meget nemmere at navigere på dit websted, fordi de besøgende ikke behøver at scrolle hele vejen op igen, hver gang de beslutter sig for at navigere til en ny side.
Der er to enkle måder at gøre din navigation klæbrig på (hvis dit tema ikke allerede indeholder denne mulighed).
Først kan du installere det gratis Sticky Menu on Scroll-plugin.
Dette plugin fungerer fint, men du skal vide, hvordan du finder en CSS-selektor, der skal bruges. For alle vores temaer kan du bruge enten #site-header
eller #menu-primary-items
, afhængigt af om du vil have hele overskriften eller kun den primære menu til at være klæbrig.
Det andet alternativ er at bruge den klæbrige menuindstilling, der er tilgængelig i Elementor Pro. Denne metode kræver ikke brug af CSS-selektorer, og du kan tilpasse menuens design fuldstændigt, mens du er i gang.
Jeg har endnu et tip til at gøre dit websted endnu nemmere at navigere på.
Du har sikkert hørt om eventyret, Hans & Grete.
Som du måske husker, taber de brødkrummer, mens de rejser gennem skoven og efterlader et spor, som de kan følge for at finde hjem igen.
Webdesignere har taget det samme udtryk til sig for det spor af links, der sommetider tilføjes under overskriften, som dette eksempel på Amazon.
Hvert link fører dig et skridt tilbage i webstedets navigation.
Selv om dit websted utvivlsomt er mindre og mindre komplekst end Amazon, ville det sandsynligvis stadig have gavn af brugen af brødkrummer.
Hvis du har installeret Yoast SEO-plugin’et, der blev anbefalet tidligere i dette indlæg, behøver du ikke at gøre meget andet. Du skal blot klikke på denne mulighed for at slå den til fra indstillingsmenuen:
Alle vores temaer er kompatible med Yoasts brødkrummespor, men du skal muligvis tjekke med din temaudvikler, hvis brødkrummerne ikke vises på dit websted.
Med disse sidste par tips har du foretaget alle de vigtigste tilpasninger til din navigation.
Nu skal vi gå videre til branding af dit websted for at opnå en ensartet visuel effekt.
Anpas dine farver
Dette er et simpelt og måske indlysende skridt til at brande dit websted.
Hændelse af accentfarven på hele dit websted vil skabe en ensartet visuel effekt.
Hvis dit tema ikke indeholder tilpassede farver, og du ikke ved, hvordan du tilpasser dit websted med kode, så lad mig introducere dig til et fantastisk værktøj: CSS Hero.
Her er lidt baggrund….
CSS er navnet på det kodningssprog, som webdesignere bruger til at style websider. CSS Hero er et WordPress-plugin, som giver dig mulighed for at tilpasse dit tema uden selv at skrive en eneste linje CSS.
For eksempel kan du nemt ændre baggrundsfarven på dit websted med CSS Hero. Du ville starte med at åbne den visuelle editor, som ser sådan ud:
Dernæst ville du klikke på baggrunden, der afslører et sæt tilpasningsmuligheder i venstre sidebar.
Sidst ville du bruge indstillingen baggrundsfarve til at indstille den til en hvilken som helst farve, du ønsker, og derefter gemme dine ændringer.
CSS Hero kan bruges til at ændre farven på ethvert element på dit websted samt skrifttyperne, afstanden og masser af andre designaspekter.
Afprøv CSS Hero →
Denne næste tilpasningsteknik er et must for ethvert professionelt websted.
Føj dit logo til fanen i browseren
Jeg er sikker på, at dit logo allerede er øverst på dit websted. Alle temaer, jeg nogensinde har set, indeholder en simpel mulighed for dette.
Men du bør ikke stoppe der!
Du bør også tilføje dit logo til selve browserfanen, som her:
Dette lille ikon betegnes normalt som et favicon, men WordPress-grænsefladen kalder det et “Site-ikon.”
Du kan ikke desto mindre finde denne indstilling i Tilpasningsprogrammet (Udseende > Tilpas).
I Customizer skal du åbne afsnittet Site Identity, og du finder indstillingen Site Icon nederst.
Det eneste, du skal gøre, er at uploade logobilledet fra din computer og trykke på knappen Publish.
Når du vælger et billede til faviconet, er det bedst at bruge et ikon, hvis dit logo indeholder et sådant. For Compete Themes bruger jeg ikonet med pen og skjold, men hvis jeg ikke havde det, ville jeg blot lave logoet til en blå firkant med “CT” i hvid tekst.
Du vil måske også blive overrasket over at se, at WordPress anbefaler, at dit billede skal være 512x512px. Det virker lidt stort, synes du ikke?
Og udover ikonet i browserfanen vil dit favicon også blive genbrugt i bogmærker, som kan vises meget større. For eksempel kan en person, der bruger en iPad Pro, gemme dit websted på sin Safari-startskærm, hvor ikonet vil blive vist ret stort.
Du kan følge med i vores fulde vejledning om, hvordan du tilføjer et favicon til WordPress, hvis du ønsker mere detaljeret vejledning (der er også en videovejledning)
En anden måde at give dit websted et særskilt udseende på er at bruge et baggrundsbillede med et mærke.
Føj et baggrundsbillede til
Du ser ikke baggrundsbilleder så ofte længere.
I disse dage holder de fleste websteder sig til en almindelig hvid eller lysegrå baggrund. Hvis du virkelig vil skille dig ud, kan du prøve at tilføje et baggrundsbillede, der både er smukt og på mærket.
Vi kan igen henvende os til CSS Hero til denne tilpasning.
Vælg baggrunden, men i stedet for at indstille en farve, skal du i stedet vælge billedindstillingen.
Du kan uploade et hvilket som helst billede, du vil, og endda importere et direkte fra Unsplash.
Nu skal vi tage din branding til det næste niveau.
Opret en loginside med branding
Hvis du har medlemmer, der logger ind på dit websted, er det et must at oprette en loginside med branding.
Selv hvis det kun er dig, der logger ind på dit websted, giver branding af loginsiden faktisk en reel følelse af professionalisme og tilfredshed. Tro mig!
Jeg brandede Compete Themes-loginsiden, og nu ser den fantastisk ud:
Jeg gjorde dette ved hjælp af det gratis plugin Custom Login Page Customizer.
Hvis du vil følge de samme trin, skrev jeg et indlæg til WP Newsify alt om alt om det.
Hvis du har fulgt med, så er dit websted og login-skærmen helt branded, men der er ingen grund til at stoppe der!
Lad os tage branding ind i webstedets dashboard for at tage din WordPress-webstedstilpasning endnu længere.
Anpas WP admin
Først af alt, bare i tilfælde af at du ikke vidste det, kan du ændre farvepaletten i admin-dashboardet fra menuen Din profil.
Fortrørende, farveskemaerne der passer sandsynligvis ikke perfekt til dit brand. Hvis du vil have fuld kontrol over din administrationsgrænseflade, skal du tjekke plugin’et WP Custom Admin Interface.
Du får en enorm kontrol over designet af dit websteds administrationsgrænseflade. Du kan f.eks. oprette en ny farvepalet, der kan vælges fra menuen Din profil.
Og du kan endda omdøbe og omarrangere dine menupunkter, skjule menuer og tilføje helt tilpassede nye menupunkter.
Hvis du ønsker total kontrol over administrationsgrænsefladen, er dette måden at gøre det på.
Nu, hvor du kender alle de bedste måder at brande dit websted til en virksomhed, skal vi dække nogle personlige brandingtilpasninger.
Jeg ser dette hele tiden på nye WordPress-websteder: