Cómo hacer que su módulo de testimonios Divi sea pegajoso

Publicado: 2022-04-01

Una de las cosas interesantes sobre la creación de diseños con Divi son las muchas formas en que podemos abordar un diseño. Los módulos que incluyen contenido son un gran ejemplo. Podemos usar sus opciones de contenido, o podemos usarlos junto con otros módulos para crear algunos diseños únicos. Por ejemplo, las combinaciones de módulos nos permiten crear elementos pegajosos. En este artículo, veremos cómo hacer que su módulo de testimonios Divi sea fijo mientras permite que el contenido del testimonio se desplace normalmente.

Avance

Aquí hay un vistazo a lo que haremos. La versión móvil de este diseño no será pegajosa, así que solo muestro la versión de escritorio para la vista previa.

Ejemplo de módulo fijo de testimonios de My Divi

Para mi ejemplo, estoy usando la página de inicio del paquete de diseño de servicios eléctricos gratuito que está disponible en Divi. Esta página ya tiene una sección de testimonios cerca de la parte inferior del diseño, pero tiene un diseño completamente diferente. Reemplazaré los testimonios en esa sección y reflejaré el estilo del nuevo diseño. Mantendré el título, pero lo recrearé para mostrar la configuración.

Ejemplo de módulo fijo de testimonios de My Divi

Para este tutorial, construiré el testimonio usando dos módulos. Usaré el módulo de testimonios para mostrar la imagen, el nombre, el cargo y la empresa. Para el contenido testimonial, usaré un módulo de texto. El módulo de texto se desplazará normalmente. El módulo de testimonios permanecerá en su lugar mientras el usuario se desplaza hasta que haya llegado al final del testimonio. Luego, el módulo de testimonios se desplazará con el módulo de texto.

Crear el título de la sección de testimonios fijos

Primero, cree una nueva sección y agregue una fila de una sola columna . Esta fila contendrá el título, que estará centrado.

Crear el título de la sección de testimonios fijos

Módulo de texto de título

A continuación, agregue un módulo de texto para el título.

Módulo de texto de título

A continuación, abra la configuración del módulo de texto . Cambie el texto a Título 3 y agregue el título en el editor de contenido del cuerpo.

Texto: Título 3
Contenido: Clientes Felices

Módulo de texto de título

Configuración de diseño

A continuación, ve a la pestaña de diseño . Establezca la Alineación del texto en Centrado.

Alineación de texto: centrado

Módulo de texto de título

Seleccione H3 para el Texto de encabezado . Elija Chakra Petch para la fuente. Establece el Grosor en Negrita y el Color en negro.

Fuente: Chakra Petch
Peso: Negrita
Color: #000000

Módulo de texto de título

Finalmente, elija el ícono de la tableta para el tamaño del texto y establezca el Tamaño del escritorio en 50 px, el Tamaño de la tableta en 28 px y el Tamaño del teléfono en 20 px. Cierra la configuración del módulo.

Tamaño: escritorio 50 px, tableta 28 px, teléfono 20 px

Módulo de texto de título

Agregar una fila para el primer testimonio

A continuación, agregue una fila de 2/3, 1/3 debajo del título. Esta fila tendrá el primer testimonio.

Agregar una fila para el primer testimonio

Configuración de fila

Abra la pestaña de diseño y habilite Igualar alturas de columna .

Igualar alturas de columna: Sí

Agregar una fila para el primer testimonio

Configuración de columna

Abra la configuración de la primera columna con la configuración de la fila.

Agregar una fila para el primer testimonio

Desplácese hacia abajo hasta Estilos de borde y seleccione Estilo de borde superior. Cambia el Ancho a 2px y el Color a #ffd600. Cierre la configuración de la fila. Esto agregará una línea amarilla sobre el testimonio como el testimonio original que reemplazamos.

Estilos de borde: Superior
Color del borde superior: #ffd600
Ancho: 2px

Agregar una fila para el primer testimonio

Módulo de texto testimonial

A continuación, agregaremos el módulo de texto para el contenido testimonial. Agregue un módulo de texto a la columna de la izquierda, debajo de la línea amarilla.

Módulo de texto testimonial

Ingrese el contenido de su testimonio en el editor de contenido.

Módulo de texto testimonial

A continuación, ve a la pestaña de diseño . Elija Chakra Petch para la fuente. Establece el Grosor en Negrita y el Color en Negro. Para el Tamaño del texto, elija 30 px para el escritorio y 14 px para la tableta. La configuración del teléfono seguirá a la de la tableta automáticamente, por lo que no necesitaremos cambiarla. Establezca la Altura de la línea de texto en 2 em. Esto crea un testimonio en letra gigante que llamará la atención.

Fuente: Chakra Petch
Peso: Negrita
De color negro
Tamaño: escritorio 30 px, tableta 14 px
Altura de línea: 2em

Módulo de texto testimonial

Desplácese hacia abajo hasta Alineación de texto y elija Centrado. Cierra la configuración del módulo de texto.

Alineación: Centrado

Módulo de texto testimonial

Configuración del módulo de testimonios

A continuación, agregue un módulo Testimonial a la columna de la derecha. Esta será adhesiva y mostrará el nombre de la persona, el nombre de la empresa, el cargo y la imagen.