TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan legge til testimonials -widget i Weebly?

0

I vår forrige artikkel hadde vi diskutert hvordan du legger til attester i en glidebryterform, og i denne artikkelen la oss diskutere hvordan du legger til testimonials -widget i Weebly -området ved hjelp av enkel CSS. Vi vil forklare to lignende eksempler, det ene med enkel farge og det andre med mer lys farge.

Begge widgetene har følgende funksjoner:

  • Legg til et hvilket som helst antall sider.
  • Fullstendig lydhør automatisk tilpasning til bredden på visningsenheten.
  • Oppsett som en individuell widget eller som en egen vitnemålsside.
  • Legg til ubegrenset antall attester.
  • Legg til i en enkelt eller to kolonne.

Hvordan legge til testimonials -widget i Weebly?

Begge widgetene forklart i denne artikkelen har bilder av brukerne, derfor er det første trinnet å laste opp bildene under "Tema> Rediger HTML / CSS > Eiendeler> Last opp fil (er) …". Filbanen til de opplastede bildene vil være som:

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

Enkel testimonials -widget

Den enkle testimonials -widgeten vil se ut som nedenfor, og du kan se live -demoen her. Den kan plasseres i full bredde eller i et to -kolonne -oppsett.

Hvordan legge til testimonials -widget i Weebly?

Widgeten inneholder følgende deler som også er uthevet i CSS ved hjelp av kommentarer:

  • Vitnemålsinnhold er definert ved hjelp av ".tm-content" -klassen
  • Nedoverpilen er definert med: etter pseudo-elementet ".tm-content: after"
  • Bilde, navn og tittel er definert med ".tm-pic" klasse
  • Bilde er definert ved hjelp av klassen ".tm-pic photo"
  • Navnet er definert ved hjelp av klassen ".tm-pic p: nth-child (2)"
  • Tittelen er definert ved hjelp av klassen ".tm-pic p: nth-child (3)"

CSS for Simple Testimonial Widget

Legg til CSS -koden nedenfor under "Header Code" på Weebly -siden din. Bakgrunnsfargen på attesten er definert som #ebf3f5 som kan endres til hvilken som helst farge du trenger.

<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 for Simple Testimonial Widget

Legg til HTML -koden nedenfor i et " Embed Code " -element ved å erstatte dummyinnholdet med ditt eget. Koden er for en enkelt attestblokk som vises i full bredde, og du kan legge til flere attester bare ved å legge til blokkoden. Hvis du vil vise vitnesbyrdene i to kolonner, kan du bruke "Integrer kode" -elementer side om side og lime inn HTML -kodeblokken inne.

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

Fargerik testimonials -widget

Den andre testimonials -widgeten ligner den første med flere lyse farger som vist nedenfor. Forskjellen med denne widgeten er at blokken med HTML -koder automatisk justeres i et to -kolonneoppsett uten at du trenger å bruke flere "Embed Code" -elementer. Nedenfor ser du hvordan det vil se ut:

Widgeten inneholder følgende deler som også er uthevet i CSS med kommentarer:

  • Enkel blokk-Testimonial wrapper definert i klassen ".testimonial-wrap"
  • Innhold – Vitnemålsinnhold definert i klassen ".testimonial"
  • Navn og tittel-Vitnemålsinformasjon definert i klassen ".testimonial-info"
  • Foto – Bilde av brukeren definert i klassen ".headshot"
  • Pil-pil ned definert i klassen ".pil ned"

CSS for Colorful Testimonial Widget

Legg til CSS nedenfor under " Header Code " -delen på Weebly -siden din. Du kan også legge til denne under "main_style.css" -filen uten kodene for at koden skal være effektiv på nettstednivå.

<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 for Colorful Testimonial Widget

Nedenfor er den eneste attestblokken som skal legges til i "Embed Code" -elementet. Hvis du legger til flere blokker, blir vitnesbyrdene automatisk justert i et to -kolonneoppsett. Ikke glem å erstatte dummyinnholdet 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>

Vær oppmerksom på at bildene som brukes bare er for demoformål og ikke indikerer ekte brukere.

Opptakskilde: webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon