DocumentatieJourney Optimizer B2BDocumentatie voor de B2B-editie van Journey Optimizer

[Beta]{class="badge informative" title="Deze functie bevindt zich momenteel in een beperkte bètaversie"}

Sjabloonontwerp bestemmingspagina

Last update: Fri Aug 08 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Gemaakt voor:

  • Gebruiker

Nadat u een het landen paginamalplaatjecreeert, gebruik de visuele ontwerpruimte aan auteur de structuur en inhoudscomponenten in uw paginasjabloon.

Structuur en inhoud toevoegen structure-content-landing-page

  1. Als u het inhoudsontwerp wilt starten, sleept u een item van de Structures naar het canvas.

    Voeg zoveel items vanuit Structures ​toe als u nodig hebt en bewerk de instellingen voor elk item in het rechterdeelvenster.

    note tip
    TIP
    Selecteer de n:nkolom component om het aantal kolommen van uw keus (tussen drie en 10) te bepalen. U kunt ook de breedte van elke kolom definiëren door de pijlen onder de kolom te verplaatsen.

    sleep een structuur op het canvas en pas de montages {width="800" modal="regular"} aan

    Elke kolomgrootte mag niet kleiner zijn dan 10% van de totale breedte van de structuurcomponent. Alleen lege kolommen kunnen worden verwijderd.

  2. Vouw de sectie Contents uit en voeg zoveel inhoudscomponenten toe als u nodig hebt in een of meer structuurcomponenten.

    sleep een inhoudselement op het canvas en pas de montages {width="800" modal="regular"} aan

  3. Indien nodig kunt u aanvullende aanpassingen aanbrengen voor elke component op de tabbladen Settings ​of​ Style .

    U kunt bijvoorbeeld de tekststijl, opvulling of marge van elke component wijzigen.

  4. Als u voorwaardelijke inhoud wilt toevoegen en de inhoud wilt aanpassen aan de doelprofielen op basis van voorwaardelijke regels, selecteert u een inhoudscomponent en klikt u op het pictogram Enable conditional content op de werkbalk van de component.

    Voor meer informatie, zie Voorwaardelijke inhoud.

Aangepaste CSS toevoegen

U kunt uw eigen aangepaste CSS rechtstreeks toevoegen binnen de ontwerpruimte van de bestemmingspagina. Gebruik aangepaste CSS om geavanceerde en specifieke stijlen toe te passen, voor meer flexibiliteit en controle over de weergave van uw inhoud. Het wordt aanbevolen deze opmaak op het hoogste niveau toe te voegen voordat u componenten zoals afbeeldingen, knoppen en tekst opneemt.

Selecteer met ten minste één inhoudscomponent op het canvas de component Body in de linkernavigatiestructuur voor toegang tot de aangepaste CSS-editor.

heb toegang tot de lichaamstijlen {width="800" modal="regular"}

  1. In het lusje van Stijlen dat op het recht wordt getoond, klik Add custom CSS.

    note note
    NOTE
    De knop Add custom CSS is alleen beschikbaar wanneer de component Body ​is geselecteerd. U kunt echter aangepaste CSS-stijlen toepassen op alle componenten in de stijl.

    De pop-upeditor van Add custom CSS ​wordt weergegeven met opmerkingen voor plaatsaanduidingscode.

  2. Voer uw CSS-code in de editor in.

    Zorg ervoor dat de aangepaste CSS geldig is en de juiste syntaxis volgt. Als de ingevoerde CSS ongeldig is, wordt een foutbericht weergegeven en kan de CSS niet worden opgeslagen. Meer leren, zie CSS geldigheid.

  3. Klik op Save om de aangepaste CSS op te slaan.

    Het aangepaste stijlblad wordt toegepast op de bestaande inhoud. U kunt controleren of uw aangepaste CSS is toegepast naar wens. Voor informatie over hoe te om veranderingen aan te brengen en de toepassing van het stijlblad aan te passen, zie het Oplossen van problemen.

NOTE
Als u alle inhoud verwijdert, wordt de CSS-sectie niet meer weergegeven in het deelvenster Tekenstijlen en wordt de eerder gedefinieerde aangepaste CSS niet meer toegepast. Als u inhoud weer toevoegt, verschijnt de sectie CSS styles opnieuw en wordt de aangepaste CSS opnieuw toegepast.

Elementen toevoegen

In de visuele inhoudsredacteur, selecteer het Marketo Engage Assets ( het pictogram van Assets van Marketo Engage ) pictogram of Experience Manager Assets ( het pictogram van AEM Assets ) pictogram in de linkernavigatiebar. Vanuit de elementenkiezer kunt u rechtstreeks in de bronbibliotheek opgeslagen elementen selecteren.

NOTE
Als u Adobe Experience Manager als Cloud Services hebt ingericht, hebt u toegang tot de opslagruimten voor zowel Marketo Engage Design Studio als Adobe Experience Manager Assets as a Cloud Service wanneer uw gebruikersaccount de vereiste machtigingen heeft. Deze opslagruimten zijn gescheiden en niet gesynchroniseerd. U kunt afbeeldingselementen uit beide bronnen gebruiken.

  • Voeg een nieuw element toe door het afbeeldingselement naar een structuurcomponent te slepen.

    belemmering een activa van Marketo Engage op het canvas en pas de montages {width="800" modal="regular"} aan

  • Vervang een bestaand afbeeldingselement door dit te selecteren op het canvas en op Select an asset te klikken in de brongereedschappen van de afbeelding.

    Uitgezocht een middel van de bronbibliotheek {width="600" modal="regular"}

Voor meer informatie over het gebruiken van activa van uw brontype, zie activa van het Gebruik voor inhoud creatie.

Formulieren toevoegen

Een formulier is een herbruikbare component waarnaar meerdere bestemmingspagina's en landingspagina-sjablonen in Adobe Journey Optimizer B2B edition kunnen verwijzen. Het is een blok velden en een verzendknop die vooraf kunnen worden gemaakt en snel kunnen worden ingevoegd om het paginaontwerp sneller en consistenter te maken.

In het volgende voorbeeld worden de stappen beschreven waarmee u een formulier toevoegt terwijl u de pagina ontwerpt.

  1. Sleep het item Form onder de sectie Contents naar een structuurcomponent in de ruimte voor het paginaontwerp.

    sleep een component van de Vorm in de visuele ontwerpruimte {width="600"}

    note tip
    TIP
    Als u het formulier wilt toevoegen zodat het de volledige horizontale indeling in het e-mailbericht inneemt, voegt u een kolomstructuur van 1:1 toe en sleept u het formulier naar het formulier.

  2. Klik het pictogram van de Vorm in componententoolbar, of gebruik de Embed Form eigenschappen op het recht om de gepubliceerde vorm te selecteren.

    selecteer de gepubliceerde vorm {width="600"}

  3. Als u de standaardinstelling Follow up type voor het formulier wilt overschrijven, wijzigt u de instelling op basis van de vereisten voor de pagina of sjabloon.

    Dit is ook bekend als Dank u pagina voor de vorm en dit het plaatsen bepaalt wat gebeurt wanneer een bezoeker de vorm voorlegt:

    • Stay on page - Kies deze optie als u de bezoeker op dezelfde pagina wilt houden wanneer het formulier wordt verzonden.

    • Landing page - Kies deze optie als u een Journey Optimizer B2B edition- of Marketo Engage-bestemmingspagina wilt selecteren als follow-up.

    • External URL - Kies deze optie om een URL op te geven als de vervolgpagina. Nadat de bezoeker het formulier heeft verzonden, laadt de browser de opgegeven URL.

      note tip
      TIP
      Als u het formulier wilt gebruiken voor het downloaden van een bestand, kunt u een URL voor het gehoste bestand opgeven. Met deze configuratie werkt de knop Verzenden als een downloadknop.

    Verandering follow-up plaatsen {width="280"}

  4. Als u de weergave van het formulier wilt beperken op apparaattype, wijzigt u de instelling voor Display Options :

    • Show only on desktop devices
    • Show only on mobile devices
    • Show on all devices (standaardwaarde)

  5. Selecteer zo nodig de tab Styles in het rechterdeelvenster om de formuliermarges op de pagina in te stellen.

Terwijl u met de inhoud werkt in de visuele ontwerpruimte, hebt u via de navigatiestructuur toegang tot de componenten, kolommen en inhoudselementen. Klik het Navigation tree ​pictogram ( het boompictogram van de Navigatie ) op de linkerzijde om de boom te tonen.

heb toegang tot de inhoudslagen {width="800" modal="regular"}

In het volgende voorbeeld worden stappen beschreven voor het aanpassen van opvulling en verticale uitlijning binnen een structuurcomponent met kolommen.

  1. Selecteer de kolom in de structuurcomponent direct in het canvas of gebruikend de boom van de Navigatie die bij de linkerzijde wordt getoond.

  2. Klik in de kolomwerkbalk op het gereedschap Select a column ​en kies het gereedschap dat u wilt bewerken.

    U kunt deze ook selecteren in de boomstructuur. De bewerkbare parameters voor die kolom worden weergegeven op de tabbladen Settings ​en​ Styles rechts.

    de componenten van de Kolom die in de visuele ontwerper {width="800" modal="regular"} worden getoond

  3. Als u de kolomeigenschappen wilt bewerken, klikt u op de tab Styles ​aan de rechterkant en wijzigt u deze naar wens:

    • Wijzig voor Background de achtergrondkleur zo nodig.

      Schakel het selectievakje voor een transparante achtergrond uit. Schakel de instelling Background image in om een afbeelding te gebruiken als achtergrond in plaats van als een effen kleur.

    • Voor Alignment, selecteer de Hoogste, Midden, of Onderste pictogram.

    • Definieer bij Padding de opvulling voor alle zijden.

      Selecteer Different padding for each side als u de opvulling wilt verfijnen. Klik het __ pictogram van het Slot {om synchronisatie te breken.

    • Vouw de sectie Advanced uit om inline stijlen voor de kolom te definiëren.

    verander de stijlen voor de geselecteerde kolom {width="700" modal="regular"}

  4. Herhaal indien nodig deze stappen om de uitlijning en opvulling voor de andere kolommen in de component aan te passen.

  5. Sla uw wijzigingen op.

Inhoud personaliseren

Journey Optimizer B2B edition gebruikt een inline eenvoudige syntaxis waarmee u expressies kunt maken met gepersonaliseerde inhoud die wordt ingesloten door dubbele accolades {} . U kunt meerdere expressies zonder beperkingen toevoegen in dezelfde inhoud of hetzelfde veld.

Voorbeelden:

  • Hello {{profile.person.name.firstName}} {{profile.person.name.lastName}}

  • Hello {{profile.person.name.fullName}}

Bij het verwerken van de inhoud vervangt Journey Optimizer B2B edition de expressie door de gegevens in de database van het Experience Platform. Zo, wordt het eerste voorbeeld Sint Smit van Hello.

In het volgende voorbeeld worden stappen beschreven voor het aanpassen van inhoud met behulp van lood-/accountkenmerken en systeemtokens.

  1. Selecteer de tekstcomponent en klik verpersoonlijking pictogram in de toolbar toevoegen.

    klik het Persoonlijke pictogram {width="600"}

    Deze actie opent geeft Personalization dialoog uit.

  2. Klik + of … om een teken aan de lege ruimte toe te voegen.

    construeert gepersonaliseerde tekst gebruikend tokens {width="700" modal="regular"}

  3. Klik op Save.

Gekoppelde URL-tracking bewerken

  1. Klik het Links ​pictogram ( toon het verbindingspictogram ) op de linkerzijde om alle verbonden URLs in uw te volgen inhoud te tonen.

  2. Indien nodig, klik uitgeven ( geef pictogram uit) pictogram en wijzig Tracking Type of Label.

    U kunt Markeringen voor een verbinding ook toevoegen.

klik het Edit pictogram om verbinding het volgen {width="500"} toegang te hebben

Uw werk opslaan

Klik op Save om de sjabloon van de bestemmingspagina op te slaan.

Weergaveopties

Gebruik de opties voor weergave- en inhoudsvalidatie die beschikbaar zijn in de ruimte van het visuele ontwerp.

  • Zoom in of uit op de inhoud met de vooraf ingestelde zoomopties.

  • Schakel de weergave van de inhoud in op Desktop, Mobiel of Alleen tekst/Onbewerkte tekst.

    • Klik het pictogram van de Mening voor inhoudsvoorproef over apparaten.
    • Selecteer een van de apparaten die buiten het vak vallen of voer aangepaste afmetingen in om een voorvertoning van de inhoud weer te geven.

Meer opties

Vanuit het menu More … ​boven aan de visuele ontwerpruimte kunt u de volgende handelingen uitvoeren:

klik Meer om tot malplaatjeacties {width="500"} toegang te hebben

  • Reset landing page - Klik op deze optie om het visuele ontwerpcanvas op een lege leisteen te wissen en de opbouw van de pagina-inhoud opnieuw te starten.
  • Change your design - Ga terug naar de Create your primary landing page ​startpagina. Van daar, kunt u een andere malplaatje kiezen om het ontwerpproces opnieuw te beginnen, of verkiezen om de pagina van kras in een leeg canvas te ontwerpen.
  • Export HTML - Download de inhoud in het visuele canvas naar uw lokale systeem in de HTML-indeling die is verpakt als een zip-bestand.
recommendation-more-help
6ef00091-a233-4243-8773-0da8461f7ef0