{"id":370011,"date":"2022-03-30T02:09:13","date_gmt":"2022-03-30T02:09:13","guid":{"rendered":"https:\/\/www.lafactory.online\/?p=370011"},"modified":"2022-03-30T02:09:18","modified_gmt":"2022-03-30T02:09:18","slug":"comment-concevoir-un-module-de-suivi-des-medias-sociaux-accrocheur-en-divi","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/comment-concevoir-un-module-de-suivi-des-medias-sociaux-accrocheur-en-divi\/","title":{"rendered":"Comment concevoir un module de suivi des m\u00e9dias sociaux accrocheur en Divi"},"content":{"rendered":"\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-54da3de2-0b4d-4e43-9307-7c966bec44d0\" href=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2022\/01\/Sticky-Social-Media-Follow-Module-Divi-Layouts.json_.zip\">Sticky-Social-Media-Follow-Module-Divi-Layouts.json_<\/a><a href=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2022\/01\/Sticky-Social-Media-Follow-Module-Divi-Layouts.json_.zip\" class=\"wp-block-file__button\" download aria-describedby=\"wp-block-file--media-54da3de2-0b4d-4e43-9307-7c966bec44d0\">Download<\/a><\/div>\n\n\n<article id=\"post-165752\" class=\"entry et_box clearfix post-165752 post type-post status-publish format-standard has-post-thumbnail category-divi-resources tag-divi-sticky-options tag-social-media-follow-buttons tag-sticky-social-media-follow-module\">Gr\u00e2ce aux options adh\u00e9sives int\u00e9gr\u00e9es de Divi, vous pouvez facilement concevoir un module adh\u00e9sif de suivi des m\u00e9dias sociaux qui maintiendra ces ic\u00f4nes de r\u00e9seaux sociaux au premier plan lorsque l&rsquo;utilisateur fera d\u00e9filer la page. De plus, en ajoutant un style personnalis\u00e9 au module dans l&rsquo;\u00e9tat collant, nous pouvons cr\u00e9er des transitions de conception uniques lorsque l&rsquo;\u00e9tat collant est activ\u00e9 lors du d\u00e9filement. Donc, si vous recherchez un contr\u00f4le total sur la conception de vos boutons de suivi des m\u00e9dias sociaux, ce tutoriel est fait pour vous !\n<p>\u00a0<\/p>\n<div class=\"et_bloom_locked_container et_bloom_optin_1\" data-page_id=\"165752\" data-optin_id=\"optin_1\" data-list_id=\"mailchimp_c886a2fc0a\" data-current_optin_id=\"optin_1\">\n<div class=\"et_bloom_locked_content\" style=\"display: none;\">T\u00e9l\u00e9charger les fichiers<\/div>\n<div class=\"et_bloom_locked_form\">\n<div class=\"et_bloom_inline_form et_bloom_optin et_bloom_make_form_visible et_bloom_optin_1\" style=\"display: none;\"><style type=\"text\/css\">.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color : #4843d2 !important ; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color : #ffffff !important ; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color : #ffff !important ; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color : transparent !important ; border-left-color : #ffffff !important ; }<br \/>\n\t\t\t\t\t\t@media only screen and ( max-width : 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before { border-top-color : #ffffff !important ; border-left-color : transparent !important ; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color : #ffffff !important ; border-left-color : transparent !important ; }<br \/>\n\t\t\t\t\t\t}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color : #f92c8b !important ; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color : #f92c8b !important ; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background : #f92c8b !important ; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color : #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color : #f92c8b !important ; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family : \"Open Sans\", Helvetica, Arial, Lucida, sans-serif ; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family : \"Open Sans\", Helvetica, Arial, Lucida, sans-serif ; } p.et_bloom_popup_input { padding-bottom : 0 !important;}<\/style>\n<div class=\"et_bloom_form_container  with_edge carrot_edge et_bloom_border_solid et_bloom_rounded et_bloom_form_text_light et_bloom_form_bottom et_bloom_inline_1_field\">\n<div class=\"et_bloom_form_container_wrapper clearfix\">\n<div class=\"et_bloom_header_outer\">\n<div class=\"et_bloom_form_header split et_bloom_header_text_dark\"><img decoding=\"async\" class=\" et_bloom_image_slideup et_bloom_image\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/12\/premade-image-06.png\" alt=\"Download For Free\" \/>\n<p>\u00a0<\/p>\n<div class=\"et_bloom_form_text\">\n<h2>T\u00e9l\u00e9charger gratuitement<\/h2>\n<p>Inscrivez-vous \u00e0 la newsletter Divi et nous vous enverrons par e-mail une copie du pack de mise en page ultime pour les pages d&rsquo;atterrissage Divi, ainsi que des tonnes d&rsquo;autres ressources, conseils et astuces Divi \u00e9tonnants et gratuits. Suivez-nous et vous deviendrez un ma\u00eetre de Divi en un rien de temps. <em>Si vous \u00eates d\u00e9j\u00e0 abonn\u00e9, il vous suffit d&rsquo;entrer votre adresse e-mail ci-dessous et de cliquer sur t\u00e9l\u00e9charger pour acc\u00e9der au pack de mise en page.<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"et_bloom_form_content et_bloom_1_field et_bloom_bottom_inline\"><form class=\"clearfix\" method=\"post\">\n<div class=\"et_bloom_fields\">\n<p class=\"et_bloom_popup_input et_bloom_subscribe_email\"><input type=\"text\" placeholder=\"Enter your email address\" \/><\/p>\n<p>\u00a0<\/p>\n<p><span class=\"et_bloom_button_text et_bloom_button_text_color_light\">T\u00c9L\u00c9CHARGER<\/span><\/p>\n<\/div>\n<\/form>\n<div class=\"et_bloom_success_container\">\u00a0<\/div>\n<h2 class=\"et_bloom_success_message\">Vous vous \u00eates inscrit avec succ\u00e8s. Veuillez v\u00e9rifier votre adresse e-mail pour confirmer votre abonnement et avoir acc\u00e8s aux packs de mise en page Divi hebdomadaires gratuits !<\/h2>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Pour importer la mise en page de la section dans votre biblioth\u00e8que Divi, acc\u00e9dez \u00e0 la biblioth\u00e8que Divi.<\/p>\n<p>Cliquez sur le bouton Importer.<\/p>\n<p>Dans la fen\u00eatre contextuelle de portabilit\u00e9, s\u00e9lectionnez l&rsquo;onglet d&rsquo;importation et choisissez le fichier \u00e0 t\u00e9l\u00e9charger depuis votre ordinateur.<\/p>\n<p>Cliquez ensuite sur le bouton d&rsquo;importation.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter size-full wp-image-127617\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/12\/1639923889_417_add-section-layout-to-library.jpg\" alt=\"divi notification box\" width=\"880\" height=\"711\" \/><\/p>\n<p>Une fois cela fait, la mise en page de la section sera disponible dans le Divi Builder.<\/p>\n<p>Passons au tutoriel, voulez-vous ?<\/p>\n<h2>Ce dont vous avez besoin pour commencer<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border with-border aligncenter size-large wp-image-118230\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/12\/divi-tutorial-getting-started-791x1024.jpg\" alt=\"expanding corner tabs\" width=\"719\" height=\"931\" \/><\/p>\n<p>Pour commencer, vous devez effectuer les op\u00e9rations suivantes :<\/p>\n<ol>\n<li>Si vous ne l&rsquo;avez pas encore fait, installez et activez le th\u00e8me Divi.<\/li>\n<li>Cr\u00e9ez une nouvelle page dans WordPress et utilisez le Divi Builder pour \u00e9diter la page sur le front-end (visual builder).<\/li>\n<li>Choisissez l&rsquo;option \u00ab\u00a0Build From Scratch\u00a0\u00bb.<\/li>\n<\/ol>\n<p>Apr\u00e8s cela, vous aurez une toile vierge pour commencer \u00e0 concevoir dans Divi.<\/p>\n<h2>Conception d&rsquo;un module de suivi des m\u00e9dias sociaux autocollant dans Divi<\/h2>\n<h3>Utilisation d&rsquo;une mise en page d&rsquo;atterrissage pr\u00e9\u00e9tablie<\/h3>\n<p>Pour commencer, nous avons besoin d&rsquo;un contenu de page fictive en place avant de concevoir le module de suivi des m\u00e9dias sociaux autocollant. Pour ce faire, ouvrez le menu des param\u00e8tres et cliquez sur l&rsquo;ic\u00f4ne Charger de la biblioth\u00e8que. Dans la fen\u00eatre contextuelle Charger depuis la biblioth\u00e8que, recherchez et s\u00e9lectionnez la mise en page de la page d&rsquo;atterrissage du cr\u00e9ateur de mode. Cliquez ensuite sur le bouton vert \u00ab\u00a0Utiliser cette mise en page\u00a0\u00bb.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter size-full wp-image-165866\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2022\/01\/divi-sticky-social-media-follow-module19.jpg\" alt=\"\" width=\"880\" height=\"656\" \/><\/p>\n<h3>Cr\u00e9ation de la section<\/h3>\n<p>Ajoutez une nouvelle section r\u00e9guli\u00e8re \u00e0 la mise en page.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter size-full wp-image-165865\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2022\/01\/divi-sticky-social-media-follow-module18.jpg\" alt=\"\" width=\"879\" height=\"567\" \/><\/p>\n<p>D\u00e9placez ensuite la nouvelle section en haut de la page (ou \u00e0 l&rsquo;endroit o\u00f9 vous souhaitez ajouter les liens de suivi des m\u00e9dias sociaux).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter size-full wp-image-165864\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2022\/01\/divi-sticky-social-media-follow-module17.jpg\" alt=\"\" width=\"880\" height=\"526\" \/><\/p>\n<p>Ouvrez les param\u00e8tres de la section et mettez \u00e0 jour la couleur d&rsquo;arri\u00e8re-plan pour l&rsquo;adapter \u00e0 la mise en page, comme suit :<\/p>\n<ul>\n<li>Couleur de fond : #fff9f2<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter size-full wp-image-165863\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2022\/01\/divi-sticky-social-media-follow-module16.jpg\" alt=\"\" width=\"880\" height=\"575\" \/><\/p>\n<p>Sous l&rsquo;onglet Conception, mettez \u00e0 jour le remplissage de la section :<\/p>\n<ul>\n<li>Padding : 10px haut 10px bas<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter size-full wp-image-165862\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2022\/01\/divi-sticky-social-media-follow-module15.jpg\" alt=\"\" width=\"879\" height=\"585\" \/><\/p>\n<h3>Cr\u00e9ation de la rang\u00e9e<\/h3>\n<p>\u00c0 l&rsquo;int\u00e9rieur de la section, ajoutez une rang\u00e9e d&rsquo;une colonne.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter size-full wp-image-165861\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2022\/01\/divi-sticky-social-media-follow-module14.jpg\" alt=\"\" width=\"880\" height=\"478\" \/><\/p>\n<p>Ouvrez les param\u00e8tres de la ligne et mettez \u00e0 jour la taille et l&rsquo;espacement comme suit :<\/p>\n<ul>\n<li>Utiliser une largeur de goutti\u00e8re personnalis\u00e9e : OUI<\/li>\n<li>Largeur de la goutti\u00e8re : 1<\/li>\n<li>Largeur : 100<\/li>\n<li>Largeur maximale : 100<\/li>\n<li>Rembourrage : 0px haut, 0px bas<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter size-full wp-image-165860\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2022\/01\/divi-sticky-social-media-follow-module13.jpg\" alt=\"\" width=\"880\" height=\"865\" \/><\/p>\n<h3>Cr\u00e9ation du module adh\u00e9sif de suivi des m\u00e9dias sociaux<\/h3>\n<p>Une fois que la section et la rang\u00e9e sont en place, ajoutez un nouveau module de suivi des m\u00e9dias sociaux \u00e0 la rang\u00e9e.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter size-full wp-image-165859\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2022\/01\/divi-sticky-social-media-follow-module12.jpg\" alt=\"\" width=\"880\" height=\"331\" \/><\/p>\n<h4>Mise \u00e0 jour des param\u00e8tres du module<\/h4>\n<p>Ouvrez les param\u00e8tres du module de suivi des m\u00e9dias sociaux. La premi\u00e8re chose \u00e0 faire est d&rsquo;ajouter une position collante au module \u00e0 l&rsquo;aide des options collantes de Divi. Sous l&rsquo;onglet Avanc\u00e9, mettez \u00e0 jour les \u00e9l\u00e9ments suivants :<\/p>\n<ul>\n<li>Position de l&rsquo;autocollant : Coller en haut<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter size-full wp-image-165858\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2022\/01\/divi-sticky-social-media-follow-module11.jpg\" alt=\"\" width=\"880\" height=\"895\" \/><\/p>\n<p>Une fois que la position collante est en place, vous pourrez cibler le style du module dans l&rsquo;\u00e9tat collant (tout comme vous pouvez le faire pour l&rsquo;\u00e9tat de survol). Pour ce faire, il suffit de passer la souris sur une option et de cliquer sur l&rsquo;ic\u00f4ne de la vignette.<\/p>\n<p>Sous l&rsquo;onglet \u00ab\u00a0Design\u00a0\u00bb, mettez \u00e0 jour les \u00e9l\u00e9ments suivants :<\/p>\n<ul>\n<li>Alignement du module : Centre<\/li>\n<li>Couleur de l&rsquo;ic\u00f4ne : #000 (bureau), #fff (survol), #fff (collant)<\/li>\n<li>Largeur : 100 %<\/li>\n<li>Largeur maximale : 100<\/li>\n<li>Rembourrage : 20px haut, 12px bas, 10px gauche, 10px droite<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter size-full wp-image-165857\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2022\/01\/divi-sticky-social-media-follow-module10.jpg\" alt=\"\" width=\"880\" height=\"915\" \/><\/p>\n<h4>Param\u00e8tres des r\u00e9seaux sociaux<\/h4>\n<p>Une fois que les param\u00e8tres du module sont pr\u00eats, nous pouvons maintenant nous pencher sur le style des ic\u00f4nes de r\u00e9seau social individuelles. Pour ce faire, nous allons d&rsquo;abord styliser une ic\u00f4ne de r\u00e9seau social. Ensuite, nous allons dupliquer le r\u00e9seau social pour cr\u00e9er les autres.<\/p>\n<p>Par d\u00e9faut, vous devriez d\u00e9j\u00e0 avoir deux r\u00e9seaux sociaux sous l&rsquo;onglet Contenu. Supprimez l&rsquo;un d&rsquo;entre eux et cliquez pour modifier celui qui reste.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter size-full wp-image-165856\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2022\/01\/divi-sticky-social-media-follow-module9.jpg\" alt=\"\" width=\"880\" height=\"558\" \/><\/p>\n<p>Dans la section Param\u00e8tres du r\u00e9seau social, s\u00e9lectionnez un r\u00e9seau social et mettez \u00e0 jour les couleurs d&rsquo;arri\u00e8re-plan pour le bureau, le survol et les \u00e9tats collants.<\/p>\n<ul>\n<li>R\u00e9seau social : TikTok (ou ce que vous voulez)<\/li>\n<li>Arri\u00e8re-plan : transparent (bureau), #fe2c55 (survol), #000 (collant)<\/li>\n<\/ul>\n<p>ASTUCE : la couleur d&rsquo;arri\u00e8re-plan sera automatiquement modifi\u00e9e pour correspondre \u00e0 la marque du r\u00e9seau social. Vous pouvez copier cette couleur et l&rsquo;ajouter comme couleur d&rsquo;arri\u00e8re-plan de l&rsquo;\u00e9tat de survol de l&rsquo;ic\u00f4ne. Ainsi, la couleur d&rsquo;arri\u00e8re-plan par d\u00e9faut du r\u00e9seau social s&rsquo;affichera lors du survol de l&rsquo;ic\u00f4ne.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter size-full wp-image-165868\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2022\/01\/bg.jpg\" alt=\"\" width=\"880\" height=\"986\" \/><\/p>\n<p>Vous pouvez maintenant passer d&rsquo;un onglet \u00e0 l&rsquo;autre pour voir la couleur d&rsquo;arri\u00e8re-plan des trois \u00e9tats (bureau, survol\u00e9 et collant).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter size-full wp-image-165867\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2022\/01\/vid-1.gif\" alt=\"\" width=\"642\" height=\"614\" \/><\/p>\n<p>Ensuite, donnons \u00e0 l&rsquo;ic\u00f4ne une jolie forme ovale et une bordure pour qu&rsquo;elle corresponde un peu mieux \u00e0 la mise en page. Sous l&rsquo;onglet Design, mettez \u00e0 jour les \u00e9l\u00e9ments suivants :<\/p>\n<ul>\n<li>Coins arrondis : 50%<\/li>\n<li>Largeur de la bordure : 1px<\/li>\n<li>Couleur de la bordure : #000 (bureau), transparent (survol)<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter size-full wp-image-165854\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2022\/01\/divi-sticky-social-media-follow-module7.jpg\" alt=\"\" width=\"880\" height=\"1083\" \/><\/p>\n<p>Actuellement, l&rsquo;ic\u00f4ne a une forme circulaire. Pour obtenir une forme plus ovale, nous pouvons ajouter plus de rembourrage \u00e0 droite et \u00e0 gauche. Nous pouvons \u00e9galement cr\u00e9er plus d&rsquo;espace entre les ic\u00f4nes en ajoutant des marges \u00e0 droite et \u00e0 gauche. Veillez \u00e0 mettre \u00e0 jour l&rsquo;espacement sur l&rsquo;affichage des tablettes et des t\u00e9l\u00e9phones \u00e9galement.<\/p>\n<ul>\n<li>Marge (bureau) : 15px gauche, 15px droite<\/li>\n<li>Marge (sticky) : 0px gauche, 0px droite<\/li>\n<li>Marge (t\u00e9l\u00e9phone) : 0px gauche, 0px droite<\/li>\n<li>Rembourrage (bureau) : 16px gauche, 16px droite<\/li>\n<li>Remplissage (tablette) : 14px gauche, 14px droite<\/li>\n<li>Marge (t\u00e9l\u00e9phone) : 0px gauche, 0px droite<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter size-full wp-image-165853\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2022\/01\/divi-sticky-social-media-follow-module6.jpg\" alt=\"\" width=\"880\" height=\"874\" \/><\/p>\n<h3>Dupliquez le r\u00e9seau social pour en cr\u00e9er d&rsquo;autres<\/h3>\n<p>Maintenant que nous avons termin\u00e9 la conception du premier r\u00e9seau social, nous pouvons dupliquer l&rsquo;ic\u00f4ne pour en cr\u00e9er d&rsquo;autres. Pour ce faire, ouvrez les param\u00e8tres du module de suivi des m\u00e9dias sociaux, puis cliquez sur l&rsquo;ic\u00f4ne de duplication de l&rsquo;\u00e9l\u00e9ment de r\u00e9seau social. Pour cet exemple, nous allons en cr\u00e9er 4 autres.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter size-full wp-image-165852\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2022\/01\/divi-sticky-social-media-follow-module5.jpg\" alt=\"\" width=\"880\" height=\"809\" \/><\/p>\n<p>Il ne nous reste plus qu&rsquo;\u00e0 mettre \u00e0 jour chacun des nouveaux \u00e9l\u00e9ments de r\u00e9seau social avec un nouveau r\u00e9seau social. Comme la couleur d&rsquo;arri\u00e8re-plan sera modifi\u00e9e, vous devrez \u00e9galement mettre \u00e0 jour la couleur d&rsquo;arri\u00e8re-plan de chacun d&rsquo;entre eux.<\/p>\n<p>Pour ce faire, ouvrez les param\u00e8tres du deuxi\u00e8me r\u00e9seau social et mettez \u00e0 jour les \u00e9l\u00e9ments suivants :<\/p>\n<ul>\n<li>R\u00e9seau social : Facebook<\/li>\n<li>Couleur d&rsquo;arri\u00e8re-plan : transparent (bureau), #3b5998 (survol)<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter size-full wp-image-165851\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2022\/01\/divi-sticky-social-media-follow-module4.jpg\" alt=\"\" width=\"880\" height=\"952\" \/><\/p>\n<p>Continuez le m\u00eame processus pour mettre \u00e0 jour le reste des r\u00e9seaux sociaux.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter size-full wp-image-165850\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2022\/01\/divi-sticky-social-media-follow-module3.jpg\" alt=\"\" width=\"880\" height=\"653\" \/><\/p>\n<h3>\u00a0<\/h3>\n<h3>Cr\u00e9ation d&rsquo;ic\u00f4nes de suivi des m\u00e9dias sociaux align\u00e9es verticalement dans l&rsquo;\u00e9tat collant<\/h3>\n<p>Pour une conception et une transition plus uniques, nous pouvons aligner verticalement les ic\u00f4nes de suivi des m\u00e9dias sociaux lorsque l&rsquo;\u00e9tat collant est activ\u00e9. Pour ce faire, nous pouvons ajouter quelques extraits de CSS au module.<\/p>\n<p>Sous l&rsquo;onglet Avanc\u00e9, ajoutez le CSS suivant \u00e0 l&rsquo;\u00e9l\u00e9ment principal dans l&rsquo;\u00e9tat collant.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">display:flex ;\nflex-direction : column ;\nalign-items : center ;\njustify-content : center ;\nwidth : auto !important ;<\/pre>\n<p>Ajoutez ensuite le CSS suivant \u00e0 l&rsquo;ic\u00f4ne sociale dans l&rsquo;\u00e9tat Sticky.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">margin-right : 0 ;<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter size-full wp-image-165848\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2022\/01\/divi-sticky-social-media-follow-module1.jpg\" alt=\"\" width=\"880\" height=\"956\" \/><\/p>\n<p>\u00a0<\/p>\n<p>Pour aligner les ic\u00f4nes de r\u00e9seau vers la droite dans l&rsquo;\u00e9tat collant, ajoutez ce qui suit sous le CSS existant de l&rsquo;\u00e9l\u00e9ment principal dans l&rsquo;\u00e9tat collant :<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">left : auto !important ;\nright : 0 ;<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter size-full wp-image-165847\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2022\/01\/divi-sticky-social-media-follow-module0.jpg\" alt=\"\" width=\"880\" height=\"705\" \/><\/p>\n<p>\u00a0<\/p>\n<h2>R\u00e9flexions finales<\/h2>\n<p>Les boutons de suivi des m\u00e9dias sociaux sont presque toujours une caract\u00e9ristique essentielle d&rsquo;un site Web. Ils constituent l&rsquo;un des principaux moyens de connecter les canaux de m\u00e9dias sociaux \u00e0 un site Web. C&rsquo;est pourquoi le module de suivi des m\u00e9dias sociaux de Divi est dot\u00e9 de toutes les ic\u00f4nes de r\u00e9seau et options de conception dont vous avez besoin pour cr\u00e9er la solution parfaite pour votre site. Nous esp\u00e9rons que ce design de module de suivi des m\u00e9dias sociaux collant vous sera utile pour votre prochain projet.<\/p>\n<p>Pour une solution de partage de m\u00e9dias sociaux plus compl\u00e8te, vous pouvez installerMonarch.<\/p>\n<p>Je suis impatient de lire vos commentaires.<\/p>\n<p>\u00c0 la v\u00f4tre !<\/p>\n<\/article>","protected":false},"excerpt":{"rendered":"<p>Gr\u00e2ce aux options adh\u00e9sives int\u00e9gr\u00e9es de Divi, vous pouvez facilement concevoir un module adh\u00e9sif de suivi des m\u00e9dias sociaux qui maintiendra ces ic\u00f4nes de r\u00e9seaux sociaux au premier plan lorsque l&rsquo;utilisateur fera d\u00e9filer la page. De plus, en ajoutant un style personnalis\u00e9 au module dans l&rsquo;\u00e9tat collant, nous pouvons cr\u00e9er des transitions de conception uniques [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":370012,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[106],"tags":[],"class_list":["post-370011","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/370011","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/comments?post=370011"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/370011\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media\/370012"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media?parent=370011"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/categories?post=370011"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/tags?post=370011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}