TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie füge ich das Testimonials-Widget in Weebly hinzu?

0

In unserem vorherigen Artikel hatten wir besprochen, wie Sie Testimonials in einem Slider-Formular hinzufügen und in diesem Artikel diskutieren wir, wie Sie das Testimonials-Widget in der Weebly-Site mit einfachem CSS hinzufügen. Wir werden zwei ähnliche Beispiele erklären, eines mit einfacher Farbe und das andere mit hellerer Farbe.

Beide Widgets haben die folgenden Funktionen:

  • Zu beliebig vielen Seiten hinzufügen.
  • Voll ansprechende automatische Anpassung an die Breite des Anzeigegeräts.
  • Einrichtung als individuelles Widget oder als separate Testimonial-Seite.
  • Fügen Sie eine unbegrenzte Anzahl von Testimonials hinzu.
  • Fügen Sie eine oder zwei Spalten hinzu.

Wie füge ich das Testimonials-Widget in Weebly hinzu?

Beide Widgets, die in diesem Artikel erklärt werden, enthalten Fotos der Benutzer, daher ist der erste Schritt, die Fotos unter „Theme > HTML / CSS bearbeiten > Assets > Datei(en) hochladen …” hochzuladen. Der Dateipfad der hochgeladenen Bilder lautet mögen:

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

Einfaches Testimonials-Widget

Das einfache Testimonials-Widget sieht wie folgt aus und Sie können die Live-Demo hier ansehen. Es kann in voller Breite oder in einem zweispaltigen Layout platziert werden.

Wie füge ich das Testimonials-Widget in Weebly hinzu?

Das Widget enthält folgende Teile, die auch in CSS durch Kommentare hervorgehoben werden:

  • Testimonial-Inhalte werden mit der Klasse „.tm-content” definiert
  • Der Abwärtspfeil wird mit dem :after-Pseudoelement „.tm-content:after” definiert.
  • Bild, Name und Titel werden mit der Klasse „.tm-pic” definiert
  • Das Bild wird mit der Klasse „.tm-pic photo” definiert
  • Der Name wird mit der Klasse „.tm-pic p:nth-child(2)” definiert
  • Der Titel wird mit der Klasse „.tm-pic p:nth-child(3)” definiert

CSS für einfaches Testimonial-Widget

Fügen Sie den folgenden CSS- Code im Abschnitt "Header-Code" Ihrer Weebly-Seite hinzu. Die Hintergrundfarbe des Testimonials ist als #ebf3f5 definiert, die nach Bedarf in jede beliebige Farbe geändert werden kann.

<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 für einfaches Testimonial-Widget

Fügen Sie den folgenden HTML-Code in ein " Embed Code "-Element ein, indem Sie den Dummy-Inhalt durch Ihren eigenen ersetzen. Der Code ist für einen einzelnen Testimonials-Block, der in voller Breite angezeigt wird, und Sie können mehrere Testimonials hinzufügen, indem Sie einfach den Blockcode anhängen. Wenn Sie die Testimonials in zwei Spalten anzeigen möchten, verwenden Sie „Embed Code”-Elemente nebeneinander und fügen Sie den HTML-Codeblock darin ein.

<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>

Buntes Testimonials-Widget

Das zweite Testimonials-Widget ähnelt dem ersten mit leuchtenderen Farben, wie unten gezeigt. Der Unterschied zu diesem Widget besteht darin, dass der Block von HTML-Codes automatisch in einem zweispaltigen Layout ausgerichtet wird, ohne dass mehrere „Embed Code”-Elemente verwendet werden müssen. Unten ist, wie es aussehen wird:

Das Widget enthält folgende Teile, die auch in CSS mit Kommentaren hervorgehoben werden:

  • Einzelblock – Testimonial-Wrapper, der in der Klasse „.testimonial-wrap” definiert ist
  • Inhalt – Testimonial-Inhalt, der in der Klasse „.testimonial” definiert ist
  • Name und Titel – Testimonial-Info definiert in der Klasse „.testimonial-info”
  • Foto – Bild des in der Klasse „.headshot” definierten Benutzers
  • Pfeil – Pfeil nach unten, der in der Klasse „.arrow-down” definiert ist

CSS für farbenfrohes Testimonial-Widget

Fügen Sie das unten stehende CSS im Abschnitt " Header Code " Ihrer Weebly-Seite hinzu. Sie können dies auch in der Datei "main_style.css" ohne die Tags hinzufügen, damit der Code auf Site-Ebene wirksam ist.

<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 für farbenfrohes Testimonial-Widget

Unten sehen Sie den einzelnen Testimonial-Block, der im Element „Einbettungscode” hinzugefügt werden soll. Wenn Sie mehrere Blöcke hinzufügen, werden die Testimonials automatisch in einem zweispaltigen Layout ausgerichtet. Vergessen Sie nicht, den Dummy-Inhalt durch Ihren eigenen zu ersetzen.

<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>

Beachten Sie, dass die verwendeten Bilder nur zu Demozwecken dienen und keine echten Benutzer darstellen.

Aufnahmequelle: webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen