Sur cette page : découvrez comment créer votre expérience web à l’aide du concepteur web visuel de Adobe Journey Optimizer, notamment en sélectionnant et en modifiant des éléments, en ajoutant des composants et une personnalisation, en naviguant dans la zone de travail et en modifiant la taille de l’appareil.
Dans Journey Optimizer, la création web est optimisée par l’extension de navigateur Chrome Adobe Experience Cloud Visual Helper. En savoir plus
Commencer à créer votre expérience web
Pour commencer à créer votre expérience web à l’aide du concepteur web visuel, procédez comme suit.
-
Sur l’écran Modifier le contenu, cliquez sur Modifier la page web pour ouvrir le concepteur web.
note NOTE Si vous tentez de charger un site web et que le chargement échoue, un message s’affiche pour vous suggérer d’installer l’extension de navigateur Visual Editing Helper. Consultez quelques conseils dans cette section pour résoudre les problèmes. Vous pouvez également modifier votre contenu web sans charger l’éditeur visuel. Pour ce faire, désélectionnez l’option Éditeur visuel pour utiliser le mode d’édition non visuel à la place. En savoir plus -
Une fois dans le concepteur web, sélectionnez un élément de la zone de travail, tel qu’une image, un bouton, un paragraphe, un texte, un conteneur, un en-tête, un lien, etc. En savoir plus
-
Pour modifier un élément, vous pouvez utiliser les éléments suivants :
-
Le menu contextuel permettant de modifier son contenu, sa mise en page, d’insérer des liens ou la personnalisation, etc.
-
Les icônes situées en haut du panneau de droite permettent de modifier, dupliquer, supprimer ou masquer chaque élément.
-
Panneau de droite qui change dynamiquement en fonction de l’élément sélectionné. Vous pouvez, par exemple, modifier l’arrière-plan, la typographie, la bordure, la taille, la position, l’espacement, les effets ou les styles intégrés d’un élément.
-
Une fois que vous avez modifié le contenu web, vous pouvez gérer vos modifications. En savoir plus
Utiliser les composants content-components
-
Dans le volet Composants sur la gauche, sélectionnez un élément. Vous pouvez ajouter les composants suivants à votre page web et les modifier selon vos besoins :
- Diviseur
- HTML
- Image
- En-tête : l’utilisation de ce composant est similaire à l’utilisation du composant Texte dans le concepteur d’e-mail. En savoir plus
- Paragraphe : l’utilisation de ce composant est similaire à l’utilisation du composant Texte dans le concepteur d’e-mail. En savoir plus
- Lien
-
Passez la souris sur la page, puis cliquez sur le bouton Insérer avant ou Insérer après pour ajouter le composant à un élément existant sur la page.
note NOTE Pour désélectionner un composant, cliquez sur le bouton Échap dans la bannière contextuelle bleue affichée au-dessus de la zone de travail. -
Modifiez le composant suivant vos besoins directement dans le contenu de votre page.
-
Ajustez les styles qui s’affichent à partir du volet contextuel à droite, comme l’arrière-plan, la couleur du texte, la bordure, la taille, la position, etc., en fonction du composant sélectionné.
Ajouter une personnalisation
Pour ajouter de la personnalisation, sélectionnez un conteneur et l’icône de personnalisation dans la barre du menu contextuel qui s’affiche. Apportez vos modifications à l’aide de l’éditeur de personnalisation. En savoir plus
Naviguer dans le concepteur web navigate-web-designer
Cette section décrit les différentes manières de naviguer dans le concepteur web. Pour afficher et gérer les modifications ajoutées à votre expérience web, consultez cette section.
Utiliser des chemins de navigation breadcrumbs
-
Sélectionnez un élément dans la zone de travail.
-
Cliquez sur le bouton Développer/réduire le chemin de navigation dans le coin inférieur gauche de l’écran pour afficher rapidement les informations sur l’élément sélectionné.
-
Lorsque vous pointez sur le chemin de navigation, l’élément correspondant est mis en surbrillance dans l’éditeur.
-
Grâce à cela, vous pouvez facilement accéder à n’importe quel élément parent, frère ou enfant dans l’éditeur visuel.
Basculer vers le mode de navigation browse-mode
Vous pouvez passer du mode Conception par défaut au mode de Navigation à l’aide du bouton dédié.
Dans le mode de Navigation, vous pouvez accéder à la page exacte à partir de la configuration sélectionnée à personnaliser.
Il est particulièrement utile lorsque vous traitez des pages qui se trouvent derrière une authentification ou qui ne sont pas disponibles depuis le début à une certaine URL. Par exemple, vous serez en mesure de vous authentifier, d’accéder à la page de votre compte ou à la page de votre panier, puis de revenir au mode Conception pour effectuer les modifications sur la page souhaitée.
L’utilisation du mode Parcourir vous permet également de parcourir toutes les vues de votre site web lors de la création d’applications monopage. En savoir plus
Modifier la taille de l’appareil change-device-size
Vous pouvez définir la taille de l’appareil d’affichage du concepteur web sur une taille prédéfinie, telle que Tablette ou Paysage mobile, ou encore définir une taille personnalisée en entrant le nombre de pixels souhaité.
Vous pouvez également modifier la mise au point du zoom, de 25 % à 400 %.
La possibilité de modifier la taille de l’appareil est conçue pour les sites réactifs qui s’affichent correctement sur divers appareils, fenêtres et tailles d’écran. Les sites réactifs s’ajustent et s’adaptent automatiquement à n’importe quelle taille d’écran, y compris les ordinateurs de bureau, les ordinateurs portables, les tablettes ou les téléphones portables.
Vidéo pratique video
La vidéo ci-dessous montre comment créer une expérience web à l’aide du concepteur web dans les campagnes de 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.