Guide til en funklende profil

Oversigt

1. Intro

2. Farver & farvekoder

3. Fonts

4. HTML i wix

Intro

Profilerne er et af de første indtryk, man kan give af sin karakter, og selvom den vigtigste del af dem er teksten, som beskriver karakteren, så er layoutet også vigtig! For de kan nemlig også give et indtryk af, hvordan karakteren er - Alt fra farverne på profilen, til valget af billeder eller fonte gør det. Og om man vil det eller ej, så er det også det første, folk lægger mærke til og danner et indtryk på baggrund af.

Men det er ikke alle, der finder html lige nemt (helt forståeligt, for det kan virkelig være kringlet), så betyder det ikke, at man ikke kan kreere en fantastisk profil! Der er allerede mange, der bruger wix.com, og jeg kan kun varmt anbefale denne side - For man kan sagtens lave nogle fantastiske profiler på den. Der kan man nemlig både bruge html-elementer, men hurtigt kunne sætte det op og se, hvordan det bliver.

Derfor har jeg her samlet nogle hjemmesider, som jeg personligt selv er stor fan af, og bruger, når jeg laver profiler. Men også nogle af de ting, jeg overvejer, når jeg skal til at lave en ny profil eller et opslag her til bloggen. Så lad os da bare komme i gang!

Farver & farvekoder

Farverne er noget af det mest grundlæggende ved profilen, det er det allerførste, som man ser, når man trykker ind. Derfor kan det også være svært at beslutte sig for, hvilke man faktisk skal bruge. Her er det lidt forskelligt, hvordan jeg griber det an:
1. Hvis jeg har et billede, hvor jeg godt kan lide farverne bruger jeg denne hjemmeside: imagecolorpicker.com - Der kan du både uploade et billede direkte fra din computer, men også med en URL-adresse til billedet. Og hvis du trykker på ’Show more’ (når du har fundet en farve på billedet, du godt kan lide), så kommer man ind på en ny side, hvor man får farvens forskellige koder. Her vil der også være variationer af farven.
2. Hvis jeg derimod ikke har et billede, bruger jeg denne her side: color-hex.com - På forsiden har den allerede et hav af forskellige forslag til farver, og hvis man trykker ind på farven får man igen farvens forskellige koder, variationer af farven. Men på denne side, får man også dens komplimentære farve, dens triadiske farver og analoge farver. Hvilket kan være godt at bruge på profilen, som en ekstra farve, der stadig fungerer med den primære farve valgt til profilen. - Derudover kan man i menuen i toppen gå ind på paletter, hvor der er mange forskellige sammensætninger af 5 farver, som man kan bruge på profilen.

Til sidst vil jeg lige komme lidt ind på de forskellige farvekoder, man kan bruge i html - Jeg bruger selv kun HEX- og RGB-koderne for farverne. Normalt tager jeg bare HEX-koden for farven, men hvis jeg vil have at farven bliver gennemsigtig (som den første boks i dette indlæg) så bruger jeg RGB. RGB står for red green blue, og koden svarer til hvor meget, der er af de forskellige grundfarver i farven. Normalt vil man skrive farve-koden ind således: rgb(255, 179, 186), men hvis man skal have den gennemsigtig skal man blot tilføje et ekstra led, så den ser således ud: rgb(255, 179, 186, 0.5) - Hver opmærksom på, at det sidste tal angiver opaciteten, og skal skrives med et punktum! Hvis der stod 1 ville det svare til, at den ikke var gennemsigtig.

Fonts

Nu kan vi så kigge på fonts, og her har jeg endnu en gang nogle forskellige fif til dem. Lad os starte med det mest simple.

Først er det vigtigt, at der sættes reference links til fontene ind i alle HTML-elementer, som bliver lavet på wix-siden. Ellers vil alt font i dit html-element blive til Times New Roman, som er den normale default. SÅ vigtigt!

Så kommer vi til den sjovere del af det, nemlig hvor man finder fonts, og hvordan man får dem ind på sin profil.
Til HTML-profiler har jeg selv kun fundet en side, hvor man kan lave sine egne referencelinks, nemlig Google Fonts. På siden er det bare vigtigt, at du ikke trykker på tilbage knappen, når du har været inde og tilføje en font til dit referencelink - i stedet skal du bare trykke på ’Fonts’ i menuen i toppen af browseren.
Referencelinket vil se sådan ud: link rel="preconnect" href="https://fonts.googleapis.com" link rel="preconnect" href="https://fonts.gstatic.com" crossorigin link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@200&display=swap" rel="stylesheet"

Hvis du skal finde fonts til Wix bruger jeg personligt også dafont.com , men man kan bruge stort set alle sider, hvor man kan downloade fonts. Da man blot skal kunne downloade fonten til sin computer for at kunne oploade den til wix. Hvordan man oploader fonten til wix, vises i slideshowet nedenunder fra slide nummer 4 og frem.

HTML i wix

Indsæt et HTML-element
For at indsætte et html-element på din wix-profil, skal du ind i ’Add to site’ -> ’Embed’ -> ’Custom Embeds’ -> ’Embed a widget’

HTML-elementet er for lille
Når du først har fået sat dit html-element ind på siden, vil det være en bestemt størrelse, som ikke vil ændres, når koden bliver tilføjet til element. Det vil gøre, at der kommer en ekstra horisontal og vertical scroll.

Lav HTML-elementet større
For at undgå, at html-elementer har den ekstra horisontal og vertikal scroll, skal man gøre elementet en del større end selve den kode, man har skrevet. Dette vil ikke gøre noget på det færdige resultat, da html-elementet ikke vil være synligt, som på billedet over. Derfor bedre at gøre det for stort, end at det er for lille. Hvis man vil undgå de ekstra scroll-bare.

Oploade ny font til Wix 1
For at oploade en ny font til wix, skal du først have fat i en text-boks og downloaded fonten, du vil have, til din computer. Herefter skal du ind, hvor man kan vælge en ny font. I bunden af denne vil der være ’Upload Fonts’, som du skal trykke på.

Oploade ny font til Wix 2
Når du trykker på den, vil du komme ind på denne side, hvor du igen skal vælge ’Upload Fonts’.

Oploade ny font til Wix 3
Det vil lede dig ind på din computers drev, hvor du skal finde den mappe (med fonten), som der skal åbnes. Herinde vil der højst sandsynlig være flere forskellige udgaver af din font. Her vælger jeg altid .ttf-filen - Men jeg er næsten sikker på, at du også kan bruge .oft-filen.

Oploade ny font til Wix 4
Når du så har fået uploade fonten vil den stå ligesom ’Hey Haters’ gør på billedet over. Derefter kan du bare lukke font-vinduet og bruge fonten på samme måde, som du bruger alle de fonte, der er i wix i forvejen.

❮ ❯

HTML-elementer i Wix-profilen kan være det, der lige giver den, den ekstra kant og gør det sidste for layoutet. Men det er ikke helt sådan lige til, derfor vil jeg foreslå, at man først laver html-elementet i enten w3schools.com eller htmledit.squarefree.com, hvor man hurtigere kan se, om det fungerer. Derefter kan man så kopiere det ind i html-elementet på wix-profilen, hvor man kan rykke rundt på det, som det passer en.

DISCLAIMER min erfaring med wix’ html-elementer er, at man skal tilføje en helt masse ekstra blanke linjer efter den sidste i sin kode, for at kunne se det hele.

Det var alt jeg havde til jer for denne gang, men hvis der skulle være nogle spørgsmål, så er alle mere end velkomne til at skyde en ugle i min retning. Det kunne også være, at der var nogle ønsker til andre guides til html eller wix, så kan i også sende dem i min retning, og jeg kan se, om det er noget, jeg kan finde ud af.
Ellers kan jeg henvise jer de tidligere indlæg på bloggen, der hedder ’Tips og trick til HTML’, som helt sikkert vil kunne hjælpe jer med en masse.

Til sidst vil jeg gerne lige give et skud ud til Garrett Calloway, Alaska Cooper, May Knightley og Taurir DeAmboise, der har hjulpet mig med at forstå HTML.

Bradley Griffiths