Tutorial Divi: Avatares circulares en los comentarios

Mostrar Avatar de Autor en Plantilla Personalizada en Divi

Si un visitante no tiene un gravatar, entonces WordPress mostrará la misma ‘persona misteriosa’ gris por defecto. Sustituyendo esta imagen por otra de su elección, puede personalizar su sección de comentarios y hacer que destaque.

Si no quieres usar esta imagen por defecto, puedes cambiarla por cualquier otra imagen de tu elección. Por ejemplo, puede utilizar una imagen que represente a su empresa, como su logotipo. Esto puede ayudar a reforzar tu imagen de marca.

Para ver los diferentes gravatares por defecto, ve a Configuración ” Discusión y desplázate hasta la sección Avatares. Aquí es donde puede configurar y cambiar los ajustes de gravatar para su blog o sitio web de WordPress.

Observará que hay varias opciones disponibles en “Avatar predeterminado”. Estos son todos los diferentes avatares incorporados que WordPress puede utilizar cuando no hay un gravatar vinculado a la dirección de correo electrónico de la persona.

A continuación, tienes que subir esta imagen a tu sitio WordPress. Simplemente diríjase a Medios ” Añadir nuevo. Aquí, puede elegir una imagen de la biblioteca multimedia de WordPress o subir un nuevo archivo desde su ordenador.

5 maneras de estilizar el avatar en el módulo de comentarios de divi

¡Bienvenido a la parte 3 de 12 en mi serie Tutorial Martes! Cada martes durante 12 semanas, estoy distribuyendo tutoriales en vídeo para mis preguntas más solicitadas sobre Diseño, Diseños o Trucos con WordPress y Divi.

¡En este tutorial, que es quizás el tutorial más solicitado que he recibido, te muestro Cómo agregar iconos al menú Divi! Y si bien hay numerosas maneras de hacer esto, voy a cómo lo hago sin el uso de plugins, fuente impresionante o imágenes importadas innecesarias. Mi objetivo en todos mis diseños de sitios web Divi es hacer las cosas ligero, flexible y sin el uso de plugins externos o cosas que pueden romper con las actualizaciones. Idealmente, trato de usar CSS que es global, fácilmente personalizable y flexible. Y eso es exactamente lo que aprenderás en este tutorial.

  Editor nativo de WordPress en el formulario de comentarios

Hice un poco de investigación para ver si podía encontrar la manera de hacer esto un poco más fácil para todos nosotros y me di cuenta de una manera de disminuir drásticamente la cantidad de CSS anterior. En lugar de añadir el icono al contenedor del enlace del menú, podemos editar el propio enlace. ¡Por ejemplo, en lugar de “menu-services:before”, podemos hacer “menu-services a:before” que afectará al propio enlace por lo que no necesitamos añadir ningún ancho en particular! Recomiendo utilizar ahora el código revisado a continuación.

Crear imágenes redondas en WordPress (sin Photoshop)

PrincipiantesPara modificar Elegant Themes es necesario crear un tema hijo y editar los archivos PHP y CSS con un editor de texto. Si nunca ha hecho esto, puede leer nuestra guía sobre cómo crear un tema hijo. Todos los ajustes están escritos con la suposición de que usted tiene una instalación por defecto de su tema. Cualquier ajuste o cambio que haya realizado previamente en su tema podría afectar al resultado de los ajustes de este sitio. Todos los ajustes deben ser probados antes de aplicarlos a un sitio en vivo.

Anteriormente este tutorial implicaba editar el archivo page.php y forzar los comentarios en la página. Esto ya no parece funcionar en la última versión de WordPress y Divi. La siguiente solución es más simple y probado en las últimas versiones.

  Como añadir un enlace para Editar posts y comentarios

Lo primero que tienes que hacer es asegurarte de que los comentarios están activados en WordPress para tu sitio web. Ir a Configuración-> Discusión y permitir que la gente publique comentarios en los artículos. A continuación tenemos que activar los comentarios para las páginas en Divi. Ir a Divi-> Opciones de tema -> Diseño -> Diseño de página única y activar Mostrar comentarios en las páginas.

Uso del editor de roles Divi

¿Cómo se pueden hacer imágenes redondas en Divi? ¿Además de magia? Bueno, sólo tiene que utilizar algunos simples CSS personalizado (es curioso con qué frecuencia la personalización de CSS es la respuesta en este sitio web). Así que siéntate, pon los pies en alto y lee lo fácil que es convertir imágenes cuadradas en círculos. (vea las imágenes de abajo como ejemplo). E incluso te mostraré cómo redondear las esquinas por igual y no tan por igual que dará lugar a algunas formas funky. Y como estoy acostumbrado a hacer a veces, también he creado un video para ir junto con este tutorial sobre cómo hacer imágenes redondas en Divi (próximamente).

La forma más fácil de lograr el efecto de imagen redonda es añadir una clase CSS personalizada. Usted puede hacer esto en la hoja de estilo de su tema hijo o utilizando el panel de opciones del tema Divi o el panel de personalización del tema Divi. Yo lo hago a través del tema hijo, simplemente porque así es como aprendí. Usted lo hace de la manera que se sienta más cómodo. Aunque, te sugiero que crees un tema hijo para personalizar Divi (ver esta página para más información).

  Grid Focus suscripción a comentarios y mas en WordPress-com

Para empezar, crea una clase CSS personalizada llamada roundImage (puedes ponerle el nombre que tenga sentido para ti). Ahora, queremos tomar las esquinas y redondearlas. Para lograr esto necesitamos establecer un radio de borde. En el ejemplo anterior he creado un círculo completo, lo que significa que cada esquina tiene un radio de borde del 50% (si sólo quisiera redondear las esquinas un poco, entonces podría hacer ese número más pequeño, como el 25%). Siéntete libre de jugar con diferentes números para ver los diferentes efectos que puedes obtener. Esto es lo que tenemos hasta ahora (no dejes de leer, no hemos terminado).