Sådan ændrer du skrifttype og farver på din hjemmeside

På denne side:

Redigering og anvendelse af globale tekststilarter
Brugerdefinerede tekststilarter
Redigering og anvendelse af globale farver


Grundlaget for alle hjemmesider er en bestemt stil. To vigtige elementer, der udgør denne stil og identitet, er tekst og farver. I denne artikel finder du ud af, hvordan du ændrer tekst og farver på hele din hjemmeside med blot et par klik.

Redigering og anvendelse af globale tekststilarter

Designeren indeholder en række konfigurerbare tekststilarter, som du kan tilføje til ethvert tekstafsnit på din hjemmeside, hvilket hjælper dig med at opretholde et ensartet design.

Som standard arver alle tekststile skrifttypefamilien fra den generelle tekststil. Hvis du vil anvende en ny skrifttype til alle tekststile, skal du ændre skrifttypen for Generel tekst, som du finder i menuen Design > Globale tekster.



Hvis du gerne vil tilpasse udseendet af andre tekststile, kan du gøre det ved at vælge tekststilen i menuen. Du kan ændre attributter som fontvægt, størrelse, farve, justering, link-stil og meget mere.



Når du har fastlagt tekststilarterne for titel og afsnit, kan du nemt anvende dem på alt indhold, der tilføjes i tekstmodulerne. Du skal blot fremhæve det indhold, du vil tilføje en tekststil til, og vælge den specifikke stil i menuen Design. Hvis du gerne vil foretage hurtige justeringer af de globale tekststile, kan du vælge redigeringsikonet ved siden af tekststilen i Design-menuen.

Styling af tekst til forskellige viewports

Alle titel- og afsnitstekststile kan optimeres til de tre vigtigste visninger: desktop, tablet og mobil. Hvis du f.eks. vil style Light Spot Text-stilen til at være 70px på desktop, 50px på tablet og 30px på mobil, skal du begynde med at style Light Spot Text-skriftstørrelsen til 70px i desktop-viewporten. Alle ændringer, der foretages i skrivebordsvisningsportalen, vil påvirke tabletten og mobilen.

Dernæst skal du ændre skriftstørrelsen for Light Spot Text til 50px for tabletvisningen (husk at klikke på tabletvisningen i designerens øverste bjælke, før du redigerer modulet). Alle ændringer, der foretages i tablet-visningen, vil påvirke mobil, men ikke desktop. Endelig skal du ændre skriftstørrelsen for Light Spot Text til 30px for mobilvisningen (husk at klikke på mobilvisningen i Editorens øverste bjælke, før du redigerer modulet). Eventuelle ændringer i mobilvisningen vil ikke have indflydelse på andre visninger.



Viewport-hierarkiet "brydes" for rækker, kolonner eller moduler, når du ændrer et af elementerne i en af viewportene individuelt. Når du f.eks. ændrer skriftstørrelsen på tablet eller mobil og bagefter ændrer skriftstørrelsen på desktop, vil ændringerne på desktop ikke påvirke de andre viewports. Dette er for at hjælpe dig med at undgå at overskrive viewport-specifikke ændringer og design, hver gang du ændrer noget på desktop eller tablet.

Grå indikatorprikker ved siden af stilindstillinger:** Når du ser en grå indikatorprik ved siden af en stilindstilling, betyder det, at der er foretaget en stilændring lokalt på det pågældende element. Ingen grå indikatorprik betyder, at stilen er arvet fra den globale stil. Klik på den grå indikatorprik for at nulstille stilen og vende tilbage til at arve fra den globale stil.

Brugerdefinerede tekststilarter

Ud over standardtekststilarterne i designeren har du også 10 brugerdefinerede stilarter, hvis du har brug for at definere flere.



Det kan f.eks. være nyttigt, hvis du har et annoncebanner på din hjemmeside og ønsker, at al tekst på det skal vises med en unik stil. Klik på en af de brugerdefinerede stilarter, stil den, som du vil, og giv den et passende navn, så du kan genkende den senere.

Redigering og anvendelse af globale farver

At vælge farver til elementer på din hjemmeside er en af de mest almindelige opgaver. Ved hjælp af Globale Farver er det nemt at vælge en farvepalet til dit design og anvende den på ethvert element uden at skulle indstille farven, hver gang du tilføjer et nyt element på din hjemmeside.

Globale Farver-paletten er opdelt i 3 forskellige kategorier:

Spotfarver
Basisfarver
Brugerdefinerede farver

Disse kategorier giver dig mulighed for at definere et hierarki, så processen med at anvende og redigere farveskemaet på din hjemmeside er enkel og effektiv.

Definition af globale farver

Du kan definere din farvepalet for din hjemmeside i venstremenuen Design ved at vælge indstillingen Globale farver. Ved at vælge farveprøven ved siden af farveidentifikatoren kan du vælge den specifikke farvepalet, du gerne vil genbruge på elementer på din hjemmeside. Tænk på Spotfarver som dine vigtigste brandfarver. Til spotfarverne skal du tilføje en lys, en almindelig og en mørk version af den samme farve. Basisfarver bruges primært som baggrundsfarver på elementer som rækker, kolonner eller tekst. Brugerdefinerede farver er der for at give ekstra farvemuligheder, hvis det er nødvendigt.

Anvendelse af globale farver

Når du styler et element, f.eks. en knap, har du hurtig adgang til dine foruddefinerede globale farver, når du tildeler farver til forskellige elementer. Det er vigtigt at bruge de globale farveprøver, hvis hjemmesidens farve(r) ændres på et andet tidspunkt. Hvis du ændrer farveprøverne under Globale farver, vil det påvirke alle elementer, der er stylet med globale farver på hjemmesiden.

Opdateret den: 11/09/2023