TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak dodać widżet osi czasu w witrynie Weebly?

15

Oś czasu pomaga opisać podsumowanie historii, które miały miejsce na przestrzeni czasu. Może być używany jako wykres kamieni milowych. Bootstrap to popularny framework frontendowy, który umożliwia tworzenie responsywnych widżetów osi czasu, które można umieścić w witrynie Weebly. W tym artykule wyjaśnimy, jak dodać widżet osi czasu w witrynie Weebly, aby pokazać przepływ wydarzeń, które miały miejsce w ciągu ostatnich kilku lat.

Poniżej przedstawiamy, jak będzie wyglądał widżet osi czasu Bootstrap.

  • 2015

    Wydarzenie na osi czasu 5

    Oto treść wydarzenia na osi czasu. Wpisz mały akapit, aby szczegółowo opisać wydarzenie.

  • 2014

    Wydarzenie na osi czasu 4

    Oto treść wydarzenia na osi czasu. Wpisz mały akapit, aby szczegółowo opisać wydarzenie.

  • 2013

    Wydarzenie na osi czasu 3

    Oto treść wydarzenia na osi czasu. Wpisz mały akapit, aby szczegółowo opisać wydarzenie.

  • 2012

    Wydarzenie 2 na osi czasu

    Oto treść wydarzenia na osi czasu. Wpisz mały akapit, aby szczegółowo opisać wydarzenie.

  • 2011

    Wydarzenie na osi czasu 1

    Oto treść wydarzenia na osi czasu. Wpisz mały akapit, aby szczegółowo opisać wydarzenie.

  • Zainspirowany frameworkiem Bootstrap i zmodyfikowany tak, aby pasował do witryny Weebly.

  • W pełni responsywny na wszystkich urządzeniach.

  • Kolor tytułów i treści wydarzeń można dostosować do własnych potrzeb.

  • Rozmiar czcionki i wagę tytułów i treści można dostosować do potrzeb.

Powyższe demo pokazuje lata i wydarzenia jako przykład. możesz zmienić treść na dowolną, którą chcesz zaprezentować.

Dodaj widżet osi czasu w witrynie Weebly

Widżet osi czasu wymaga dwóch komponentów – CSS i HTML, nie potrzebujesz żadnego JavaScriptu dla tego widżetu. Dodanie CSS i HTML do Weebly jest bardzo łatwym zadaniem.

  • Dodaj kod CSS do widżetu
  • Dodaj kod HTML do widżetu

Dodawanie CSS do widżetu osi czasu

W rzeczywistości nie musisz używać kompletnego pliku Bootstrap CSS. Wystarczy kod widżetu, jak podano poniżej. Istnieje wiele sposobów dodawania CSS w witrynie Weebly. Najlepszym sposobem na dodanie całej witryny jest wklejenie poniższego kodu w pliku „main.less".

Przejdź do zakładki „Motywy” i kliknij przycisk „ Edytuj HTML / CSS ” w lewym dolnym rogu. Spowoduje to przejście do edytora kodu Weebly. Znajdź plik „main.less” w sekcji „Style” i wklej ten kod na dole istniejącego kodu. Zapisz zmiany i wyjdź z edytora kodu.

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

Dodawanie kodu HTML

Wybierz stronę w zakładce „Strony” i przejdź do obszaru treści, do którego chcesz dodać oś czasu. Przeciągnij i upuść element „ Kod osadzania ” i wklej poniższy kod HTML do elementu kodu osadzania.

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

Dostosowywanie widżetu osi czasu

Jak widać, część HTML jest oczywista i zawiera trzy proste komponenty:

  • Odznaka – wskazująca rok.
  • Tytuł – nagłówek wydarzenia na osi czasu.
  • Body – opis wydarzenia.

Zastąp fikcyjną zawartość własną zawartością.

Przechodząc do części CSS, możesz skorzystać z poniższych sugestii, aby odpowiednio dostosować widżet na komputerach i urządzeniach mobilnych.

  • Zasadniczo klasy Bootstrap służą do definiowania kolorów na rok. Na przykład „.tl-badge.success” ma zielony kolor tła, aby wskazać sukces (#3f903f). Możesz zmienić kolory tych klas (główna, sukces, ostrzeżenie, niebezpieczeństwo i informacje) na dowolny kolor.
  • Inne atrybuty, takie jak kolor tła, rozmiar czcionki, kolor i cień, można dostosować do potrzeb.
  • Głównym problemem, który możesz napotkać podczas umieszczania widżetu w witrynie Weebly, jest wyrównanie pola osi czasu w odniesieniu do linii środkowej. Poszukaj klasy „.tl > li > .tl-panel”, a aktualna szerokość jest zdefiniowana jako „40%”, aby pasowała do tej strony. Może być konieczne zwiększenie lub zmniejszenie szerokości w zależności od układu w celu wyrównania z linią środkową.
  • Użyliśmy reguły CSS @media, aby dostosować szerokość na iPadzie za pomocą (max-width: 800px). Szerokość widżetu osi czasu jest ustawiona na „33%”. Możesz dostosować to zapytanie o media i szerokość, aby uzyskać lepsze wyrównanie na iPadzie.
  • Podobnie na iPhonie i innych urządzeniach mobilnych, zapytanie o media (max-width: 380px) określa szerokość osi czasu jako „25%”. Możesz to również dostosować do swoich potrzeb.

Źródło nagrywania: www.webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów