Tutorial Divi: Cómo mejorar el aspecto de los comentarios

tiene muchas ventajas, y cada vez mejora más en todos los sentidos, pero hay algunos elementos que aún dejan que desear, al menos para mi gusto, y uno es el aspecto nativo de los comentarios, así que vamos a mejorarlos.

Me refiero a que el tema Divi, por ejemplo, los avatares de los usuarios son cuadrados, lo que va en contra de las tendencias actuales de estilo, pues en casi prácticamente todo servicio web son redondos.

Un problema más con los avatares es que además son demasiado grandes.

Y también a cómo se muestran las cajas a la hora de responder a comentarios, superponiéndose en ocasiones unas sobre otras, lo que es un fallo gordo de diseño.

Otro fallo, a mi modo de ver, es el excesivo margen que se añade a cada comentario anidado, llegando a desbordar en ocasiones el ancho de la zona de comentarios.

Aquí unos ejemplos de lo que te digo:

Pues bien, si quieres solucionar estos fallos se puede mejorar mucho el aspecto de los comentarios nativos de Divi añadiendo un poco de CSS personalizado que los solucione, y ofrezca unos comentarios mejores.

Simplemente abre el Personalizador de temas > CSS adicional y añade el siguiente código:

/* MEJORAS EN COMENTARIOS DIVI */
.comment_avatar img { border-radius: 50%; } /** avatares circulares **/
.comment {padding-bottom: 50px;}
    .comment_area .comment-reply-link {
            top: auto;
            bottom: -45px;
            padding: 4px 10px;
            font-size: 20px;}

@media (min-width: 768px) { /** El salto para el formulario de comentarios **/
 
 .children .comment.depth-2 { margin-left: 30px;} /** margen en el primer anidado pero no en el resto **/
 .comment .children { margin-left: 0px; } /** margen en el primer anidado pero no en el resto **/
 .comment .children .comment_avatar img { max-width: 60px; } /** hace que los avatares de las respuestas sean más pequeños **/
 .comment .children .comment_avatar { margin-left: 20px; } /** mantiene a los avatares de respuestas a la izquierda **/
 
}

@media (max-width: 767px) {
 .comment-reply-link { bottom: -20px !important; top: auto !important; } /**mantiene el botón fuera del texto **/
 .comment_area { padding-bottom: 40px; } /** mantiene el botón fuera del texto **/
 .comment_avatar { max-width:50px } /** avatar más pequeño en móvil **/
 .comment_postinfo, .comment-content.clearfix { margin-left: -30px; } /** el avatar pequeño se mantiene a la izquierda **/
}

Publica los cambios y la mejora será notable.

Como verás, en cada línea explico en el código lo que hace cada parte, para tu referencia.

Al final, lo que obtienes es esto otro…

Como puedes observar, hemos conseguido lo siguiente:

  • Convertir los avatares cuadrados en redondos
  • Reducir algo el tamaño de los avatares
  • Mejora la colocación de los avatares
  • Hace aún más pequeños los avatares en dispositivos móviles
  • Los comentarios anidados, a partir del segundo comentario, se mantienen en el mismo margen, no se extienden al infinito.
  • De paso hemos eliminado los problemas de visualización en la caja de responder a comentarios, que apreciarás en la primera ocasión en que lo uses.

Si quieres añadir más estilos para más tamaños de dispositivos solo tendrás que añadir las líneas correspondientes a los anchos máximos que quieras especificar y personalizar.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(6 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

4 comentarios en “Tutorial Divi: Cómo mejorar el aspecto de los comentarios”

  1. Gracias. Me ha venido muy bien, porque además, la foto del avatar se solapaba con el texto de las respuestas a comentarios y con esto se ha solucionado perfectamente.

  2. Carmen Barón

    Hola, muy útil la información. ¿Se podría incluir también en comentarios el html para incluir la casilla de verificación que requiere la nueva ley de protección de datos que hay que cumplir a partir del mes de mayo?

  3. Gracias Fernando, me ha ayudado bastante este trozo de código CSS, ahora sí se ven los comentario de mi blog como quiero. Creo que es un aspecto a mejorar de esta plantilla, ya que la apariencia «nativa» deja mucho que desear…
    Un saludo y de nuevo, GRACIAS

  4. Muchas gracias Fernando. Todavía es útil y me ha venido de perlas para algunos post en los que tengo más de 100 comentarios.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido