[{"data":1,"prerenderedAt":165},["ShallowReactive",2],{"ls-connection":3,"support-article-design-visuel-et-medias":5},{"connected":4},false,{"article":6,"related":34,"neighbors":114,"alternates":159},{"feature":7,"category":8,"locale":9,"slug":10,"title":11,"lede":12,"purpose":13,"steps":15,"notes":28,"generatedFrom":32,"updated":33},"cover-media","design","fr","visuel-et-medias","Choisir une image de couverture et la recadrer","Ajoutez une couverture depuis votre bibliothèque ou les photos libres Pexels, puis réglez son point focal.",[14],"La couverture est l'image pleine largeur en haut de la page. C'est aussi elle qui sert d'aperçu lors du partage sur les réseaux sociaux. Vous la choisissez dans votre bibliothèque ou parmi les médias libres de Pexels, et vous décidez quelle partie de l'image reste visible une fois recadrée.",[16,19,22,25],{"text":17,"image":18},"À l'étape 3 · Design, cliquez sur l'en-tête (ou une section Couverture) dans l'aperçu : son panneau de réglages s'ouvre à droite.","\u002Fsupport\u002Fcover-media\u002Ffr\u002Fstep-1.webp",{"text":20,"image":21},"Sous « Couverture », restez sur l'onglet « Bibliothèque » pour choisir un média déjà enregistré, ou utilisez la tuile « + » pour en importer un nouveau.","\u002Fsupport\u002Fcover-media\u002Ffr\u002Fstep-2.webp",{"text":23,"image":24},"Passez sur l'onglet « Stock » pour rechercher des photos et vidéos libres de Pexels : filtrez par type de média, orientation et couleur, puis cliquez sur un résultat pour l'appliquer.","\u002Fsupport\u002Fcover-media\u002Ffr\u002Fstep-3.webp",{"text":26,"image":27},"Une fois une couverture choisie, utilisez « Position de la couverture » juste en dessous : faites glisser le repère vers le haut ou le bas pour choisir le cadrage, ou cliquez sur « Recentrer ». Vous pouvez aussi faire glisser le repère directement sur la couverture dans l'aperçu.","\u002Fsupport\u002Fcover-media\u002Ffr\u002Fstep-4.webp",[29,30,31],"La couverture sert aussi d'image de partage (aperçu sur les réseaux et moteurs de recherche), préférez une image nette et bien cadrée.","Le recadrage est vertical uniquement : la couverture est une bande large, le repère règle donc la hauteur visible (l'horizontale reste centrée).","Les médias Pexels sont ré-hébergés automatiquement et crédités à Pexels ; une couverture vidéo s'anime en boucle, sans son.","SectionPropertyEditor.vue · MediaSourcePicker.vue · StockMediaPicker.vue · CoverPositionPicker.vue \u002F CoverRepositionGrip.vue · i18n stockPhotos.* \u002F wizard.editor.coverPosition*","9 septembre 2026",[35,54,73],{"feature":36,"category":8,"locale":9,"slug":37,"title":38,"lede":39,"purpose":40,"steps":42,"notes":50,"updated":33},"design-chooser","choisir-un-design","Choisir un design de départ","Partez d'un template, d'une page vierge ou laissez l'IA créer le design.",[41],"L'étape Design vous laisse choisir votre point de départ. Le contenu et les champs de l'événement importé sont appliqués automatiquement quel que soit le choix, seul le design change.",[43,46],{"text":44,"image":45},"À l'étape 3 · Design, cliquez sur « Changer de design » en bas de l'éditeur pour rouvrir le sélecteur de point de départ.","\u002Fsupport\u002Fdesign-chooser\u002Ffr\u002Fstep-1.webp",{"text":47,"image":48,"caption":49},"Choisissez parmi quatre options : un template (un Starter ou vos propres modèles), une page vierge à construire section par section, ou une génération par IA, en sections éditables, ou en design pleine page.","\u002Fsupport\u002Fdesign-chooser\u002Ffr\u002Fstep-2.webp","« IA, design complet » produit une page non modifiable par section ; « IA, sections éditables » reste ajustable.",[51,52,53],"Vous pouvez changer de design à tout moment tant que la page n'est pas publiée. Le contenu importé est reporté.","L'option « Utiliser un template » est détaillée dans le guide « Utiliser un modèle ».","La génération par IA nécessite que la fonctionnalité soit activée sur votre espace.",{"feature":55,"category":8,"locale":9,"slug":56,"title":57,"lede":58,"purpose":59,"steps":61,"notes":68,"updated":33},"design-sections","sections","Ajouter et réorganiser les sections","Composez la page bloc par bloc : ajoutez, réordonnez et retirez des sections.",[60],"Une page d'inscription est une pile de sections (en-tête, formulaire, texte, médias…). Le panneau de droite de l'étape Design vous laisse en ajouter, les réordonner par glisser-déposer, et les retirer, sauf le formulaire d'inscription, obligatoire.",[62,65],{"text":63,"image":64},"À l'étape 3 · Design, le panneau de droite liste les sections de la page. Le formulaire d'inscription est marqué « Obligatoire » et ne peut pas être supprimé.","\u002Fsupport\u002Fdesign-sections\u002Ffr\u002Fstep-1.webp",{"text":66,"image":67},"Cliquez sur « Ajouter une section » pour insérer un nouveau bloc, puis réorganisez les sections par glisser-déposer dans ce panneau.","\u002Fsupport\u002Fdesign-sections\u002Ffr\u002Fstep-2.webp",[69,70,71,72],"L'ordre du panneau est l'ordre d'affichage de la page publiée.","Chaque section s'édite en cliquant dessus dans l'aperçu, titres, textes et médias en place.","Le formulaire d'inscription reste toujours présent : c'est le cœur d'une page d'inscription.","Deux sections peuvent partager une même ligne au lieu de s'empiler. Voir « Placer deux sections côte à côte ».",{"feature":74,"category":8,"locale":9,"slug":75,"title":76,"lede":77,"purpose":78,"steps":82,"notes":105,"generatedFrom":112,"updated":113},"page-columns","lignes-a-deux-colonnes","Placer deux sections côte à côte","Réunissez deux sections sur une ligne à deux colonnes, en les glissant dans un bloc de la liste des sections, et placez autant de sections que nécessaire dans une même colonne.",[79,80,81],"Une page est une pile de sections, une par ligne. Une ligne à deux colonnes en place deux côte à côte (une vidéo à côté d'une citation, un teaser à côté du formulaire d'inscription) pour qu'une page longue se lise plus court sans rien perdre.","La ligne se partage en 50\u002F50, ou en 60\u002F40 et 40\u002F60 quand un côté a besoin de plus de place, et les deux colonnes s'empilent à nouveau sur écran étroit. Il n'y a rien à concevoir deux fois.","Une colonne ne se limite pas à une section : empilez-en plusieurs dans la même moitié de ligne, par exemple deux blocs de texte, ou un titre au-dessus d'une vidéo.",[83,87,89,91,93,95,97,100,103],{"text":84,"image":85,"caption":86},"À l'étape 3 · Design, regardez la liste des sections à droite. Cliquez sur « Deux colonnes », à côté de « Ajouter une section », pour ouvrir un bloc vide avec deux emplacements.","\u002Fsupport\u002Fpage-columns\u002Ffr\u002Fstep-1.webp","Ici, Média et le formulaire d’inscription partagent déjà une ligne.",{"text":88},"Glissez une section de la liste dans un emplacement. Le bloc se déplace jusqu'à la première section que vous y déposez : l'ordre de votre page ne change pas, seule la mise en page évolue.",{"text":90},"Remplissez le second emplacement de la même façon : en glissant une autre section, avec « Nouvelle » pour en créer une, ou avec « Déplacer ici » pour y amener une section déjà présente (ce menu existe pour les cas où le glisser-déposer n'est pas possible).",{"text":92},"Raccourci : déposez une section directement au milieu d'une autre ligne de la liste, et les deux partagent cette ligne sans passer par un bloc.",{"text":94},"Pour placer plusieurs sections dans la même colonne, utilisez la ligne « Ajouter en dessous » en bas de cette colonne : « Nouvelle » y crée une section, « Déplacer ici » y amène une section déjà présente. Glisser une section au milieu d'une ligne d'un bloc complet produit le même résultat.",{"text":96},"Pour déplacer toute la ligne, glissez le bloc par la poignée de son en-tête : les deux colonnes voyagent ensemble. Glisser la section en haut de la colonne de gauche fait de même, puisqu'elle emmène la ligne avec elle.",{"text":98,"image":99},"L'en-tête propose aussi deux actions : intervertir les deux colonnes, ou séparer la ligne en sections pleine largeur. Pour ne sortir qu'une section, glissez-la hors du bloc, dans un espace entre deux lignes : elle repasse en pleine largeur.","\u002Fsupport\u002Fpage-columns\u002Ffr\u002Fstep-2.webp",{"text":101,"image":102},"Quand une colonne est plus courte que l'autre, sélectionnez la section en haut de celle-ci et réglez « Alignement vertical », sous « Ligne », dans son panneau de réglages : Haut, Milieu (par défaut) ou Bas. Chaque colonne se règle indépendamment, et toute la colonne se déplace quel que soit le nombre de sections qu'elle contient : un teaser court peut ainsi démarrer en haut d'un long programme au lieu de flotter en son milieu.","\u002Fsupport\u002Fpage-columns\u002Ffr\u002Fstep-3.webp",{"text":104},"Pour donner plus de place à une colonne, sélectionnez n'importe quelle section de la ligne et choisissez « Largeur des colonnes », sous « Ligne » : 50\u002F50 (par défaut), 60\u002F40 ou 40\u002F60, en commençant par la colonne de gauche. Les bords de la ligne ne bougent pas, seule la répartition entre les deux colonnes change.",[106,107,108,109,110,111],"Toutes les sections peuvent devenir une colonne, couverture et formulaire compris. Savoir si le rendu tient sur une demi-ligne est votre décision : l'aperçu le montre en direct.","Une ligne accepte deux colonnes au maximum, mais chacune contient autant de sections que vous voulez. Dans une colonne, les flèches de déplacement du canevas réordonnent les sections entre elles.","La ligne forme une seule bande : le fond provient de la section en haut de la première colonne, aucune autre section de la ligne n'affiche donc le sien.","Un formulaire ou un CTA dont la mise en page est déjà scindée à gauche\u002Fdroite s'affiche centré tant qu'il est en colonne, deux découpages imbriqués n'apportent rien.","Sur écran étroit, les colonnes s'empilent, la gauche d'abord. C'est aussi dans cet ordre que les visiteurs sur téléphone et les moteurs de recherche les lisent.","L'alignement vertical ne s'applique que tant que la section est en colonne, et il disparaît dès que les colonnes s'empilent : sur téléphone chacune occupe toute la largeur, il n'y a donc plus rien à aligner.","SectionsPanel.vue (bloc deux colonnes, en-tête glisser \u002F intervertir \u002F séparer) · page-rows.ts (toRowColumns\u002FnormalizeRows) · SectionRowSplitField.vue (pairSplit) · SectionRowAlignField.vue (rowAlign) · i18n wizard.layers.* \u002F wizard.propEditor.row","2 octobre 2026",{"prev":115,"next":136},{"feature":116,"category":8,"locale":9,"slug":117,"title":118,"lede":119,"purpose":120,"steps":122,"notes":131,"generatedFrom":134,"updated":135},"full-preview","apercu-en-taille-reelle","Voir la page en taille réelle","Affichez la page sur tout l'écran, à la taille où les visiteurs la lisent, sans quitter l'étape Design.",[121],"Le canevas du Design partage l'écran avec le panneau des sections : il montre donc votre page plus étroite qu'une fois publiée. « Aperçu en taille réelle » ouvre la même page sur tout l'écran et la fait défiler de haut en bas, la façon la plus honnête de juger un design avant de passer à la suite.",[123,126,129],{"text":124,"image":125},"À l'étape 3 · Design, repérez le bouton « Aperçu en taille réelle » en haut du canevas, à droite du choix de l'appareil.","\u002Fsupport\u002Ffull-preview\u002Ffr\u002Fstep-1.webp",{"text":127,"image":128},"Cliquez dessus. La page occupe l'écran à sa largeur réelle et défile sur toute sa hauteur, exactement comme dans le navigateur d'un visiteur de cette taille.","\u002Fsupport\u002Ffull-preview\u002Ffr\u002Fstep-2.webp",{"text":130},"Fermez-la avec la croix en haut à droite, ou Échap. Vous revenez à l'étape Design, avec la même section sélectionnée.",[132,133],"L'aperçu montre la page, il ne la modifie pas : pour changer quelque chose, fermez-le et modifiez sur le canevas.","Pour un canevas plus large tout en continuant à modifier, le bouton juste avant, à côté du choix de l'appareil, replie le panneau des sections (« Masquer le panneau pour un aperçu pleine largeur »). Sélectionner une section sur le canevas le déplie à nouveau, et ce choix est mémorisé dans ce navigateur.","design\u002FCanvasFullPreview.vue · design\u002FSectionPanelToggle.vue · PageEditor.vue · i18n wizard.editor.fullPreview* \u002F wizard.editor.hidePanel","23 septembre 2026",{"feature":137,"category":8,"locale":9,"slug":138,"title":139,"lede":140,"purpose":141,"steps":143,"notes":153,"generatedFrom":158,"updated":135},"cover-ink","texte-et-logo-sur-la-couverture","Garder le texte et le logo lisibles sur une image de couverture","Choisissez si le texte et le logo posés sur votre photo de couverture s'affichent en clair ou en foncé.",[142],"Quand l'en-tête porte une image de couverture, son titre, ses textes et son logo se posent sur la photo. Leur couleur dépend de la superposition appliquée sur l'image, pas de la photo elle-même : une image lumineuse sous une superposition légère peut rendre un texte blanc illisible. « Texte et logo sur l'image » vous laisse décider.",[144,147,151],{"text":145,"image":146},"À l'étape 3 · Design, sélectionnez l'en-tête. Dès qu'il a une image de couverture, « Texte et logo sur l'image » apparaît sous les réglages de superposition, sur « Auto ».","\u002Fsupport\u002Fcover-ink\u002Ffr\u002Fstep-1.webp",{"text":148,"image":149,"caption":150},"Choisissez « Clair » pour un texte et un logo blancs, ou « Foncé » pour des foncés. Le canevas suit aussitôt.","\u002Fsupport\u002Fcover-ink\u002Ffr\u002Fstep-2.webp","« Foncé » passe le texte et le logo de l'en-tête en foncé sur cette photo.",{"text":152},"Revenez à « Auto » pour laisser la superposition décider.",[154,155,156,157],"Le réglage déplace le texte et le logo ensemble, pour qu'ils ne se contredisent jamais sur la même image : le logo de votre marque pour fond sombre avec un texte clair, l'autre avec un texte foncé.","Auto suit la superposition choisie : sur une superposition d'accent, le texte se lit sur votre couleur d'accent ; sur une superposition couleur d'arrière-plan, ou sans superposition, il suit la page.","Modifier la superposition (« Couleur de la superposition » et « Superposition ») suffit souvent : essayez avant d'imposer Clair ou Foncé.","Le réglage n'existe que tant que l'en-tête a une image de couverture ; sans image, l'en-tête se lit sur le fond de la page.","design\u002FHeroCoverFields.vue · SectionPropertyEditor.vue (couverture de l’en-tête) · i18n wizard.propEditor.fields.coverInk \u002F wizard.propEditor.hints.coverInk \u002F wizard.propEditor.opts.ink*",[160,162],{"hreflang":9,"path":161},"\u002Fsupport\u002Fdesign\u002Fvisuel-et-medias",{"hreflang":163,"path":164},"en","\u002Fsupport\u002Fdesign\u002Fcover-and-media",1792141116150]