Doorgaan naar artikel
Let op: De Nederlandse vertaling van dit artikel is alleen bedoeld voor het gemak. De vertaling wordt automatisch gemaakt via een vertaalsoftware en is mogelijk niet proefgelezen. Daarom moet de Engelse versie van dit artikel worden beschouwd als de meest recente versie met de meest recente informatie. U kunt het hier raadplegen.

De grootte van een knop CTA bewerken

Laatst bijgewerkt: mei 22, 2023

Beschikbaar met elk van de volgende abonnementen, behalve waar vermeld:

Marketing Hub Professional, Enterprise
CMS Hub Professional, Enterprise
Legacy Marketing Hub Basic

Pas de grootte van je knop CTA aan met behulp van de ingebouwde formaatopties en aangepaste CSS. Bij het uploaden van je afbeelding voor een image CTA wil je misschien rekening houden met retina optimalisatie

.

Om je knop CTA verder aan te passen, leer je hoe je aangepaste stijlen toevoegt aan je CTA met CSS. Als je de CTA voor een knop toevoegt aan een e-mail of sjabloon, leer dan hoe je de CTA kunt centreren

.

Bewerk uw CTA-formaat

U kunt de grootte van uw knop CTA handmatig aanpassen of aangepaste CSS gebruiken om automatisch de breedte van de container of module van de knop CTA te vullen. Als u een afbeelding CTA insluit op uw niet-HubSpot site , moet u wellicht extra CSS declaraties toepassen (zoals width: 100%;) binnen uw stylesheet om de afbeelding CTA responsief te maken.

Om
de grootte van uw knop CTA aan te passen:
  • Navigeer in je HubSpot-account naar Marketing > Lead Capture > Knop CTA's.
  • Ga met de muis over een knop CTA en klik op de Acties > Bewerken.
  • Klik in het schuifpaneel op Geavanceerde opties.
  • Om het formaat van je aangepaste knop CTA handmatig aan te passen:
    • Schakel het vakje Aanpassen aan tekst uit. Dit verwijdert de automatische aanpassing van de grootte.
    • Voer in de sectie Knopvulling uw afmetingen in voor de velden Knopbreedte en -hoogte.
    • Klik op Volgende >.
    • Klik op Opslaan. Klik vervolgens op Voltooien.
  • Om uw aangepaste knop CTA de volledige breedte van zijn container of module te laten vullen:
    • Schakel het selectievakje Formaat automatisch uit.
    • Voerin het veldAangepaste CSS uw aangepaste CSS in.
    • Stel de breedte in op breedte: 100%;
    • Klik op Volgende >.
    • Klik op Opslaan. Klik vervolgens op Voltooien.

Wat is retina optimalisatie?

Retina optimalisatie maakt de afbeelding van uw knop CTA scherper bij weergave op uw site pagina's en in e-mails als uw ontvangers de CTA bekijken in moderne versies van Apple Mail en iOS mail; dit wordt niet ondersteund door Outlook of webmail diensten zoals Gmail.

Retina-optimalisatie wordt ondersteund wanneer u een afbeelding uploadt die ten minste twee keer zo groot is als nodig voor de knop CTA, net zoals retina-ondersteuning werkt voor alle afbeeldingen op het internet. Let ook op het volgende:

  • Als je een CTA maakt die 400px bij 100px zal zijn, zou de geüploade afbeelding 800px bij 200px moeten zijn om een @2x pixeldichtheid weergave te ondersteunen.
  • CTA's ondersteunen het toevoegen tot een 4x versie. Als je bijvoorbeeld een CTA maakt van 400px bij 100px, kun je een afbeelding van 1600px bij 400px uploaden.
  • De CTA zal automatisch worden weergegeven op uw website met een srcset attribuut dat de 1x, 2x, 3x en 4x versie serveert, indien beschikbaar.
  • Als de afbeelding wordt geüpload op de grootte waarop de CTA wordt weergegeven, heeft deze geen retina-ondersteuning. Bijvoorbeeld, als een afbeelding van 400px bij 100px wordt geupload voor een CTA van 400px bij 100px.
Was dit artikel nuttig?
Dit formulier wordt alleen gebruikt voor feedback op documentatie. Ontdek hoe je hulp krijgt met HubSpot.