Los sitios web existen para hacer que la interacción entre empresas o individuos y los visitantes de su sitio web se produzca de manera más fácil y efectiva. La forma más efectiva para que un sitio web indique qué acción les gustaría que realicen los visitantes es lo que se denomina una llamada a la acción (CTA). Cuando combina CTA con un buen diseño, puede obtener una respuesta aún mejor de sus visitantes.
En este tutorial de Divi , le mostraremos cómo crear una sección CTA vibrante usando Divi y Photoshop. Puede utilizar este diseño en cualquier sitio web cambiando las imágenes y los colores que se utilizan.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado final.
en el escritorio
en tableta
En el teléfono
Cómo crear una sección CTA vibrante para tu próximo proyecto con Divi
Suscríbete a nuestro canal de Youtube
Crear imágenes de borde con Photoshop
Crear nuevo archivo de Photoshop
En la primera parte de este tutorial, crearemos dos imágenes que usaremos a lo largo del tutorial de Divi. Comience creando un nuevo archivo de Photoshop y use 800 para el ancho y la altura. Luego, elija ‘Transparente’ para el Contenido de fondo y haga clic en el botón Crear.
Agregar color de fondo a la capa
A continuación, asigne a la capa en la que se encuentra ‘#F3F2F2’ como color de fondo con la herramienta Bote de pintura. Si planea usar otro color de fondo para su sección dentro de Divi, use ese color en su lugar.
Añadir máscara de capa
Continúe agregando una máscara de capa a la capa a la que acaba de dar un color.
Crear una forma de rectángulo con trazo
Luego, agregue una forma cuadrada con la herramienta Rectángulo mientras mantiene presionada la tecla Mayús. Este rectángulo no necesitará relleno y un trazo negro de ’30px’.
Rasterizar capa
El rectángulo que acaba de agregar deberá volverse transparente. De esa manera, una vez que agregue la imagen al Divi Builder, puede elegir qué color aparece en la parte transparente. Para comenzar este proceso, rasterice la capa que contiene el rectángulo.
Seleccione Capa rasterizada + Haga clic en Máscara
Luego, presione control/comando + clic en la capa rasterizada y seleccione la máscara de capa de la capa de fondo.
Usar la herramienta Pincel negro en la forma
Mientras tiene seleccionada la máscara de capa, use un pincel negro para repasar la forma de rectángulo que ha creado. Esto eliminará la forma de la máscara de capa.
Ocultar capa rasterizada
Ahora que ha repasado el rectángulo con un pincel negro, esa parte de la máscara de capa se volverá transparente. Pero, por supuesto, deberá ocultar la capa rasterizada para ver el resultado.
Seleccionar máscara y quitar parte del borde derecho
El siguiente paso que deberá tomar es eliminar una parte de la transparencia del lado derecho de su rectángulo. Para hacer eso, seleccione la máscara de capa, use la herramienta de selección en la parte que desea eliminar y simplemente presione eliminar en su teclado.
Guardar imagen de escritorio para web
Tu versión de escritorio ya está lista. Lo único que queda por hacer es guardarlo yendo a Archivo > Exportar > Guardar para Web y asegurándose de que el archivo que está exportando sea PNG.
Arrastre la imagen guardada a Photoshop
Vamos a ahorrar algo de tiempo y hacer algunas modificaciones a la imagen que acabamos de guardar para que podamos usarla también para tabletas y teléfonos. Comience arrastrando la imagen que ha guardado en Photoshop.
Girar imagen
Luego, rota la imagen yendo a Edición > Transformar > Rotar 90° en el sentido de las agujas del reloj.
Aumentar cultivo
Aumente un poco el recorte de su imagen también. Esto solo lo ayudará a asegurarse de que la imagen no quede cortada por el tamaño de la pantalla una vez que la use para su sitio web.
Guardar la imagen de la tableta y el teléfono para la Web
Y guarde esta nueva imagen como PNG también.
Recrear versión de escritorio
Crear nueva sección
Color de fondo
Ahora que tenemos las dos imágenes que necesitamos para que el diseño Divi funcione, podemos comenzar a construir la sección CTA. Para hacerlo, cree una nueva sección estándar en una página nueva o existente usando ‘#f3f2f2’ como color de fondo.
Agregar nueva fila
Estructura de la columna
Continúe agregando una fila de dos columnas a la sección que acaba de crear.
Alineación
Para esta fila, vamos a utilizar la alineación a la derecha dentro de la subcategoría Alineación de la pestaña Diseño.
Visibilidad
Por último, tendremos que deshabilitar la fila para teléfono y tableta. Más adelante en este tutorial, crearemos una nueva versión que coincidirá con el tamaño de pantalla de tabletas y teléfonos.
Agregar módulo de imagen de borde
Cargar imagen
Una vez que haya terminado con la configuración de su fila, agregue un módulo de imagen a la primera columna de su fila. Cargue el archivo de imagen de escritorio que ha creado en la parte de Photoshop de esta publicación.
Color de fondo
Debido a la transparencia dentro del archivo de imagen, ahora puede elegir un color para su rectángulo sin tener que realizar el cambio en Photoshop. Puede reutilizar la misma imagen y simplemente asignarle un color de fondo diferente. En este caso, estamos usando ‘#f9d400’.
Agregar módulo de imagen
Cargar imagen
Justo debajo del módulo de imagen que contiene el rectángulo, agregue otro módulo de imagen. Cargue una imagen rectangular para que el diseño funcione.
Espaciado
Para hacer que este módulo de imagen se superponga con el anterior, use la siguiente configuración para la subcategoría Espaciado:
- Superior: -90%
- Derecha: 40%
- Izquierda: -40%
Sombra de la caja
Por último, seleccione la primera opción dentro de la subcategoría Box Shadow para agregar una sutil sombra de cuadro a su imagen.
Agregar módulo de texto de título
Configuración de texto
Ahora, puede elegir si usa un módulo de llamada a la acción o dos módulos de texto en combinación con un módulo de botones. Vamos a elegir la última opción para crear nuestro ejemplo. Agregue un primer Módulo de texto a la segunda columna de su fila y elija ‘Oscuro’ como Color de texto dentro de la subcategoría Texto.
Ajustes de texto de encabezado
Luego, abra la subcategoría Texto de encabezado y aplique los siguientes cambios:
- Fuente del título: Poppins
- Peso de la fuente del título: Regular
- Tamaño del texto del encabezado: 56 px
- Altura de la línea de encabezado: 1,3 em
Espaciado
Por último, deberá agregar un margen personalizado a su Módulo de texto que permitirá que el texto aparezca justo dentro del Módulo de imagen cuadrado:
- Superior: 30%
- Fondo: 2%
- Izquierda: -37%
Agregar módulo de cuerpo de texto
Configuración de texto
Justo debajo del módulo de texto que ha agregado, continúe y agregue otro módulo de texto. Use este para compartir la descripción de su sección de CTA. Pase a la pestaña Diseño y aplique los siguientes cambios a la subcategoría Texto:
- Color del texto: oscuro
- Fuente del texto: Poppins
- Peso de fuente de texto: regular
- Tamaño del texto: 13px
- Altura de línea de texto: 2em
Dimensionamiento
Luego, abra la subcategoría Tamaño y use ‘83%’ para el Ancho.
Espaciado
Por último, agregue ‘-37%’ al margen izquierdo de su módulo de texto del cuerpo también. De esa forma, el Módulo de texto aparecerá justo debajo del Módulo de texto anterior dentro del Módulo de imagen rectangular.
Alineación de botones
Por último, pero no menos importante, deberá agregar un Módulo de botón a la segunda columna de su fila. Este módulo de botones requiere una alineación del botón izquierdo dentro de la pestaña Diseño.
Configuración de botones
Luego, abra la subcategoría Botón y aplique los siguientes cambios a su botón:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 14px
- Color del texto del botón: #ffffff
- Color de fondo del botón: #000000
- Ancho del borde del botón: 0px
- Radio del borde del botón: 3
- Espaciado entre letras de botones: 1 px
- Fuente del botón: Poppins
- Peso de fuente: semi negrita
- Estilo de fuente: Mayúsculas
Espaciado
Por último, aplique el siguiente espacio a su botón para que encaje con sus módulos de texto:
- Margen Izquierdo: -37%
- Relleno superior: 12px
- Relleno derecho: 24px
- Relleno inferior: 12px
- Relleno izquierdo: 24px
Clonar Fila
Cambiar el color de fondo del módulo de imagen del borde
Ahora, clone la fila que acaba de crear y cambie el color de fondo del módulo de imagen del borde a ‘#00dbd7’ o cualquier otro color.
Cambiar módulo de imagen
Del mismo modo, también puede cambiar la imagen dentro del segundo Módulo de imagen para crear dos CTA que sean diferentes.
Recrear versión de tableta y teléfono
Agregar nueva fila
Estructura de la columna
Ahora que hemos creado la versión de escritorio, pasemos a la versión para tableta y teléfono. Lo primero que deberá hacer es agregar una fila de una columna a su sección.
Imagen de fondo de la columna 1
Luego, abra la configuración de la fila y elija el archivo de imagen cuadrada que ha creado para la tableta y el teléfono en la parte de Photoshop de este tutorial como imagen de fondo de la columna. Junto con la imagen, use la siguiente configuración:
- Tamaño de la imagen de fondo de la columna: Portada
- Posición de la imagen de fondo de la columna: Centro
- Imagen de fondo de columna Repetir: No repetir
- Mezcla de imagen de fondo de columna: Normal
Color de fondo de la columna 1
Agregue un color de fondo a la primera columna también. En este caso, estamos usando ‘#f9d400’.
Dimensionamiento
A continuación, abra la subcategoría Tamaño dentro de la pestaña Diseño de su fila, habilite la opción ‘Usar ancho de canalón personalizado’ y use un Ancho de canalón de ‘1’.
Espaciado
Para mantener algo de espacio entre esta fila y la siguiente fila que creará, agregue ’70px’ al margen inferior dentro de la subcategoría Espaciado.
Visibilidad
Por último, deshabilite esta fila en el escritorio.
Agregar módulo de imagen
Cargar imagen
El primer módulo que deberá agregar a su fila es el módulo de imagen.
Dimensionamiento
Después de elegir la imagen que desea que aparezca, vaya a la pestaña Diseño, abra la subcategoría Tamaño y use la siguiente configuración para ello:
- Ancho: 71%
- Alineación del módulo: Centro
Espaciado
Queremos que este módulo de imagen se superponga con la imagen de fondo cuadrada. Para eso, vamos a utilizar el siguiente margen personalizado para el Módulo de imagen:
- Superior: -50px
- Abajo: 10px
Sombra de la caja
Por último, también aplicaremos un poco de Sombra de cuadro a este Módulo de imagen. Vamos a utilizar la primera opción de la fila sin realizar ningún cambio en los valores predeterminados.
Cambiar el tamaño del texto y la orientación del texto del módulo de texto del título
Clone los módulos de texto y el módulo de botones de la sección del escritorio y colóquelos justo debajo del módulo de imagen que acaba de crear. Sin embargo, deberá realizar algunas configuraciones adicionales para que coincidan con el tamaño de la pantalla de la tableta y el teléfono. Los primeros cambios que deberá realizar en la subcategoría de texto de encabezado del primer módulo de texto son los siguientes:
- Alineación del texto del título: Centro
- Tamaño del texto del encabezado: 36 px
Eliminar el espaciado del módulo de texto del título
Mientras edita el módulo de texto del título, abra la subcategoría Espaciado y elimine todo el margen personalizado que está presente.
Cambiar la orientación del texto del módulo de texto del cuerpo
A continuación, abra el Módulo de texto del cuerpo y cambie la Orientación del texto a ‘Centro’ dentro de la subcategoría Texto.
Cambiar el tamaño del módulo de texto del cuerpo
La subcategoría Tamaño de este módulo de texto también necesitará algunas modificaciones:
- Ancho: 62%
- Alineación del módulo: Centro
Cambiar el espaciado del módulo de texto del cuerpo
Por último, el único valor dentro de la subcategoría Espaciado que se necesita es ’50px’ para el margen inferior.
Cambiar la alineación del módulo de botones
El módulo de botones es el último módulo que necesitaremos cambiar. Lo primero que deberá hacer es cambiar la Alineación del botón a ‘Centro’.
Cambiar el espaciado del módulo de botones
Luego, asegúrese de que el margen inferior de ‘150 px’ sea el único valor que use para el margen personalizado de su Módulo de botones.
Clonar Fila
Cambiar el color de fondo de la columna 1
Ahora que tiene la primera fila en su lugar, puede clonarla y cambiar el color de fondo de la columna 1 a ‘#00dbd7’ o cualquier color de su preferencia.
Cambiar módulo de imagen
Cambie la imagen dentro de su módulo de imagen dentro de su fila también para crear dos llamadas a la acción únicas para tabletas y teléfonos.
Resultado
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
en el escritorio
en tableta
En el teléfono
Pensamientos finales
Este tutorial le muestra cómo crear una sección CTA vibrante al combinar las opciones integradas de Divi y Photoshop. Puede usar la sección CTA que se ha recreado en este tutorial para cualquier sitio web. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!