Cómo crear una sección de formulario de contacto de pantalla completa receptiva con una animación de desplazamiento con zoom
Publicado: 2020-05-01Para muchos sitios web, la sección de contacto de la página es el destino ideal para los visitantes. Para decir lo obvio, la mayoría de las personas / empresas quieren que sus visitantes se pongan en contacto con ellos para hacer más negocios. Por eso es importante optimizar esa sección para una mejor conversión. Una forma de hacerlo es crear un diseño de formulario de contacto de pantalla completa que le brinde al usuario una vista sin distracciones de la información de contacto.
En este tutorial, crearemos un diseño de sección de formulario de contacto en pantalla completa que puede usar en cualquier página de su sitio Divi. También personalizaremos el diseño con útiles configuraciones de diseño receptivo que mantendrán ese diseño de pantalla completa luciendo genial incluso en teléfonos pequeños.
¡Empecemos!
Vistazo
Aquí hay un vistazo rápido a la sección de formulario de contacto de pantalla completa receptiva que vamos a crear.
Descarga el diseño GRATIS
Para poner sus manos sobre 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 formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout 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 le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
https://youtu.be/5Qt9J95uME8
Suscríbete a nuestro canal de Youtube
Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.
Luego haga clic en el botón Importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder. Recuerde que este es un diseño de sección, por lo que deberá agregar este diseño a una página, publicación o plantilla al crear una nueva sección en el generador.
Consulte la parte inferior de la publicación para saber cómo agregar el diseño de la sección a una página.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo ha hecho, instale y active Divi Theme.
- Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
Creación del diseño de la sección de contactos
Para comenzar, vamos a agregar un diseño prefabricado a una nueva página usando Divi Builder. Esto acelerará el diseño para que podamos concentrarnos en lo que se necesita para hacer una sección (con un formulario de contacto) a pantalla completa y receptiva. Luego agregaremos el efecto de desplazamiento para juntarlo todo al final.
Agregar diseño prediseñado
Una vez que haga clic para editar la página usando el constructor Divi, seleccione la opción "Elegir un diseño prefabricado".
A continuación, busque el diseño de la página de contacto de Business Coach y haga clic en el botón "Usar este diseño".
Configuración de la sección
Una vez que el diseño se haya cargado en la página, abra la configuración de la sección en la parte superior del diseño y actualice lo siguiente:
Fondo
- Color de fondo: # 3550a0
Altura y acolchado de la sección
- Altura mínima: 600px
- Altura: 104vh
- Relleno: 0px superior, 0px inferior
Una de las claves de este diseño es establecer la altura en al menos 100vh (100% de la altura de la ventana gráfica). Esto asegurará que la sección abarque toda la altura de la ventana del navegador. Estamos agregando 104vh de altura para que tengamos un poco de espacio extra para cuando el usuario se desplace a la sección.
Establecer la altura mínima en 600 px es una altura de respaldo para que ninguno de los elementos dentro de la sección esté oculto si alguna vez la altura del navegador es demasiado pequeña. Esto deberá ajustarse según la cantidad de contenido que tengamos dentro de la sección.
CSS personalizado
Para centrar verticalmente las filas dentro de la sección (ideal para secciones de pantalla completa), agregue el siguiente CSS personalizado como elemento principal.
display:flex;flex-direction: column;
Agregar formulario de contacto
Para agregar el formulario de contacto a la sección, arrástrelo debajo del módulo de texto existente de la sección prediseñada a continuación.
Eliminar secciones adicionales del diseño prediseñado
Luego elimine la sección inferior para que solo quede la sección que estamos construyendo.
Personalización de los elementos de la sección para un diseño adaptable a pantalla completa
Ahora que se ha completado el diseño de la sección, estamos listos para comenzar a personalizar el contenido (o elementos secundarios) de la sección con un diseño receptivo que se adaptará muy bien a una sección de pantalla completa en todos los dispositivos.
Usaremos la unidad de longitud vh para la mayor parte del tamaño del texto y el espaciado de cada uno de los elementos. Esto ayudará a mantener los elementos a la vista con el diseño de pantalla completa incluso en pantallas de teléfono cortas.
Configuración de filas
Abra la configuración de la fila y actualice lo siguiente:
- Ancho de la canaleta: 1
- Ancho: 100%
- Relleno: 0px arriba, 0px abajo, 7vh a la izquierda, 7vh a la derecha
Configuración del módulo de texto
Abra la configuración del módulo de texto y actualice lo siguiente:
Tamaño del texto del encabezado
- Tamaño del texto del encabezado: 7vh (escritorio), 5vh (tableta y teléfono)
- Encabezado 3 Tamaño del texto: 2vh (escritorio), 3vh (tableta), 12px (teléfono)
Margen
- Margen: 3vh inferior
Configuración del formulario de contacto
Ahora continuaremos con nuestro ajuste de diseño receptivo en el formulario de contacto utilizando la unidad de longitud vh. Abra la Configuración del formulario de contacto y actualice lo siguiente:
Configuración de campo
- Margen de campos: 3vh
- Acolchado Fleids: 2vh arriba, 2vh abajo
- Tamaño del texto de los campos: 2.5vh
Tamaño del texto del botón
- Tamaño del texto del botón: 2vh
Ancho
- Ancho máximo: ninguno
Agregar los efectos de desplazamiento
El último paso del diseño es el efecto de desplazamiento que hará la transición de la sección del formulario de contacto a una vista de pantalla completa al desplazarse hacia abajo en la página. Para hacer esto, abra la configuración de la sección una vez más y actualice lo siguiente:
En la pestaña Escalar hacia arriba y hacia abajo ...
- Habilitar escalado hacia arriba y hacia abajo: SÍ
- Escala inicial: 60% (al 0%)
- Escala media: 60% (al 70%)
- Escala final: 100% (al 100%)
Eso completa el diseño de la sección del formulario de contacto a pantalla completa. Pero antes de que podamos ver el resultado final, primero agregémoslo a una de las páginas del sitio web.
Uso de la sección Formulario de contacto de pantalla completa en su sitio web
Guardar el diseño de la sección en la biblioteca Divi
Antes de que podamos agregar esta sección a otra página de nuestro sitio web, primero debemos guardar el diseño de la sección en la Biblioteca Divi.
Para hacer esto, haga clic en el icono "Agregar a la biblioteca" en el menú de la sección. Luego, asigne un nombre al diseño y haga clic en el botón "Guardar en la biblioteca".
Ahora el diseño de la sección estará disponible dentro de la Biblioteca Divi para uso futuro.
Agregar diseño de sección a la página desde la biblioteca Divi
Para agregar el diseño de la sección del formulario de contacto en pantalla completa a una página (o publicación) en Divi, abra para editar la página usando Divi Builder.
Luego haga clic para agregar una nueva sección en algún lugar de la página.
En la ventana emergente Insertar sección, haga clic en la pestaña Agregar desde biblioteca y seleccione el diseño de la sección guardada de la lista (el mío se llama "Formulario de contacto de pantalla completa").
Resultado final
Ahora veamos el resultado final.
Aquí está en el escritorio.
Aquí está en tableta (iPad Pro en realidad).
Aquí está en el teléfono (iPhone 5 en realidad). Tenga en cuenta que, aunque la pantalla es muy corta, el contenido aún cabe dentro de la vista de pantalla completa.
Pensamientos finales
Espero que la sección de formulario de contacto en pantalla completa le ayude a crear un formulario / sección de contacto de alta conversión para su propio sitio web. Lo importante a tener en cuenta es asegurarse siempre y mantener el contenido lo suficientemente conciso como para que también se muestre bien en teléfonos pequeños. Algunas de las técnicas clave de diseño receptivo utilizadas en este diseño también serán útiles al realizar ajustes en cualquier diseño en su sitio web.
Para obtener más información sobre este tema, consulte nuestra publicación sobre cómo usar las unidades de longitud vw y vh para diseñar un formulario de contacto receptivo en Divi.
Espero tener noticias tuyas en los comentarios.
¡Salud!