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

El tema Divi 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:

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 este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (3 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Pin It on Pinterest