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

Hur lägger jag till tidslinje -widget på Weebly -webbplatsen?

1

Tidslinjen hjälper till att beskriva sammanfattningen av historier som hänt under tiden. Det kan användas ungefär som ett milstolpsdiagram. Bootstrap är ett populärt frontend -ramverk som gör det möjligt att skapa en responsiv tidslinje -widget som kan infogas på din Weebly -webbplats. I den här artikeln kommer vi att förklara hur du lägger till tidslinje -widget på Weebly -webbplatsen för att visa händelseflödet som har hänt under de senaste åren.

Nedan ser hur Bootstrap -tidslinjewidgeten kommer att se ut.

  • 2015

    Tidslinjehändelse 5

    Här är innehållet för din tidslinjehändelse. Ange ett litet stycke för att beskriva händelsen i detalj.

  • 2014

    Tidslinjehändelse 4

    Här är innehållet för din tidslinjehändelse. Ange ett litet stycke för att beskriva händelsen i detalj.

  • 2013

    Tidslinjehändelse 3

    Här är innehållet för din tidslinjehändelse. Ange ett litet stycke för att beskriva händelsen i detalj.

  • 2012

    Tidslinjehändelse 2

    Här är innehållet för din tidslinjehändelse. Ange ett litet stycke för att beskriva händelsen i detalj.

  • 2011

    Tidslinjehändelse 1

    Här är innehållet för din tidslinjehändelse. Ange ett litet stycke för att beskriva händelsen i detalj.

  • Inspirerad av Bootstrap -ramverket och modifierad för att passa på Weebly -webbplatsen.

  • Full responsiv på alla enheter.

  • Färgen på evenemangstitlar och innehåll kan anpassas efter dina behov.

  • Teckenstorlek och vikt på titlar och innehåll kan anpassas efter behov.

Ovanstående demo visar år och händelser som ett exempel. du kan ändra innehållet till allt du vill visa upp.

Lägg till tidslinje -widget på Weebly -webbplatsen

Tidslinjevidgeten behöver två komponenter – CSS och HTML, du behöver inte ha JavaScript för denna widget. Att lägga till CSS och HTML i din Weebly är en mycket enkel uppgift.

  • Lägg till CSS -kod för widgeten
  • Lägg till HTML -kod för widgeten

Lägger till CSS för tidslinje -widget

Du behöver faktiskt inte använda den fullständiga Bootstrap CSS -filen. Behöver bara widgetkoden enligt nedan. Det finns många sätt att lägga till CSS på din Weebly -webbplats. Det bästa sättet att lägga till en webbplats är att klistra in koden nedan i filen "main.less".

Navigera till fliken "Teman" och klicka på knappen " Redigera HTML / CSS " i nedre vänstra hörnet. Detta tar dig till Weebly kodredigerare. Hitta filen "main.less" under avsnittet "Stilar" och klistra in den här koden längst ner i den befintliga koden. Spara dina ändringar och avsluta kodredigeraren.

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

Lägger till HTML -kod

Välj sidan under fliken "Sidor" och gå till innehållsområdet där du vill lägga till tidslinjen. Dra och släpp ett " Bädda in kod " -element och klistra in nedanstående HTML -kod i inbäddningskodelementet.

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

Anpassa tidslinje -widgeten

Som du kan se är HTML-delen självförklarande som innehåller tre enkla komponenter:

  • Märke – anger år.
  • Titel – rubrik tidslinjehändelse.
  • Kropp – beskrivningen av händelsen.

Ersätt dummyinnehållet med ditt eget innehåll.

När det gäller CSS -delen kan du använda några av nedanstående förslag för att justera widgeten ordentligt på stationära och mobila enheter.

  • I grund och botten används Bootstrap -klasser för att definiera årets färger. Till exempel har ".tl-badge.success" bakgrundsfärgen grön för att indikera framgången (#3f903f). Du kan ändra färgerna på dessa klasser (primär, framgång, varning, fara och information) till vilken färg du vill.
  • Andra attribut som bakgrundsfärg, teckenstorlek, färg och skugga kan justeras efter behov.
  • Det största problemet du kan möta när du placerar widgeten på Weebly -webbplatsen är att tidslinjens inriktning med referens till mittlinjen. Leta efter klassen ".tl> li> .tl-panel" och nuvarande bredd definieras som "40%" som passar på den här sidan. Du kan behöva öka eller minska bredden baserat på din layout för att anpassa sig till mittlinjen.
  • Vi har använt @media CSS-regeln för att justera bredden på iPad med (maxbredd: 800px). Bredden på tidslinjewidgeten är inställd som "33%". Du kan justera denna mediefråga och bredd för bättre anpassning på iPad.
  • På samma sätt på iPhone och andra mobila enheter bestämmer mediefrågan (maxbredd: 380px) tidslinjebredden som "25%". Du kan också justera detta efter dina behov.

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