Les blocs de contenu permettent l'utilisation des balises SG. Les balises SG sont des balises HTML spécifiques à Selligent, qui permettent de configurer la mise en page et le contenu par le biais d'un panneau de propriétés et de rendre le contenu dépendant de la langue.
Lorsque vous ajoutez des balises SG à un bloc de contenu puis utilisez celui-ci dans un message :
- Vous pouvez configurer les balises SG directement dans le message, même si leurs attributs sont omis. Par exemple, si vous ajoutez la balise sg:img sans attributs dans le bloc de contenu, tous les attributs peuvent être définis dans le message lui-même.
- Le même bloc de contenu peut être réutilisé plusieurs fois, avec des valeurs différentes pour chaque balise SG.
- Chaque instance du bloc de contenu peut afficher un contenu différent.
Cette approche est couramment utilisée pour créer du contenu multilingue ou configurable.
Remarque importante: Lorsque vous utilisez des balises SG dans un bloc de contenu, vous devez définir tous les attributs dans le bloc de contenu ou les omettre tous. Cela signifie que la balise SG est soit entièrement définie dans le bloc de contenu, soit, si des attributs sont omis, entièrement définie dans le message.
Balises SG prises en charge dans les blocs de contenu
Vous pouvez ajouter les balises SG suivantes à un bloc de contenu :
<sg:content id="" />
<sg:button id="" />
<sg:image id="" />
<sg:text id="" />
<sg:barcode id="" />
<sg:video id="" />
<sg:conditional id="">
<sg:head id="">
<sg:lang id="">
<sg:option id="">
<sg:spacer id="">
<sg:var id="">
Comment les balises SG s'affichent-elles dans les messages ?
Lorsqu'un bloc de contenu contenant des balises SG est utilisé dans un message :
- Toutes les balises SG s'affichent dans le panneau des propriétés.
- Un aperçu de chaque balise SG s'affiche.
- Si la balise SG contient déjà du contenu, celui-ci s'affiche dans l'aperçu.
- Si aucun contenu n'est défini, une icône portant le nom du composant SG s'affiche.
Cela vous permet de configurer chaque balise SG sans modifier le bloc de contenu lui-même.
Utiliser la balise SG:head
En plus des balises énumérées ci-dessus, vous pouvez ajouter la balise suivante :
<sg:head id="" />Une balise <sg:head> place son contenu dans la section <head> du message où le bloc de contenu est utilisé. Cette balise est généralement utilisée pour définir :
- Les éléments <style>
- Les éléments <script>
La balise <sg:head> se comporte différemment des autres balises SG :
- Toutes les balises <sg:head> sont rendues au bas de la section <head>.
- Si plusieurs balises <sg:head> existent dans un ou plusieurs blocs de contenu, elles sont rendues de manière séquentielle.
- L'ordre des blocs de contenu dans le message détermine leur affichage.
Exemple d'utilisation de <sg:head> :
Prenons l'exemple d'un message qui comprend trois blocs de contenu :
- CB_style_h1_and_h2_tags contient une balise sg:head avec un style pour les en-têtes h1 et h2.
- CB_div_with_styling_applied contient une div avec id="heading" et des éléments h1 et h2 comme éléments enfants, et un style spécifique pour ces balises h1 et h2 dans la balise parent heading id.
- CB_background_CSS contient une balise sg:head avec un style pour l'arrière-plan de l'ensemble du message.
Le message comprend également un composant Texte dont le contenu est stylisé comme suit :
- un titre h1
- un titre h2
- texte du paragraphe
Dans le message (dans le chapitre Contenu de Selligent), les trois blocs de contenu sont ajoutés.
Lors de la prévisualisation du message, les styles sg:head appliqués deviennent visibles :
- La couleur de fond rose pour h1 et la bordure rouge pointillée pour h2 sont visibles pour tous les en-têtes h1 et h2, à l'extérieur et à l'intérieur de la div avec id="heading" (le style sg:head provient du premier bloc de contenu CB_style_h1_and_h2_tags).
- Les en-têtes h1 et h2 à l'intérieur de la div avec id="heading" ont un style supplémentaire appliqué, comme le style de police, l'ombre de texte et le remplissage (le style sg:head provient du deuxième bloc de contenu CB_div_with_styling_applied).
- L'ensemble du message a une couleur de fond beige (style sg:head provenant du troisième bloc de contenu CB_background_CSS).
Définir les attributs des balises SG
Pour certaines balises SG, vous pouvez définir le style et le comportement à l'aide d'attributs.
Les attributs suivants sont pris en charge pour les balises SG suivantes :
-
sg:image
- id : ne peut pas être vide ni contenir d’espaces
- src : source de l'image
- href : lien vers l'image
- alt : texte alternatif
- style : options de style, comme la largeur
-
sg:button
- id : ne peut pas être vide ni contenir d’espaces
- href : lien vers le bouton
- text : texte du bouton
- style : options de style, comme la largeur
-
sg:content
- id : ne peut pas être vide ni contenir d’espaces
- style : options de style, comme la largeur
-
sg:video
- id : ne peut pas être vide ni contenir d’espaces
- poster : image affichée pendant le chargement de la vidéo ou avant la lecture
- src : source de la vidéo
- href : lien vers la vidéo
- img : image de secours
- style : options de style, comme la largeur
-
sg:spacer
- id : ne peut pas être vide ni contenir d’espaces
- style : options de style, comme la largeur
-
sg:barcode
- id : ne peut pas être vide ni contenir d’espaces
- barcodetype : type de code-barres (Ean-13, Code39, Code128 ou QR)
- value : valeur codée
- Peut inclure une personnalisation, par exemple, https://discount.shop/basket.asp?visitor=[% MASTER.ID %]
- alt : texte affiché si le code-barres ne peut pas s'afficher
- orientation : orientation du code-barres (Normal, Rotation de 90° à gauche, Rotation de 90° à droite, Rotation de 180°)
- fontsize : taille de la police en pixels
- width : largeur du code-barres en pixels
- height : hauteur du code-barres en pixels
- borderwidth : largeur de bordure en pixels
- version : version du code QR (1–40)
- errorcorrectionlevel : niveau de correction des erreurs du code QR
- style : alignement (gauche, droite, centre)
Remarque : lorsque vous définissez un attribut directement sur un composant SG dans un bloc de contenu, cet attribut devient en lecture seule lorsque le bloc de contenu est utilisé dans un message. Also, either all attributes are set in the SG component or none.
Les modifications apportées aux options de style d'un bloc de contenu s'appliquent automatiquement à tous les messages qui l'utilisent.
