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

Een nieuwe landingspagina maken met een startsjabloon:

• Navigeer in uw HubSpot-accountnaar uw landingspagina's of websitepagina's.
• In de rechterbovenhoek, klik op de Create dropdownmenu en selecteer Websitepagina of Landing page.
• Klik in het linkerzijbalkmenu van het sjabloonselectiescherm op Al uw sjablonen.
• Om uw beschikbare starter-sjablonen te bekijken, klikt u op het vervolgkeuzemenu Filteren op bronen selecteert u Starter.

• Beweeg de muis over een sjabloon en klik rechtsboven op Voorbeeld.
• Om een pagina met deze sjabloon te maken, klikt u rechtsboven op Gebruik sjabloon.
• Klik in het dialoogvenster opDoorgaan.
• Voer een interne naam in vooruw pagina en klik vervolgens op Pagina maken.

De inhoud van uw pagina bewerken

Startsjablonen 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 overhet 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 Ontwerp 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 veldeen 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 veldeen percentage in
.
• Hoekradius van knoppen: pas aan hoe rond of vierkant de knoppen op uw pagina eruitzien.
  • Voer een waardein hetveld in, of klik en sleep de schuifregelaar naar eennieuwe 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 consistente kleuren, lettertypen en stijlen aan te houden op basis van de instellingen op het tabblad Ontwerp. U kunt de standaardstijlen voor een individuele module opheffen op het tabblad Opties

Bekijk en publiceer uw pagina

Voordat uw pagina live gaat, klikt u rechtsboven op Voorbeeld om te testen hoe uw pagina eruitziet op desktop- en mobiele apparaten.Als u tevreden bent met de voorbeeldweergave van uw pagina, klikt u rechtsboven op Publiceren .