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

Come aggiungere un widget Timeline nel sito Weebly?

10

Timeline aiuta a descrivere il riassunto delle storie accadute nel periodo di tempo. Può essere usato qualcosa come un grafico pietra miliare. Bootstrap è un popolare framework frontend che consente di creare widget di timeline reattivi che possono essere inseriti nel tuo sito Weebly. In questo articolo spiegheremo come aggiungere il widget della timeline nel sito Weebly per mostrare il flusso di eventi accaduti negli ultimi anni.

Di seguito è riportato come apparirà il widget della timeline di Bootstrap.

  • 2015

    Evento cronologico 5

    Ecco il contenuto per il tuo evento sulla timeline. Inserisci un piccolo paragrafo per descrivere l’evento in dettaglio.

  • 2014

    Cronologia Evento 4

    Ecco il contenuto per il tuo evento sulla timeline. Inserisci un piccolo paragrafo per descrivere l’evento in dettaglio.

  • 2013

    Cronologia Evento 3

    Ecco il contenuto per il tuo evento sulla timeline. Inserisci un piccolo paragrafo per descrivere l’evento in dettaglio.

  • 2012

    Cronologia Evento 2

    Ecco il contenuto per il tuo evento sulla timeline. Inserisci un piccolo paragrafo per descrivere l’evento in dettaglio.

  • 2011

    Cronologia Evento 1

    Ecco il contenuto per il tuo evento sulla timeline. Inserisci un piccolo paragrafo per descrivere l’evento in dettaglio.

  • Ispirato al framework Bootstrap e modificato per adattarsi al sito Weebly.

  • Completamente reattivo su tutti i dispositivi.

  • Il colore dei titoli e dei contenuti degli eventi può essere personalizzato secondo le tue necessità.

  • La dimensione del carattere e il peso dei titoli e del contenuto possono essere personalizzati in base alle tue esigenze.

La demo sopra mostra gli anni e gli eventi come esempio. puoi modificare il contenuto in qualsiasi cosa tu voglia mostrare.

Aggiungi widget Timeline nel sito Weebly

Il widget della timeline ha bisogno di due componenti: CSS e HTML, non è necessario alcun JavaScript per questo widget. Aggiungere CSS e HTML nel tuo Weebly è un compito molto semplice.

  • Aggiungi codice CSS per il widget
  • Aggiungi codice HTML per il widget

Aggiunta di CSS per il widget Timeline

In realtà non è necessario utilizzare il file CSS completo di Bootstrap. Hai solo bisogno del codice del widget come indicato di seguito. Ci sono molti modi per aggiungere CSS nel tuo sito Weebly. Il modo migliore per aggiungere l’intero sito è incollare il codice seguente nel file "main.less".

Vai alla scheda "Temi" e fai clic sul pulsante " Modifica HTML / CSS " nell’angolo in basso a sinistra. Questo ti porterà all’editor di codice Weebly. Trova il file "main.less" nella sezione "Stili" e incolla questo codice nella parte inferiore del codice esistente. Salva le modifiche ed esci dall’editor del codice.

.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%; } }

Aggiunta di codice HTML

Scegli la pagina nella scheda "Pagine" e vai all’area del contenuto in cui desideri aggiungere la sequenza temporale. Trascina e rilascia un elemento " Codice di incorporamento " e incolla il codice HTML sottostante all’interno dell’elemento del codice di incorporamento.

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

Personalizzazione del widget Timeline

Come puoi vedere, la parte HTML è autoesplicativa e contiene tre semplici componenti:

  • Badge – che indica l’anno.
  • Titolo: intestazione dell’evento della sequenza temporale.
  • Corpo – la descrizione dell’evento.

Sostituisci il contenuto fittizio con il tuo contenuto.

Venendo alla parte CSS, puoi utilizzare alcuni dei suggerimenti seguenti per regolare correttamente il widget su desktop e dispositivi mobili.

  • Fondamentalmente le classi Bootstrap vengono utilizzate per definire i colori per l’anno. Ad esempio, ".tl-badge.success" ha il colore di sfondo verde per indicare il successo (#3f903f). Puoi cambiare i colori di queste classi (primaria, successo, avvertimento, pericolo e informazioni) con il colore che preferisci.
  • Altri attributi come il colore di sfondo, la dimensione del carattere, il colore e l’ombra possono essere regolati secondo necessità.
  • Il problema principale che potresti incontrare quando posizioni il widget nel sito Weebly è che l’allineamento della casella della timeline con riferimento alla linea centrale. Cerca la classe ".tl > li > .tl-panel" e la larghezza corrente è definita come "40%" per adattarsi a questa pagina. Potrebbe essere necessario aumentare o diminuire la larghezza in base al layout per allinearsi con la linea centrale.
  • Abbiamo usato la regola CSS @media per regolare la larghezza su iPad con (larghezza massima: 800 px). La larghezza del widget della timeline è impostata su "33%". Puoi regolare questa query multimediale e la larghezza per un migliore allineamento su iPad.
  • Allo stesso modo su iPhone e altri dispositivi mobili, la query multimediale (larghezza massima: 380 px) determina la larghezza della sequenza temporale come "25%". Puoi regolare questo anche secondo le tue necessità.

Fonte di registrazione: www.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