Mises en page du menu de navigation

Dans ce chapitre, vous apprendrez comment :

notre service client creé pour vous des mises en page HTML alternatives
sélectionner des mises en page alternatives dans le paragraphe du menu de navigation
éditer des mises en page alternatives avec des connaissances approfondies du HTML, du CSS et de Velocity

Pour obtenir jusqu’à 5 mises en page alternatives, contactez le service client d’Episerver, qui se fera un plaisir de les configurer pour vous.

Remarque: Si vous souhaitez enregistrer vos propres mises en page HTML, n’oubliez pas de configurer les mises en page alternatives correspondantes pour les versions mobile et les versions texte. Si aucune mise en page alternative n’est enregistrée pour les versions mobile et texte, la mise en page par défaut est automatiquement utilisée.

Sélectionner la mise en page

Pour sélectionner la mise en page par défaut ou l’une des 5 mises en page alternatives, suivez les étapes suivantes :

Lorsque vous éditez un mailing dans le Template Kit, dans l'aperçu à gauche, dans la barre de menu du menu de navigation, cliquez sur Menu de navigation.

—Image—

La fenêtre de configuration s’affiche sur la droite.
Basculez dans l’onglet Options.
—Image—
3. Dans la section Identité visuelle, que vous trouverez dans la liste déroulante Identité visuelle, sélectionnez la mise en page que vous souhaitez appliquer.
—Image—
4. Cliquez sur Appliquer.
Vous avez appliqué la mise en page sélectionnée avec succès. À gauche, dans la fenêtre d’aperçu, la mise en page de votre menu de navigation est modifiée en conséquence.

Éditer la mise en page

Vous pouvez éditer vos mises en page alternatives ultérieurement. La mise en page par défaut ne peut pas être modifiée.

Attention: Si vous souhaitez éditer vos mises en page alternatives ultérieurement, vous devez avoir des connaissances approfondies du HTML, du CSS et de Velocity. Si vous n’avez pas de connaissances approfondies en HTML, en CSS et avec Velocity, veuillez contacter le service client d’Episerver, qui se fera un plaisir d’effectuer pour vous les modifications souhaitées. Si vous éditez les mises en page alternatives sans connaissances approfondies, des erreurs d’affichage conséquentes peuvent apparaître dans vos mailings.

Pour éditer vos mises en page alternatives, procédez comme suit :

Cliquez sur Paramètres dans l’aperçu à gauche.
—Image—
La fenêtre de configuration s’affiche sur la droite.
Basculez dans l’onglet Menu de navigation.
—Image—
Pour chaque mise en page, des champs de texte source sont disponibles pour la version de bureau, la version mobile et la version texte.
Éditez le code source de la mise en page correspondante selon vos souhaits. Dans Insérer du contenu vous est expliqué comment récupérer et positionner les différents contenus.

Remarque: N’oubliez pas de configurer les mises en page alternatives correspondantes pour les versions mobile et les versions texte. Si aucune mise en page alternative n’est enregistrée pour les versions mobile et texte, la mise en page par défaut est automatiquement utilisée.
4. Cliquez sur Appliquer.

Vous avez édité votre mise en page avec succès. À gauche, dans la fenêtre d’aperçu, la mise en page de votre menu de navigation est modifiée en conséquence.

Insérer du contenu

Accédez aux contenus du menu de navigation avec des variables Velocity et procédez à la mise en forme du contenu transféré avec des instructions de style HTML.

Les variables Velocity suivantes sont disponibles :

variables de statut - informations relatives au menu de navigation
variables de présence - pour l’utilisation de requêtes vérifiant la présence d’un élément
variables de valeur - pour l’extraction du contenu

Remarques sur la création de nouvelles mises en page

Définition des polices : lors de l’utilisation d’une variante de mise en page, toutes les définitions de polices doivent être disponibles dans le code HTML saisi. Les textes ne sont pas mis en forme par le Template Kit, afin que vous ayez toute liberté quant à la conception visuelle.
Largeur : indiquez une largeur fixe ou une largeur en pourcentage. Nous vous recommandons de saisir un pourcentage, afin d’éviter que des éléments ne dépassent de la mise en page.
Risque d’erreurs d’affichage : notez que vous devez avoir une bonne connaissance du HTML, car le code HTML que vous entrez n’est pas validé par Episerver Campaign. Si vous entrez un code HTML erroné, d’importants problèmes de mise en page peuvent apparaître.

Variables de statut

Variable	Type	Description
$separatorDesktopEnabled	booléen	Contient `true`, si, dans l'onglet Lignes de séparation dans la section Contenu, la case Afficher les lignes de séparation en version ordinateur de bureau est cochée, sinon `false`.
$separatorDisplayVerticalInMobileVersion	booléen	Contient `true`, si, dans l'onglet Lignes de séparation dans la section Contenu, la case Afficher les lignes de séparation verticales en version mobile est cochée, sinon `false`.
$separatorDisplayHorizontalInMobileVersion	booléen	Contient `true`, si, dans l'onglet Lignes de séparation dans la section Contenu, la case Afficher les lignes de séparation horizontales en version mobile est cochée, sinon `false`.
$hamburgerMenuEnabled	booléen	Contient `true`, si, dans l'onglet Menu "Hamburger" dans la section Général, la case Afficher est cochée, sinon `false`.
$hamburgerMenuIconRounded	booléen	Contient `true`, si, dans l'onglet Menu "Hamburger" dans la section Symbole, la case Arrondir les contours est cochée, sinon `false`.
$navigationItemsAmountValue	entier	Contient le nombre de points de menu qui s'affichent. Les points de menu ne sont affichés que si un lien et soit le texte soit l'image ont été spécifiés.
$navCurrentParagraphId	entier	Contient l'ID du paragraphe correspondant du menu de navigation. Cet ID est particulièrement important pour la version mobile, car les classes de style CSS utilisent cet ID comme suffixe dans le nom.

Variables de présence

Variable	Typ	Beschreibung
$item1TextPresent – $item10TextPresent	booléen	Contient `true`, si, dans la section Point de menu #, il existe du contenu pour le champ Texte, sinon `false`.
$item1LinkUrlPresent – $item10LinkUrlPresent	booléen	Contient `true`, si, dans la section Point de menu #, il existe du contenu pour le champ URL, sinon `false`.
$item1ImageUrlPresent – $item10ImageUrlPresent	booléen	Contient `true`, si, dans la section Point de menu #, il existe du contenu pour le champ Image, sinon `false`.
$item1ColorPresent – $item10ColorPresent	booléen	Contient `true`, si, dans la section Point de menu #, il existe du contenu pour le champ Couleur du texte, sinon `false`.
$item1BackgroundColorPresent – $item1BackgroundColorPresen	booléen	Contient `true`, si, dans la section Point de menu #, il existe du contenu pour le champ Couleur de fond, sinon `false`.
$navigationLinkColorPresent	booléen	Contient `true`, si, dans les paramètres généraux sous Paramètres de police > Points de menu dans le menu de navigation, il existe du contenu pour le champ Couleur, sinon `false`.
$separatorLayoutThicknessPresent	booléen	Contient `true`, si, sous l'onglet Lignes de séparation dans la section Identité visuelle, il existe du contenu pour le champ Épaisseur, sinon `false`.
$separatorLayoutColorPresent	booléen	Contient `true`, si, sous l'onglet Lignes de séparation dans la section Apparence visuelle, il existe du contenu pour le champ Couleur, sinon `false`.
$hamburgerMenuMenuBarHeadlinePresent	booléen	Contient `true`, si, sous l'onglet Menu "Hamburger" dans la section Barre de menu, il existe du contenu pour le champ Légende, sinon `false`.
$hamburgerMenuMenuBarPaddingPresent	booléen	Contient `true`, si, sous l'onglet Menu "Hamburger" dans la section Barre de menu, il existe du contenu pour le champ Marge intérieure, sinon `false`.
$hamburgerMenuMenuBarBackgroundColorPresent	booléen	Contient `true`, si, sous l'onglet Menu "Hamburger" dans la section Barre de menu, il existe du contenu pour le champ Couleur de fond, sinon `false`.
$hamburgerMenuMenuBarImagePresent	booléen	Contient `true`, si, sous l'onglet Menu "Hamburger" dans la section Image, il existe du contenu pour le champ Image, sinon `false`.
$hamburgerMenuMenuBarImageAltTextPresent	booléen	Contient `true`, si, sous l'onglet Menu "Hamburger" dans la section Image, il existe du contenu pour le champ Texte alternatif, sinon `false`.
$hamburgerMenuMenuBarImageLinkPresent	booléen	Contient `true`, si, sous l'onglet Menu "Hamburger" dans la section Image, il existe du contenu pour le champ Lien, sinon `false`.
$hamburgerMenuIconColorPresent	booléen	Contient `true`, si, sous l'onglet Menu "Hamburger" dans la section Symbole, il existe du contenu pour le champ Couleur, sinon `false`.
$hamburgerMenuIconBackgroundColorPresent	booléen	Contient `true`, si, sous l'onglet Menu "Hamburger" dans la section Symbole, il existe du contenu pour le champ Couleur de fond, sinon `false`.
$navigationBackgroundImageUrlPresent	booléen	Contient `true`, si, sous l'onglet Options dans la section Images de fond, il existe du contenu pour le champ URL, sinon `false`.
$navigationItemDesktopBackgroundColorPresent	booléen	Contient `true`, si, sous l'onglet Options dans la section Points de menu, il existe du contenu pour le champ Couleur de fond, sinon `false`.
$navigationItemDesktopWidthPresent	booléen	Contient `true`, si, sous l'onglet Options dans la section Points de menu, il existe du contenu pour le champ Couleur de fond, sinon `false`.
$navigationItemDesktopPaddingPresent	booléen	Contient `true`, si, sous l'onglet Options dans la section Points de menu, il existe du contenu pour le champ Marge intérieure, sinon `false`.
$navigationItemMobileWidthPresent	booléen	Contient `true`, si, sous l'onglet Options dans la section Points de menu (version mobile), il existe du contenu pour le champ Largeur, sinon `false`.
$item1DisplayInMobileVersion – $item10DisplayInMobileVersion	booléen	Contient `true`, si, sous l'onglet Général dans la section Point de menu #, la case Afficher en version mobile est cochée, sinon `false`.

Variables de valeur

Variable	Type	Environnement	Description
$item1TextValue – $item10TextValue	chaîne de caractères	Ordinateur de bureau, terminaux mobiles, texte	Contient le contenu non formaté du champ Texte de la section Point de menu #.
$item1TextFormattedValue – $item10TextFormattedValue	chaîne de caractères	Ordinateur de bureau, terminaux mobiles	Contient le contenu formaté du champ Texte de la section Point de menu #. Le texte est formaté automatiquement à l'aide des paramètres de police dans les paramètres généraux et de la couleur de texte dans le point de menu.
$item1LinkUrlValue – $item10LinkUrlValue	chaîne de caractères	Ordinateur de bureau, terminaux mobiles, texte	Contient le contenu du champ URL de la section Point de menu #.
$item1LinkFormattedValue – $item10LinkFormattedValue	chaîne de caractères	Ordinateur de bureau, terminaux mobiles	Contient le contenu formaté du champ URL de la section Point de menu #. Le texte est formaté automatiquement à l'aide des paramètres de police dans les paramètres généraux et de la couleur de texte dans le point de menu. Remarque: Si vous avez chargé une image pour le point de menu et que vous l'avez positionnée à droite ou à gauche du texte, le lien apparaîtra avec le texte et l'image.
$item1ImageUrlValue – $item10ImageUrlValue	chaîne de caractères	Ordinateur de bureau, terminaux mobiles, texte	Contient le contenu du champ Image de la section Point de menu #.
$item1ColorValue – $item10ColorValue	chaîne de caractères	Ordinateur de bureau, terminaux mobiles	Contient le contenu du champ Couleur du texte de la section Point de menu #.
$item1BackgroundColorValue – $item10BackgroundColorValue	chaîne de caractères	Ordinateur de bureau, terminaux mobiles	Contient le contenu du champ Couleur de fond de la section Point de menu #.
$navigationLinkColorValue	chaîne de caractères	Ordinateur de bureau, terminaux mobiles	Contient le contenu du champ Couleur des paramètres généraux > onglet Paramètres de police > section Points de menu dans le menu de navigation.
$separatorLayoutThicknessValue	chaîne de caractères	Ordinateur de bureau, terminaux mobiles	Contient le contenu du champ Épaisseur de l’onglet Lignes de séparation > section Identité visuelle.
$separatorLayoutColorValue	chaîne de caractères	Ordinateur de bureau, terminaux mobiles	Contient le contenu du champ Couleur de l’onglet Lignes de séparation > section Identité visuelle.
$hamburgerMenuMenuBarHeadlineValue	chaîne de caractères	Mobile	Contient le contenu non formaté du champ Légende de l’onglet Menu "Hamburger" > section Barre de menu.
$hamburgerMenuMenuBarHeadlineFormattedValue	chaîne de caractères	Mobile	Contient le contenu formaté du champ Légende de l’onglet Menu "Hamburger" > section Barre de menu.
$hamburgerMenuMenuBarPaddingValue	chaîne de caractères	Mobile	Contient le contenu du champ Marge intérieure de l’onglet Menu "Hamburger" > section Barre de menu.
$hamburgerMenuMenuBarBackgroundColorValue	chaîne de caractères	Mobile	Contient le contenu du champ Couleur de fond de l’onglet Menu "Hamburger" > section Barre de menu.
$hamburgerMenuIconPositionValue	chaîne de caractères	Mobile	Contient le contenu du champ Position de l’onglet Menu "Hamburger" > section Symbole.
$hamburgerMenuIconColorValue	chaîne de caractères	Mobile	Contient le contenu du champ Couleur de l’onglet Menu "Hamburger" > section Symbole.
$hamburgerMenuIconBackgroundColorValue	chaîne de caractères	Mobile	Contient le contenu du champ Couleur de fond de l’onglet Menu "Hamburger" > section Symbole.
$hamburgerMenuMenuBarImageUrlValue	chaîne de caractères	Mobile	Contient le contenu du champ Image de l’onglet Menu "Hamburger" > section Image.
$hamburgerMenuMenuBarImageAltTextValue	chaîne de caractères	Mobile	Contient le contenu du champ Texte alternatif de l’onglet Menu "Hamburger" > section Image.
$hamburgerMenuMenuBarImageLinkValue	chaîne de caractères	Mobile	Contient le contenu du champ Lien de l’onglet Menu "Hamburger" > section Image.
$navigationAlignmentValue	chaîne de caractères	Ordinateur de bureau, terminaux mobiles	Contient le contenu du champ Alignement de l’onglet Options > section Identité visuelle.
$navigationBackgroundImageUrlValue	chaîne de caractères	Ordinateur de bureau, terminaux mobiles	Contient le contenu du champ Image de l’onglet Options > section Image de fond.
$navigationBackgroundImageAlignmentValue	chaîne de caractères	Ordinateur de bureau, terminaux mobiles	Contient le contenu du champ Alignement de l’onglet Options > section Image de fond.
$navigationBackgroundImageRepeatValue	chaîne de caractères	Ordinateur de bureau, terminaux mobiles	Contient le contenu du champ Répétition de l’onglet Options > section Image de fond.
$navigationItemDesktopBackgroundColorValue	chaîne de caractères	Ordinateur de bureau, terminaux mobiles	Contient le contenu du champ Couleur de fond de l’onglet Options > section Points de menu.
$navigationItemDesktopWidthValue	chaîne de caractères	Ordinateur de bureau, terminaux mobiles	Contient le contenu du champ Largeur de l’onglet Options > section Points de menu.
$navigationItemDesktopPaddingValue	chaîne de caractères	Ordinateur de bureau, terminaux mobiles	Contient le contenu du champ Marge intérieure de l’onglet Options > section Points de menu.
$navigationItemDesktopAlignmentValue	chaîne de caractères	Ordinateur de bureau, terminaux mobiles	Contient le contenu du champ Alignement du texte de l’onglet Options > section Points de menu.
$navigationItemDesktopVerticalAlignmentValue	chaîne de caractères	Ordinateur de bureau, terminaux mobiles	Contient le contenu du champ Position du texte (à côté de l'image) de l’onglet Options > section Points de menu.
$navigationItemImageBehaviorValue	chaîne de caractères	Ordinateur de bureau, terminaux mobiles	Contient le contenu du champ Position de l’image de l’onglet Options > section Points de menu.
$navigationItemMobileWidthValue	chaîne de caractères	Mobile	Contient le contenu du champ Largeur de l’onglet Options > section Points de menu (version mobile).
$navigationItemMobileAlignmentValue	strichaîne de caractèresng	Mobile	Contient le contenu du champ Alignement du texte de l’onglet Options > section Points de menu (version mobile).
$navigationItemMobileVerticalAlignmentValue	chaîne de caractères	Mobile	Contient le contenu du champ Position du texte (à côté de l'image) de l’onglet Options > section Points de menu (version mobile).