TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur lägger jag till testimonials -widget i Weebly?

2

I vår tidigare artikel hade vi diskuterat hur man lägger till vittnesmål i en skjutreglage och i den här artikeln låt oss diskutera hur man lägger till testimonials -widget i Weebly -webbplatsen med hjälp av enkel CSS. Vi kommer att förklara två liknande exempel ett med enkel färg och andra med mer ljus färg.

Båda widgetarna har följande funktioner:

  • Lägg till valfritt antal sidor.
  • Fullt lyhörd automatiskt anpassad till bredden på visningsenheten.
  • Konfigurera som en individuell widget eller som en separat testimonialsida.
  • Lägg till obegränsat antal vittnesmål.
  • Lägg till i en eller två kolumner.

Hur lägger jag till testimonials -widget i Weebly?

Båda widgetarna som förklaras i dessa artiklar har foton av användarna, därför är det första steget att ladda upp bilderna under "Tema> Redigera HTML / CSS > Tillgångar> Ladda upp filer …". Filvägen för de uppladdade bilderna kommer att vara tycka om:

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

Enkel testimonials -widget

Den enkla testimonials -widgeten kommer att se ut nedan och du kan se live -demo här. Den kan placeras som en hel bredd eller i en layout med två kolumner.

Hur lägger jag till testimonials -widget i Weebly?

Widgeten innehåller följande delar som också markeras i CSS med hjälp av kommentarer:

  • Vittnesinnehåll definieras med ".tm-content" -klassen
  • Nedåtpilen definieras med: efter pseudoelementet ".tm-content: after"
  • Bild, namn och titel definieras med klassen ".tm-pic"
  • Bilden definieras med klassen ".tm-pic photo"
  • Namnet definieras med klassen ".tm-pic p: nth-child (2)"
  • Titel definieras med klassen ".tm-pic p: nth-child (3)"

CSS för enkel testimonial -widget

Lägg till nedanstående CSS -kod under avsnittet "Rubrikkod" på din Weebly -sida. Vittnesbakgrundsfärgen definieras som #ebf3f5 som kan ändras till valfri färg efter behov.

<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 enkel testimonial -widget

Lägg till nedanstående HTML -kod i ett " Bädda in kod " -element genom att ersätta dummyinnehållet med ditt eget. Koden är för ett enda vittnesblock som visas i full bredd och du kan lägga till flera vittnesmål bara genom att lägga till blockkoden. Om du vill visa vittnesmålen i två kolumner använder du elementen "Bädda in kod" sida vid sida och klistrar in HTML -kodblocket inuti.

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

Färgglada testimonials -widget

Den andra testimonials -widgeten liknar den första med fler ljusa färger som visas nedan. Skillnaden med denna widget är att blocket med HTML -koder automatiskt justeras i en tvåkolumnlayout utan att behöva använda flera "Bädda in kod" -element. Nedan är hur det kommer att se ut:

Widgeten innehåller följande delar som också markeras i CSS med kommentarer:

  • Enkelt block-Testimonial-omslag definierat i klassen ".testimonial-wrap"
  • Innehåll – Vittnesinnehåll definierat i klassen ".testimonial"
  • Namn och titel-Testimonial Info definierad i klassen ".testimonial-info"
  • Foto – Bild på användaren definierad i klassen ".headshot"
  • Pil-Nedåtpilen definierad i klassen ".pil ned"

CSS för Colorful Testimonial Widget

Lägg till nedanstående CSS under avsnittet " Rubrikkod " på din Weebly -sida, du kan också lägga till detta under "main_style.css" -filen utan att taggarna för att koden ska vara effektiv på webbplatsnivå.

<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 färgrik testimonial -widget

Nedan finns det enda testimonialblocket som ska läggas till i elementet "Bädda in kod". Om du lägger till flera block justeras vittnesmålen automatiskt i en tvåkolumnlayout. Glöm inte att ersätta dummyinnehållet med ditt eget.

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

Observera att bilderna som används endast är avsedda för demo och inte anger riktiga användare.

Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer