Structure : Création du composant de page de texte promotionnel

Cet organigramme explique comment créer le composant de page de texte promotionnel de la conception à partir d'un prototype HTML. Le composant de page de texte promotionnel permet de décrire brièvement un élément de votre site.

Qui doit utiliser cette feuille de route ?

Vous êtes un développeur de l'équipe technique chargée de créer des modèles de page d'accueil et de page d'arrivée que les créateurs de contenu utiliseront sur le site. Vous êtes uniquement chargé de créer les composants de page et les modèles de conception. Les autres développeurs sont chargés de développer d'autres éléments de la conception. Apprenez les bases de la création du composant de page de texte promotionnel. Le composant de texte promotionnel est utilisé pour de courts récapitulatifs relatifs à un document Web.

Création d'un composant de page de texte promotionnel

Avant de commencer

Ensure that your design library exists, for example, Greenwheels Design. Si cette bibliothèque n'existe pas, accédez à Création d'une bibliothèque de conception

Procédure

  1. Click the Applications menu icon. Then, click Content > Web Content Authoring.
  2. Accédez à votre bibliothèque de conception
  3. Click Generate > Page Component.
    1. Sélectionnez Annonce comme type de modèle.
    2. Entrez un nom de composant de page pour votre annonce.
      Par exemple, tapez Texte promotionnel.
    3. Assurez-vous que votre bibliothèque de conception est sélectionnée.
    4. Cliquez sur OK.
  4. Cliquez sur le lien suivant dans la boîte de dialogue Information afin de personnaliser le composant de page :
    your_design_library > Modèles de création > your_page_component. Par exemple, cliquez sur Greenwheels Design > Modèles de création > Texte promotionnel.
    Remarque : Si vous fermez la boîte de dialogue Information, vous pouvez suivre le chemin dans votre bibliothèque de conception.
  5. Cliquez sur Editer.
  6. Click Manage Elements.
  7. Supprimez tous les éléments par défaut répertoriés avant de créer un élément personnalisé pour le composant de page.
  8. Créez un élément de texte :
    1. Sélectionnez Texte comme type d'élément.
    2. Entrez un nom pour votre élément.
      Par exemple, tapez texte_promotionnel.
    3. Cliquez sur Ajouter.
    4. Cliquez sur OK.
    5. Cliquez sur le menu déroulant du bouton Enregistrer et fermer. Ensuite, sélectionnez Sauvegarder et lire.
  9. Cliquez sur Appliquer le modèle de création pour mettre à jour le contenu associé à ce modèle de création.
  10. Cochez les cases Ajouter de nouveaux éléments et Retirer des éléments existants.
  11. Cliquez sur OK.
  12. Cliquez sur Fermer pour fermer le modèle de création.
  13. Cliquez sur le lien suivant pour personnaliser le composant de page :
    your_design_library > Modèles de présentation > your_page_component. Par exemple, cliquez sur Greenwheels Design > Modèles de présentation > Texte promotionnel.
  14. Cliquez sur Editer.
  15. Supprimez le marquage de modèle de présentation existant et remplacez-le par les informations suivantes : 
    <style>
.promotional-text {
text-align: center;
margin: 10px;
font-style: italic;
font-weight: 800;
font-size: 1.5rem;
line-height: 1.2;
}
</style>
<div class="promotional-text">
[EditableElement:promotional_text placeholder="Enter promotional text"]
</div>

    Si vous disposez déjà d'un style CSS défini dans votre thème pour le texte promotionnel, vous pouvez utiliser ce style CSS au lieu de définir les styles ici. Placer les styles dans le thème présente l'avantage de les envoyer une seule fois au navigateur, ce qui permet d'améliorer les performances du site. Lorsque le style est ajouté au modèle de présentation, il est envoyé au navigateur pour chaque composant de page de texte promotionnel présent sur la page.

  16. Cliquez sur Enregistrer et fermer.
  17. Si vous ne prévoyez pas de traduire votre texte promotionnel, supprimez le composant de page de localisation :
    your_design_library > Localisations > your_page_component. Par exemple, cliquez sur Greenwheels Design > Localisations > Texte promotionnel.

    Si vous prévoyez de traduire votre texte promotionnel, vous pouvez ajouter les traductions au composant de page.

  18. Dans cet exemple Greenwheels, vous pouvez supprimer le composant de page de styles :
    your_design_library > Composants > your_page_component > Styles. Par exemple, cliquez sur Greenwheels Design > Composants > Texte promotionnel > Styles.
  19. Cliquez sur Enregistrer et fermer.
  20. Cliquez sur Fermer.

Résultats

Le créateur de contenu peut à présent ajouter le composant de page de texte promotionnel à la page d'accueil. Il peut ensuite entrer le texte promotionnel.