Maak een pagina met een startsjabloon
Laatst bijgewerkt: januari 19, 2023
Geldt voor:
Alle producten en plannen |
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
van uw pagina.
Typografie
In de sectie Typografie kunt u de lettertypen en letterstijlen bewerken die op uw paginatekst en kopteksten worden toegepast. Alle Google-lettertypen worden ondersteund.- 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
- 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:
-
-
- 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
In het gedeelte Formulieren en knoppen kunt u de vormgeving van eenvoudige knoppen en knoppen voor het verzenden van formulieren op de pagina aanpassen.- 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
tabblad in het linker paneel.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
in de rechterbovenhoek.
Thank you for your feedback, it means a lot to us.
Gerelateerde documentatie
-
Uw inhoud en gegevens exporteren
Leer hoe u HubSpot-inhoud en -gegevens uit uw account kunt exporteren, zoals pagina's, contactpersonen en...
Kennisbank -
Voeg de Google Tag Manager-code toe aan HubSpot-inhoud
U kunt Google Tag Manager integreren met HubSpot om uw door HubSpot gehoste landingspagina's,...
Kennisbank -
Gebruik afbeeldingen in HubSpot-content
Je kunt afbeeldingen toevoegen aan rich text modules of image modules in HubSpot content. Rijke tekst modules...
Kennisbank