TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie füge ich ein Timeline-Widget in der Weebly-Site hinzu?

8

Die Zeitleiste hilft, die Zusammenfassung der Geschichten zu beschreiben, die im Laufe der Zeit passiert sind. Es kann so etwas wie ein Meilensteindiagramm verwendet werden. Bootstrap ist ein beliebtes Frontend-Framework, mit dem Sie ein responsives Timeline-Widget erstellen können, das auf Ihrer Weebly- Site eingefügt werden kann. In diesem Artikel erklären wir, wie Sie ein Zeitleisten-Widget auf der Weebly-Site hinzufügen, um den Ereignisfluss der letzten Jahre darzustellen.

Unten sehen Sie, wie das Bootstrap-Timeline-Widget aussehen wird.

  • 2015

    Timeline-Ereignis 5

    Hier ist der Inhalt für Ihr Timeline-Event. Geben Sie einen kleinen Absatz ein, um das Ereignis im Detail zu beschreiben.

  • 2014

    Timeline-Ereignis 4

    Hier ist der Inhalt für Ihr Timeline-Event. Geben Sie einen kleinen Absatz ein, um das Ereignis im Detail zu beschreiben.

  • 2013

    Timeline-Ereignis 3

    Hier ist der Inhalt für Ihr Timeline-Event. Geben Sie einen kleinen Absatz ein, um das Ereignis im Detail zu beschreiben.

  • 2012

    Timeline-Ereignis 2

    Hier ist der Inhalt für Ihr Timeline-Event. Geben Sie einen kleinen Absatz ein, um das Ereignis im Detail zu beschreiben.

  • 2011

    Zeitachsenereignis 1

    Hier ist der Inhalt für Ihr Timeline-Event. Geben Sie einen kleinen Absatz ein, um das Ereignis im Detail zu beschreiben.

  • Inspiriert vom Bootstrap-Framework und an die Weebly-Site angepasst.

  • Vollständig reaktionsschnell auf allen Geräten.

  • Die Farbe der Veranstaltungstitel und des Inhalts können nach Ihren Wünschen angepasst werden.

  • Schriftgröße und Gewicht der Titel und Inhalte können nach Bedarf angepasst werden.

Die obige Demo zeigt die Jahre und Ereignisse als Beispiel. Sie können den Inhalt auf alles ändern, was Sie präsentieren möchten.

Zeitachsen-Widget in Weebly Site hinzufügen

Das Timeline-Widget benötigt zwei Komponenten – CSS und HTML, Sie benötigen kein JavaScript für dieses Widget. Das Hinzufügen von CSS und HTML in Ihrem Weebly ist sehr einfach.

  • CSS-Code für das Widget hinzufügen
  • HTML-Code für das Widget hinzufügen

CSS für das Timeline-Widget hinzufügen

Sie müssen nicht die vollständige Bootstrap-CSS-Datei verwenden. Benötigen Sie nur den Widget-Code wie unten angegeben. Es gibt viele Möglichkeiten, CSS zu Ihrer Weebly-Site hinzuzufügen. Die beste Möglichkeit, eine Site übergreifend hinzuzufügen, besteht darin, den folgenden Code in die Datei "main.less" einzufügen.

Navigieren Sie zur Registerkarte „Themes” und klicken Sie auf die Schaltfläche „ HTML / CSS bearbeiten ” in der unteren linken Ecke. Dadurch gelangen Sie zum Weebly-Code-Editor. Suchen Sie die Datei „main.less” im Abschnitt „Stile” und fügen Sie diesen Code am Ende des vorhandenen Codes ein. Speichern Sie Ihre Änderungen und beenden Sie den Code-Editor.

.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-Code hinzufügen

Wählen Sie die Seite unter der Registerkarte "Seiten" und gehen Sie zum Inhaltsbereich, auf dem Sie die Zeitleiste hinzufügen möchten. Ziehen Sie ein " Embed Code "-Element per Drag & Drop und fügen Sie den folgenden HTML-Code in das Embed-Code-Element ein.

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

Anpassen des Zeitleisten-Widgets

Wie Sie sehen, ist der HTML-Teil selbsterklärend und enthält drei einfache Komponenten:

  • Abzeichen – zeigt das Jahr an.
  • Titel – Überschrift-Zeitachsenereignis.
  • Body – die Beschreibung des Ereignisses.

Ersetzen Sie den Dummy-Inhalt durch Ihren eigenen Inhalt.

Was den CSS-Teil angeht, können Sie einige der folgenden Vorschläge verwenden, um das Widget auf Desktop- und Mobilgeräten richtig anzupassen.

  • Grundsätzlich werden Bootstrap-Klassen verwendet, um die Farben für das Jahr zu definieren. Zum Beispiel hat „.tl-badge.success” die Hintergrundfarbe Grün, um den Erfolg anzuzeigen (#3f903f). Sie können die Farben dieser Klassen (Primär, Erfolg, Warnung, Gefahr und Info) beliebig ändern.
  • Andere Attribute wie Hintergrundfarbe, Schriftgröße, Farbe und Schatten können nach Bedarf angepasst werden.
  • Das Hauptproblem beim Platzieren des Widgets auf der Weebly-Site besteht darin, dass die Timeline-Box in Bezug auf die Mittellinie ausgerichtet ist. Suchen Sie nach der Klasse „.tl > li > .tl-panel” und die aktuelle Breite ist auf dieser Seite mit „40%” definiert. Möglicherweise müssen Sie die Breite basierend auf Ihrem Layout erhöhen oder verringern, um sie an der Mittellinie auszurichten.
  • Wir haben die @media CSS-Regel verwendet, um die Breite auf dem iPad mit der (max-width: 800px) anzupassen. Die Breite des Zeitleisten-Widgets ist auf „33 %” eingestellt. Sie können diese Medienabfrage und Breite für eine bessere Ausrichtung auf dem iPad anpassen.
  • Ähnlich auf dem iPhone und anderen mobilen Geräten bestimmt die Medienabfrage (max-width: 380px) die Timeline-Breite als „25%”. Sie können dies auch nach Ihren Bedürfnissen anpassen.

Aufnahmequelle: www.webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen