Le module de médias sociaux vous permet de créer des liens basés sur des icônes qui pointent vers vos profils sociaux en ligne tels que Facebook, Twitter et Google+. Ces icônes sont incorporées au thème dans le style clair de Divi en utilisant nos icônes élégantes, ce qui les rend préférables aux plugins tiers. Vous pouvez ajouter des liens vers plusieurs profils sociaux dans chaque module et ajouter le module n’importe où sur la page.

Voir une démo en direct de ce module

Voici 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 Divi Builder. Une fois le thème Divi installé sur votre site Web, vous constaterez qu’un Utilisez Divi Builder Chaque fois que vous créez une nouvelle page, cliquez sur le bouton au-dessus de l’éditeur de publication. Cliquer sur ce bouton active le Divi Builder et vous donne accès à tous les modules de Divi Builder. Cliquez ensuite sur Utiliser le constructeur visuel Bouton pour démarrer le générateur en mode visuel. Vous pouvez également cliquer sur Utiliser le constructeur visuel Lorsque vous naviguez sur votre site Web, cliquez sur le bouton dans le front-end si vous êtes connecté à votre tableau de bord WordPress.

Module de médias sociaux

Après être entré dans Visual Builder, vous pouvez cliquer sur le bouton gris plus pour ajouter un nouveau module à votre page. Les nouveaux modules ne peuvent être ajoutés que dans les lignes. Lorsque vous démarrez une nouvelle page, n’oubliez pas d’ajouter d’abord une ligne à votre page. Nous avons d’excellents tutoriels sur l’utilisation de Divi ligne et section Éléments.

Module de médias sociaux

Trouvez le module de médias sociaux dans la liste des modules et cliquez dessus pour l’ajouter à votre page. La liste des modules est consultable. Ainsi, vous pouvez également taper le mot «médias sociaux», puis appuyer sur Entrée pour trouver et ajouter automatiquement le module de médias sociaux! Une fois le module ajouté, vous serez accueilli avec la liste des options du module. Ces options sont divisées en trois groupes principaux: contenu, conception et Avancée.

Exemple de cas d’utilisation: ajout d’icônes de médias sociaux correspondantes à 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. Cela donne aux utilisateurs plus de possibilités de rester connectés et de promouvoir votre blog ou votre entreprise. Dans cet exemple, je vais vous montrer comment ajouter des icônes de médias sociaux qui correspondent à la conception actuelle d’une page de contact.

Module de médias sociaux

À l’aide de Visual Builder, ajoutez une nouvelle section régulière avec une seule colonne, ligne pleine largeur. Ajoutez un module de médias sociaux à 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 sociaux spécifiques, mettez à jour les éléments suivants:

Options de contenu

Réseau social: Facebook
URL du compte: [enter the URL of your facebook account]

Options de conception

Couleur du symbole: # d94b6a (couleur assortie)

Module de médias sociaux

Ensuite, dupliquez ce réseau social pour ajouter quatre réseaux supplémentaires (Twitter, Google+, LinkedIn et Instagram). Puisque vous avez dupliqué le réseau, la couleur de l’icône personnalisée est appliquée. Il vous suffit donc de mettre à jour chaque URL de réseau et de compte.

Module de médias sociaux

Vous disposez désormais d’icônes de réseaux sociaux qui correspondent à la conception de la page de contact.

Module de médias sociaux

Options de contenu des médias sociaux

Dans l’onglet « Contenu », vous trouverez tous les éléments de contenu du module, par ex. B. Texte, images et symboles. Tout ce qui contrôle Quoi apparaît dans votre module et est toujours sur cet onglet.

Module de médias sociaux

Ajoute un nouvel objet

C’est ici que vous ajoutez de nouveaux réseaux à votre module. Cliquez sur « Ajouter un nouvel élément » pour ouvrir une toute nouvelle fenêtre avec des options pour votre nouveau réseau (sous les onglets « Contenu », « Conception » et « Avancé »). Vous trouverez ci-dessous les paramètres individuels du réseau social.

Après avoir ajouté votre premier réseau, vous verrez une barre grise avec le titre de votre réseau sous forme d’étiquette. La barre grise contient également trois boutons que vous pouvez utiliser pour modifier, dupliquer ou supprimer le réseau.

Forme du lien

Ici, vous pouvez choisir la forme de vos icônes de réseaux sociaux sous forme de rectangle ou de cercle arrondi.

L’URL s’ouvre

Choisissez si vous souhaitez ouvrir l’URL de votre réseau dans un nouvel onglet ou dans la même fenêtre.

Bouton Suivre

Ici, vous pouvez choisir d’insérer ou non le bouton «Suivre» à côté de l’icône.

Étiquette d’administrateur

Cela modifie le nom du module dans le générateur pour une identification facile. Si vous utilisez la vue WireFrame dans Visual Builder, ces étiquettes seront affichées dans le bloc de module de l’interface Divi Builder.

Options de conception de médias sociaux

L’onglet Conception contient toutes les options de style du module, telles que: B. Polices, couleurs, tailles et espacement. Sur cet onglet, vous pouvez modifier l’apparence de votre module. Chaque module Divi a une longue liste de paramètres de conception que vous pouvez utiliser pour changer presque tout.

Module de médias sociaux

Pour ce module, les options de conception se composent d’un seul élément – la couleur du texte.

Couleur du texte

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

Options avancées de médias sociaux

L’onglet Avancé fournit des options que les concepteurs Web expérimentés peuvent trouver utiles, telles que: B. Attributs CSS et HTML personnalisés. Ici, vous pouvez appliquer du CSS personnalisé à l’un des nombreux éléments du module. Vous pouvez également attribuer des classes CSS et des ID personnalisés au module, que vous pouvez utiliser pour personnaliser le module dans le fichier style.css de votre thème enfant.

Module de médias sociaux

ID CSS

Entrez un ID CSS facultatif à utiliser pour ce module. Un identifiant peut être utilisé pour créer un design CSS personnalisé ou pour créer des liens vers des sections spécifiques de votre page.

Classe CSS

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 site Web en utilisant Options de thème Divi ou les paramètres de page de Divi Builder.

CSS personnalisé

Le CSS personnalisé peut également être appliqué au module et à tous les éléments internes du module. Dans la section CSS personnalisé, vous trouverez une zone de texte dans laquelle vous pouvez ajouter du CSS personnalisé directement à n’importe quel élément. L’entrée CSS de ces paramètres est déjà incluse dans les balises de style, vous n’avez donc qu’à entrer des règles CSS, séparées par des points-virgules.

Visibilité

Cette option vous permet de contrôler les appareils sur lesquels votre module est affiché. Vous pouvez désactiver votre module individuellement sur les tablettes, les smartphones ou les ordinateurs de bureau. Ceci est utile lorsque vous souhaitez utiliser différents modules sur différents appareils ou lorsque vous souhaitez simplifier la conception mobile en supprimant certains éléments de la page.

Options individuelles pour le contenu des médias sociaux

Module de médias sociaux

réseau social

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

URL du compte

Ici, vous entrez l’URL de ce lien dans un réseau social. Si vous avez sélectionné Facebook comme réseau, saisissez ici l’URL de votre page Facebook.

Options de conception de médias sociaux individuels

Module de médias sociaux

Couleur de l’icône

Par défaut, Divi a défini les couleurs par défaut pour chaque réseau social. Ici, vous pouvez facilement changer la couleur de ce symbole comme vous le souhaitez.

Options avancées individuelles pour les médias sociaux

Module de médias sociaux

CSS personnalisé

Le CSS personnalisé peut également être appliqué au module et à tous les éléments internes du module. Dans la section CSS personnalisé, vous trouverez une zone de texte dans laquelle vous pouvez ajouter du CSS personnalisé directement à n’importe quel élément. L’entrée CSS de ces paramètres est déjà incluse dans les balises de style, vous n’avez donc qu’à entrer des règles CSS, séparées par des points-virgules.





Source link

Recent Posts