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 testimonios en Weebly?

2

En nuestro artículo anterior, discutimos cómo agregar testimonios en forma de control deslizante y en este artículo analicemos cómo agregar un widget de testimonios en el sitio de Weebly usando CSS simple. Explicaremos dos ejemplos similares uno con color simple y otro con color más brillante.

Ambos widgets tienen las siguientes características:

  • Agregue a cualquier número de páginas.
  • Totalmente sensible que se ajusta automáticamente al ancho del dispositivo de visualización.
  • Configúrelo como un widget individual o como una página de testimonios separada.
  • Agregue un número ilimitado de testimonios.
  • Agregue una o dos columnas.

¿Cómo agregar un widget de testimonios en Weebly?

Ambos widgets explicados en este artículo tienen fotos de los usuarios, por lo tanto, el primer paso es cargar las fotos en "Tema> Editar HTML / CSS > Activos> Cargar archivo (s)…". La ruta del archivo de las imágenes cargadas será igual que:

http://your-site-name.com/files/theme/testimonial-image1.jpg

Widget de testimonios simples

El widget de testimonios simple se verá a continuación y puede ver la demostración en vivo aquí. Se puede colocar como ancho completo o en un diseño de dos columnas.

¿Cómo agregar un widget de testimonios en Weebly?

El widget contiene las siguientes partes que también se resaltan en CSS mediante comentarios:

  • El contenido de los testimonios se define mediante la clase ".tm-content"
  • La flecha hacia abajo se define mediante: después del pseudo elemento ".tm-content: after"
  • La imagen, el nombre y el título se definen mediante la clase ".tm-pic"
  • La imagen se define mediante la clase ".tm-pic foto"
  • El nombre se define mediante la clase ".tm-pic p: nth-child (2)"
  • El título se define mediante la clase ".tm-pic p: nth-child (3)"

CSS para un widget de testimonio simple

Agregue el siguiente código CSS en la sección "Código de encabezado" de su página de Weebly. El color de fondo del testimonio se define como # ebf3f5, que se puede cambiar a cualquier color que necesite.

<style type="text/css"> /* Testimonial Content */ .tm-content { background: #ebf3f5; padding: 15px 20px 5px 15px; border-radius: 5px; margin-bottom: 30px; } /* Down Arrow */ .tm-content:after { content: ''; width: 0px; height: 0px; border-style: solid; border-width: 20px 18px 0 18px; border-color: #ebf3f5 transparent transparent transparent; position: relative; top: 37px; left: 20px; } /* Picture, Name and Title */ .tm-pic { margin-left: 25px; margin-bottom: 80px; } /* Testimonial Picture */ .tm-pic .photo { background-color: #ccc; border-radius: 100px; width: 60px; height: 60px; float: left; margin-right: 10px; } /* Name and Title Paragraph*/ .tm-pic p { position: relative; top: 5px; text-transform: uppercase; line-height:30px; } /* Name */ .tm-pic p:nth-child(2) { font-size: 16px; font-weight: 600; margin-bottom: 0; } /* Title */ .tm-pic p:nth-child(3) { font-size: 14px; color: #777; } </style>

HTML para widget de testimonio simple

Agregue el siguiente código HTML dentro de un elemento " Código incrustado " reemplazando el contenido ficticio por el suyo. El código es para un solo bloque de testimonios que se mostrará en ancho completo y puede agregar múltiples testimonios simplemente agregando el código de bloque. Si desea mostrar los testimonios en dos columnas, utilice los elementos de "Código incrustado" uno al lado del otro y pegue el bloque de código HTML en su interior.

<div class="tm-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices, elit sed faucibus pharetra, diam mauris bibendum orci, sit amet ullamcorper purus dui sit amet augue. Donec aliquet diam ut neque mattis, eu tristique sem rutrum.</p> </div> <div class="tm-pic"> <div class="photo"><img src="https://img.webnots.com/2015/08/Testimonial3.jpg" width=60px height=60px> </div> <p>Diana Mary</p> <p>Important person, some Company</p> </div>

Widget de testimonios coloridos

El segundo widget de testimonios es similar al primero con colores más brillantes, como se muestra a continuación. La diferencia con este widget es que el bloque de códigos HTML se alineará automáticamente en un diseño de dos columnas sin la necesidad de utilizar varios elementos de "Código incrustado". A continuación se muestra cómo se verá:

El widget contiene las siguientes partes que también están resaltadas en CSS con comentarios:

  • Bloque único: contenedor de testimonios definido en la clase ".testimonial-wrap"
  • Contenido: contenido de testimonio definido en la clase ".testimonial"
  • Nombre y título: información de testimonio definida en la clase ".testimonial-info"
  • Foto: imagen del usuario definida en la clase ".headshot"
  • Flecha: flecha hacia abajo definida en la clase ".arrow-down"

CSS para widget de testimonios coloridos

Agregue el CSS a continuación en la sección " Código de encabezado " de su página de Weebly, también puede agregarlo en el archivo "main_style.css" sin las etiquetas para que el código sea efectivo a nivel del sitio.

<style type="text/css"> /* Testimonial Wrapper */ .testimonial-wrap { padding:30px; float:left; } /* Testimonial Content */ .testimonial { background:#54acd2; color:#fff; font-size:32px; padding:20px; width:400px; font-family:nixie one; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } /* Testimonial Info - Name and Title */ .testimonial-info { font-family:sans-serif; font-weight:bold; margin-top:25px; float:left; } .testimonial-info h4 { font-size:18px; margin:5px auto; color:#333; text-transform:uppercase; } .testimonial-info h4 span{ font-size:18px; margin:5px auto; color:#999; text-transform:none; } .testimonial-info p { font-size:14px; color:#df0a81; margin:0px; } /* Testimonial image */ .headshot { width:100px; height:100px; background:#333; float:left; color:#fff; margin-top:10px; border:3px solid #ccc; margin-right:20px; -webkit-border-radius: 100px; border-radius: 100px; overflow:hidden; } .headshot img{ width:100%; height:100%; } /* Down Arrow */ .arrow-down { width: 0; height: 0; margin-left:35px; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #54acd2; } </style>

HTML para widget de testimonios coloridos

A continuación se muestra el bloque de testimonios único que se agregará dentro del elemento "Código de inserción". Si agrega varios bloques, los testimonios se alinearán automáticamente en un diseño de dos columnas. No olvide reemplazar el contenido ficticio por el suyo.

<div class="testimonial-wrap"> <div class="testimonial"> "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices, elit sed faucibus pharetra." </div> <div class="arrow-down"></div> <div class="headshot"> <img src="https://img.webnots.com/2015/08/Testimonial3.jpg"></div> <div class="testimonial-info"> <h4>Principal Van Kirk</h4> <p>Finger Lakes Christian School</p> </div> </div>

Tenga en cuenta que las imágenes utilizadas son solo para fines de demostración y no indican usuarios reales.

Fuente de grabación: 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