TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka lisätä Suosittelut -widget Weeblyyn?

0

Edellisessä artikkelissamme olimme keskustelleet suosittelujen lisäämisestä liukusäätimellä ja tässä artikkelissa keskustelemme siitä, miten suosituswidgetin lisääminen Weebly -sivustolle yksinkertaisen CSS: n avulla. Selitämme kaksi samanlaista esimerkkiä, joista toinen on yksinkertainen ja toinen kirkkaampi.

Molemmilla widgeteillä on seuraavat ominaisuudet:

  • Lisää mihin tahansa määrään sivuja.
  • Täysin reagoiva, automaattisesti sopiva katselulaitteen leveyteen.
  • Asenna yksittäiseksi widgetiksi tai erilliseksi suosittelusivuksi.
  • Lisää rajoittamaton määrä suositteluja.
  • Lisää yksi tai kaksi saraketta.

Kuinka lisätä Suosittelut -widget Weeblyyn?

Molemmissa tässä artikkelissa selitetyissä widgeteissä on kuvia käyttäjistä, joten ensimmäinen askel on ladata valokuvat kohtaan "Teema> Muokkaa HTML / CSS > Resurssit> Lähetä tiedosto (t) …". Ladattujen kuvien tiedostopolku on Kuten:

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

Yksinkertainen suosittelut -widget

Yksinkertaiset suosittelut -widget näyttävät alla ja voit katsoa live -esittelyn täältä. Se voidaan sijoittaa täysleveänä tai kaksisarakkeisena.

Kuinka lisätä Suosittelut -widget Weeblyyn?

Widget sisältää seuraavat osat, jotka on myös korostettu CSS: ssä kommenttien avulla:

  • Suosittelusisältö määritellään käyttämällä .tm-content-luokkaa
  • Alanuoli määritetään käyttämällä: pseudoelementin jälkeen ".tm-content: after"
  • Kuva, nimi ja otsikko määritetään käyttämällä .tm-pic-luokkaa
  • Kuva määritetään käyttämällä .tm-pic photo -luokkaa
  • Nimi määritetään luokan .tm-pic p: n. Lapsi (2) avulla
  • Otsikko määritellään luokan .tm-pic p: n. Lapsi (3) avulla

CSS yksinkertaiselle suositteluvidgetille

Lisää alla oleva CSS -koodi Weebly -sivusi Otsikkokoodi -osioon. Suosituksen taustaväri on #ebf3f5, joka voidaan muuttaa mihin tahansa väriin tarpeen mukaan.

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

Lisää alla oleva HTML -koodi Upota koodi -elementtiin korvaamalla nuken sisältö omalla. Koodi on tarkoitettu yhdelle suosituslohkolle, joka näytetään koko leveydellä, ja voit lisätä useita suositteluja vain lisäämällä estokoodin. Jos haluat näyttää suositukset kahdessa sarakkeessa, käytä Upota koodi -elementtejä vierekkäin ja liitä HTML -koodilohko sisään.

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

Värikäs suosittelut -widget

Toinen suositteluvidget on samanlainen kuin ensimmäinen, ja siinä on enemmän kirkkaita värejä, kuten alla on esitetty. Ero tässä widgetissä on se, että HTML -koodilohko tasataan automaattisesti kahden sarakkeen asettelussa ilman tarvetta käyttää useita "Upota koodi" -elementtejä. Alla on, miltä se näyttää:

Widget sisältää seuraavat osat, jotka on myös korostettu CSS: ssä kommenttien kanssa:

  • Yksittäinen lohko-".testimonial-wrap" -luokassa määritelty suosittelukääre
  • Sisältö – ".testimonial" -luokassa määritelty suosittelusisältö
  • Nimi ja titteli-suosittelutiedot, jotka on määritelty luokassa .testimonial-info
  • Valokuva – ".headshot" -luokassa määritellyn käyttäjän kuva
  • Nuoli-".arrow-down" -luokassa määritetty alanuoli

CSS värikkäille suositteluvidgetille

Lisää alla CSS alla " ylätunnistekoodi ” osiossa Weebly sivulla voit myös lisätä tämän alle “main_style.css” tiedosto ilman tunnisteet koodin olisi tehokas alueiden tasolla.

<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 värikkäitä suositteluvidgettejä varten

Alla on yksittäinen suosituslohko, joka lisätään "Upota koodi" -elementtiin. Jos lisäät useita lohkoja, suosittelut kohdistetaan automaattisesti kahden sarakkeen asetteluun. Älä unohda korvata nuken sisältöä omalla.

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

Huomaa, että käytetyt kuvat ovat vain esittelyä varten eivätkä osoita todellisia käyttäjiä.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja