TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment ajouter un widget de témoignages dans Weebly ?

0

Dans notre article précédent, nous avions discuté de la façon d’ ajouter des témoignages sous forme de curseur et dans cet article, discutons de la façon d’ajouter un widget de témoignages dans le site Weebly à l’aide de CSS simple. Nous expliquerons deux exemples similaires, l’un avec une couleur simple et l’autre avec une couleur plus vive.

Les deux widgets ont les fonctionnalités suivantes :

  • Ajouter à n’importe quel nombre de pages.
  • Entièrement réactif s’adaptant automatiquement à la largeur de l’appareil de visualisation.
  • Configurez en tant que widget individuel ou en tant que page de témoignage distincte.
  • Ajoutez un nombre illimité de témoignages.
  • Ajouter dans une seule ou deux colonnes.

Comment ajouter un widget de témoignages dans Weebly ?

Les deux widgets expliqués dans cet article contiennent des photos des utilisateurs. Par conséquent, la première étape consiste à télécharger les photos sous « Thème > Modifier HTML / CSS > Éléments > Télécharger le(s) fichier(s)… ». Le chemin du fichier des images téléchargées sera Comme:

http://your-site-name.com/files/theme/testimonial-image1.jpg

Widget de témoignages simples

Le widget de témoignages simple ressemblera à ci-dessous et vous pouvez voir la démo en direct ici. Il peut être placé en pleine largeur ou dans une disposition à deux colonnes.

Comment ajouter un widget de témoignages dans Weebly ?

Le widget contient les parties suivantes qui sont également mises en évidence dans CSS à l’aide de commentaires :

  • Le contenu des témoignages est défini à l’aide de la classe « .tm-content »
  • La flèche vers le bas est définie à l’aide du pseudo-élément :after ".tm-content:after"
  • L’image, le nom et le titre sont définis à l’aide de la classe « .tm-pic »
  • L’image est définie à l’aide de la classe « .tm-pic photo »
  • Le nom est défini à l’aide de la classe ".tm-pic p:nth-child(2)"
  • Le titre est défini à l’aide de la classe ".tm-pic p:nth-child(3)"

CSS pour widget de témoignage simple

Ajoutez le code CSS ci-dessous dans la section "Code d’en-tête" de votre page Weebly. La couleur de fond du témoignage est définie comme #ebf3f5 qui peut être changée en n’importe quelle couleur selon vos besoins.

<style type="text/css"> /* Testimonial Content */ .tm-content { background: #ebf3f5; padding: 15px 20px 5px 15px; border-radius: 5px; margin-bottom: 30px; } /* Down Arrow */ .tm-content:after { content: ''; width: 0px; height: 0px; border-style: solid; border-width: 20px 18px 0 18px; border-color: #ebf3f5 transparent transparent transparent; position: relative; top: 37px; left: 20px; } /* Picture, Name and Title */ .tm-pic { margin-left: 25px; margin-bottom: 80px; } /* Testimonial Picture */ .tm-pic .photo { background-color: #ccc; border-radius: 100px; width: 60px; height: 60px; float: left; margin-right: 10px; } /* Name and Title Paragraph*/ .tm-pic p { position: relative; top: 5px; text-transform: uppercase; line-height:30px; } /* Name */ .tm-pic p:nth-child(2) { font-size: 16px; font-weight: 600; margin-bottom: 0; } /* Title */ .tm-pic p:nth-child(3) { font-size: 14px; color: #777; } </style>

HTML pour widget de témoignage simple

Ajoutez le code HTML ci-dessous dans un élément " Embed Code " en remplaçant le contenu factice par le vôtre. Le code est pour un seul bloc de témoignages qui sera affiché en pleine largeur et vous pouvez ajouter plusieurs témoignages simplement en ajoutant le code du bloc. Si vous souhaitez afficher les témoignages sur deux colonnes, utilisez les éléments « Intégrer le code » côte à côte et collez le bloc de code HTML à l’intérieur.

<div class="tm-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices, elit sed faucibus pharetra, diam mauris bibendum orci, sit amet ullamcorper purus dui sit amet augue. Donec aliquet diam ut neque mattis, eu tristique sem rutrum.</p> </div> <div class="tm-pic"> <div class="photo"><img src="https://img.webnots.com/2015/08/Testimonial3.jpg" width=60px height=60px> </div> <p>Diana Mary</p> <p>Important person, some Company</p> </div>

Widget de témoignages colorés

Le deuxième widget de témoignages est similaire au premier avec des couleurs plus vives, comme indiqué ci-dessous. La différence avec ce widget est que le bloc de codes HTML sera automatiquement aligné dans une disposition à deux colonnes sans qu’il soit nécessaire d’utiliser plusieurs éléments « Embed Code ». Voici à quoi cela ressemblera :

Le widget contient les parties suivantes qui sont également mises en évidence en CSS avec des commentaires :

  • Bloc unique – Emballage de témoignage défini dans la classe « .testimonial-wrap »
  • Contenu – Contenu de témoignage défini dans la classe « .testimonial »
  • Nom et titre – Informations sur le témoignage définies dans la classe « .testimonial-info »
  • Photo – Photo de l’utilisateur défini dans la classe « .headshot »
  • Flèche – Flèche vers le bas définie dans la classe « .arrow-down »

CSS pour widget de témoignage coloré

Ajoutez le CSS ci-dessous sous la section " Code d’en-tête " de votre page Weebly, vous pouvez également l’ajouter sous le fichier " main_style.css " sans les balises pour que le code soit efficace au niveau du site.

<style type="text/css"> /* Testimonial Wrapper */ .testimonial-wrap { padding:30px; float:left; } /* Testimonial Content */ .testimonial { background:#54acd2; color:#fff; font-size:32px; padding:20px; width:400px; font-family:nixie one; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } /* Testimonial Info - Name and Title */ .testimonial-info { font-family:sans-serif; font-weight:bold; margin-top:25px; float:left; } .testimonial-info h4 { font-size:18px; margin:5px auto; color:#333; text-transform:uppercase; } .testimonial-info h4 span{ font-size:18px; margin:5px auto; color:#999; text-transform:none; } .testimonial-info p { font-size:14px; color:#df0a81; margin:0px; } /* Testimonial image */ .headshot { width:100px; height:100px; background:#333; float:left; color:#fff; margin-top:10px; border:3px solid #ccc; margin-right:20px; -webkit-border-radius: 100px; border-radius: 100px; overflow:hidden; } .headshot img{ width:100%; height:100%; } /* Down Arrow */ .arrow-down { width: 0; height: 0; margin-left:35px; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #54acd2; } </style>

HTML pour widget de témoignage coloré

Vous trouverez ci-dessous le bloc de témoignage unique à ajouter à l’intérieur de l’élément « Code d’intégration ». Si vous ajoutez plusieurs blocs, les témoignages seront automatiquement alignés dans une disposition à deux colonnes. N’oubliez pas de remplacer le contenu factice par le vôtre.

<div class="testimonial-wrap"> <div class="testimonial"> "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices, elit sed faucibus pharetra." </div> <div class="arrow-down"></div> <div class="headshot"> <img src="https://img.webnots.com/2015/08/Testimonial3.jpg"></div> <div class="testimonial-info"> <h4>Principal Van Kirk</h4> <p>Finger Lakes Christian School</p> </div> </div>

Notez que les images utilisées sont uniquement à des fins de démonstration et n’indiquent pas de vrais utilisateurs.

Source d’enregistrement: webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails