Как добавить виджет временной шкалы на сайт Weebly?

Временная шкала помогает описать краткое изложение историй, произошедших за определенный период времени. Его можно использовать что-то вроде диаграммы вех. 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-часть не требует пояснений и содержит три простых компонента:

  • Значок – с указанием года.
  • Заголовок – заголовок события на шкале времени.
  • Тело – описание события.

Замените фиктивный контент своим собственным.

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

  • В основном классы Bootstrap используются для определения цветов года. Например, «.tl-badge.success» имеет зеленый цвет фона, указывающий на успех (# 3f903f). Вы можете изменить цвета этих классов (основной, успех, предупреждение, опасность и информация) на любой цвет по вашему желанию.
  • Другие атрибуты, такие как цвет фона, размер шрифта, цвет и тень, могут быть отрегулированы по мере необходимости.
  • Основная проблема, с которой вы можете столкнуться при размещении виджета на сайте Weebly, заключается в том, что окно временной шкалы совмещается с центральной линией. Найдите класс «.tl> li> .tl-panel», и текущая ширина определена как «40%», чтобы соответствовать этой странице. Возможно, вам потребуется увеличить или уменьшить ширину в зависимости от вашего макета, чтобы выровнять его по центральной линии.
  • Мы использовали правило @media CSS, чтобы настроить ширину на iPad с помощью (max-width: 800px). Ширина виджета шкалы времени установлена ​​как «33%». Вы можете настроить этот медиа-запрос и ширину для лучшего выравнивания на iPad.
  • Аналогично на iPhone и других мобильных устройствах медиа-запрос (max-width: 380 пикселей) определяет ширину временной шкалы как «25%». Вы также можете настроить это в соответствии с вашими потребностями.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *