TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo agregar un widget de línea de tiempo en el sitio Weebly?

49

La línea de tiempo ayuda a describir el resumen de las historias ocurridas durante el período de tiempo. Se puede utilizar como un gráfico de hitos. Bootstrap es un marco de interfaz popular que permite crear un widget de línea de tiempo receptivo que se puede insertar en su sitio Weebly. En este artículo, explicaremos cómo agregar un widget de línea de tiempo en el sitio de Weebly para mostrar el flujo de eventos que sucedió durante los últimos años.

A continuación se muestra cómo se verá el widget de línea de tiempo de Bootstrap.

  • 2015

    Evento 5 de la línea de tiempo

    Aquí está el contenido de su evento de línea de tiempo. Ingrese un pequeño párrafo para describir el evento en detalle.

  • 2014

    Evento 4 de la línea de tiempo

    Aquí está el contenido de su evento de línea de tiempo. Ingrese un pequeño párrafo para describir el evento en detalle.

  • 2013

    Evento 3 de la línea de tiempo

    Aquí está el contenido de su evento de línea de tiempo. Ingrese un pequeño párrafo para describir el evento en detalle.

  • 2012

    Evento 2 de la línea de tiempo

    Aquí está el contenido de su evento de línea de tiempo. Ingrese un pequeño párrafo para describir el evento en detalle.

  • 2011

    Evento 1 de la línea de tiempo

    Aquí está el contenido de su evento de línea de tiempo. Ingrese un pequeño párrafo para describir el evento en detalle.

  • Inspirado en el marco Bootstrap y modificado para adaptarse al sitio de Weebly.

  • Totalmente receptivo en todos los dispositivos.

  • El color de los títulos y el contenido de los eventos se puede personalizar según sus necesidades.

  • El tamaño y el peso de la fuente de los títulos y el contenido se pueden personalizar según sus necesidades.

La demostración anterior muestra los años y eventos como ejemplo. puede cambiar el contenido a cualquier cosa que le gustaría mostrar.

Agregar widget de línea de tiempo en el sitio de Weebly

El widget de línea de tiempo necesita dos componentes: CSS y HTML, no necesita JavaScript para este widget. Agregar CSS y HTML en su Weebly es una tarea muy fácil.

  • Agregar código CSS para el widget
  • Agregar código HTML para el widget

Agregar CSS para el widget de línea de tiempo

En realidad, no es necesario utilizar el archivo CSS Bootstrap completo. Solo necesita el código del widget como se indica a continuación. Hay muchas formas de agregar CSS en su sitio Weebly. La mejor manera de agregar todo el sitio es pegar el siguiente código en el archivo "main.less".

Vaya a la pestaña "Temas" y haga clic en el botón " Editar HTML / CSS " en la esquina inferior izquierda. Esto lo llevará al editor de código Weebly. Busque el archivo "main.less" en la sección "Estilos" y pegue este código en la parte inferior del código existente. Guarde sus cambios y salga del editor de código.

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

Agregar código HTML

Elija la página en la pestaña "Páginas" y vaya al área de contenido en la que desea agregar la línea de tiempo. Arrastre y suelte un elemento " Código incrustado " y pegue el siguiente código HTML dentro del elemento del código incrustado.

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

Personalización del widget de línea de tiempo

Como puede ver, la parte HTML se explica por sí misma y contiene tres componentes simples:

  • Insignia: indica el año.
  • Título: evento de línea de tiempo de encabezado.
  • Cuerpo: la descripción del evento.

Reemplace el contenido ficticio con su propio contenido.

Al llegar a la parte de CSS, puede usar algunas de las sugerencias a continuación para ajustar el widget correctamente en dispositivos móviles y de escritorio.

  • Básicamente, las clases de Bootstrap se utilizan para definir los colores del año. Por ejemplo, ".tl-badge.success" tiene el color de fondo verde para indicar el éxito (# 3f903f). Puede cambiar los colores de estas clases (primario, éxito, advertencia, peligro e información) al color que desee.
  • Otros atributos como el color de fondo, el tamaño de fuente, el color y la sombra se pueden ajustar según las necesidades.
  • El principal problema que puede enfrentar al colocar el widget en el sitio de Weebly es la alineación del cuadro de la línea de tiempo con referencia a la línea central. Busque la clase ".tl> li> .tl-panel" y el ancho actual se define como "40%" para adaptarse a esta página. Es posible que deba aumentar o disminuir el ancho según su diseño para alinearlo con la línea central.
  • Hemos utilizado la regla @media CSS para ajustar el ancho en iPad con el (ancho máximo: 800px). El ancho del widget de línea de tiempo se establece en "33%". Puede ajustar esta consulta de medios y el ancho para una mejor alineación en iPad.
  • De manera similar, en iPhone y otros dispositivos móviles, la consulta de medios (ancho máximo: 380 px) decide el ancho de la línea de tiempo como "25%". Puede ajustar esto también según sus necesidades.

Fuente de grabación: www.webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More