DokumentationJourney Optimizer B2BJourney Optimizer B2B edition Documentation

[Beta]{class="badge informative" title="Den här funktionen är för närvarande i en begränsad betaversion"}

Landningssiddesign

Last update: Tue Sep 09 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Användare

När du har skapat en landningssida använder du det visuella designområdet för att skapa struktur- och innehållskomponenterna på sidan.

Lägga till struktur och innehåll structure-content-landing-page

  1. Om du vill starta innehållsdesignen drar du ett objekt från Structures och släpper det på arbetsytan.

    Lägg till så många objekt från Structures​som du behöver och redigera inställningarna för varje objekt i rutan till höger.

    note tip
    TIP
    Välj komponenten n:nkolumn för att definiera antalet kolumner som du väljer (mellan tre och 10). Du kan också definiera bredden på varje kolumn genom att flytta pilarna under kolumnen.

    Dra en struktur till arbetsytan och justera inställningarna {width="800" modal="regular"}

    Varje kolumnstorlek får inte vara mindre än 10 % av strukturkomponentens totala bredd. Endast tomma kolumner kan tas bort.

  2. Expandera avsnittet Contents och lägg till så många innehållskomponenter du behöver i en eller flera strukturkomponenter.

    Dra ett innehållselement till arbetsytan och justera inställningarna {width="800" modal="regular"}

  3. Om det behövs kan du göra ytterligare anpassningar för varje komponent på flikarna Settings​eller​Style.

    Du kan till exempel ändra textstil, utfyllnad eller marginal för varje komponent.

  4. Om du vill lägga till villkorligt innehåll och anpassa innehållet till målprofilerna baserat på villkorliga regler, markerar du en innehållskomponent och klickar på ikonen Enable conditional content i komponentens verktygsfält.

    Mer information finns i Villkorligt innehåll.

Lägg till anpassad CSS

Du kan lägga till egen anpassad CSS direkt i designutrymmet för landningssidan. Använd anpassad CSS för att använda avancerad och specifik formatering, vilket ger större flexibilitet och kontroll över utseendet på innehållet. Det är en god vana att lägga till den här formateringen på den högsta nivån innan du inkluderar komponenter som bilder, knappar och text.

Med minst en innehållskomponent på arbetsytan väljer du komponenten Body i det vänstra navigeringsträdet för att komma åt den anpassade CSS-redigeraren.

Få åtkomst till brödtextformaten {width="800" modal="regular"}

  1. Klicka på på fliken Stilar Add custom CSS till höger.

    note note
    NOTE
    Knappen Add custom CSS är bara tillgänglig när komponenten Body​är markerad. Du kan dock använda anpassade CSS-format på alla komponenter i det.

    Popup-redigeraren Add custom CSS​visas med platshållarkodkommentarer.

  2. Ange din CSS-kod i redigeraren.

    Kontrollera att den anpassade CSS-koden är giltig och följer rätt syntax. Om angiven CSS är ogiltig visas ett felmeddelande och CSS kan inte sparas. Mer information finns i CSS-giltighet.

  3. Klicka på Save om du vill spara den anpassade CSS-koden.

    Den anpassade formatmallen används för det befintliga innehållet. Du kan kontrollera att din anpassade CSS används efter dina behov. Mer information om hur du gör ändringar och justerar formatmallsprogrammet finns i Felsökning.

NOTE
Om du tar bort allt innehåll visas inte längre CSS-avsnittet på panelen Innehållsformat och den tidigare definierade anpassade CSS används inte längre. Om du lägger till innehåll igen visas avsnittet CSS styles igen och den anpassade CSS-koden tillämpas igen.

Lägga till resurser

I redigeraren för visuellt innehåll väljer du ikonen Assets ( Assets-ikon ) eller ikonen Experience Manager Assets ( AEM Assets-ikon ) i det vänstra navigeringsfältet. Från resursväljaren kan du välja resurser som lagras direkt i källbiblioteket.

NOTE
Om du har Adobe Experience Manager som molntjänster får du tillgång till databaserna för både Journey Optimizer B2B edition och Adobe Experience Manager Assets as a Cloud Service när ditt användarkonto har den behörighet som krävs. Dessa databaser är separata och inte synkroniserade. Du kan använda bildresurser från båda källorna.

  • Lägg till en ny resurs genom att dra och släppa bildresursen i en strukturkomponent.

    Dra en intern resurs till arbetsytan och justera inställningarna {width="800" modal="regular"}

  • Ersätt en befintlig bildresurs genom att markera den på arbetsytan och klicka på Select Asset i verktygen för bildkällan.

    Välj en resurs från källbiblioteket {width="600" modal="regular"}

Mer information om hur du använder resurser från din källtyp finns i Använda resurser för innehållsredigering.

Lägg till formulär

Ett formulär är en återanvändbar komponent som kan refereras av flera landningssidor och mallar för landningssidor i Adobe Journey Optimizer B2B edition. Det är ett block med fält och en skicka-knapp som kan skapas i förväg och snabbt infogas för att göra siddesignen snabbare och mer konsekvent.

I följande exempel beskrivs stegen för hur du lägger till ett formulär när du utformar sidan.

  1. Under avsnittet Contents drar du objektet Form och släpper det i en strukturell komponent på siddesignområdet.

    Dra en formulärkomponent till den visuella designrymden {width="600"}

    note tip
    TIP
    Om du vill lägga till formuläret så att det upptar hela den vågräta layouten i e-postmeddelandet lägger du till en 1:1-kolumnstruktur och drar och släpper formuläret i den.

  2. Klicka på ikonen Formulär i komponentverktygsfältet eller använd egenskaperna Embed Form till höger för att välja det publicerade formuläret.

    Välj det publicerade formuläret {width="600"}

  3. Om du vill åsidosätta standardinställningen Follow up type för formuläret ändrar du inställningen enligt kraven för sidan eller mallen.

    Detta kallas även Tack-sidan för formuläret och den här inställningen avgör vad som händer när en besökare skickar formuläret:

    • Stay on page - Välj det här alternativet om du vill att besökaren ska vara på samma sida när formuläret skickas.

    • Landing page - Välj det här alternativet om du vill välja en Journey Optimizer B2B edition- eller Marketo Engage-landningssida som uppföljning.

    • External URL - Välj det här alternativet om du vill ange en URL som uppföljningssida. När besökaren har skickat formuläret läser webbläsaren in den angivna URL:en.

      note tip
      TIP
      Om du vill använda formuläret för att hämta en fil kan du ange en URL för den värdbaserade filen. Med den här konfigurationen fungerar"submit bottom" som en nedladdningsknapp.

    Ändra uppföljningsinställningen {width="280"}

  4. Om du vill begränsa formulärvisningen efter enhetstyp ändrar du inställningen Display Options:

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

  5. Om det behövs väljer du fliken Styles på den högra panelen för att ange formulärmarginaler på sidan.

När du arbetar med innehållet i den visuella designrymden kan du komma åt komponenter, kolumner och innehållselement med hjälp av navigeringsträdet. Klicka på ikonen Navigation tree( ikonen för navigeringsträd ) till vänster för att visa trädet.

Åtkomst till innehållslagren {width="800" modal="regular"}

I följande exempel visas stegen för att justera utfyllnad och lodrät justering inuti en strukturkomponent med kolumner.

  1. Markera kolumnen i strukturkomponenten direkt på arbetsytan eller med navigeringsträdet som visas till vänster.

  2. Klicka på verktyget Select a column​i kolumnverktygsfältet och välj det som du vill redigera.

    Du kan också välja det i strukturträdet. De redigerbara parametrarna för den kolumnen visas på flikarna Settings​och​Styles till höger.

    Kolumnkomponenter visas i den visuella designern {width="800" modal="regular"}

  3. Om du vill redigera kolumnegenskaperna klickar du på fliken Styles​till höger och ändrar dem efter dina behov:

    • Ändra bakgrundsfärgen för Background efter behov.

      Avmarkera kryssrutan för en genomskinlig bakgrund. Aktivera inställningen Background image om du vill använda en bild som bakgrund i stället för en heltäckande färg.

    • För Alignment väljer du ikonen Överkant, Mitten eller Nederkant .

    • För Padding definierar du utfyllnaden för alla sidor.

      Välj Different padding for each side om du vill finjustera utfyllnaden. Klicka på ikonen Lås om du vill avbryta synkroniseringen.

    • Utöka avsnittet Advanced för att definiera infogade format för kolumnen.

    Ändra format för den markerade kolumnen {width="700" modal="regular"}

  4. Om det behövs upprepar du de här stegen för att justera justeringen och utfyllnaden för de andra kolumnerna i komponenten.

  5. Spara ändringarna.

Anpassa innehåll

Journey Optimizer B2B edition använder en infogad enkel syntax som gör att du kan skapa uttryck med anpassat innehåll omgivet av dubbla klammerparenteser {}. Du kan lägga till flera uttryck i samma innehåll eller fält utan begränsningar.

Exempel:

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

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

När du bearbetar innehållet ersätter Journey Optimizer B2B edition uttrycket med data som finns i Experience Platform-databasen. Det första exemplet blir Hello John Doe.

I följande exempel beskrivs stegen för att anpassa innehåll med hjälp av lead-/kontoattribut och systemtokens.

  1. Markera textkomponenten och klicka på ikonen Lägg till anpassning i verktygsfältet.

    Klicka på ikonen Anpassa ​ {width="600"}

    Den här åtgärden öppnar dialogrutan Redigera Personalization.

  2. Klicka på + eller … för att lägga till en token i det tomma utrymmet.

    Skapa personlig text med hjälp av variabler {width="700" modal="regular"}

  3. Klicka på Save.

Redigera länkad URL-spårning

  1. Klicka på ikonen Links( ikonen Visa länkar ) till vänster om du vill visa alla länkade URL:er i ditt innehåll som ska spåras.

  2. Om det behövs klickar du på ikonen Redigera ( Redigera ) och ändrar Tracking Type eller Label.

    Du kan också lägga till taggar för en länk.

Klicka på ikonen Redigera för att komma åt länkspårning {width="500"}

Spara ditt arbete

Klicka på Save när som helst för att spara utkastet till landningssida.

Du kan fortsätta att redigera utkastsidan. När du är redo att visa sidan och göra den tillgänglig för länkning i ett e-postmeddelande eller SMS-meddelande kan du publicera sidan.

Visningsalternativ

Utnyttja de alternativ för visning och innehållsvalidering som finns i det visuella designutrymmet.

  • Zooma in/ut i innehållet genom förinställda zoomalternativ.

  • Växla mellan att visa innehållet på datorer, mobiler eller endast text/normal text.

    • Klicka på ikonen Visa om du vill förhandsgranska innehåll på olika enheter.
    • Välj en av de färdiga enheterna eller ange anpassade dimensioner för att förhandsgranska innehållet.

Fler alternativ

På menyn More …​längst upp i den visuella designrymden kan du utföra följande åtgärder:

Klicka på Mer för att komma åt mallåtgärder {width="500"}

  • Reset landing page - Klicka på det här alternativet om du vill rensa den visuella arbetsytan till ett tomt läge och börja bygga om sidinnehållet.
  • Change your design - Återgå till startsidan för Create your primary landing page. Därifrån kan du välja en annan mall för att starta om designprocessen, eller välja att designa sidan från början på en tom arbetsyta.
  • Export HTML - Hämta innehållet på den visuella arbetsytan till ditt lokala system i HTML-format som paketerats som en zip-fil.
recommendation-more-help
6ef00091-a233-4243-8773-0da8461f7ef0