Opties voor Visual Experience Composer

In de release Adobe Target Standard/Premium 25.2.1 (17 februari 2015) wordt een bijgewerkte versie van Visual Experience Composer (VEC) geïntroduceerd. In dit artikel worden de bijgewerkte gebruikersinterface en de bijbehorende opties uitgelegd.

IMPORTANT
Voor de bijgewerkte Visual Editing Composer is de Adobe Experience Cloud Visual Editing Helper -extensiebeschikbaar in de Chrome Web Store.

De VEC wordt weergegeven wanneer u een bestaande activiteit maakt of bewerkt.

Visuele Composer van de Ervaring (VEC)

Overzicht van VEC UI

In de volgende secties worden de opties beschreven die beschikbaar zijn in de bijgewerkte VEC voor een A/B Test -activiteit. Welke opties beschikbaar zijn, is afhankelijk van het type activiteit.

Experiences deelvenster

Het deelvenster Experiences wordt weergegeven in de linkerrails van de VEC.

het paneel van Ervaring

Met het deelvenster Experiences kunt u ervaringen weergeven, maken, hernoemen of verwijderen.

De volgende opties zijn beschikbaar in het deelvenster Experiences :

  • Mening een ervaring: Om een ervaring te bekijken, klik de gewenste ervaring om het in het Design canvas te tonen.
  • voeg een ervaring toe: Klik het Add pictogram ( voeg pictogram toe) om een nieuwe ervaring toe te voegen. Configureer de nieuwe ervaring naar wens.
  • noem een ervaring anders: Klik het Rename pictogram ( anders noemen pictogram ) om de Rename Experience dialoogdoos te tonen. Geef de nieuwe naam op en klik op Save .
  • dupliceer, schrap, of richt een ervaring opnieuw: klik het More Actions pictogram ( Meer pictogram van Acties ), dan kies Duplicate, Delete, of Redirect to URL.

Activiteitsinstellingen/configuratie

Klik het Configure pictogram ( vorm pictogram ) dat bovenop het Design canvas wordt getoond om het menu van activiteiteneigenschappen te tonen.

de configuratieopties van de Activiteit

De volgende opties zijn beschikbaar:

  • Properties: Wijs eigenschappen toe aan de activiteit of verwijder eigenschappen uit de activiteit. Properties is een functie (Target Premium . Voor meer informatie, zie de gebruikerstoestemmingen van de Onderneming.
  • Page Delivery: Neem dezelfde ervaring op op vergelijkbare pagina's op uw site. Gebruik een paginasjabloon om uw pagina's een structuur te geven of als uw pagina's vergelijkbare elementen bevatten, om variaties in pagina-elementen met een vergelijkbare structuur of in het hele domein te testen. Voor meer informatie, zie de zelfde ervaring op gelijkaardige pagina'somvatten.
  • Site Preferences: Configureer uw sitevoorkeuren om op te geven hoe Target CSS-kiezers genereert. Voor meer informatie, zie CSS selecteurs in vormen Visual Experience Composer.
  • voegt Extra Pagina's toe: Voeg extra pagina's aan de activiteit toe om een activiteit tot stand te brengen die u een verhaal over veelvoudige pagina's laat tot stand brengen, met een ontwerp dat voor elke pagina specifiek is. Voor meer informatie, zie Multipage activiteit.
  • Enige Publiek: Gebruik één enkel publiek voor de activiteit.
  • Veelvoudige Soorten publiek: Wijs veelvoudige publiek aan de activiteit toe. Klik het Add pictogram van het publiek ( voeg pictogram toe), dan selecteer één of meerdere publiek van de lijst. U kunt ook publiekcombineren of een nieuw publiekvan het Add Audiences dialoogvakje creëren.

Design/Browse modi

Gebruik de Design/ Browse knevels die bovenop het ontwerpcanvas worden getoond om tussen ontwerp en doorbladerwijze te schakelen.

Ontwerp en doorblader knevels

Met de modus Browse navigeert u door uw site en kiest u de weergave of pagina die u wilt bijwerken. Schakel terug naar de modus Design om uw wijzigingen toe te voegen of te bewerken.

Undo/Redo

U kunt veranderingen ongedaan maken die door het Undo pictogram ( worden aangebracht ongedaan maken pictogram ).

ongedaan maak pictogram in VEC

Om een actie opnieuw te doen, breid ongedaan maken/ Redo knoopgroep en kies Redo.

Components deelvenster

U kunt een aantal componenten aan uw webpagina toevoegen en deze naar wens bewerken in het nieuwe deelvenster Components .

het paneel van Componenten

NOTE
Als u het Modifications paneel op dit gebied in plaats van het Components paneel ziet, klik het Show Components pictogram ( toon het pictogram van Componenten ). Het Show Components pictogram ( toon het pictogram van Componenten ) en Show Modifications pictogram ( toon het paneel van Veranderingen ) dienst als knevels om de aangewezen opties te tonen.

Een nieuwe component toevoegen aan een ervaring:

  1. Klik op de gewenste component die u wilt toevoegen om deze te markeren.

    De beschikbare componenten worden gegroepeerd in logische containers:

  2. Sleep de component over een bestaand pagina-element in het canvas van Design .

  3. Kies of u de component vóór of na het geselecteerde element wilt invoegen.

    In vergelijking met de vorige VEC-versie kunt u een geselecteerd element niet vervangen door een component.

Modifications deelvenster

Om het Modifications paneel te openen, klik het Show Modifications pictogram ( toon het paneel van Veranderingen ) in het Components paneel.

het paneel van Wijzigingen

NOTE
Het Show Components pictogram ( toon het pictogram van Componenten ) en Show Modifications pictogram ( toon het paneel van Veranderingen ) dienst als knevels om de aangewezen opties te tonen.

In het deelvenster Modifications worden alle wijzigingen weergegeven die in de pagina zijn aangebracht in Visual Experience Composer (VEC) en kunt u aanvullende wijzigingen aanbrengen (zoals CSS-kiezer, Mbox en Aangepaste code).

Klik het More Options pictogram ( Meer pictogram van Acties ) in de paneelkopbal om een wijziging toe te voegen, alle wijzigingen te schrappen, of alle ongeldige wijzigingen te schrappen. Klik op Select om bulkbewerkingen uit te voeren: Apply to All Pages of Delete .

Klik het More Options pictogram ( Meer pictogram van Acties ) naast elke wijziging om zijn informatie te bekijken, de wijziging te schrappen, of de wijziging op meer meningen toe te passen.

Design canvas

Met het canvas Design kunt u viewports selecteren, waaronder fit-to-screen Desktop , Tablet , Mobile Landscape en Mobile Portrait . Door gebrek, past het canvas de pagina aan het scherm samen met viewports die in de sectie van het Beleidworden bepaald.

Viewport opties

U kunt ook inzoomen of uitzoomen door het aangewezen pictogram te klikken ( Gezoem binnen pictogram of Gezoem uit pictogram ).

Wanneer u op een pagina-element in het canvas van Design klikt, wordt in een menu weergegeven welke opties beschikbaar zijn voor dat elementtype. Bovendien wordt onder aan de pagina een DOM-pad weergegeven waarmee u gemakkelijk door de paginastructuur kunt navigeren.

De verschillende Visual Experience Composer (VEC) acties worden gegroepeerd in de juiste menuopties om uw taak sneller en efficiënter te maken:

VEC optiemenu

NOTE
Welke opties beschikbaar zijn, is afhankelijk van het type activiteit en het element dat u maakt of bewerkt. Voor meer informatie over het uitgeven van beelden en aanbiedingen in een A/B Test activiteit, zie elementen uitgeven gebruikend het Design canvashieronder.

Properties deelvenster

In het deelvenster Properties kunt u de eigenschappen van geselecteerde elementen op de pagina wijzigen, ongeacht of dit HTML-elementen of -objecten zijn die specifiek zijn voor Target , zoals aanbevelingen of aanbiedingen.

het paneel van Eigenschappen

Klik op de pictogrammen boven in het deelvenster om HTML-code te bewerken of om elementen te verwijderen, te dupliceren of te verbergen. Wijzigingen worden weergegeven in het deelvenster Modifications .

Het Properties -deelvenster kan worden samengevouwen in de rechterrail. Klik het Show/Hide Properties pictogram ( pictogram van Eigenschappen ) rechts van het paneel om het Properties paneel samen te vouwen of te tonen.

Elementen bewerken met het canvas Design design

In de volgende secties ziet u hoe u afbeeldingen en tekst op het canvas van Design kunt bewerken. Het ontwerpcanvas biedt u samen met de deelvensters Componenten, Wijzigingen en Eigenschappen krachtige gereedschappen waarmee u eenvoudig ervaringen voor uw activiteiten kunt maken.

Afbeeldingsopties

Als u in een A/B Test -activiteit op een afbeelding klikt, ziet de VEC er ongeveer als volgt uit:

VEC met geselecteerd beeld

Selecteer componenten in het Components -frame aan de linkerkant om de volgende elementen in te voegen:

Met het menu boven aan de afbeelding kunt u het volgende doen:

  • Neem een verbinding ( het pictogram van de Verbinding van het Tussenvoegsel ) op.
  • Verander het beeld ( kies het pictogram van het Beeld ).
  • Voeg verpersoonlijking toe ( voeg het pictogram van Personalization toe).
  • Schrap het beeld ( pictogram van de Schrapping ).

In het deelvenster Properties aan de rechterkant kunt u de eigenschappen van de afbeelding verder configureren.

Met de pictogrammen boven aan het frame kunt u het volgende doen:

  • Bewerk HTML ( het pictogram van HTML van het Tussenvoegsel ). Zie HTMLhieronder voor meer informatie uitgeven.
  • Dupliceer het beeld ( Dupliceer pictogram ).
  • Schrap het beeld ( pictogram van de Schrapping ).
  • Verberg het beeld ( pictogram van de Verbergen ).

Met de opties in het rechterframe kunt u het volgende doen:

  • Bewerk de CSS-klasse.
  • Configureer de eigenschappen van de afbeelding (bron, titel, alternatieve tekst).
  • Bewerk de URL van de koppeling.
  • De grootte van de afbeelding (hoogte en breedte) configureren. Klik op Show Advanced Options om de minimale en maximale grootte, breedte, hoogte, overloop en het passend maken van objecten in de afbeelding in te stellen.
  • Configureer de positie van de afbeelding op de pagina (absoluut, vast, relatief, statisch of vast).
  • Vorm het uit elkaar plaatsen van het element, met inbegrip van marge en het opvullen.
  • Configureer de effecten van het element (dekking). Klik op Show Advanced Options om de waarden voor sepia, grijswaarden, contrast, helderheid en vervagen van de afbeelding in te stellen. U kunt de afbeelding ook omkeren of roteren.
  • Configureer de inline stijlen van de afbeelding.

Tekstopties

Als u op tekst in een A/B Test -activiteit klikt, ziet de VEC er ongeveer als volgt uit:

VEC met geselecteerde tekst

Selecteer componenten in het Components -frame aan de linkerkant om de volgende elementen in te voegen:

Klik het Show Modifications pictogram ( toon het pictogram van Wijzigingen ) om de wijzigingen in de ervaring te tonen.

Met het menu boven aan het tekstelement kunt u het volgende doen:

  • De eigenschappen van de tekst configureren (kopniveau, alinea, aanhalingsteken voor blokken of monospace)
  • Selecteer de kleur van de tekst ( pictogram van de Kleur van de Tekst )
  • Vorm de attributen van de tekst (gewaagd, cursief, onderstrepen, of slaan door) ( kies het pictogram van tekstAttributen ).
  • Vorm de groepering van de tekst (links, centrum, recht, rechtvaardigen) ( pictogram van de Groepering van de Tekst ).
  • Neem een verbinding ( het pictogram van de Verbinding van het Tussenvoegsel ) op.
  • Vervang de inhoud met een aanbieding van HTML, het Fragment van de Ervaring, of Aanbeveling.
  • Bewerk HTML ( het pictogram van HTML van het Tussenvoegsel ).
  • Voeg verpersoonlijking toe ( voeg het pictogram van Personalization toe).
  • Schrap het beeld ( pictogram van de Schrapping ).

In het deelvenster Properties aan de rechterkant kunt u de eigenschappen van de tekst verder configureren.

Met de pictogrammen boven aan het frame kunt u het volgende doen:

  • Bewerk HTML ( het pictogram van HTML van het Tussenvoegsel ). Zie HTMLhieronder voor meer informatie uitgeven.
  • Dupliceer de tekst ( Dupliceer pictogram ).
  • Schrap de tekst ( pictogram van de Schrapping ).
  • Verberg de tekst ( pictogram van de Verbergen ).

Met de opties in het rechterframe kunt u het volgende doen:

  • Bewerk de CSS-klasse.
  • Configureer de achtergrondkleur en -afbeelding van de tekst.
  • Configureer de typografie van de tekst (kopstijl, tekengrootte, letterdikte, regelhoogte, uitlijning, tekstkleur, tekststijl (vet, cursief, onderstreept of doorgehaald)).
  • Configureer lijsten, inclusief opsommingstekens, genummerd of A,B,C.
  • Kies de randkleur.
  • Vorm de grootte van het tekstvakje (hoogte en breedte). Klik op Show Advanced Options om de minimale en maximale grootte, breedte, hoogte, overloop en het passend maken van het tekstvak in te stellen.
  • Configureer de positie van het tekstvak op de pagina (absoluut, vast, relatief, statisch of plakkend) en stel het aantal pixels in vanaf de bovenkant, de rechterkant, de onderkant en de linkerkant.
  • Vorm het uit elkaar plaatsen van het element, met inbegrip van marge en het opvullen.
  • Configureer de effecten van het element (dekking). Klik op Show Advanced Options om de waarden voor sepia, grijswaarden, contrast, helderheid en vervagen van de afbeelding in te stellen. U kunt de tekst ook omkeren of roteren.
  • Configureer de inline stijlen.

HTML bewerken

Naast de HTML-code kunt u aangepaste JavaScript bewerken en injecteren.

Er zijn diverse opmaakopties voor RTF-tekst beschikbaar wanneer u tekst bewerkt en HTML voor A/B - en Experience Targeting -activiteiten. U kunt een lettertype kiezen, een lettertypestijl selecteren, de tekstuitlijning wijzigen en andere standaardopties voor tekstopmaak opgeven. Wanneer u HTML wijzigt, kunt u schakelen tussen de codeweergave en de rijke bewerkingsweergave van de HTML.

De volgende HTML5-tags kunnen worden genest:

Tag
Geneste tags toegestaan
<a>
<h1-h6>, <p>, <ul>, <ol>, <menu>, <div>, <figure>, <figcaption>
<ins>
<h1-h6>, <p>, <ul>, <ol>, <menu>
<del>
<ul>, <ol>, <menu>, <h1-h6>, <p>
<label>
<p>

Wanneer u een element op de pagina klikt, toont het VEC optiesmenu. Wanneer u op een element klikt, wordt bovendien het bijbehorende DOM-pad onder aan de pagina weergegeven.

DOM weg

Als u niet de weg DOM ziet, klik het Show DOM pictogram ( toon het pictogram van het DOM ).

U kunt het DOM-pad gebruiken om snel informatie over het geselecteerde element (type, id en klasse) weer te geven en het DOM-pad omhoog of omlaag te verplaatsen om het gewenste element te selecteren.

U kunt gemakkelijk aan om het even welk ouder, sibling, of kindelement binnen VEC navigeren gebruikend de weg DOM.

De DOM wegeigenschap is ook beschikbaar wanneer vestiging het volgenklikt.

recommendation-more-help
3d9ad939-5908-4b30-aac1-a4ad253cd654