Blocs

Blocs » Bloc Icônes de réseaux sociaux

Le bloc Icônes de réseaux sociaux vous permet d’ajouter des icônes de réseaux sociaux à une page ou un article et de diriger les personnes vers vos profils de réseaux sociaux.

Voici un exemple :

Table des matières

Didacticiel vidéo

Insérer le bloc Icônes de réseaux sociaux

Pour ajouter le bloc Icônes de réseaux sociaux, cliquez sur l’icône de l’Outil d’insertion de bloc + et recherchez « icônes de réseaux sociaux ». Cliquez dessus pour ajouter le bloc à l’article ou à la page.

💡

À l’aide du clavier, vous pouvez également saisir /social sur une nouvelle ligne et appuyer sur Entrée pour ajouter rapidement un nouveau bloc Icônes de réseaux sociaux.

Lorsque vous ajoutez le bloc pour la première fois, vous voyez également un réglage Taille qui vous aide à définir la taille de vos icônes :

Un bloc Icônes de réseaux sociaux vide avec l’option Taille dans la barre d’outils du bloc développée pour afficher les différentes tailles d’icône.

Des instructions détaillées sur l’ajout de blocs sont disponibles ici.

Ajouter vos profils de réseaux sociaux

Lorsque vous ajoutez le bloc pour la première fois, vous voyez un bouton +. Cliquez sur le bouton + pour ajouter votre première icône.

Le bloc Icônes de réseaux sociaux sans icône de réseaux sociaux et une icône plus pour ajouter votre première icône.

Une liste de toutes les icônes disponibles s’affiche. Vous pouvez sélectionner celle de votre choix dans la liste ou utiliser l’option de recherche pour trouver une icône comme « Facebook ». Vous pouvez ainsi ajouter les icônes vers tous vos réseaux sociaux.

L’icône plus développée pour afficher les différentes icônes pouvant être ajoutées, ainsi qu’une option de recherche.
Facebook saisi dans le champ de recherche pour trouver l’icône du réseau social Facebook.

Ensuite, vous pouvez lier l’icône à votre profil de réseau social. Pour cela, cliquez une fois sur l’icône pour afficher une zone dans laquelle vous saisissez votre adresse. Tapez ou collez le lien vers votre profil de réseau social, puis cliquez sur l’icône en forme de flèche pour enregistrer.

GIF montrant le processus de clic sur l’icône de réseau social et d’ajout du lien au profil de réseau social.
Comment lier votre icône de réseau social

⚠️

Si vous n’ajoutez pas de lien vers l’icône, vous ne verrez pas l’icône sur votre aperçu ou sur le site en direct.

Ajouter de nouvelles icônes

Cliquez sur le bouton Outil d’insertion de bloc + à droite des icônes actuelles. Cela ouvre une liste de toutes les icônes disponibles. Vous pouvez rechercher l’icône pour sélectionner celle de votre choix.

GIF : Cliquez sur le bouton Ajouter une icône pour ouvrir la liste des icônes de réseaux sociaux disponibles.
Ajout d’une nouvelle icône.

Si l’icône que vous voulez n’est pas là, vous pouvez utiliser un bouton de lien générique à la place :

Ajoutez une nouvelle icône et recherchez Lien pour ajouter un réseau social personnalisé ne figurant pas dans notre liste par défaut.
L’icône Lien générique

Liste des icônes prises en charge

Les icônes suivantes sont disponibles :

  • 500px
  • Bandcamp
  • Behance
  • CodePen
  • DeviantArt
  • dribbble
  • Dropbox
  • Etsy
  • Facebook
  • Flickr
  • FourSquare
  • GitHub
  • Goodreads
  • Google
  • Instagram
  • Last.fm
  • LinkedIn
  • E-mail (mailto : liens)
  • Mastodon
  • Meetup
  • Medium
  • Patreon
  • Pinterest
  • Pocket
  • Reddit
  • Flux RSS (URL avec /feed/)
  • Skype
  • Snapchat
  • Soundcloud
  • Spotify
  • Telegram
  • TikTok
  • Tumblr
  • Twitch
  • Twitter
  • Vimeo
  • VK
  • WordPress
  • Yelp
  • YouTube

Supprimer une icône

Pour supprimer une icône, cliquez dessus pour afficher sa barre d’outils individuelle. Cliquez sur les trois points de cette icône et sélectionnez Supprimer :

GIF : Cliquez sur les trois points au-dessus d’une icône individuelle pour afficher l’option Supprimer le bloc de cette icône.
Suppression d’une icône de réseau social

Réglages du bloc

Lorsque vous cliquez sur le bloc, des réglages de bloc supplémentaires apparaissent dans la colonne latérale droite. Si vous ne voyez pas la colonne latérale, vous devrez peut-être cliquer sur l’icône ⚙️ (engrenage) dans le coin supérieur droit pour afficher les réglages.

Les réglages de bloc sont disponibles dans la colonne latérale droite.
Cliquez sur l’icône ⚙️ pour ouvrir les réglages du bloc
Styles

Dans les réglages du bloc, vous pouvez choisir parmi trois styles différents pour vos icônes :

  • Par défaut
  • Logos uniquement
  • Forme de pastille
Réglages du bloc
Mise en page

Vous pouvez choisir la justification des icônes, à gauche, au centre, à droite ou espace entre les éléments.

Vous pouvez afficher les boutons verticalement (c.-à-d. empilés dans une colonne) à l’aide du réglage Orientation dans la colonne latérale du bloc de boutons parent.

En activant le réglage Autoriser le retour à la ligne sur plusieurs lignes, les boutons passent sur la ligne suivante lorsqu’il n’y a pas assez d’espace sur un appareil mobile (recommandé). Lorsque ce réglage est désactivé, tous les boutons restent sur la même ligne quoi qu’il arrive.

Réglages de lien

Vous pouvez également choisir d’ouvrir les liens dans un nouvel onglet en activant l’option « Ouvrir les liens dans un nouvel onglet ». Lorsque cette option est activée, les liens des icônes de réseaux sociaux s’ouvrent dans un nouvel onglet.

Réglages des couleurs

Les réglages des couleurs contiennent deux options que vous pouvez modifier.

Le panneau Réglages des couleurs dans les réglages du bloc Icônes de réseaux sociaux s’affiche.
  • Couleur de l’icône : modifie la couleur des icônes du bloc Icônes de réseaux sociaux.
  • Couleur d’arrière-plan de l’icône : modifie la couleur d’arrière-plan de toutes les icônes.

Si vous ne sélectionnez pas de couleur, l’icône sera utilisée dans la couleur de ce réseau social (exemple : bleu pour Facebook, rouge pour YouTube).

Avancé

L’onglet Avancé vous permet d’ajouter une classe CSS à votre bloc. Vous pouvez ainsi écrire un CSS personnalisé et configurer le style du bloc à votre guise. Lire la suite.

La section avancée vous permet d’ajouter une classe CSS à votre bloc.
La section avancée vous permet d’ajouter une classe CSS à votre bloc.

Chaque icône de réseau social peut également avoir sa propre classe individuelle. Ajoutez une classe à une icône en la sélectionnant, puis modifiez le champ Classe CSS additionnelle pour cette icône.