TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come aggiungere il widget delle testimonianze in Weebly?

0

Nel nostro articolo precedente abbiamo discusso su come aggiungere testimonianze in un modulo di scorrimento e in questo articolo discutiamo come aggiungere widget di testimonianze nel sito Weebly utilizzando semplici CSS. Spiegheremo due esempi simili uno con un colore semplice e l’altro con un colore più brillante.

Entrambi i widget hanno le seguenti caratteristiche:

  • Aggiungi a qualsiasi numero di pagine.
  • Completamente reattivo adattandosi automaticamente alla larghezza del dispositivo di visualizzazione.
  • Imposta come widget individuale o come pagina di testimonianze separata.
  • Aggiungi un numero illimitato di testimonianze.
  • Aggiungi in una o due colonne.

Come aggiungere il widget delle testimonianze in Weebly?

Entrambi i widget spiegati in questo articolo hanno foto degli utenti, quindi il primo passo è caricare le foto in “Tema > Modifica HTML / CSS > Risorse > Carica file…". Il percorso del file delle immagini caricate sarà Come:

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

Widget Testimonianze Semplici

Il semplice widget di testimonianze apparirà come sotto e puoi vedere la demo live qui. Può essere posizionato a tutta larghezza o in un layout a due colonne.

Come aggiungere il widget delle testimonianze in Weebly?

Il widget contiene le seguenti parti che vengono evidenziate anche in CSS utilizzando i commenti:

  • Il contenuto della testimonianza è definito utilizzando la classe ".tm-content"
  • La freccia giù è definita usando :after pseudo elemento “.tm-content:after"
  • Immagine, nome e titolo sono definiti utilizzando la classe “.tm-pic”
  • L’immagine è definita utilizzando la classe ".tm-pic photo"
  • Il nome è definito usando la classe “.tm-pic p:nth-child(2)”
  • Il titolo è definito usando la classe ".tm-pic p:nth-child(3)"

CSS per widget di testimonianze semplici

Aggiungi il seguente codice CSS nella sezione "Codice intestazione" della tua pagina Weebly. Il colore di sfondo della testimonianza è definito come #ebf3f5 che può essere cambiato in qualsiasi colore di cui hai bisogno.

<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 per widget di testimonianze semplici

Aggiungi il codice HTML sottostante all’interno di un elemento " Codice da incorporare " sostituendo il contenuto fittizio con il tuo. Il codice è per un singolo blocco di testimonianze che verrà mostrato a tutta larghezza e puoi aggiungere più testimonianze semplicemente aggiungendo il codice del blocco. Se vuoi mostrare le testimonianze in due colonne, usa gli elementi "Codice da incorporare" fianco a fianco e incolla il blocco di codice HTML all’interno.

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

Il secondo widget di testimonianze è simile al primo con colori più brillanti come mostrato di seguito. La differenza con questo widget è che il blocco di codici HTML verrà allineato automaticamente in un layout a due colonne senza la necessità di utilizzare più elementi "Embed Code". Di seguito è come apparirà:

Il widget contiene le seguenti parti che sono anche evidenziate in CSS con commenti:

  • Blocco singolo – Wrapper di testimonianze definito nella classe “.testimonial-wrap”
  • Contenuto – Contenuto della testimonianza definito nella classe “.testimonial”
  • Nome e titolo – Informazioni sulla testimonianza definite nella classe “.testimonial-info”
  • Foto – Immagine dell’utente definita nella classe “.headshot”
  • Freccia – Freccia giù definita nella classe “.arrow-down”

CSS per widget di testimonianze colorate

Aggiungi il seguente CSS nella sezione " Codice intestazione " della tua pagina Weebly, puoi anche aggiungerlo nel file "main_style.css" senza i tag affinché il codice sia efficace a livello di sito.

<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 per widget di testimonianze colorate

Di seguito è riportato il singolo blocco di testimonianze da aggiungere all’interno dell’elemento “Embed Code”. Se aggiungi più blocchi, le testimonianze verranno automaticamente allineate in un layout a due colonne. Non dimenticare di sostituire il contenuto fittizio con il tuo.

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

Si noti che le immagini utilizzate sono solo a scopo dimostrativo e non indicano utenti reali.

Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More