Cómo usar las unidades de longitud vw y vh para diseñar un formulario de contacto receptivo en Divi


Los formularios web son extremadamente cruciales para el éxito de su sitio web. Esto tiene sentido teniendo en cuenta que la mayoría de las empresas en línea dependen de formularios como optins de correo electrónico y formularios de contacto para ganar dinero mediante la creación de listas de correo electrónico y la comunicación con compradores potenciales. Y, en estos días, debemos asegurarnos de que estamos diseñando formularios receptivos que se verán geniales en todos los navegadores y dispositivos móviles.

En este tutorial, le mostraré cómo diseñar un formulario de contacto receptivo utilizando unidades de longitud vw y vh en Divi. Cubriremos cómo dimensionar y espaciar los campos y botones de entrada que se ajustarán de acuerdo con el ancho y la altura de su navegador. Esto le permitirá maximizar la visibilidad del formulario en todos los dispositivos, incluso para la vista horizontal en teléfonos móviles.

Para hacer esto, utilizaremos la configuración integrada de Divi que le permite personalizar el texto del formulario, los campos y los botones con facilidad.

Empecemos.

Vistazo

Escritorio

Tableta

Teléfono (retrato)

Teléfono (paisaje)

Descargue el diseño del formulario de contacto receptivo GRATIS (¡también incluye un formulario Optin de correo electrónico receptivo!)

Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se "volverá a suscribir" ni recibirá correos electrónicos adicionales.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, necesitará tener la siguiente configuración:

  1. El tema Divi instalado y activo
  2. Una nueva página creada para construir desde cero en el front-end (generador visual)
  3. Su bebida favorita (opcional, a menos que aún no haya tomado su café)

Después de eso, tendrá un lienzo en blanco para comenzar a construir los formularios receptivos en Divi.

¿Por qué usar unidades de longitud vw y vh para un diseño receptivo?

Las unidades de longitud son aquellos valores necesarios para dimensionar y espaciar elementos en su página web. Probablemente las unidades de longitud más comunes utilizadas en el diseño web son píxeles y porcentajes. Por ejemplo, un píxel es una unidad de longitud común utilizada para dimensionar texto, la unidad de longitud em se usa comúnmente para altura de línea, y una unidad de longitud porcentual se usa comúnmente para espaciar y dimensionar elementos para un diseño receptivo. De hecho, los valores de unidad de longitud predeterminados para elementos Divi (módulos, filas, secciones) se crean utilizando estas unidades de longitud comunes.

Las unidades de longitud serán absolutas (permanecerán del mismo tamaño sin importar el tamaño de otros elementos) o relativas (cambio / escala dependiendo del tamaño de otros elementos). Por ejemplo, un píxel es una unidad de longitud absoluta. Entonces, si un cuerpo de texto tiene un tamaño de fuente de 16px, el texto seguirá siendo de 16px sin importar el tamaño de su contenedor. Pero porcentaje y em son unidades de longitud relativa. Por lo tanto, una altura de línea que tiene un valor em se ajustará a medida que cambie el tamaño del texto del elemento. Y dado que el porcentaje también es una unidad de longitud relativa, una fila con un ancho del 80% será el 80% de su contenedor (o sección).

Las unidades de longitud vw y vh también son unidades de longitud relativa, pero en lugar de ser relativas al contenedor principal de elementos, es relativa a la ventana gráfica del navegador real. El ancho de la ventana gráfica (vw) es relativo al ancho del navegador y la altura de la ventana gráfica (vh) es relativa a la altura del navegador. El uso de estas unidades de longitud es una forma de mantener su diseño consistente en todos los navegadores porque se escalará de acuerdo con la ventana gráfica. Esto hace que el tamaño de cada elemento sea más predecible y fácil de administrar sin tener que preocuparse tanto por darle a cada elemento un tamaño diferente en cada dispositivo o punto de interrupción sensible. La unidad de longitud vh resulta especialmente útil para pantallas de teléfonos móviles, ya que tendrá en cuenta la altura de la ventana del teléfono en vista vertical y horizontal.

Esta técnica funciona mejor para diseños que dependen de grandes pantallas de ancho completo en el escritorio que escalarán de tamaño sin problemas a medida que el usuario ajuste el ancho del navegador.

Para una explicación más detallada de las unidades de longitud, mira esto guía sobre el uso de unidades de longitud en Divi.

Parte 1: Diseño de un formulario de contacto receptivo en Divi

Crear la sección y la fila

Cree una sección regular con una fila de una columna. Antes de agregar cualquier módulo, actualice la configuración de la sección de la siguiente manera:

Gradiente de fondo Color izquierdo: # fd7b5b
Gradiente de fondo derecho Color: # a92200

Luego abra la configuración de la fila y dele un degradado de fondo.

Color de fondo izquierdo del degradado: # ffdb8b
Gradiente de fondo derecho Color: # fdb15b

Luego, dimensionemos la fila usando la unidad de longitud vw para que se escale con el navegador.

Ancho: 66vw (escritorio), 66vw (tableta), 100% (teléfono)
Ancho máximo: 66vw (escritorio), 66vw (tableta), 100% (teléfono)
Altura mínima: 100vh (teléfono)

Relleno: 0px arriba, 0px abajo

El valor de 66vw asegurará que la fila permanecerá aproximadamente dos tercios del ancho de la ventana gráfica del navegador. El valor de 100vh en la pantalla del teléfono asegurará que la altura de la fila sea igual a la altura de la ventana del teléfono (opcional, pero un buen toque para una visualización óptima del área de contenido de la fila en los teléfonos).

Observe que el ancho de la fila está establecido en 100% (no 100vw). Esto se debe a que 100vw no tendrá en cuenta el ancho de la barra de desplazamiento a medida que se desplaza hacia abajo en la página. Por lo tanto, siempre es mejor usar el porcentaje para pantallas de ancho completo.

Crear el formulario de contacto

Con nuestra fila en su lugar, ahora podemos agregar el Módulo de formulario de contacto a la fila.

Una vez que se agrega el formulario de contacto, actualice el contenido como con un título y desactive captcha.

Título: Contáctenos
Mostrar Captcha: NO

Hacer campos de ancho completo

Para este diseño, voy a utilizar campos de ancho completo. Esto me permitirá agregar un espacio constante entre los campos (ya que no se utilizan flotadores) y me permitirá dar un ancho personalizado a cada uno de los campos para un diseño único más adelante. Por ahora, abra la configuración de los campos de nombre y correo electrónico y configure la opción "Hacer ancho completo" en "SÍ".

Optimizar los campos para un diseño receptivo

Ahora regrese a la configuración del formulario de contacto. Ahora podemos personalizar los campos de formulario utilizando unidades de longitud vw y vh. Actualice lo siguiente:

Color del texto de campo: # 333333
Margen de campos (escritorio y tableta): 2vw arriba, 2vw abajo
Margen de campos (teléfono): 2vh arriba, 2vh abajo

Relleno de campos (escritorio y tableta): 1vw arriba, 1vw abajo, 2vw izquierda, 2vw derecha
Relleno de campos (teléfono): 2vh arriba, 2vh abajo, 2vh izquierda, 2vh derecha

Campos Tamaño del texto: 2.5vw (escritorio), 4vh (teléfono)

Nota: El uso de 4vh para teléfono permitirá que la escala de tamaño de texto con la altura de la pantalla de su teléfono móvil sea útil para ver el formulario en la pantalla horizontal del teléfono (girando el teléfono hacia los lados). Pero si desea un tamaño de texto más consistente, es posible que desee utilizar una unidad de longitud de píxeles para el tamaño del texto del campo en la pantalla del teléfono.

Diseñando el Texto del Título

Para el texto del título, personalice lo siguiente:

Nivel de título del título: H2
Título de la fuente: Karla
Peso de la fuente del título: negrita
Color del texto del título: # f56845
Tamaño del texto del título: 7vw (escritorio), 8vh (teléfono)
Espacio entre letras de título: 1vw
Altura de la línea de título: 0.6em

Optimizar el botón para un diseño receptivo

Para el botón de formulario de contacto, vamos a agregar espacios y tamaños de texto similares a los campos que diseñamos anteriormente.

Haga clic para usar estilos de botones personalizados y actualice lo siguiente:

Tamaño del texto del botón: 2.5vw (escritorio), 4vh (teléfono)
Color del texto del botón: #ffffff
Color de fondo del botón: # 333333
Ancho del borde del botón: 0px
Radio del borde del botón: 0px
Fuente del botón: Montserrat
Margen del botón (escritorio): 1 vw arriba, 0 px a la izquierda, 0 px a la derecha
Margen del botón (teléfono): 1vh arriba
Relleno de botones (escritorio): 3vw arriba, 3vw abajo
Relleno de botones (teléfono): 3vh arriba, 3vh abajo

Button Box Shadow: ver captura de pantalla
Posición horizontal de la sombra de la caja: 2em
Posición vertical de la sombra de la caja: 0.4em
Color de sombra: rgba (245,104,69,0.29)

Agregar espacio al formulario de contacto

A continuación, agregue algo de relleno al formulario de contacto utilizando la unidad de longitud vw y una sombra de cuadro en los campos del formulario de la siguiente manera:

Relleno (escritorio): 3vw arriba, 3vw abajo, 5vw izquierda, 5vw derecha
Acolchado (teléfono): 5vh arriba, 5vh abajo, 3vh izquierda, 3vh derecha

Button Box Shadow: ver captura de pantalla
Posición horizontal de la sombra de la caja: 2em
Posición vertical de la sombra de la caja: 0.4em
Color de sombra: rgba (245,104,69,0.29)

Resultado hasta ahora

Escritorio

Tableta

Teléfono (retrato)

Teléfono (paisaje)

Toques finales

Ajuste de los anchos de los campos del formulario

Para una opción de diseño única, puede personalizar el ancho de cada uno de los campos. Abra la configuración del campo de nombre y actualice el ancho de la siguiente manera:

Ancho: 50% (escritorio), 100% (teléfono)

Luego abra la configuración del campo de correo electrónico y actualice el ancho de la siguiente manera:

Ancho: 65% (escritorio), 100% (teléfono)

A continuación, abra la configuración del campo de mensaje y actualice el ancho de la siguiente manera:

Ancho: 80% (escritorio), 100% (teléfono)

Hacer el botón de ancho completo

Para hacer que el botón del formulario de contacto receptivo sea de ancho completo, primero debemos agregar el siguiente CSS personalizado al cuadro de entrada del botón de contacto:

width: 97%;

Luego abra la configuración de la página y agregue el siguiente CSS personalizado:

.et_contact_bottom_container {
  float: none;
}

Diseño final

Ahora que hemos terminado, revisa el resultado final de nuestro formulario de respuesta. Observe cómo se escala el formulario de contacto al ajustar el ancho del navegador en el escritorio y la tableta y también cómo se ajusta el diseño al ajustar la altura de la ventana gráfica en el teléfono móvil.

Escritorio

Tableta

Teléfono (retrato)

Teléfono (paisaje)

Utilice la misma configuración de diseño para formularios de correo electrónico optin

También puede usar las mismas unidades de longitud vw y vh para diseñar un formulario de respuesta de correo electrónico receptivo. Aquí hay una captura de pantalla de un diseño de formulario de correo electrónico que se incluye en la descarga gratuita disponible en esta publicación.

Escritorio

Tableta

Teléfono (retrato)

Teléfono (paisaje)

Pensamientos finales

Usando unidades de longitud vw y vh, podemos crear un formulario de contacto receptivo (o cualquier formulario Divi) que se vea genial en todos los tamaños de navegador y dispositivos móviles. El diseño receptivo escalará los elementos del formulario sin problemas a medida que ajuste el ancho del navegador. Y, si usa la unidad de longitud vh en la pantalla del teléfono, incluso puede optimizar el formulario para la pantalla del teléfono vertical y horizontal.

No olvides revisar el Descarga gratis para obtener un ejemplo funcional de un formulario de contacto receptivo y correo electrónico optin.

Con suerte, esta publicación puede darle algunos consejos sobre cómo crear algunos formularios maravillosamente receptivos para su próximo proyecto.

Espero tener noticias suyas en los comentarios.

¡Salud!