Combinaciones de visualización de 8 elementos en el módulo Testimonial de Divi

Publicado: 2022-04-04

El módulo de testimonios de Divi incluye varios elementos opcionales que puedes usar o deshabilitar. Estos elementos son fáciles de usar y elegirlos en diferentes combinaciones puede crear algunos diseños interesantes. En esta publicación, veremos las combinaciones de visualización de 8 elementos en el módulo de testimonios de Divi para ayudarlo a decidir qué elementos son mejores para sus necesidades.

Crearemos dos versiones, una con fondo blanco y otra con fondo negro, de cada combinación.

¡Empecemos!

Descripción general de los elementos del módulo de testimonios de Divi

Veamos los elementos dentro del módulo de testimonios. Cada elemento tiene opciones de estilo que veremos más adelante. Además, cada uno de estos elementos puede ser utilizado o no. También los veremos usados ​​en varias combinaciones. Cada uno de los elementos incluye configuraciones para los tamaños de pantalla y el estado de desplazamiento.

Autor del módulo de testimonios

Autor es el nombre de la persona que escribió el testimonio. Aparece debajo del contenido del cuerpo y se usa de forma predeterminada. Su fuente es la más grande por defecto. Si no desea mostrar el nombre del autor, simplemente elimine el contenido ficticio y deje el campo en blanco.

Autor del módulo de testimonios

Título profesional

Título del trabajo es el título del trabajo del autor. Es útil para empresas B2B (empresa a empresa) en las que el cargo del autor es relevante para el testimonio. Este campo está en blanco por defecto. Para usarlo, simplemente agregue texto al campo. Aparece debajo del nombre del autor y está alineado a la izquierda.

Título del puesto del módulo de testimonios

Empresa

Empresa es el nombre de la empresa para la que trabaja el autor. Esto también es útil para testimonios B2B. Está en blanco por defecto y aparece debajo del nombre del autor. La empresa se coloca a la derecha del Título del trabajo si también se usa.

Módulo Testimonial Empresa

Contenido

El área de contenido del cuerpo es un editor TinyMCE que puede usar HTML, CSS en línea, medios, etc. Incluye las pestañas Visual y Texto y todas las configuraciones estándar de TinyMCE. Aparece en el área más grande en el medio del módulo. Es extremadamente versátil.

Contenido del cuerpo del módulo de testimonios

El siguiente ejemplo muestra el contenido con un Título 2, contenido del cuerpo y una imagen. Puede incluir cualquier cosa que pueda entrar en un editor TinyMCE, como videos, códigos cortos, HTML, etc.

Contenido del cuerpo del módulo de testimonios

Imagen

La imagen muestra una foto (o logotipo) del autor. Se coloca a la izquierda del contenido. Es circular por defecto, pero puedes diseñar el borde.

Imagen del módulo de testimonios

Icono de cotización

El icono de cita muestra una comilla dentro de un círculo. Esto está habilitado de forma predeterminada, pero puede deshabilitarlo si lo desea. Puede ajustar el tamaño y cambiar el color del icono y su fondo de forma independiente.

Icono de cotización del módulo de testimonios

Dale estilo al módulo de testimonios de Divi

Ahora, veamos algunas de las opciones de estilo. Diseñaremos el módulo de testimonios de Divi usando el estilo del paquete gratuito de diseño de alquiler de scooters que está disponible dentro de Divi. Crearemos una versión blanca y otra negra. Ambos usarán el mismo contenido y haremos cambios en ambos para las combinaciones de visualización de elementos.

Contenido del módulo de mi testimonio

Aquí hay un vistazo al contenido de mi módulo de ejemplo. Estoy usando nombres genéricos y texto ficticio. Estoy agregando un título y dándole estilo con CSS en línea y agregando tres imágenes en miniatura. La imagen del autor es 1117×629. Usaré este mismo contenido para todas las combinaciones de visualización.

Como referencia, aquí está el HTML en línea con CSS que estoy usando para el título. Añade relleno al título. Cuando apliquemos estilo al módulo negro, agregaremos color.

  • Código: 
    <h3 style="padding: 25px 0px 25px 0px;"><strong>Your content goes here.</strong></h3>

Contenido del módulo de mi testimonio

Módulo Testimonial Divi Opción de estilo blanco

Primero, abra la configuración del módulo de testimonios y desplácese hacia abajo hasta Fondo. Cambia el color a #f5f5f5.

  • Fondo: #f5f5f5

Módulo Testimonial Divi Opción de estilo blanco

Icono de cotización

A continuación, vaya a la pestaña de diseño y cambie el color del icono de cotización a #e02b20. Dejaremos su color de fondo en la configuración predeterminada.

  • Color del icono de cotización: #e02b20

Módulo Testimonial Divi Opción de estilo blanco

Habilite Usar tamaño de icono de cotización personalizado y configure el Tamaño de fuente del icono en 36 px.

  • Usar tamaño de icono de cotización personalizado: Sí
  • Tamaño de fuente del icono: 36px

Módulo Testimonial Divi Opción de estilo blanco

Imagen

A continuación, desplácese hacia abajo hasta Imagen. Cambie el Ancho del borde a 3px, el Color a #e02b20 y cambie el Estilo a Punteado.

  • Ancho del borde de la imagen: 3px
  • Color del borde: #e02b20
  • Estilo de borde: Punteado

Módulo Testimonial Divi Opción de estilo blanco

Cuerpo de texto

A continuación, desplácese hacia abajo hasta Texto del cuerpo. Cambie el Color a negro y la Altura de línea a 1,8 em.

  • Color: #000000
  • Altura de la línea: 1,8 em

Módulo Testimonial Divi Opción de estilo blanco

Texto del autor

Desplácese hacia abajo hasta Texto del autor. Cambia el Grosor a Semi Negrita, el Color a negro y el Tamaño a 24px.

  • Peso de fuente: semi negrita
  • Color: #000000
  • Tamaño: 24px

Módulo Testimonial Divi Opción de estilo blanco

Texto de posición

Para el Texto de posición, establezca el Color en negro.

  • Color: #000000

Módulo Testimonial Divi Opción de estilo blanco

Texto de la empresa

Para el Texto de la empresa, establezca el Color en negro. Cierre la configuración del módulo de testimonios.

  • Color del texto de la empresa: #000000

Módulo Testimonial Divi Opción de estilo blanco

Módulo Testimonial Divi Opción de Estilo Negro

A continuación, duplique el módulo de testimonios y abra su configuración.

Módulo Testimonial Divi Opción de Estilo Negro

Desplácese hasta el editor de contenido del cuerpo y agregue el CSS en línea para cambiar el color del encabezado a blanco.

  • HTML con CSS: 
    <h3 style="color: white; padding: 25px 0px 25px 0px;"><strong>Your content goes here.</strong></h3>

Módulo Testimonial Divi Opción de Estilo Negro

A continuación, desplácese hasta el Fondo y cambie el Color a negro.

  • Antecedentes: #000000

Módulo Testimonial Divi Opción de Estilo Negro

Cuerpo de texto

A continuación, haga clic en la pestaña de diseño y desplácese hacia abajo hasta Texto del cuerpo. Establezca el Color en blanco.

  • Color: #ffffff

Módulo Testimonial Divi Opción de Estilo Negro

Texto del autor

Desplácese hacia abajo hasta Autor Texto y establezca su Color en blanco.

  • Color: #ffffff

Módulo Testimonial Divi Opción de Estilo Negro

Texto de posición

Desplácese hasta Posición del texto y establezca el Color en blanco.

  • Color: #ffffff

Módulo Testimonial Divi Opción de Estilo Negro

Texto de la empresa

Finalmente, desplácese hasta Texto de la empresa y cambie el Color de fuente a blanco.

  • Color: #ffffff

Módulo Testimonial Divi Opción de Estilo Negro

Combinaciones de visualización en el módulo de testimonios de Divi

Combinaciones de visualización en el módulo de testimonios de Divi

Ahora tenemos dos módulos de testimonios que podemos usar para mostrar varias combinaciones de elementos.

Combinación de pantalla del módulo de testimonios Divi 1

Nuestra primera combinación usa el nombre del autor y el icono de cita. Estas son las configuraciones predeterminadas del módulo de testimonios.

Combinación de pantalla del módulo de testimonios de Divi

Aquí está la versión de fondo negro. Simplemente dejé vacíos los campos Título del trabajo y Nombre de la empresa.

Combinación de pantalla del módulo de testimonios de Divi

Combinación de pantalla de módulo de testimonios Divi 2

Para nuestra segunda combinación, eliminé el nombre del autor y el ícono de cita, por lo que no muestra ninguno de los elementos. Esto solo es ideal si la información se proporciona en el contenido del cuerpo.

Combinación de pantalla del módulo de testimonios de Divi

Aquí está la versión de fondo blanco.

Combinación de pantalla del módulo de testimonios de Divi

Combinación de pantalla de módulo de testimonios Divi 3

Para nuestra tercera combinación, eliminé el ícono de cotización y agregué el nombre de la empresa.

Combinación de pantalla del módulo de testimonios de Divi

Aquí está la versión de fondo negro.

Combinación de pantalla del módulo de testimonios de Divi

Combinación de pantalla de módulo de testimonios Divi 4

Para nuestra cuarta combinación, eliminé el nombre del autor y el icono de cita y agregué el cargo y el nombre de la empresa.

Combinación de pantalla del módulo de testimonios de Divi

Aquí está la versión de fondo blanco.

Combinación de pantalla del módulo de testimonios de Divi

Combinación de pantalla del módulo de testimonios de Divi 5

Por supuesto, no estamos limitados al texto que agregamos a cualquiera de los campos. Este ejemplo utiliza el nombre de la empresa como nombre del autor. También he incluido el icono de cotización.

Combinación de pantalla del módulo de testimonios de Divi

Aquí está la versión de fondo negro.

Combinación de pantalla del módulo de testimonios de Divi

Combinación de pantalla del módulo de testimonios Divi 6

También podemos añadir más información a cada línea. Para este, agregué una barra después del nombre del autor e incluí el nombre de la empresa en el mismo campo. También he incluido el título del trabajo y el icono de cotización.

Combinación de pantalla del módulo de testimonios de Divi

Aquí está la versión de fondo blanco.

Combinación de pantalla del módulo de testimonios de Divi

Combinación de pantalla del módulo de testimonios de Divi 7

Nuestra séptima combinación muestra el ícono de cotización, el nombre del autor y el cargo.

Combinación de pantalla del módulo de testimonios de Divi

Aquí está la versión de fondo negro.

Combinación de pantalla del módulo de testimonios de Divi

Combinación de pantalla de módulo de testimonios Divi 8

Nuestra octava combinación tiene todos los elementos habilitados.

Combinación de pantalla del módulo de testimonios de Divi

Aquí está la versión de fondo blanco de esta combinación.

Combinación de pantalla del módulo de testimonios de Divi

pensamientos finales

Ese es nuestro vistazo a las combinaciones de visualización de 8 elementos en el módulo de testimonios de Divi. Seleccionar los elementos es simple, por lo que es fácil probar diferentes combinaciones para ver qué funciona mejor para una situación determinada. Recomiendo usar cualquiera de estas combinaciones o experimentar con la tuya propia para ver qué funciona mejor para ti. Cualquiera que sea la combinación que elija, asegúrese de incluir suficiente información para agregar credibilidad al testimonio.

Queremos escuchar de ti. ¿Usas alguna de estas u otras combinaciones en el módulo de testimonios de Divi? Cuéntanos tu experiencia en los comentarios.