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.
De VEC wordt weergegeven wanneer u een bestaande activiteit maakt of bewerkt.
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.
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 (
- noem een ervaring anders: Klik het Rename pictogram (
- dupliceer, schrap, of richt een ervaring opnieuw: klik het More Actions pictogram (
Activiteitsinstellingen/configuratie
Klik het Configure pictogram (
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 (
Design/Browse modi
Gebruik de Design/ Browse knevels die bovenop het ontwerpcanvas worden getoond om tussen ontwerp en doorbladerwijze te schakelen.
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 (
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 .
Een nieuwe component toevoegen aan een ervaring:
-
Klik op de gewenste component die u wilt toevoegen om deze te markeren.
De beschikbare componenten worden gegroepeerd in logische containers:
-
Basic
- Divider
- HTML
- Image
-
Text
- Heading
- Paragraph
- Link
-
Dynamic
-
-
Sleep de component over een bestaand pagina-element in het canvas van Design .
-
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 (
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 (
Klik het More Options pictogram (
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.
U kunt ook inzoomen of uitzoomen door het aangewezen pictogram te klikken (
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:
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.
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 (
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:
Selecteer componenten in het Components -frame aan de linkerkant om de volgende elementen in te voegen:
- Eenvoudig (scheidingsteken, HTML, afbeelding).
- Tekst (kop, alinea, koppeling).
- Dynamisch ( Aanbeveling, het Fragment van de Ervaring, aanbieding van HTML).
Met het menu boven aan de afbeelding kunt u het volgende doen:
- Neem een verbinding (
- Verander het beeld (
- Voeg verpersoonlijking toe (
- Schrap het beeld (
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 (
- Dupliceer het beeld (
- Schrap het beeld (
- Verberg het beeld (
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:
Selecteer componenten in het Components -frame aan de linkerkant om de volgende elementen in te voegen:
- Eenvoudig (scheidingsteken, HTML, afbeelding).
- Tekst (kop, alinea, koppeling).
- Dynamisch ( Aanbeveling, het Fragment van de Ervaring, aanbieding van HTML).
Klik het Show Modifications pictogram (
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 (
- Vorm de attributen van de tekst (gewaagd, cursief, onderstrepen, of slaan door) (
- Vorm de groepering van de tekst (links, centrum, recht, rechtvaardigen) (
- Neem een verbinding (
- Vervang de inhoud met een aanbieding van HTML, het Fragment van de Ervaring, of Aanbeveling.
- Bewerk HTML (
- Voeg verpersoonlijking toe (
- Schrap het beeld (
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 (
- Dupliceer de tekst (
- Schrap de tekst (
- Verberg de tekst (
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:
<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>
Navigeren door elementen met het DOM-pad dom-path
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.
Als u niet de weg DOM ziet, klik het Show DOM pictogram (
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.