In questa pagina: scopri come creare la tua esperienza Web con Adobe Journey Optimizer Visual Web Designer, selezionando e modificando gli elementi, aggiungendo componenti e personalizzazione, navigando nell’area di lavoro e modificando le dimensioni del dispositivo.
In Journey Optimizer, l’authoring Web visivo è basato sull’estensione del browser Chrome Adobe Experience Cloud Visual Helper. Ulteriori informazioni
Inizia a creare la tua esperienza web
Per iniziare a creare la tua esperienza web utilizzando il designer Web visivo, segui i passaggi indicati di seguito.
-
Dalla schermata Modifica contenuto, fare clic su Modifica pagina Web per aprire la finestra di progettazione Web.
note NOTE Se il caricamento di un sito Web non riesce, viene visualizzato un messaggio per suggerirti di installare l'estensione del browser Helper per editing video. Consulta alcuni suggerimenti per la risoluzione dei problemi in questa sezione. Puoi anche modificare il contenuto web senza caricare l’editor visivo. Per eseguire questa operazione, deselezionare l'opzione Editor visivo per utilizzare la modalità di modifica non visiva. Ulteriori informazioni -
Una volta nella finestra di progettazione Web, seleziona qualsiasi elemento dall’area di lavoro, ad esempio immagine, pulsante, paragrafo, testo, contenitore, intestazione, collegamento e così via. Ulteriori informazioni
-
Per modificare un elemento, puoi utilizzare:
-
Il menu contestuale per modificarne il contenuto, il layout, l’inserimento di collegamenti o la personalizzazione, ecc.
-
Le icone sopra il pannello di destra per modificare, duplicare, eliminare o nascondere ogni elemento.
-
Pannello a destra che cambia dinamicamente in base all’elemento selezionato. Ad esempio, puoi modificare lo sfondo, la composizione tipografica, il bordo, le dimensioni, la posizione, la spaziatura, gli effetti o gli stili in linea di un elemento.
-
Dopo aver modificato il contenuto web, puoi gestire le modifiche. Ulteriori informazioni
Utilizzare i componenti content-components
-
Selezionare un elemento dal riquadro Componenti a sinistra. Puoi aggiungere i seguenti componenti alla pagina web e modificarli in base alle tue esigenze:
- Divisore
- HTML
- Immagine
- Intestazione - L’utilizzo di questo componente è simile all’utilizzo del componente Testo nel Designer e-mail. Ulteriori informazioni
- Paragrafo - L’utilizzo di questo componente è simile all’utilizzo del componente Testo nel Designer e-mail. Ulteriori informazioni
- Collegamento
-
Passa il mouse sulla pagina e fai clic sul pulsante Inserisci prima o Inserisci dopo per aggiungere il componente a un elemento esistente nella pagina.
note NOTE Per deselezionare un componente, fare clic sul pulsante ESC nel banner contestuale blu visualizzato sopra l'area di lavoro. -
Modifica il componente in base alle esigenze direttamente nel contenuto della pagina.
-
Regola gli stili visualizzati dal riquadro contestuale a destra, ad esempio sfondo, colore del testo, bordo, dimensione, posizione e così via, a seconda del componente selezionato.
Aggiungere personalizzazione
Per aggiungere la personalizzazione, seleziona un contenitore e fai clic sull’icona di personalizzazione dalla barra dei menu contestuale visualizzata. Aggiungi le modifiche utilizzando l’editor di personalizzazione. Ulteriori informazioni
Puoi anche utilizzare Decisioning per fornire l’offerta più rilevante a ogni visitatore. Dall’editor di personalizzazione, passa a Criteri di decisione e seleziona Inserisci sintassi per aggiungere un criterio di decisione al componente Web. Ulteriori informazioni
Navigazione all’interno del Web Designer navigate-web-designer
In questa sezione vengono descritti i diversi modi in cui è possibile spostarsi all’interno del designer Web. Per visualizzare e gestire le modifiche aggiunte alla tua esperienza Web, consulta questa sezione.
Utilizzare le breadcrumb breadcrumbs
-
Seleziona un elemento dall’area di lavoro.
-
Fai clic sul pulsante Espandi/comprimi breadcrumb in basso a sinistra dello schermo per visualizzare rapidamente le informazioni sull’elemento selezionato.
-
Quando passi il cursore del mouse sulle breadcrumb, l’elemento corrispondente viene evidenziato nell’editor.
-
Utilizzando questo elemento è possibile passare facilmente a qualsiasi elemento padre, di pari livello o figlio all’interno dell’editor visivo.
Passare alla modalità sfoglia browse-mode
È possibile passare dalla modalità predefinita Progettazione alla modalità Sfoglia utilizzando il pulsante dedicato.
Dalla modalità Sfoglia, puoi passare alla pagina esatta dalla configurazione selezionata che desideri personalizzare.
È particolarmente utile quando si tratta di pagine che sono dietro l’autenticazione o che non sono disponibili dall’inizio a un determinato URL. Ad esempio, potrai eseguire l’autenticazione, passare alla pagina dell’account o alla pagina del carrello e quindi tornare alla modalità Progettazione per eseguire le modifiche nella pagina desiderata.
L’utilizzo della modalità Sfoglia consente inoltre di spostarsi tra tutte le visualizzazioni del sito Web durante la creazione di applicazioni a pagina singola. Ulteriori informazioni
Cambia dimensione dispositivo change-device-size
È possibile modificare le dimensioni del dispositivo della visualizzazione del Web designer impostando una dimensione predefinita, ad esempio Tablet o Orizzontale mobile, oppure definire una dimensione personalizzata immettendo il numero di pixel desiderato.
È anche possibile cambiare la messa a fuoco dello zoom: da 25% a 400%.
La possibilità di modificare le dimensioni del dispositivo è progettata per i siti reattivi con un rendering ottimale su vari dispositivi, finestre e dimensioni di schermo. I siti reattivi si adattano automaticamente a qualsiasi dimensione di schermo, compresi desktop, laptop, tablet o telefoni cellulari.
Video introduttivo video
Il video seguente mostra come creare un’esperienza Web utilizzando il designer Web nelle campagne Journey Optimizer.
This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.
For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.
- TL;DR: This page explains how to author a web experience with the Journey Optimizer visual web designer, including selecting and editing elements, adding components and personalization, navigating the canvas, and changing the device size.
Intents:
- Open the web designer from the Edit content screen to author a web experience
- Select and edit elements on the canvas using the contextual menu, right panel icons, and dynamic right panel
- Add and edit components such as Divider, HTML, Image, Heading, Paragraph, and Link
- Add personalization to a container using the personalization editor
- Navigate the designer with breadcrumbs and Browse mode
- Change the device size and zoom focus of the designer display
Glossary:
- Web designer: The Journey Optimizer visual web authoring editor, powered by the Adobe Experience Cloud Visual Helper Chrome browser extension (product-specific)
- Design mode: The default web designer mode for performing changes on a page (product-specific)
- Browse mode: A mode used to navigate to the exact page from the selected configuration you want to personalize, useful for pages behind authentication or not available at a certain URL from the start (product-specific)
- Breadcrumbs: A control that displays information about the selected element and lets you navigate to any parent, sibling, or child element within the visual editor (product-specific)
- Non-visual edition mode: An alternative editing mode used by unselecting the Visual editor option to edit web content without loading the visual editor (product-specific)
Guardrails:
- Visual web authoring is powered by the Adobe Experience Cloud Visual Helper Chrome browser extension, and the prerequisites must be followed to access and author web pages.
- The Adobe Experience Platform Web SDK must be included in your web page.
- If a website fails to load, a message suggests installing the Visual Editing Helper browser extension.
- Changes made at a specific device size apply to all sizes and devices as long as the selectors are the same; editing in normal desktop view also applies to all screen sizes.
- Journey Optimizer does not currently support device size-specific page changes; changes for a separate mobile website with a separate structure should be made in a different campaign.
- The zoom focus can be changed from 25% to 400%.
Terminology:
- Canonical name: Web designer — Acronym: n/a — variants: visual web designer, web content designer, visual editor
- Synonyms: “web designer” = “visual web designer”
- Do not confuse: “Design mode” (default mode for performing changes) ≠ “Browse mode” (navigate to the exact page to personalize)
FAQ:
- Q: How do I open the web designer? — From the Edit content screen, click Edit web page.
- Q: Can I edit web content without the visual editor? — Yes; unselect the Visual editor option to use the non-visual edition mode instead.
- Q: What components can I add to a web page? — Divider, HTML, Image, Heading, Paragraph, and Link.
- Q: Do device-size changes apply only to that device? — No; as long as the selectors are the same, changes apply to all sizes and devices. Journey Optimizer does not currently support device size-specific page changes.
- Q: When should I use Browse mode? — When dealing with pages behind authentication or not available at a certain URL from the start, and to navigate through all the views of a website when authoring single-page applications.