Een pagina maken met een startsjabloon

U kunt een startsjabloon gebruiken om een eenvoudige website of landingspagina te bouwen. Je kunt een nieuwe pagina maken, het ontwerp van je pagina aanpassen en je pagina publiceren met behulp van een starter template. Meer informatie over het maken van allerlei soorten pagina's in HubSpot.

Let op: startsjablonen bieden geen ondersteuning voor smart content, aangepaste modules, personalisatie, toegang tot broncode in rich text modules, pagina's met wachtwoordbeveiliging, of geavanceerde opties zoals template swapping en toegang tot header HTML.

Een pagina maken met een startsjabloon

Om een nieuwe landingspagina te maken met een startsjabloon:

• Navigeer naar uw inhoud:

  • Website Pages: Ga in je HubSpot account naar Marketing > Website > Website pagina's.
  • Landingspagina's: Ga in je HubSpot account naar Marketing > Landingspagina's.

• Klik rechtsboven op het dropdown menu Create en selecteer Website page of Landing page.

• In het selectiescherm voor sjablonen kunt u sjablonen van uw actief themabovenaan de pagina, terwijl alle andere sjablonen in de sectieAndere sjablonen onderaan staan. Klik op eensjabloon. Als u geen actief thema hebt geselecteerd, wordt u gevraagd er een te selecteren of klik opSjablonen overslaan om een bestaand sjabloon te kiezen.
• Om de pagina met de geselecteerde sjabloon te maken, klikt u rechtsboven opSelecteer deze sjabloon. Om de pagina op mobiel of desktop te bekijken, klikt u op Voorbeeld.

De inhoud van uw pagina bewerken

Startsjablonen bevatten blokken website-inhoud die modules worden genoemd. U kunt deze modules rangschikken in horizontale rijen of verticale kolommen.

U kunt rijen en kolommen groeperen in secties van elementen. Door elementen te groeperen, kunt u achtergrondstijlen toepassen op een heel deel van uw pagina. U kunt deze elementen ook verslepen om de lay-out van uw pagina te wijzigen. Meer informatie over het bewerken van pagina-inhoud in een versleepbaar gebied.

Om het uiterlijk van uw pagina op mobiele apparaten aan te passen, klikt u op het pictogram voor mobiele ediEditvoor mobiel in de zijbalkeditor.

Lettertypen, kleuren en knoppen aanpassen

Als u de standaardstijlen voor uw startsjabloon wilt aanpassen, klikt u op het tabblad Thema in de zijbalkeditor. U kunt ook de achtergrondkleur of -afbeelding voor een specifieke rij, kolom of sectie van uw pagina aanpassen.

Typografie

• Hoofdtekst: pas het lettertype, de lettergrootte en de letterkleuren aan voor de hoofdtekst van uw pagina.
  • Klik op het vervolgkeuzemenu Lichaamstekst en selecteer een lettertype.

• • Klik op de pijltjestoetsen om de lettergrootte aan te passen.
  • Klik op de kleurenkiezer en selecteer een kleur voor uw lettertype. Om een aangepaste kleur in te stellen, klikt u op het tabblad Geavanceerd en voert u een hexadecimale waarde in.
• Koppen: pas het lettertype en de kleur aan voor tekst in modules met een kopteksttag.
  • Klik op het keuzemenu Koppen en selecteer een lettertype.
  • Klik op de kleurenkiezer en selecteer een letterkleur. Om een aangepaste kleur in te stellen, klikt u op het tabblad Geavanceerd en voert u een hexadecimale waarde in.
• Linktekst: pas de lettertypen en kleuren van de links op uw pagina aan.
  • Klik op het keuzemenu Linktekst en selecteer een lettertype.
  • Klik op de kleurenkiezer en selecteer een linkkleur. Om een aangepaste kleur in te stellen, klikt u op het tabblad Geavanceerd en voert u een hexadecimale waarde in.
  • Klik op het dropdown menu en selecteer een stijl voor de linktekst.

• • Pas de kleur en transparantie van je links aan wanneer ze met de muis worden aangeraakt, worden aangeklikt en al zijn bezocht:
    
    • Link zweefkleur: klik op de kleurenkiezer en selecteer een linkkleur voor wanneer een bezoeker over de link zweeft. Om de transparantie van de kleur te wijzigen, voert u een percentage in het tekstveld in.

• • • Actieve linkkleur: klik op de kleurenkiezer en selecteer een linkkleur voor wanneer de link wordt aangeklikt. Om de transparantie van de kleur te wijzigen, voert u een percentage in het tekstveld in.

• • • Bezochte linkkleur: klik op de kleurenkiezer en selecteer een linkkleur voor als de link al door een bezoeker is aangeklikt. Om de transparantie van de kleur te wijzigen, voert u een percentage in het tekstveld in.

Formulieren en knoppen

• Achtergrondkleur knoppen: pas de kleur aan die wordt toegepast op de achtergrond van uw knoppen.
  • Voer een hexadecimale waarde in of klik op de kleurenkiezer en selecteer een kleur.
  • Om de transparantie van de achtergrondkleur van je knop in te stellen, voer je een percentage in het veld in.
• Knoptekstkleur: pas de kleuraan die wordt toegepast op de tekst van knoppen op uw pagina.
  • Voer een hexadecimale waarde in of klik op de kleurenkiezer om de kleur voor de tekst te selecteren.
  • Om de transparantie van de achtergrondkleur van uw knop in te stellen, voert u een percentage in het veld in.
• Hoekradius knop: pas aan hoe rond of vierkant de knoppen op je pagina worden weergegeven.
  • Voer een waarde in het veld in, of klik en sleep de schuifbalk naar een nieuwe positie.
  • Een hogere waarde betekent dat de knoppen op je pagina rondere randen hebben, terwijl een waarde van nul betekent dat je knoppen rechthoekig zijn.

Let op: HubSpot raadt aan om consistente kleuren, lettertypen en stijlen aan te houden op basis van de instellingen op het tabblad Design. Je kunt de standaardstijlen voor een individuele module opheffen op het tabblad Opties in het linkerpaneel.

Uw pagina bekijken en publiceren

Voordat je pagina live gaat, klik je rechtsboven op Voorbeeld om te testen hoe je pagina eruit zal zien op desktop en mobiele apparaten. Zodra je tevreden bent met het voorbeeld van je pagina, klik je rechtsboven op Publiceren .