{"id":350309,"date":"2022-03-30T14:22:38","date_gmt":"2022-03-30T14:22:38","guid":{"rendered":"https:\/\/www.lafactory.online\/?p=350309"},"modified":"2022-03-30T14:22:42","modified_gmt":"2022-03-30T14:22:42","slug":"comment-creer-des-onglets-de-temoignage-personnalises-avec-divi-telechargement-gratuit","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/comment-creer-des-onglets-de-temoignage-personnalises-avec-divi-telechargement-gratuit\/","title":{"rendered":"Comment cr\u00e9er des onglets de t\u00e9moignage personnalis\u00e9s avec Divi (t\u00e9l\u00e9chargement GRATUIT !)"},"content":{"rendered":"\n
\u00a0<\/p>\n
Pour de nombreuses entreprises, les t\u00e9moignages sont l’un des principaux arguments pour obtenir de nouveaux clients. Cela signifie qu’accorder un peu plus d’attention aux t\u00e9moignages sur votre site Web ne sera jamais inutile. Dans Divi, il existe de nombreuses fa\u00e7ons de partager des t\u00e9moignages, en utilisant le module Divi Testimonial par exemple. Mais si vous recherchez une approche plus interactive, vous allez adorer ce tutoriel. Nous allons vous montrer comment cr\u00e9er des onglets de t\u00e9moignage personnalis\u00e9s dans Divi. Lorsque quelqu’un survole le module Blurb sur la gauche, un t\u00e9moignage correspondant appara\u00eet sur la droite. Les effets de transition dans cette conception sont \u00e9galement transparents, ce qui vous aide \u00e0 donner cette sensation suppl\u00e9mentaire de personnalisation \u00e0 votre site Web. Vous pourrez \u00e9galement t\u00e9l\u00e9charger le fichier JSON gratuitement !<\/p>\n
C’est parti !<\/p>\n
Avant de nous plonger dans le tutoriel, jetons un coup d’\u0153il rapide au r\u00e9sultat sur diff\u00e9rentes tailles d’\u00e9cran.<\/p>\n
<\/p>\n
<\/p>\n
Pour mettre la main sur la mise en page gratuite des onglets de t\u00e9moignage personnalis\u00e9s, vous devez d’abord la t\u00e9l\u00e9charger \u00e0 l’aide du bouton ci-dessous. Pour avoir acc\u00e8s au t\u00e9l\u00e9chargement, vous devez vous inscrire \u00e0 notre liste de diffusion Divi Daily \u00e0 l’aide du formulaire ci-dessous. En tant que nouvel abonn\u00e9, vous recevrez encore plus d’astuces Divi et un pack de mises en page Divi gratuit chaque lundi ! Si vous \u00eates d\u00e9j\u00e0 sur la liste, il suffit d’entrer votre adresse e-mail ci-dessous et de cliquer sur t\u00e9l\u00e9charger. Vous ne serez pas \u00ab\u00a0r\u00e9inscrit\u00a0\u00bb et ne recevrez pas d’e-mails suppl\u00e9mentaires.<\/p>\n
Commencez par ajouter une nouvelle section \u00e0 la page sur laquelle vous travaillez. Ouvrez les param\u00e8tres de la section et ajoutez une couleur d’arri\u00e8re-plan.<\/p>\n
<\/p>\n
Passez \u00e0 l’onglet de conception de la section et ajoutez des valeurs de marge et de remplissage personnalis\u00e9es.<\/p>\n
<\/p>\n
Ajoutez \u00e9galement des coins arrondis.<\/p>\n
<\/p>\n
Continuez en ajoutant la premi\u00e8re ligne \u00e0 la section en utilisant la structure de colonnes suivante :<\/p>\n
<\/p>\n
Sans ajouter de module, ouvrez les param\u00e8tres de la rang\u00e9e et ajoutez une marge inf\u00e9rieure.<\/p>\n
<\/p>\n
Il est temps d’ajouter des modules, en commen\u00e7ant par un module Texte contenant du contenu H2.<\/p>\n
<\/p>\n
Passez \u00e0 l’onglet de conception du module et modifiez les param\u00e8tres du texte H2 en cons\u00e9quence :<\/p>\n
<\/p>\n
Juste en dessous du module Texte, nous ajoutons un module Diviseur. Assurez-vous que l’option \u00ab\u00a0Show Divider\u00a0\u00bb est activ\u00e9e.<\/p>\n
<\/p>\n
Passez \u00e0 l’onglet de conception du module et changez la couleur de la ligne en blanc.<\/p>\n
<\/p>\n
Modifiez \u00e9galement les param\u00e8tres de dimensionnement.<\/p>\n
<\/p>\n
Et compl\u00e9tez les param\u00e8tres du module en ajoutant des coins arrondis aux param\u00e8tres de la bordure.<\/p>\n
<\/p>\n
Passez \u00e0 la rang\u00e9e suivante. Utilisez la structure de colonne suivante :<\/p>\n
<\/p>\n
Sans ajouter de modules, ouvrez les param\u00e8tres de la ligne et \u00e9galiser les hauteurs des colonnes dans les param\u00e8tres de dimensionnement.<\/p>\n
<\/p>\n
Ensuite, ouvrez les param\u00e8tres de la colonne 2 et appliquez une couleur de fond.<\/p>\n
<\/p>\n
<\/p>\n
Passez \u00e0 l’onglet de conception de la colonne et appliquez des espaces en haut et en bas pour les \u00e9crans de petite taille.<\/p>\n
<\/p>\n
Ajoutez \u00e9galement des coins arrondis.<\/p>\n
<\/p>\n
Il est temps d’ajouter des modules, en commen\u00e7ant par un premier module Blurb dans la colonne 1. Ajoutez le contenu de votre choix.<\/p>\n
<\/p>\n
T\u00e9l\u00e9chargez une image avec un rapport 1:1 ensuite.<\/p>\n
<\/p>\n
Appliquez ensuite la couleur d’arri\u00e8re-plan suivante :<\/p>\n
<\/p>\n
Modifiez \u00e9galement les param\u00e8tres de l’image.<\/p>\n
<\/p>\n
Ensuite, modifiez les param\u00e8tres du texte du titre en cons\u00e9quence :<\/p>\n
<\/p>\n
Nous modifions \u00e9galement les param\u00e8tres du corps du texte.<\/p>\n
<\/p>\n
Ensuite, nous allons ajouter un peu d’espace autour du contenu de notre module en appliquant les valeurs de padding suivantes :<\/p>\n
<\/p>\n
Ajoutez \u00e9galement des coins arrondis.<\/p>\n
<\/p>\n
Par d\u00e9faut, un effet d’animation est appliqu\u00e9 \u00e0 l’image du module Blurb. Nous allons supprimer cette animation dans les param\u00e8tres d’animation.<\/p>\n
<\/p>\n
Pour cr\u00e9er le design de l’onglet des t\u00e9moignages, nous allons devoir ajouter du code \u00e0 la fin de ce tutoriel. Pour nous y pr\u00e9parer, nous allons ajouter une ID CSS \u00e0 l’onglet avanc\u00e9 du module Blurb.<\/p>\n
<\/p>\n
Nous utilisons \u00e9galement deux lignes de code CSS dans l’onglet avanc\u00e9. L’une pour l’image du texte de pr\u00e9sentation et l’autre pour le titre du texte de pr\u00e9sentation.<\/p>\n
width : 25% !important ;<\/pre>\nmargin-top : 25px ;<\/pre>\n
<\/p>\n
Clonez le module Blurb trois fois<\/h3>\n
Une fois que vous avez termin\u00e9 le premier module Blurb, vous pouvez le cloner trois fois.<\/p>\n
<\/p>\n
Modifiez le contenu et les images<\/h4>\n
Veillez \u00e0 modifier le contenu et les images pour chaque module Blurb dupliqu\u00e9.<\/p>\n
<\/p>\n
Modifiez les couleurs d’arri\u00e8re-plan<\/h4>\n
Ainsi que les couleurs d’arri\u00e8re-plan.<\/p>\n
<\/p>\n
Et, bien s\u00fbr, les identifiants CSS. Utilisez une num\u00e9rotation cons\u00e9cutive.<\/p>\n
<\/p>\n
Passons \u00e0 la deuxi\u00e8me colonne. L\u00e0, le premier module dont nous avons besoin est un module de texte avec un caract\u00e8re de citation.<\/p>\n
<\/p>\n
Passez \u00e0 l’onglet de conception du module et modifiez les param\u00e8tres du texte comme suit :<\/p>\n
<\/p>\n
Repositionner le module \u00e9galement.<\/p>\n
<\/p>\n
Passons au module de texte suivant. Celui-ci sera d\u00e9di\u00e9 \u00e0 notre premier t\u00e9moignage. Le t\u00e9moignage que vous placez dans le champ de contenu doit correspondre au premier module Blurb de la colonne 1.<\/p>\n
<\/p>\n
Modifiez les param\u00e8tres du texte du module en cons\u00e9quence :<\/p>\n
<\/p>\n
Assurez-vous que la largeur est \u00e9galement r\u00e9gl\u00e9e sur \u00ab\u00a0100%\u00a0\u00bb.<\/p>\n
<\/p>\n
Ajoutez ensuite des valeurs de marge et de remplissage personnalis\u00e9es aux param\u00e8tres d’espacement.<\/p>\n
<\/p>\n
Et ajoutez un CSS ID \u00e0 l’onglet avanc\u00e9. Le num\u00e9ro figurant \u00e0 la fin de cet ID CSS doit correspondre au num\u00e9ro figurant \u00e0 la fin de l’ID CSS du module Blurb correspondant.<\/p>\n
<\/p>\n
Une fois que vous avez termin\u00e9 le premier module de texte de t\u00e9moignage, vous pouvez le cloner trois fois.<\/p>\n
<\/p>\n
Veillez \u00e0 modifier le contenu du t\u00e9moignage dans les modules dupliqu\u00e9s.<\/p>\n
<\/p>\n
Avec les identifiants CSS. Veillez \u00e0 suivre un ordre cons\u00e9cutif.<\/p>\n
<\/p>\n
Nous devons ajouter une classe CSS au t\u00e9moignage que nous voulons activer au d\u00e9but. Dans ce cas, c’est le premier.<\/p>\n
<\/p>\n
Maintenant que tous les \u00e9l\u00e9ments sont en place, il est temps de faire de la magie. Ajoutez un nouveau module de code juste en dessous du module de s\u00e9paration dans la premi\u00e8re rang\u00e9e de la section.<\/p>\n
<\/p>\n
Ins\u00e9rez les lignes suivantes de code CSS entre les balises de style<\/strong>, comme vous pouvez le voir dans l’\u00e9cran d’impression ci-dessous.<\/p>\n Ensuite, placez les lignes suivantes de code JQuery entre les balises de script<\/strong>, comme vous pouvez le voir dans l’\u00e9cran d’impression ci-dessous, et le tour est jou\u00e9 !<\/p>\n Maintenant que nous avons suivi toutes les \u00e9tapes, jetons un dernier coup d’\u0153il au r\u00e9sultat en fonction de la taille de l’\u00e9cran.<\/p>\n Dans cet article, nous vous avons montr\u00e9 comment cr\u00e9er un design de t\u00e9moignage interactif pour tout type de site Web que vous construisez. Plus pr\u00e9cis\u00e9ment, nous vous avons montr\u00e9 comment cr\u00e9er des onglets de t\u00e9moignage personnalis\u00e9s qui se d\u00e9clenchent lorsque quelqu’un survole l’un des modules Blurb sur la gauche. Vous avez \u00e9galement pu t\u00e9l\u00e9charger le fichier JSON gratuitement ! Si vous avez des questions ou des suggestions, n’h\u00e9sitez pas \u00e0 laisser un commentaire dans la section commentaire ci-dessous.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":" \u00a0 Pour de nombreuses entreprises, les t\u00e9moignages sont l’un des principaux arguments pour obtenir de nouveaux clients. Cela signifie qu’accorder un peu plus d’attention aux t\u00e9moignages sur votre site Web ne sera jamais inutile. Dans Divi, il existe de nombreuses fa\u00e7ons de partager des t\u00e9moignages, en utilisant le module Divi Testimonial par exemple. Mais si […]<\/p>\n","protected":false},"author":1,"featured_media":350310,"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-350309","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\/350309","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=350309"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/350309\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media\/350310"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media?parent=350309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/categories?post=350309"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/tags?post=350309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}.show-testimonial {\nvisibility : visible !important ;\nopacity : 1 !important ;\ntop : 0 !important ;\n}\n\n.testimonial-active {\ntransform : translateX(-10%) ;\n}\n\n[id*=\"testimonial-person\"]{\n-webkit-transition : all 0.5s ease ;\n-moz-transition : all 0.5s ease ;\n-o-transition : all 0.5s ease ;\n-ms-transition : all 0.5s ease ;\ntransition : all 0.5s ease ;\n\ncurseur : menu contextuel ;\n}\n\n[id*=\"testimonial-copy\"] {\n-webkit-transition : all 0.3s ease ;\n-moz-transition : all 0.3s ease ;\n-o-transition : all 0.3s ease ;\n-ms-transition : all 0.3s ease ;\ntransition : all 0.3s ease ;\n\nposition : absolute!important ;\ntop : -100px ;\nbottom : auto ;\nleft : 0 ;\nright : auto ;\n\nvisibilit\u00e9 : hidden ;\nopacit\u00e9 : 0 ;\n}<\/pre>\n
<\/p>\n
Ajouter le code JQuery<\/h4>\n
jQuery(function($){\n$(document).ready(function(){\n\n$('#testimonial-person-1').addClass('testimonial-active') ;\n\n$('[id*=\"testimonial-person\"]').hover(function() {\n\nvar $selector = $(this).attr('id').replace('person', 'copy') ;\nvar $testimonial = $('#' + $selector) ;\n\n$('[id*=\"testimonial-copy\"]').removeClass('show-testimonial') ;\n$testimonial.addClass('show-testimonial') ;\n\n$('[id*=\"testimonial-person\"]').removeClass('testimonial-active') ;\n$(this).addClass('testimonial-active') ;\n\n}) ;\n\n}) ;\n}) ;<\/pre>\n
<\/p>\n
Pr\u00e9visualisation<\/h2>\n
Bureau<\/h3>\n
<\/p>\n
Mobile<\/h3>\n
<\/p>\n
R\u00e9flexions finales<\/h2>\n