Cómo crear un CTA único con el patrón de fondo y las opciones de máscara de Divi

El nuevo patrón de fondo y las opciones de máscara de Divi facilitan la creación de secciones llamativas y únicas de llamada a la acción (CTA) en su sitio web. Puede combinar imágenes, degradados, patrones y máscaras con muchas opciones de personalización para crear diseños de fondo únicos que llamarán la atención de sus visitantes.

En este tutorial, le mostraremos cómo crear una sección CTA única con el nuevo patrón de fondo y las opciones de máscara de Divi.

¡Empecemos!

Vistazo

Aquí hay una vista previa de la sección CTA que diseñaremos en este tutorial.

Lo que necesitas para empezar

Antes de comenzar, instale y active el tema Divi y asegúrese de tener la última versión de Divi en su sitio web.

Saltemos.

Cómo crear un CTA único con el patrón de fondo y las opciones de máscara de Divi

Crear una nueva página con un diseño prefabricado

Para nuestro tutorial, utilizaremos un diseño prefabricado de la biblioteca Divi. Para este diseño, utilizaremos la página de destino de la heladería del paquete de diseño de la heladería.

Cree una nueva página, agregue un título, luego seleccione la opción para usar Divi Builder.

Usaremos un diseño prefabricado de la biblioteca Divi para este ejemplo, así que seleccione Examinar diseños.

Busque y seleccione el diseño de la página de destino de la heladería.

Seleccione Usar este diseño para agregar el diseño a su página.

Ahora estamos listos para construir nuestro diseño.

Modificación del diseño para el patrón de fondo y la máscara

Modificaremos la sección CTA del sabor del mes desde este diseño. Hagamos algunos cambios en nuestro diseño para el patrón de fondo y el diseño de la máscara.

Configuración de fila

Abra Configuración de fila, luego seleccione Diseño.

En Tamaño, iguale las alturas de las columnas.

• Igualar alturas de columna: Sí

En Espaciado, retire el relleno superior para llevar el cono a la parte superior de la sección.

• Relleno superior: 0px

Configuración de la columna 1

En la pestaña Contenido para la configuración de la fila, seleccione la configuración de la Columna 1. En Fondo, elimine el fondo naranja.

Configuración de la columna 2

Ahora, seleccione la configuración de la Columna 2. El diseño original tiene un espacio que no necesitamos, así que deshagámonos de él. En Diseño, vaya a Espaciado y elimine el relleno superior.

Luego seleccione Avanzado y agregue el siguiente CSS personalizado al elemento principal para que nuestro texto de "sabor del mes" esté centrado verticalmente.

margin:auto;

Ajustes de sección

Abra la Configuración de la sección. En Diseño, seleccione Relleno. Ajuste el relleno de la sección para que el cono superior se alinee con la parte superior de la página.

• Relleno: 0px

Agregar un patrón de fondo y una máscara a la sección CTA

Ahora que nuestro diseño ha sido modificado, podemos agregar nuestro patrón de fondo y máscara. Hay infinitas opciones para patrones de fondo y máscaras con las nuevas opciones de Divi, lo que significa que puedes crear diseños únicos para tu sección de CTA con solo unos pocos clics. Siga para aprender a diseñar un fondo llamativo con estos ajustes.

Ajustes de color de fondo, patrón y máscara

Navegue a la configuración de fondo de la sección.

Debajo de la pestaña de color, agregue un fondo naranja

• Color: #FFA256

En la pestaña Patrón, establezca la forma y el color del patrón.

• Forma: Confeti
• Color: #FF7D14

Ahora agreguemos la máscara. Seleccione la pestaña de máscara, luego agregue la configuración de la siguiente manera:

• Forma: Gota de esquina
• Color de la máscara: #FFFFFF
• Transformación de máscara: Horizontal
• Relación de aspecto de la máscara: Paisaje
• Tamaño de la máscara: Cubierta

Ajustes de diseño

Ahora que nuestro fondo está en su lugar, hagamos algunos ajustes finales al diseño.

Abra la configuración del botón "Comprar" y cambie la alineación en la pestaña Diseño.

• Alineación de botones: Izquierda

Cambie el color de fondo del estado de desplazamiento del botón "Comprar" para que se destaque sobre el fondo naranja.

• Fondo del botón al pasar el mouse: #FF7D14

También ajustaremos el diseño de la fila para agregar más espacio entre el fondo naranja y la sección "Sabor del mes" a la derecha. Cambie el diseño de 1:1 a 3:2.

¡Y ahora el diseño del escritorio está completo y ha aprendido cómo crear una sección de CTA única con el patrón de fondo y las opciones de máscara de Divi!

Cómo hacer que la sección CTA sea receptiva

Cuando nuestra sección de CTA se ve en un teléfono o tableta, el contenido de la columna 2 se apila debajo de la columna 1. Esto puede causar algunos problemas de legibilidad con nuestro diseño. Hagamos algunos ajustes para optimizar nuestro contenido y diseño para pantallas más pequeñas utilizando la configuración receptiva integrada de Divi.

Dado que queremos que el texto aparezca antes de los botones, copie el texto "Sabor destacado del mes" en el módulo de texto "Chocolate naranja de julio". Asegúrese de agregar este texto únicamente a las versiones para teléfono y tableta.

• Cambie el texto "Naranja Chocolate" a H3.

A continuación, haremos algunos cambios en el texto para que destaque sobre este fondo. Vaya a la pestaña Diseño y realice los siguientes cambios:

• Color de texto H2 (teléfono y tableta): #000000
• Tamaño de texto H2 (teléfono y tableta): 30 px
• H3 (teléfono y tableta) Color del texto: #000000
• H4 (teléfono y tableta) Color del texto: #000000

Ahora vaya a la configuración del módulo de texto original "Sabor del mes" y cambie la visibilidad para que solo sea visible en dispositivos de escritorio. Esto hará que el módulo de texto original se oculte en dispositivos más pequeños. El texto Sabor del mes aparecerá encima del botón, con el otro texto en la página.

• Deshabilitar en: teléfono y tableta

A continuación, abra la configuración de la fila y luego abra la configuración de la columna 1. Retire el acolchado derecho e izquierdo.

• Relleno derecho: 0px
• Relleno izquierdo: 0px

Vaya a la configuración de la sección, luego al fondo, luego edite la configuración de la máscara

• Transformación de máscara: Invertir
• Relación de aspecto de la máscara: Retrato

Y ahora ha creado una sección CTA completamente receptiva con un fondo único gracias a las opciones de máscara y patrón de fondo de Divi.

Resultado final

Echemos un vistazo al resultado final.

Pensamientos finales

Diseñar una sección de llamado a la acción única y llamativa es muy fácil, gracias al poderoso patrón de fondo y las opciones de máscara de Divi. Da rienda suelta a tu creatividad experimentando con diferentes colores, patrones, máscaras y combinaciones de escenarios. Es fácil de diseñar y puede ajustar su configuración hasta que encuentre el aspecto perfecto con solo unos pocos clics. ¡Lo más importante es que está integrado directamente en Divi! Ya no es necesario diseñar gráficos de fondo en otro programa. Puede aplicar la configuración de fondo a otras secciones, filas y módulos para obtener diseños aún más exclusivos. Si desea obtener más información sobre el patrón de fondo y las funciones de máscara de Divi, consulte nuestro tutorial para ver una sección de héroe con máscaras y patrones de fondo y aprenda a combinar el generador de gradientes de Divi con máscaras y patrones de fondo.

¿Cómo ha utilizado el patrón de fondo y las opciones de máscara de Divi en su sitio web? ¡Háganos saber lo que ha creado en los comentarios a continuación!