Divi – Tarjetas con módulos de texto e imágenes

por | Feb 3, 2022 | Configuración, Divi | 0 Comentarios

Siguiendo las píldoras de información sobre el tema Divi, hoy vamos a construir una sección con tarjetas de módulos de texto e imágenes, como en este ejemplo.

Modulo texto e imagen

Abrimos el editor de Divi y vamos a la parte donde queremos insertar este módulo y pinchamos en nueva sección, agregando una Regular.

Despues añadimos dos secciones, la superior con una sola sección y la inferior con tres apartados.

En la sección superiror agregamos un módulo de texto en el que ponemos el título, como «Algunos de nuestros trabajos».

Damos el formato que queramos, tipo de letra, color, y lo centramos

Añadimos un módulo separador, que de un toque más elegante.  A este separador se le puede dar el formato que se desee, en este caso una línea sólida de color naranja, de 3 pixels de ancho, que ocupe el 40% del ancho del módulo y centrado.

Pasamos a la línea donde vamos a colocar los módulos de texto con imágenes.

Se pueden elegir módulos de anuncios, pero estos no permiten poner el texto encima de la imagen, que es lo que buscamos, asi que vamos a por otra opción.

Insertamos una llamada a la acción, que permite tener un título y un texto. Si no configuramos el botón de llamada a la acción, este no aparece.

Y damos el formato que deseemos, pudiendo configurar de manera distinta el título y el texto, tamaño, centrado, colores… El fondo es importante dejarlo transparente, puesto que lo definiremos junto con la imagen.

Dentro de esta sección añadimos otro módulo de imagen, donde colocaremos la imagen deseada, y la configuramos a nuestro gusto.

Para los módulos de texto e imagen parezcan uno solo, tenemos que ir a ajustes de la fila, donde se puede configurar cada columna. Aquí es donde agregamos el enlace y  damos un color de fondo.

También quitamos todos los márgenes inferiores del texto, para que no exista separación entre el texto y la imagen y quede más compacto

Cuando tenemos el módulo a nuestro gusto, solamente tenemos que abrir los ajustes de la fila y copiar esa columna duplicandola, y borrando las que están vacías.

Si las columnas aparecen muy separadas, en la configuración de tamaño se puede ajustar su separación, así como forzar a que todas las columnas tengan la misma altura.

Ya solo fataría personalizar cada uno de los módulos con su texto e imagen.

Estos post sirven para compartir lo que yo voy aprendiendo de WordPress y del tema Divi. Si necesitas ayuda para hacer tu web, puedes contactar conmigo en este enlace, y si quieres contratar tu hosting en WebEmpresa, puedes hacerlo en este otro (afiliado).

0 comentarios

Enviar un comentario

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

Abrir chat
1
Podemos conversar por WhastApp
Hola. ¿En que puedo ayudarte?