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

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

28

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

Источник записи: www.webnots.com
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее