Sådan skaber du din portfolio med WP 6.7

Denne tutorial giver dig 11 enkle trin til at sætte din portfolio op i WordPress 6.7 med Twenty Twenty-five temaet.

0) Designprocessen

Så snart du har udviklet dine, moodborads, tegnet wireframes, og når du har fået ideen til portfoliens overordnede styletile, da er du klar til at arbejde videre i WordPress.

Der er ingen grund til at spilde tid med et alt for komplekst design i fx Figma. WP består allererde af komponenter i form af pagebuilderens blokke. Designopgaven handler mest af alt om at style disse elementer.

Sitet kan altså designes direkte i WordPress pagebuilderen. Når du skal dokumentere din udviklingsproces, så er det bedst at begynde med wireframe, og dernæst at lave screendumps eller video screencasts, der viser stadierne i arbejdet med din portfolio.

I WordPress arbejder vi med komponenter, eller blokke, der sættes sammen til sider. Lidt som legoklodser.

Inden du går i gang med at producere indhold, er det en god ide at begynde med det, som sætter stemningen i hele produktionen. Dette sker, når du bruger din style tile til at definere temaets farver og fonte.

1) Farverne

Du har nok en ide om, hvilke farver der passer bedst til dit tema. Men du kan ikke forvente, at Twenty Twenty Five (eller højere) har præcis den kombination af farver som du drømmer om.

1.1) Color Picker

Her har jeg valgt fire farver i en DuckDuckGo’s “color picker“. Hvis du vil have disse farver som standardfarver, skal du åbne for Full Site Editing.

Full Site Editing åbnes sådan: > Udseende > Editor

Du får nu adgang til at redigere hele stitets udseende. Det er her du ændrer fonte, skabeloner – og naturligvis farverne.

Klik på “Stilarter“.

Nu åbnes en menu til venstre, hvor du kan se en række “stilkombinationer“.

Du kan vælge en af dem – og redigere, hvordan den skal se ud. Husk at klikke på den blå “Gem” knap nederst på siden, når du er tilfreds med dine tilretninger.

Jeg vælger Ember, for at have lidt farvelade at gå i gang med.

Øverst i menuen findes to ikoner, der ligner et øje og en pen:

  • Øjet åbner for en designmanual, hvor du kan se, hvordan alle blokke og komponenter ser ud. Hvis du klikker på en komponen, fx afsnit åbnes en ny dialog, hvor du kan ændre blokkens farver, fonte, CSS, &c.
  • Pennen gør noget lignende. Her kommer du også i et område, hvor du kan ændre skriftyper, skygger, layout og farver.

Og det er som sagt farverne, vi skulle ændre. Klik på Farver. Nu kan du ændre sitets Palette, og de farver, som de enkelte elementer har.

Paletten - her kan du ændre farverne.
Først skal du vælge farverne til temaets farvepalette. Derefter kan du bruge farverne til sitets elementer.

Nu kan du tilrette paletten, så den får de fire farver, som skal bruges. Derefter kan du farvesætte de enkelte elementer, som fx Tekst, Baggrund, Links, Billedtekster, Knapper og Overskrifter.

1.2) Farver – prøv det selv!

  • Klik på farverne, og indsæt den relevante hexkode.
  • Hvis du har brug for mere end fire farver, så klik på + ved siden af brugerdefineret.

Her er min nye palette. Den sorte nuance og den hvide bevares; de øvrige fire farver er tilføjet.

Husk, at klikke på “Gem”.

1.3) Sæt farver på Elementerne

Når paletten er gemt, kan du bruge dine farver på de enkelte elementer, som links, overskrifter, tekst, baggrunde, etc.

Det er en god ide at tjekke om de forskellige blokke ser godt ud med de valgte farver. Klik på øje-ikonet, og gennemse hvordan alt ser ud.

Her bliver koden nærmest ulæselig i det midterste felt. Du kan ændre blokkens udseende til højre.

Klik på farver og fonte, og lav de nødvendige ændringer. I dette tilfælde får vi brug for en bedre farvekontrast.

Her har jeg valgt en blå/hvid farvekontrast. Det ser det noget bedre ud.

Sådan kan du farvesætte alle blokke.

Hvis du fortryder nogen farver, så kan paletten altid laves om senere.

2) Fonte

I WordPress kan du anvende utallige forskellige skrifttyper. Hvis du klikker på ikonet ved siden af Fonts åbnes muligheden for:

  • Library: er de fonte som du har adgang til.
  • Upload: her kan du uploade en font, du har designet eller hentet fra nettet.
  • Install Fonts: giver adgang til Google fonts, hvis du tillader det.

Prøv at vælge en passende font til overskrifter. Installer den. Derefter kan du gå ind i typografi, og tilføje fonten ved fx Headings. På billedet herunder kan du se, at fonten Aclonica bruges på overskrifterne.

I Stilarter kan du nu bruge særlige fonte til overskrifter, brødtekst, links &c.

3) Layout

Layout handler om at definere indholdets bredde og afstand mellem blokkene. Layoutet sætter med andre ord rammerne for hvor brede tekster og blilleder kan være.

Mulighederne under Layout

Du kan tilrette layoutet på flere måder. Her kan du vælge om der skal være afstand mellem dine blokke, og sætte nogle bredder på indholdet.

  • Indhold: giver den generelle bredde til dit indhold.
  • Bred: anvendes der, hvor nogen blokke skal være lidt bredere. Det kan fx være en god ide til herosektioner eller videoer.

Når du anvender et billede, en tekstblok eller lignende, kan bredden sættes til 100%, indhold eller bred. 100% vil fylde browservinduet ud. Så den behøver du ikke at definere.

Indhold og bred kan defineres som px, %. eller andre måleenheder. Hvis websitet skal fungere optimalt på mobile enheder bør du vælge en passende måleenhed. Px kan måske være upraktisk i visse sammenhænge.

Hvis du får brug for et design, hvor billeder ligger tæt op ad hinanden, så kan du sætte blokafstanden til 0px.

4) Skabeloner

Skabeloner definerer, hvordan dit indhold præsenteres. Når du arbejder med skabelonerne er det en god ide at tage udgangspunkt i dine wireframes.

Den typiske skabelon består af:

  • Header
  • Indhold
  • Footer

Men det står dig frit for at lave skabeloner med et alternativt udseende. Mange multimediedesignere kan lide at arbejde i en blank template, hvor du kan bygge, som du vil.

Når du ser en typisk WordPress-side hentes header og footer fra skabelonen. Du kan selv designe skabeloner til sider, fx kan du lave en skabelon med en særlig header, eller måske helt uden header, hvis det er praktisk et eller andet sted.

Skabelonerne findes her: > Udseende > Editor > Skabeloner

Et tema består af et antal skabeloner, der hver for sig definerer, hvordan header, indhold og footer skal vises. En skabelon vil typisk definere, hvordan indholdet præsenteres på en lang række sider.

Skabelonerne kan bygges og redigeres i editoren. Nogle skabeloner tjener særlige formål. Et godt eksempel er Blog-forside. Når denne skabelon findes bliver den til bloggens forside. Hvis dit tema ikke har denne skabelon kan den tilføjes via “Tilføj ny skabelon”.

5) Lav din egen forside

Forsiden defineres lettest ved hjælp af en særlig skabelon. Twenty twenty-fives forside er Blog-forside; men du kan lave din egen og designe den som du vil.

Det skal vi prøve nu. Her får du brug for den skabelon, der hedder Forside. Men denne skabelon findes ikke i Twenty Twenty Five. Du skal selv lave den.

Her har jeg tilføjet skabelonen Forside til mit tema. Skabelonen består af en banner blok og en navigationsmenu. Sådan får sitet en ny forside.

Klik på “Ny Skabelon” og vælg Forside. Nu kan du designe en forside til websitet. Du kan evt. kopiere elementer fra en eksisterende skabelon.

WordPress kommer med nogen forslag til forsidens design; men du behøver ikke at vælge dem. Du kan springe dem over, og begynde helt fra et layout, der er helt blankt.

Når du gemmer skabelonen har dit website fået en ny forside.

6) Skabelonen Blog-forside

Denne skabelon er standardforsiden i Twenty Twenty Five. For at være helt ærlig, så er denne template en rodet affære. Et sted på denne skabelon ligger et forespørgselsloop, og det er dette loop som henter gemte indlæg frem fra databasen.

Blog-forside bruget loopet til at hente de nyeste indlæg. Du kan se, hvordan lagene er lagt ind i forespørgselsloopet, der henter de nye indlæg fra databasen.

Skabelonen Blog-forside.

Skabelonerne redigeres i WordPress’ standard editor, der hedder Gutenberg. Det er præcis den samme editor, som bruges når man skriver indlæg og sider.

Forskellen mellem en skabelon og indlæg / sider er at man markerer, der hvor indholdet skal være i en skabelon. I sider og indlæg skriver man det konkrete indhold. Tommelfingerreglen er, at der helst ikke må være egentligt indhold i en skabelon. Skabelonen viser, lidt som en wireframe, hvor layoutets elementer skal være.

7) Lav en blog eller et nyheds-flow

En blog er en slags nyhedsstrøm. Som regel placeres det seneste indlæg først. Det betyder, at du altid kan opdatere websiden med dine aktuelle projekter. Hvis du fx lige har designet noget – så kan du vise det frem i bloggen. En blog kan også bruges som logbog, når du er i praktik.

Blogindlæg sat ind med blokken Forespørgselsloop. Nu kan du fortælle om store og små nyheder.
Her er websitets forside. Menuen har fået tilføjet siden Blog.

Du kan lægge bloggen ind på din forside ved hjælp af blokken Forespørgsels-loop; men du kan også lave en særlig side til dine fortællinger. Hvis du ønsker, at en side skal fungere som din nyhedskanal, gør sådan:

  1. Opret en ny side. Du kan kalde den nyheder, blog eller hvad der nu er passende.
  2. Indsæt et forespørgselsloop, der hvor din nyhedsstrøm skal ligge.
  3. Du får mulighed for at vælge særlige loops, der lægger indlæg ud i grids, kolonner eller under hinanden. Her har jeg valgt loopet Standard.
  4. Gem siden.
Co-Pilot forsøger her at vise hvordan WP’s forespørgsels-loop henter indhold fra databasen og præsenterer det. (Co-Pilot tilgået d. 14.2. 2024)

8) Forespørgsls-loop: præsenterer og filtrerer indholdet

Et Forespørgselsloop eller blokken Indhold placeres, der hvor indlæggets indhold skal komme til syne. En typisk skabelon kan se sådan ud:

Indhold-blokken henter indholdet, som det er. Loopet kan konfigureres på mange måder, fx så indlæg fra en kategori eller bestemte tags vises.

Forespørgselsloopet er en af de mest avancerede blokke i WordPress. Med den kan du sætte dit indhold op, og præsentere præcis, hvad du vil. Du kan filtrere indholdet efter tags og kategorier med specille loops. Det betyder, at du kan lave en webside, der viser særlige emner.

I en portfolio kan du lave sider, der filtreres således, at siden kun viser indlæg fra en særlig kategori.

9) Navigation

Så snart du har flere sider får du brug for en eller flere navigationsmenuer. Mange portfolier har en struktur a la det her:

  • Om mig
  • CV
  • Kontakt
  • Projekter
  • Nyheder (blog)

Det er derfor lettest at lave menuen, når der er et par sider, som du kan lægge ind i en navigationsmenu.

Lav nu et par sider fra listen herover. Siderne behøver ikke at bestå af mere end en overskrift og måske en linje eller to, som pladsholder for det indhold, som du senere tilføjer. Opret mindst tre sider.

I menuen kan du tilføje siderne en for en – eller begynde med at vælge blokken Sideliste, der automatisk viser samlige sider.

Sideliste i navigationsmenuen. Sideliste viser automatisk alle siderne. Blokken kan konverteres til enkeltsider – og så kan du fjerne sider, der alligevel ikke skal være i din menu.

Hvis du klikker på de tre prikker (“kebaben”) ved siden af Navigation kan du:

  • Omdøbe menuen
  • Kopiere menuen
  • Redigere menuen
  • Slette menuen

Du kan oprette en ny menu ved at kopiere en eksisterende menu. Når den er lavet kan du omdøbe kopien til noget mere passende.

Menuer kan sættes ind, hvor du har brug for navigation – i templates, bannere, indlæg &c.

10) Bloggrupper

Her finder du de forskellige stumper til dit design, som kan genbruges på tværs af flere sider, f.eks.:

  • Headere
  • Footere
  • Sidebar
  • Bloggrupper til en lang række formål

Du kan evt. tilføje flere headere, footere og sidebarer, hvis der er brug for alternativer. Hvis du ændrer en header, så ændres den på alle de sider hvor den anvendes.

Under Listevisning kan du markere nogle lag, og gemme dem som bloggrupper.

11) Tilpasset HTML

Selv om der findes blokke til mange forskellige formål, så vil du som Multimediedesigner ofte opleve, at der ikke lige findes en blok til en eller anden effekt, som du nemt selv kunne kode. Her er Tilpasset HTML blokken praktisk.

Hvis sådan en kode består af både CSS, HTML og JavaScript, så kan det også lægges ind i Tilpasset HTML. Du skal dog huske, at rækkefølgen er væsentlig, det skal se sådan ud:

  1. CSS i <style> elementer.
  2. HTML uden indledende <head> og afsluttende </body>. Fordi disse elementer allere findes i dit tema.
  3. JavaScript i <script> elementer.

Et andet sted på denne side har jeg beskrevet teknikken. Du kan finde artiklerne ved at læse denne artikel.

Afslutning

Nu har du set, hvordan du kan sætte din portfolio op med WordPress. Du har lært at lave en portfolio med en specialdesignet forside. Du kan fremstille undersider, og lave de responsive menuer som linker til undersiderne.

Med dette har du som multimediedesigner gode muligheder for at bygge din personlige portfolio.