TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як додати віджет часової шкали на веб -сайт Weebly?

2

Хронологія допомагає описати короткий опис історій, що відбулися за певний період часу. Його можна використовувати щось на зразок діаграми етапу. Bootstrap – це популярна фронтенд -платформа, яка дозволяє створювати адаптивний віджет часової шкали, який можна вставити на ваш сайт Weebly. У цій статті ми розповімо, як додати віджет часової шкали на веб -сайт Weebly, щоб продемонструвати потік подій, що відбулися протягом останніх кількох років.

Нижче показано, як буде виглядати віджет часової шкали Bootstrap.

  • 2015

    Подія хронології 5

    Ось вміст вашої події на часовій шкалі. Введіть невеликий абзац, щоб детально описати подію.

  • 2014

    Подія хронології 4

    Ось вміст вашої події на часовій шкалі. Введіть невеликий абзац, щоб детально описати подію.

  • 2013

    Подія хронології 3

    Ось вміст вашої події на часовій шкалі. Введіть невеликий абзац, щоб детально описати подію.

  • 2012

    Подія хронології 2

    Ось вміст вашої події на часовій шкалі. Введіть невеликий абзац, щоб детально описати подію.

  • 2011

    Подія хронології 1

    Ось вміст вашої події на часовій шкалі. Введіть невеликий абзац, щоб детально описати подію.

  • Натхненний фреймворком Bootstrap і змінений відповідно до веб -сайту Weebly.

  • Повністю реагує на всі пристрої.

  • Колір назв подій та вмісту можна налаштувати відповідно до ваших потреб.

  • Розмір шрифту та вагу заголовків та вмісту можна налаштувати відповідно до ваших потреб.

Наведена вище демонстрація показує роки та події як приклад. Ви можете змінити вміст на все, що хочете продемонструвати.

Додайте віджет часової шкали на веб -сайт Weebly

Віджету часової шкали потрібні два компоненти – CSS і HTML, для цього віджета вам не потрібен JavaScript. Додавання CSS та HTML у Weebly – це дуже просте завдання.

  • Додайте CSS -код для віджета
  • Додайте HTML -код для віджета

Додавання CSS для віджету часової шкали

Насправді вам не потрібно використовувати повний файл CSS Bootstrap. Просто потрібен код віджета, як наведено нижче. Існує багато способів додати CSS на ваш сайт Weebly. Найкращий спосіб додати весь сайт – вставити наведений нижче код у файл “main.less".

Перейдіть на вкладку «Теми» та натисніть кнопку «Редагувати HTML / CSS» у нижньому лівому куті. Це перенесе вас до редактора коду Weebly. Знайдіть файл “main.less” у розділі “Стилі” та вставте цей код унизу існуючого коду. Збережіть зміни та вийдіть із редактора коду.

.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 -коду

Виберіть сторінку на вкладці "Сторінки" та перейдіть у область вмісту, до якої потрібно додати шкалу часу. Перетягніть елемент " Код для вставлення" та вставте нижченаведений код HTML всередину елемента коду для вбудовування.

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

Налаштування віджета часової шкали

Як бачите, частина HTML є зрозумілою і містить три прості компоненти:

  • Знак – вказує рік.
  • Заголовок – заголовок події часової шкали.
  • Body – опис події.

Замініть фіктивний вміст своїм власним.

Переходячи до частини CSS, ви можете скористатися деякими з наведених нижче пропозицій, щоб правильно налаштувати віджет на настільних та мобільних пристроях.

  • В основному класи Bootstrap використовуються для визначення кольорів за рік. Наприклад, ".tl-badge.success" має зелений колір тла для позначення успіху (#3f903f). Ви можете змінити кольори цих класів (основний, успіх, попередження, небезпека та інформація) на будь -який колір за вашим бажанням.
  • Інші атрибути, такі як колір фону, розмір шрифту, колір і тінь, можна регулювати відповідно до потреб.
  • Найбільша проблема, з якою ви можете зіткнутися під час розміщення віджета на веб -сайті Weebly, – це вирівнювання вікна часової шкали щодо центральної лінії. Знайдіть на цій сторінці клас ".tl> li> .tl-panel", і поточна ширина визначається як "40%". Можливо, вам доведеться збільшити або зменшити ширину залежно від вашого макета, щоб вирівняти його по центральній лінії.
  • Ми використовували правило @media CSS, щоб відрегулювати ширину на iPad за допомогою (максимальна ширина: 800 пікселів). Ширина віджета часової шкали встановлена ​​як "33%". Ви можете налаштувати цей медіа -запит і ширину для кращого вирівнювання на iPad.
  • Так само на iPhone та інших мобільних пристроях медіа-запит (макс. Ширина: 380px) визначає ширину часової шкали як "25%". Ви також можете налаштувати це відповідно до ваших потреб.

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі