Det er ikke nok at lave en portfolio og så læne sig tilbage. Så snart din portfolio er klar skal du selv gøre en indsats for at skabe trafik. Her er nogen ideer:
Regelmæssig opdatering: Hold din portfolio opdateret med nye projekter og indhold for at tiltrække gentagne besøgende. Ved hjælp af en blog kan du nemt holde din portfolio opdateret, fordi den viser det nyeste først.
Sociale medier: Del dine projekter og opdateringer på sociale medieplatforme som LinkedIn, Instagram og Twitter for at nå et bredere publikum.
Netværk: Deltag i online fællesskaber og fora relateret til din branche for at opbygge relationer og drive trafik til din portfolio.
Gæsteblogging: Skriv gæsteindlæg på populære blogs inden for dit felt og inkluder links til din portfolio.
E-mail: Sørg for at din portfolio er synlig i din email-signatur. Dette kan skabe trafik, hver gang du sender en email – og det er i ikke noget som kræver en stor indsats.
Visuelle elementer: Brug høj kvalitet billeder, illustrationer og videoer for at gøre din portfolio mere attraktiv og engagerende.
Responsivt design: Sørg for, at din portfolio ser godt ud på mange enheder. WP har indbyggede funktioner, hvor du kan få en fornemmelse for dette.
Optimer SEO: Brug relevante søgeord i dine titler, beskrivelser og indhold for at forbedre din synlighed i søgemaskiner. Yoast og lignende SEO-plugins hjælper her.
Analyser trafik: Brug værktøjer som Google Analytics eller de indbyggede muligheder på din webhost (fx Simply.com) til at overvåge din trafik og forstå, hvilke kilder der driver mest trafik.
Tilbyd værdi: Skab indhold, der tilbyder værdi til dine besøgende, Del tutorials, tips, opskrifter og lignende ressourcer inden for dit felt.
Taksonomier: Med tiden vil din portfolio vokse i omfang. Især hvis du har en blog, der omtaler dine nyeste projekter. Brug kategorier og tags og filtrer indholdet ud på passende sider ved hjæp af Forespørgsels-loops.
En portfolio er aldrig “færdig”. Den viser, hvad du kan – her og nu. Derfor er en blog en god ide. Her kan du blive ved med at tilføre indhold. Sådan en portfolio bliver aldrig forældet.
Når noget indhold med tiden bliver forældet eller måske ikke relevant mere – så fjern det. Portfolien skal vise dig i den bedst mulige udgave.
Her er de 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.
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:
Opret en ny side. Du kan kalde den nyheder, blog eller hvad der nu er passende.
Indsæt et forespørgselsloop, der hvor din nyhedsstrøm skal ligge.
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.
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:
CSS i <style> elementer.
HTML uden indledende <head> og afsluttende </body>. Fordi disse elementer allere findes i dit tema.
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.
Elementor is one of the most popular alternatives to the WP editor. Many companies prefer Elementor. You can try the free version, but be warned: it is very limited if you compare with the standard WP editor.
Elementor was among the first “drag and drop” editors for WP.
Pros and Cons
Pros
Cons
Ease of use.
Nagware: you’re constantly reminded that you need to pay in order to XYZ
Library of templates
The free version is very limited. Things you can do for free in the ordinary WP editor may be blocked.
Many tutorials online, well documented.
Bloated codebase. Sometimes Elementor will make your site slower.
A few pros and cons concerning Elementor.
Tutorials
Here are a few Elementor tutorials to get you started.
Elementor WordPress Tutorial 2024 by TechPress.
How To Use Elementor In WordPress by The Social Guide.
You may or may not want to have your portfolio in the main domain. If you want to have your portfolio as the primary thing in your domain, just skip this chapter.
A subdomain is a subdirectory in the main webdomain. On some web hotels you have to specify such a directory in the Dashboard of the webhotel. This is the case on Simply.com – but not on One.com, where any subdirectory is regarded as a subdomain. Just to mention the usual suspects.
Prepare a subdomain for the portfolio. Make sure that your new domain runs with HTTPS.
Create a subdomain on Simply.com. Live session from a Multimedia Design Class: subdomain, and a one-click WordPress installation demonstration.
Plan Content
What kind of content do you need for the portfolio? Rearch and brainstorm. On most portfolios you’ll see pages like:
About Me
CV
Contact
Gallery
Projects
Blog – with amazing news about your projects here and now
1) Creative Process
It does not harm to be well prepared. Go through the steps from idea generation to actual wireframes. When you have a clear idea about the content of the site continue.
2) Create Dummy Pages
Create the pages, but in this phase just add dummy content. If you have the pages it is easy to create a navigation.
AI can be a great headstart for dummy content creation. Later on you can modify to real content.
3) Navigation
When the dummy pages are made, it’s more easy to create the navigation menus. You can have as many as you want to, and style them according to their position in the design.
Create the main navigation menu for the header. You may also want to create special menus for other pages.
4) Choose a theme
Find a good WordPress theme, and make sure that it’s a block based theme (not an old style PHP-theme). My recommendation is to stick to a standard block theme.
Avoid crap “freemium-premium” themes. They will hinder you from adding anything interesting untill you pay.
I’ll recommend either Twenty Twenty Four or the most recent WP standard theme.
If you’re an ambitious Multimedia Designer of course your could try to create a theme via Carolina Nymarks theme generator.
Your content will not be affected by the theme. If you want another look and feel just try another theme.
