ÉLÉMENTS SOCIAUX

CHAPITRE 1 : SOCIAL FOLLOW

MODULE 7

Le module de suivi social

Le module des médias sociaux vous permet de créer des liens iconographiques pointant vers vos profils sociaux en ligne, tels que Facebook, Twitter et Google+.

Ces icônes sont intégrées au thème, dans le style propre de Divi en utilisant nos Elégantes Icônes, ce qui les rend préférables aux plugins tiers.

Vous pouvez ajouter des liens vers plusieurs profils sociaux dans chaque module, et vous pouvez ajouter le module n'importe où sur la page.

Comment ajouter un module de médias sociaux à votre page

Avant de pouvoir ajouter un module de médias sociaux à votre page, vous devez d'abord sauter dans le Divi Builder.

Cliquez sur ce bouton pour activer le Divi Builder, vous donnant accès à tous les modules du Divi Builder. Ensuite, cliquez sur le bouton Utiliser Visual Builder pour lancer le constructeur en mode Visual.

Vous pouvez également cliquer sur le bouton Utiliser Visual Builder lorsque vous naviguez sur votre site

Web si vous êtes connecté à votre tableau de bord WordPress.

Comment ajouter un module de médias sociaux à votre page

Une fois que vous êtes entré dans le Visual Builder, vous pouvez cliquer sur le bouton gris plus pour ajouter un nouveau module à votre page.

Si vous commencez une nouvelle page, n'oubliez pas d'ajouter une ligne à votre page. Nous avons quelques bons tutoriels sur la façon d'utiliser les éléments de ligne et de section de Divi.

Localisez le module médias sociaux dans la liste des modules et cliquez dessus pour l'ajouter à votre page.

La liste des modules est interrogeable, ce qui signifie que vous pouvez également taper le mot "médias sociaux" puis cliquer sur Entrée pour trouver et ajouter automatiquement le module médias sociaux!

Une fois le module ajouté, vous serez ac- cueilli avec la liste d'options du module. Ces options sont divisées en trois groupes principaux: Contenu, Design et Avancé.

Exemple d'utilisation : Ajouter des icônes de médias sociaux correspondants à une page de contact

La page de contact d'un site Web est l'endroit idéal pour présenter vos profils sociaux en ligne.

À l'aide du constructeur visuel, ajoutez une nouvelle section régulière avec une rangée pleine largeur d'une colonne. Insérez un module de médias sociaux dans votre colonne.

Dans l'onglet Contenu des Paramètres de suivi des médias sociaux, cliquez sur le bouton "Ajouter un nouvel élément" pour ajouter un nouveau réseau social à votre module. Sous les paramètres spécifiques du réseau social, mettez à jour ce qui suit:

Options de contenu

Réseau social: Facebook

URL du compte:[Entrer l'URL de votre compte facebook][Entrer l'URL de votre compte facebook

Options de conception

Couleur de l'icône: #d94b6a (couleur correspondante)

Ensuite, dupliquez ce réseau social pour ajouter quatre autres réseaux (Twitter, Google+, LinkedIn et Instagram). Parce que vous avez dupliqué le réseau, la couleur de l'icône personnalisée est conservée, il vous suffit donc de mettre à jour chaque URL du réseau et du compte.

Vous avez maintenant des icônes de médias sociaux qui correspondent au design de la page de contact.

Options de contenu

Ajouter un nouvel élément

Forme du lien

Url ouvre ses portes

Ici, vous pouvez choisir la forme des icônes de votre réseau social en rectangle arrondi ou en cercle.

C'est ici que vous ajoutez de nouveaux réseaux à votre module.

En cliquant sur "ajouter un nouvel élément", vous ouvrez une nouvelle fenêtre d'options spécifiques à votre nouveau réseau (sous les onglets Contenu, Design et Avancé). Voir ci-dessous pour les para- mètres individuels des réseaux de médias sociaux.

Après avoir ajouté votre premier réseau, vous verrez apparaître une barre grise avec le titre de votre réseau sous forme d'étiquette.

La barre grise comporte également trois boutons qui vous permettent d'éditer, de dupliquer ou de supprimer le réseau.

Choisissez d'ouvrir votre url réseau dans un nouvel onglet ou dans la même fenêtre.

Bouton Suivre

Étiquette Admin

Ceci changera l'étiquette du module dans le constructeur pour une identification facile.

Lorsque vous utilisez la vue WireFrame dans le Visual Builder, ces étiquettes apparaîtront dans le bloc module de l'interface Divi Builder.

Ici, vous pouvez choisir d'inclure ou non le bouton suivant à côté de l'icône.

Options de conception

Chaque module Divi dispose d'une longue liste de paramètres de conception que vous pouvez utiliser pour modifier pratiquement n'importe quoi.

Pour ce module, les options de conception se composent d'un seul élément - Couleur de texte.

Couleur du texte

Ici, vous pouvez choisir si votre texte doit être clair ou foncé. Si vous travaillez sur un fond foncé, votre texte doit être clair. Si votre arrière-plan est clair, votre texte doit être noir.

Options avancées

Vous pouvez également appliquer des classes CSS et des identifiants personnalisés au module, qui peuvent être utilisés pour personnaliser le module dans le fichier style. css de votre thème enfant.

CSS ID

Classe CSS

CSS personnalisé

Visibilité

Entrez les classes CSS facultatives à utiliser pour ce module.

Une classe CSS peut être utilisée pour créer un style CSS personnalisé.

Vous pouvez ajouter plusieurs classes, séparées par un espace.

Ces classes peuvent être utilisées dans votre Thème Divi Child ou dans le CSS personnalisé que vous ajoutez à votre page ou votre site Web en utilisant les Options du Thème Divi ou les Paramètres de page du Générateur de Divi.

Entrez un ID CSS optionnel à utiliser pour ce module. Un ID peut être utilisé pour créer un style CSS personnalisé ou pour créer des liens vers des sections particulières de votre page.

Cette option vous permet de contrôler sur quels périphériques votre module apparaît.

Vous pouvez choisir de désactiver votre module sur des tablettes, des téléphones intelligents ou des ordinateurs de bureau individuellement.

C'est utile si vous voulez utiliser différents modules sur différents appareils, ou si vous voulez simplifier le design mobile en éliminant certains éléments de la page.

Le CSS personnalisé peut également être appliqué au module et à n'importe quel élément interne du module.

Dans la section Personnaliser CSS, vous trouverez un champ texte dans lequel vous pouvez ajouter des CSS personnalisés directement à chaque élément.

Les entrées CSS dans ces paramètres sont déjà emballées dans des balises de style, vous n'avez donc qu'à entrer des règles CSS séparées par des point-virgules.

Options de contenu des

Réseau social

URL du compte

C'est ici que vous entrez l'URL de ce lien de réseau social.

Si vous avez choisi Facebook comme réseau, c'est ici que vous placerez l'URL de votre page Facebook.

Ici, vous pouvez choisir le réseau social que vous souhaitez afficher.

Options de conception

Couleur de l'icône

Divi a commodément les couleurs standard pour chaque réseau social définies par défaut.

Ici, vous pouvez facilement changer cette couleur d'icône à ce que vous voulez.

Options avancées pour

CSS personnalisé

Le CSS personnalisé peut également être appliqué au module et à n'importe quel élément interne du module.

Dans la section Personnaliser CSS, vous trouverez un champ texte dans lequel vous pouvez ajouter des CSS personnalisés directement à chaque élément.

Les entrées CSS dans ces paramètres sont déjà emballées dans des balises de style, vous n'avez donc qu'à entrer des règles CSS séparées par des point-virgules.

MERCI