Merk importeren van je website: vul je merkkit in één stap

Om je merk van je website te importeren in Gradiently open je de Merkpagina, typ je je adres bij Website onder Identiteit en kies je Site lezen. Gradiently haalt de naam, beschrijving, themakleur en het icoon van de site op en biedt ze elk aan: gebruik de naam, gebruik de beschrijving als slogan of bij Over, voeg de kleur toe aan je merkkleuren, voeg het icoon toe als logo. Jij kiest wat erin gaat. Het kost een paar seconden en scheelt het saaiste deel van het inrichten van een kit.

Zo importeer je je merk van een website

1. 1

   Open de Merkpagina

   Kies het merk dat je wilt invullen. Elk merk in je account heeft een eigen kit, dus zorg dat je in de juiste zit.

2. 2

   Vul de website in

   Typ onder Identiteit het adres bij Website. Een gewoon domein zoals crumb.co is genoeg; je hebt https niet nodig.

3. 3

   Kies Site lezen

   Gradiently bezoekt de pagina één keer, leest de head en haalt het icoon op. De knop toont Lezen… terwijl het bezig is.

4. 4

   Gebruik wat past

   Elke bevinding verschijnt met een eigen knop: “Crumb” als naam gebruiken, Beschrijving als slogan gebruiken, Beschrijving gebruiken bij Over, Kleur toevoegen, Icoon als logo toevoegen. Negeer wat niet klopt.

5. 5

   Lees opnieuw na wijzigingen

   Werk je je site bij, kies dan Opnieuw lezen. Staat alles wat nuttig is al in de kit, dan zegt de pagina dat.

De kleur van de site duikt later ook op als suggestie in het onderdeel Kleuren, gelabeld met de naam van je site, zodat je hem daar kunt toevoegen als je hem de eerste keer oversloeg.

Wat Gradiently van je website leest

Het leest alleen de openbare homepage op het adres dat je geeft, en alleen de delen die het merk beschrijven. Het crawlt geen andere pagina’s, logt niet in en leest je inhoud niet.

Twee details zijn goed om te weten. SVG-iconen worden overgeslagen, omdat Gradiently de SVG van een ander niet rastert, dus een site met alleen een SVG-favicon geeft geen icoon. En de kleur moet een gewone hex- of rgb()-waarde zijn; een CSS-variabele in de theme-color-tag kan niet gelezen worden.

Maak je website makkelijk leesbaar

Komt Site lezen magertjes terug, dan is de oplossing meestal een paar regels in de HTML-head van je site. Ze helpen meer dan alleen Gradiently: browsers gebruiken theme-color voor de adresbalk op telefoons en linkvoorbeelden gebruiken je Open Graph-tags. Open Graph-tags en favicon-ontwerp gaan dieper.

<head>
  <title>Crumb · Sourdough bakery in Leeds</title>
  <meta name="description" content="Slow sourdough and pastries, baked every morning on Kirkgate.">
  <meta property="og:site_name" content="Crumb">
  <meta name="theme-color" content="#c2410c">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
</head>

Wat te doen na de import

De import geeft je een fundament, geen afgewerkte kit. Vier dingen zijn de moeite waard om daarna te doen, in deze volgorde.

1. Upload echte logobestanden. Een favicon is klein en vierkant. Voeg je volledige logo toe als PNG, JPEG, WebP, GIF of AVIF, een voor donkere en een voor lichte achtergronden; zie logo op een gradiëntachtergrond.
2. Rond de kleuren af. Eén themakleur is een begin. Voeg een ondersteunende kleur toe en je donkerste en lichtste neutrale tinten; merkkleuren kiezen helpt.
3. Stel je fonts in. Kies een font voor koppen en een voor broodtekst, of upload je eigen fontbestanden.
4. Schrijf de stem. Een sitebeschrijving vertelt de Designer wat je bent, niet hoe je klinkt. Vul Toon, In je eigen woorden, Altijd en Nooit in; merkstem voor AI laat zien hoe.

Als het lezen van een website mislukt

Zie je We konden die website niet lezen, dan antwoordde de pagina niet op tijd, gaf een fout of blokkeerde het verzoek. Check of het adres opent in een privévenster. Adressen die naar een privénetwerk, een inlogpagina of een bestand in plaats van een webpagina wijzen, worden met opzet geweigerd. Een site achter een strikte botmuur is misschien nooit leesbaar; typ de gegevens dan met de hand in, wat een paar minuten kost.

Met de kit ingevuld zet de Studio je kleuren bovenaan in elke kiezer, biedt je logo’s aan en begint ontwerpen in je fonts, en schrijft de Designer vanuit je beschrijving. Combineer het met een Mark die niemand anders kan gebruiken en je posts lijken vanaf de eerste op jou. De rest van de kit staat in een merkkit opzetten.