Ajouter un élément de liens sociaux.

Apprendre DXPR BuilderCréer des pagesAjouter du contenuMarketing

Vous obtenez une rangée d’icônes de marques qui mènent vers vos profils de médias sociaux. Utilisez-la dans un pied de page, une barre latérale ou une section de contact pour que les visiteurs vous trouvent et vous suivent.

Élément de liens sociaux affichant des icônes LinkedIn, GitHub et Drupal en style cercle aux couleurs des marques

Ouvrez votre page une fois la session ouverte : les commandes du constructeur apparaissent au survol de la zone de contenu. Votre première page présente les bases.

  1. Survolez la colonne et cliquez sur + dans sa barre de contrôle, ou cliquez sur Ajouter des éléments sur une page vide. Ouvrez l’onglet Contenu et cliquez sur Liens sociaux. L’élément apparaît en haut de la colonne et sa boîte de dialogue de paramètres s’ouvre.
  2. Sous Social links, remplacez les deux lignes d’exemple par vos comptes. Cliquez sur Add link pour chaque compte supplémentaire. Commencez à saisir la marque, choisissez-la dans les suggestions et saisissez l’URL, par exemple https://github.com/dxpr.
  3. Choisissez un Style pour la forme des icônes. C’est le champ près du haut de la boîte de dialogue, pas le panneau Style plus bas. Ici, c’est Circle.
  4. Choisissez une Size pour les icônes. Ici, c’est 3x.
  5. Cliquez sur le titre Icon colors pour le déplier, et réglez Background color sur Brand color.
  6. Sous Color, choisissez une nuance dans la palette. La palette s’affiche parce que Color est réglé sur Custom par défaut. Ici, elle est presque blanche.
  7. Cliquez sur Enregistrer dans la boîte de dialogue, puis sur Enregistrer dans la barre d’outils en haut de la zone de contenu pour stocker la page.

Ce que vous voyez

Les comptes ajoutés apparaissent comme une rangée d’icônes, et chaque icône ouvre son profil. Dans la vidéo, LinkedIn, GitHub et Drupal s’affichent comme de grands cercles aux couleurs de leurs marques avec des logos blancs. Les visiteurs les voient une fois la page enregistrée et publiée.

Survolez l’élément et ouvrez Plus > Paramètres dans sa barre de contrôle. Options :

  • Social links : une ligne par icône, avec un nom de marque et l’URL du profil. Cliquez sur Add link pour une autre ligne, et utilisez les flèches pour changer l’ordre.
  • Layout : Inline place les icônes en rangée. Stacked place chaque icône sur sa propre ligne.
  • Style : la forme des icônes : None, Rounded, Circle ou Square.
  • Size : Small, Large, ou 2x à 5x.
  • CSS3 hover effects : None, Disc ou Pulse. Tout effet transforme l’icône en cercle.
  • Color : la couleur des logos : Brand color, Custom ou Inherit. Custom affiche une palette, et Inherit utilise la couleur du texte autour.
  • Background color : le remplissage de la forme, avec les mêmes trois choix.

Color et Background color se trouvent sous le titre Icon colors. Cliquez dessus pour les ouvrir.

Si rien ne s’affiche

  • Les liens sociaux ne figurent pas dans l’onglet Contenu. Votre profil d’utilisateur les masque. Demandez à un administrateur de les activer dans Profils d’utilisateurs.
  • Ils ont disparu après rechargement. La page n’a pas été enregistrée. Ajoutez-les de nouveau et cliquez sur Enregistrer dans la barre d’outils en haut de la zone de contenu.
  • Une icône manque. Sa ligne n’a ni marque ni URL, l’élément l’ignore donc. Renseignez les deux champs de cette ligne.
  • Une forme s’affiche sans logo. Le nom de marque n’a pas d’icône correspondante, et la ligne dit « No matching brand icon found ». Choisissez la marque dans les suggestions pendant la saisie.
  • Une icône ouvre la mauvaise page. L’URL de cette ligne est fausse ou incomplète. Survolez l’élément et ouvrez Plus > Paramètres, puis vérifiez que chaque URL commence par https://.

Et ensuite ?

Onglet Style pour modifier l’espacement et l’arrière-plan de vos liens sociaux.