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

Kuinka lisätä aikajana -widget Weebly -sivustoon?

1

Aikajana auttaa kuvaamaan yhteenvetoa tarinoista, jotka tapahtuivat ajanjakson aikana. Sitä voidaan käyttää esimerkiksi virstanpylväskaavion kaltaisena. Bootstrap on suosittu käyttöliittymä, jonka avulla voit luoda reagoivan aikajana -widgetin, joka voidaan lisätä Weebly -sivustoosi. Tässä artikkelissa kerromme, miten aikajana -widget lisätään Weebly -sivustoon, jotta voidaan esitellä tapahtumavirta viime vuosien aikana.

Alla on, miltä Bootstrap -aikajana -widget näyttää.

  • 2015

    Aikajana Tapahtuma 5

    Tässä on aikajanasi tapahtuman sisältö. Kirjoita pieni kappale kuvataksesi tapahtumaa yksityiskohtaisesti.

  • 2014

    Aikajana Tapahtuma 4

    Tässä on aikajanasi tapahtuman sisältö. Kirjoita pieni kappale kuvataksesi tapahtumaa yksityiskohtaisesti.

  • 2013

    Aikajana Tapahtuma 3

    Tässä on aikajanasi tapahtuman sisältö. Kirjoita pieni kappale kuvataksesi tapahtumaa yksityiskohtaisesti.

  • 2012

    Aikajana Tapahtuma 2

    Tässä on aikajanasi tapahtuman sisältö. Kirjoita pieni kappale kuvataksesi tapahtumaa yksityiskohtaisesti.

  • 2011

    Aikajana Tapahtuma 1

    Tässä on aikajanasi tapahtuman sisältö. Kirjoita pieni kappale kuvataksesi tapahtumaa yksityiskohtaisesti.

  • Bootstrap -kehyksen innoittamana ja muokattu sopivaksi Weebly -sivustolla.

  • Täysin reagoiva kaikilla laitteilla.

  • Tapahtuman otsikoiden ja sisällön väri voidaan räätälöidä tarpeidesi mukaan.

  • Nimikkeiden ja sisällön kirjasinkoko ja paino voidaan räätälöidä tarpeen mukaan.

Yllä oleva demo näyttää vuosia ja tapahtumia esimerkkinä. voit muuttaa sisällön mihin tahansa, jonka haluat esitellä.

Lisää aikajana -widget Weebly -sivustoon

Aikajana -widget tarvitsee kaksi osaa – CSS: n ja HTML: n, et tarvitse JavaScriptiä tälle widgetille. CSS: n ja HTML: n lisääminen Weeblyyn on erittäin helppoa.

  • Lisää widgetille CSS -koodi
  • Lisää widgetille HTML -koodi

CSS: n lisääminen aikajana -widgetille

Sinun ei todellakaan tarvitse käyttää koko Bootstrap CSS -tiedostoa. Tarvitset vain widget -koodin alla kuvatulla tavalla. On monia tapoja lisätä CSS Weebly -sivustoosi. Paras tapa lisätä koko sivusto on liittää alla oleva koodi main.less -tiedostoon.

Siirry "Teemat" -välilehdelle ja napsauta " Muokkaa HTML / CSS " -painiketta vasemmassa alakulmassa. Tämä vie sinut Weebly -koodieditoriin. Etsi "main.less" -tiedosto "Tyylit" -osiosta ja liitä tämä koodi olemassa olevan koodin alareunaan. Tallenna muutokset ja poistu koodieditorista.

.tl { position: relative; padding: 20px 0 20px; list-style: none; } .tl:before { content: " "; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background-color: #eeeeee; } .tl > li { position: relative; margin-bottom: 20px; list-style-type: none !important; } .tl > li:before, .tl > li:after { content: " "; display: table; } .tl > li:after { clear: both; } .tl > li:before, .tl > li:after { content: " "; display: table; } .tl > li:after { clear: both; } .tl > li > .tl-panel { float: left; position: relative; width: 40%; padding: 20px; border: 1px solid #d4d4d4; border-radius: 5px; -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.175); box-shadow: 0 1px 6px rgba(0,0,0,0.175); } .tl-body { font-size: 18px; line-height: 26px; color: rgba(121, 112, 112, 0.71); } .tl > li > .tl-panel:before { content: " "; display: inline-block; position: absolute; top: 26px; right: -15px; border-top: 15px solid transparent; border-right: 0 solid #ccc; border-bottom: 15px solid transparent; border-left: 15px solid #ccc; } .tl > li > .tl-panel:after { content: " "; display: inline-block; position: absolute; top: 27px; right: -14px; border-top: 14px solid transparent; border-right: 0 solid #fff; border-bottom: 14px solid transparent; border-left: 14px solid #fff; } .tl > li > .tl-badge { z-index: 1; position: absolute; top: 16px; left: 50%; width: 50px; height: 50px; margin-left: -25px; border-radius: 50% 50% 50% 50%; text-align: center; font-size: 1.4em; line-height: 50px; color: #fff; background-color: #999999; } .tl > li.tl-inverted > .tl-panel { float: right; } .tl > li.tl-inverted > .tl-panel:before { right: auto; left: -15px; border-right-width: 15px; border-left-width: 0; } .tl > li.tl-inverted > .tl-panel:after { right: auto; left: -14px; border-right-width: 14px; border-left-width: 0; } .tl-badge { font-size: 18px !important; font-weight: bold; } .tl-badge.primary { background-color: #2e6da4 !important; } .tl-badge.success { background-color: #3f903f !important; } .tl-badge.warning { background-color: #f0ad4e !important; } .tl-badge.danger { background-color: #d9534f !important; } .tl-badge.info { background-color: #5bc0de !important; } .tl-title { margin-top: 0; margin-bottom: 10px; color: rgba(45, 45, 72, 0.44); font-size: 20px; } @media screen and (max-width: 380px) { .tl > li > .tl-panel { width:25% !important; } } @media screen and (max-width: 800px) { .tl > li > .tl-panel { width:33%; } }

HTML -koodin lisääminen

Valitse sivu Sivut -välilehdestä ja siirry sisältöalueelle, johon haluat lisätä aikajanan. Vedä ja pudota Upota koodi -elementti ja liitä alla oleva HTML -koodi upotuskoodin elementin sisään.

<ul class="tl"> <li> <div class="tl-badge success">2015</div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> <li class="tl-inverted"> <div class="tl-badge warning">2014</div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> <li> <div class="tl-badge danger">2013</div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> <li class="tl-inverted"> <div class="tl-badge">2012</div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> <li> <div class="tl-badge info">2011</div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> </ul>

Aikajana -widgetin mukauttaminen

Kuten näette, HTML-osa on itsestään selvä ja sisältää kolme yksinkertaista osaa:

  • Merkki – vuosi.
  • Otsikko – otsikon aikajanan tapahtuma.
  • Runko – tapahtuman kuvaus.

Korvaa tyhjä sisältö omalla sisällölläsi.

Kun siirrytään CSS -osaan, voit käyttää joitain alla olevista ehdotuksista säätääksesi widgetin oikein työpöydällä ja mobiililaitteilla.

  • Pohjimmiltaan Bootstrap -luokkia käytetään määrittämään vuoden värit. Esimerkiksi ".tl-badge.success" -taustan taustaväri on vihreä osoittamaan menestystä (#3f903f). Voit muuttaa näiden luokkien värit (ensisijainen, menestys, varoitus, vaara ja tiedot) haluamallesi värille.
  • Muita ominaisuuksia, kuten taustaväriä, kirjasinkokoa, väriä ja varjoa, voidaan säätää tarpeen mukaan.
  • Suurin ongelma, jonka saatat kohdata, kun asetat widgetin Weebly -sivustoon, on se, että aikajanalaatikko on kohdistettu keskiviivaan. Etsi luokka ".tl> li> .tl-paneeli" ja nykyinen leveys määritellään "40%" sopivaksi tälle sivulle. Saatat joutua lisäämään tai pienentämään leveyttä asettelun mukaan, jotta se kohdistuu keskiviivaan.
  • Olemme käyttäneet @media CSS -sääntöä iPadin leveyden säätämiseen (max-width: 800px). Aikajana -widgetin leveydeksi on asetettu "33%”. Voit säätää tätä mediakyselyä ja leveyttä paremman kohdistuksen saavuttamiseksi iPadissa.
  • Samoin iPhonessa ja muissa mobiililaitteissa mediakysely (max-width: 380px) päättää aikajanan leveydeksi "25%". Voit myös säätää tätä tarpeen mukaan.

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