Le bouton « suivre » sur les médias sociaux reste un ajout populaire à n’importe quel site Web. Les entreprises et les particuliers utilisent ces liens pour rediriger les utilisateurs vers leurs pages de médias sociaux et s’attendre à ce que les visiteurs les suivent ou s’abonnent à leurs canaux. Habituellement, vous verrez ces boutons sur la page contacts, la barre latérale ou le pied de page du site. Dans ce tutoriel, nous vous montrerons comment concevoir une barre de boutons pour suivre les POP – ups des médias sociaux sur les modèles de page dans Divi. Cela rendra ces boutons d’attention des médias sociaux plus visibles sur votre site sans distraction. De plus, avec le thème Builder de Divi, vous pouvez facilement créer un modèle de page qui contient ces boutons pour n’importe quelle (ou toutes) Page (s) de votre site.
Passons voir, allons – y! Voici les boutons associés aux médias sociaux créés dans ce tutoriel. Télécharger gratuitement les modèles de page pop – up de la barre de boutons pour obtenir les modèles de page de la barre de boutons, suivez les médias sociaux dans ce tutoriel et vous devez d’abord les télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire.
Télécharger le fichier
Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout. Ti
Lien de compte.
Une fois que vous avez terminé les réseaux de formulaires suivant le média social, nous sommes prêts à ajouter un formulaire de bouton. Ce bouton sera le bouton par lequel l’utilisateur passe le curseur pour afficher la barre contextuelle. Continuez à ajouter le module bouton et faites – le glisser sur le module d’attention des médias sociaux. Le contenu du bouton est ensuite mis à jour comme suit:
Texte du bouton: Suivez le bouton URL link: # Style et emplacement du bouton, puis mise à jour des paramètres de conception du bouton comme suit: taille du texte du bouton: 16 Px couleur du texte du bouton: largeur de la bordure du bouton: 0px espacement des lettres du bouton: 1px caractères du bouton: Montserrat poids des caractères du bouton: gras icône du bouton: Flèche droite (voir capture d’écran) Marge: 100% gauche Remplir: 100px Bottom, puis ajouter les CSS personnalisés suivants à l’élément principal: position: absolute; Une fois que le bouton de dessin des paramètres de ligne est prêt à être utilisé, mettre à jour les paramètres de ligne comme suit:
Couleur de fond: # FFFFFF largeur de la gouttière: 1 largeur: 100% largeur maximale: 64 pixels remplissage: 24px en haut, 16px en bas, 16px à gauche Shadow wireframe Shadows: see capture d’écran Forcing Shadow boxes: 0px Forcing Shadow boxes: 30 Px Shadow color (Desktop): transparent Shadow color (Mouse overhang): rgba (0,0,0,0,2) Les CSS personnalisés suivants sont ensuite ajoutés à l’élément principal de la ligne: position: fixe;
En haut: Calc (33,33vh – 55px);
Gauche: 0; Ceci place la ligne à une position fixe à un tiers du haut du navigateur.
Les flyouts de souris avec des marges personnalisées ajoutent maintenant les valeurs de marge suivantes pour ajouter des flyouts de souris. Marges (bureau): – 64px Sini
Stro margin: 0px left Il s’agit de la barre des boutons d’attention des médias sociaux. Mais nous devons encore compléter le modèle en créant un formulaire de contenu pour les messages nécessaires. Ajoutez le module de contenu des messages au modèle lorsque la barre des boutons d’attention des médias sociaux est prête. Mais comme il s’agit d’un modèle, nous devons nous assurer que vous ajoutez un formulaire de contenu de poste pour afficher le contenu des pages qui utilisent ce modèle.
Ajouter une nouvelle ligne, ajouter un formulaire de contenu post sous la ligne contenant la barre de boutons pour suivre les médias sociaux, ajouter une nouvelle ligne à la colonne. Ensuite, ajoutez le formulaire de contenu du message à la ligne. Actuellement, le module de contenu des messages limitera la largeur par défaut de la ligne principale. Nous devons changer la largeur et le remplissage de la ligne pour qu’elle occupe toute la largeur du navigateur sans espace. Ceci est important parce que le module de contenu post détermine la zone nécessaire pour créer une page en utilisant Divi Builder.
Mise à jour comme suit: largeur: 100% largeur maximale: 100% remplissage: 0px en haut, 0px en bas Mettre à jour les paramètres de la section comme suit: padding: 0px top, 0px bottom C’est ça. Assurez – vous maintenant d’enregistrer la mise en page avant de quitter l’éditeur. Ensuite, enregistrez les modifications apportées au générateur de thème. Résultats finaux pour voir les résultats finaux, visitez la page du modèle d’affectation. Voici l’apparence de la barre de boutons qui suit les POP – ups des médias sociaux. Cette barre de boutons qui suit de près les médias sociaux aidera sans aucun doute à mettre ces réseaux sociaux importants à l’avant – garde. La fonction Flyout garantit que l’icône ne distrait pas l’utilisateur. Vous pouvez utiliser Theme Builder pour ajouter cette colonne à n’importe quel modèle de page. J’espère que c’est un