HubSpot Kennisbank

De grootte van een CTA bewerken (legacy)

Geschreven door HubSpot Support | Oct 9, 2020 3:33:46 AM

Pas de grootte van je CTA (legacy) aan met behulp van de ingebouwde opties voor de grootte en aangepaste CSS. Wanneer je je afbeelding uploadt voor een CTA met afbeelding, wil je misschien rekening houden met retina-optimalisatie.

Om je CTA verder aan te passen, kun je leren hoe je aangepaste stijlen toevoegt aan je CTA (legacy) met CSS. Als je je CTA toevoegt aan een e-mail of sjabloon, leer dan hoe je je CTA kunt centreren (legacy).

Let op: accounts die na 17 maart 2025 zijn aangemaakt, hebben geen toegang tot de CTA (legacy) tool.

De grootte van je CTA (legacy) bewerken

Je kunt de grootte van je CTA handmatig aanpassen of aangepaste CSS gebruiken om automatisch de breedte van de container of module van de CTA te vullen. Als je een i mage CTA insluit op een niet-HubSpot site, moet je mogelijk extra CSS-declaraties (zoals width: 100%;) toepassen in je stylesheet om de CTA met afbeelding responsief te maken.

Om de grootte van je knop CTA aan te passen:
  • Klik linksboven op het vervolgkeuzemenu en selecteer CTA's (Legacy).
  • Ga met de muis over een CTA en klik op Acties > Bewerken.
  • Klik in het schuifpaneel op Geavanceerde opties.
  • Om de grootte van uw aangepaste CTA handmatig aan te passen:
    • Schakel het selectievakje Aanpassen aan tekst uit. Dit verwijdert de automatische aanpassing van de grootte.
    • Voer in het gedeelte Knopvulling de waarden voor de grootte in voor de velden Knopbreedte en Knophoogte.
    • Klik op Volgende >.
    • Klik op Opslaan. Klik vervolgens op Voltooien.
  • Om je aangepaste CTA de volledige breedte van de container of module te laten vullen:
    • Schakel het selectievakje Formaat automatisch uit.
    • Voer in het veld Aangepaste CSS je aangepaste CSS in.
    • Stel de breedte in op width: 100%;
    • Klik op Volgende >.
    • Klik op Opslaan. Klik vervolgens op Voltooien.

Wat is netvliesoptimalisatie?

Retina optimalisatie zorgt ervoor dat de afbeelding van je CTA scherper wordt weergegeven op je websitepagina's en in e-mails als je ontvangers de CTA bekijken in moderne versies van Apple Mail en iOS mail; dit wordt niet ondersteund door Outlook of webmaildiensten zoals Gmail.

Retina optimalisatie wordt ondersteund als je een afbeelding uploadt die minstens twee keer zo groot is als de CTA, net zoals retina ondersteuning werkt voor alle afbeeldingen op het internet. Let ook op het volgende:

  • Als je een CTA maakt van 400px bij 100px, moet de geüploade afbeelding 800px bij 200px zijn om een weergave met @2x pixeldichtheid te ondersteunen.
  • CTA's ondersteunen het toevoegen van een 4x versie. Als je bijvoorbeeld een CTA maakt van 400px bij 100px, kun je een afbeelding van 1600px bij 400px uploaden.
  • De CTA wordt automatisch weergegeven op je website met een srcset attribuut dat de 1x, 2x, 3x en 4x versie weergeeft waar beschikbaar.
  • Als de afbeelding wordt geüpload met de grootte waarmee de CTA wordt weergegeven, wordt retina niet ondersteund. Bijvoorbeeld, als een afbeelding van 400px bij 100px wordt geüpload voor een CTA van 400px bij 100px