Maak een pagina met een startsjabloon

U kunt een startsjabloon gebruiken om een eenvoudige website of landingspagina te bouwen. In dit artikel wordt uitgelegd hoe u een nieuwe pagina maakt, het ontwerp van uw pagina aanpast en uw pagina publiceert met behulp van een startsjabloon.

Let op: Startsjablonen bieden geen ondersteuning voor slimme inhoud, aangepaste modules, personalisatie, toegang tot broncode in rijke tekstmodules, pagina's met wachtwoordbeveiliging, of geavanceerde opties zoals sjabloonverwisseling en toegang tot header-HTML.

Een pagina maken met een startsjabloon

Zo maakt u een nieuwe landingspagina met een startsjabloon:

• Navigeer naar uw inhoud:

  • Website Pagina's: Navigeer in uw HubSpot-account naar Marketing > Website > Websitepagina's.
  • Landingspagina's: { local.navLandingPages }}

• In de rechterbovenhoek, klik op het Create dropdown menu en selecteer Website page of Landing page.

• In het sjabloonselectiescherm worden sjablonen van uw actief themabovenaan de pagina, terwijl alle andere sjablonen in het gedeelteOverige sjablonen onderaan staan. Klik op een sjabloon. Als u nog geen actief thema hebt geselecteerd, wordt u gevraagd er een te selecteren of klik op Naar sjablonen overslaan om een bestaande sjabloon te kiezen.
• Om de pagina met het geselecteerde sjabloon te maken, klikt u rechtsboven opSelecteer dit sjabloon . Klik op Voorbeeld om de pagina op mobiel of desktop te bekijken.

De inhoud van uw pagina bewerken

Starter-sjablonen bevatten blokken met website-inhoud, modules genaamd. 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 gebied van uw pagina. U kunt deze elementen ook slepen en neerzetten om de lay-out van uw pagina te wijzigen. Meer informatie over het bewerken van pagina-inhoud in een gebied met slepen en neerzetten.

Als u het uiterlijk van uw pagina op mobiele apparaten wilt aanpassen, klikt u op het pictogram Bewerkenvoor mobiel in de zijbalkeditor.

Lettertypen, kleuren en knoppen aanpassen

Om de standaardstijlen voor uw startsjabloon aan te passen, klikt u op het tabblad Thema in de zijbalkeditor. U kunt ook de achtergrondkleur of -afbeelding aanpassen voor een specifieke rij, kolom of sectie

Typografie

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

• • Klik op de pijltjestoetsen
  om de grootte van het lettertype aan te passen.
  • Klik op de kleurkiezer 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.
• Kopteksten: pas het lettertype en de kleur aan voor tekst in modules met een koptekstlabel.
  • Klik op het vervolgkeuzemenu Kopteksten en selecteer een lettertype
  .
  • Klik op de kleurkiezer en selecteer een kleur voor het lettertype. Om een aangepaste kleur in te stellen, klikt u op het tabblad Geavanceerd en voert u een hexadecimale waarde
in.
• Linktekst: pas de lettertypes en kleuren aan die worden toegepast op links op uw pagina.
  • Klik op het vervolgkeuzemenu Linktekst en selecteer een lettertype
  .
  • Klik op de kleurenkiezer en selecteer een linkkleur. Als u een aangepaste kleur wilt instellen, klikt u op het tabblad Geavanceerd en voert u een hexadecimale waarde
  in.
  • Klik op het vervolgkeuzemenu en selecteer een stijl

• • Pas de kleur en transparantie van uw links aan wanneer er met de muis overheen wordt gegaan, wanneer erop wordt geklikt en wanneer ze al zijn bezocht:
    
    • Link hover color: klik op de color picker en selecteer een linkkleur voor wanneer een bezoeker met de muis over de link gaat. Om de transparantie van de kleur te wijzigen, voert u in het tekstveld een percentage
    
    

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

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

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 kleurkiezer en selecteer een kleur
  .
  • Om de transparantie van de achtergrondkleur van uw knoppen in te stellen, voert u in het veld een percentage
in.
• Kleur knopentekst: pas de kleur aan die wordt toegepast op de tekst van knoppen op uw pagina.
  • Voer een hexadecimale waarde in of klik op de kleurkiezer
  om de kleur voor de tekst te selecteren.
  • Om de transparantie van de achtergrondkleur van uw knoppen in te stellen, voert u in het veld een percentage
in.
• Hoekradius van knoppen: pas aan hoe rond of vierkant de knoppen op uw pagina eruitzien.
  • Voer een waarde in het veld in, of klik en sleep de schuifregelaar
  naar een nieuwe positie.
  • Een hogere waarde betekent dat de knoppen op uw pagina rondere randen hebben, terwijl een waarde van nul betekent dat uw knoppen rechthoekig zijn.

Let op: HubSpot raadt aan om consistente kleuren, lettertypes en stijlen te behouden op basis van de instellingen op het tabblad Ontwerp. Je kunt de standaard stijlen voor een individuele module overschrijven in het Opties

Bekijk en publiceer uw pagina

Voordat je pagina live gaat, klik je op Preview in de rechterbovenhoek om te testen hoe je pagina eruit zal zien op desktop en mobiele apparaten. Zodra je tevreden bent met de preview van je pagina, klik je op Publish