Para 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 los contacten 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, vamos a crear un diseño de sección de formulario de contacto de pantalla completa que puede usar en cualquier página de su sitio Divi . También personalizaremos el diseño con configuraciones útiles de diseño receptivo que mantendrán ese diseño de pantalla completa con un aspecto excelente incluso en teléfonos pequeños.
¡Empecemos!
Aquí hay un vistazo rápido a la sección de formulario de contacto de pantalla completa receptiva que vamos a construir.
Descarga el diseño GRATIS
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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
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 has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
Construyendo el diseño de la sección de contacto
Para comenzar, agregaremos 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 prefabricado
Una vez que haga clic para editar la página usando el constructor Divi, seleccione la opción «Elegir un diseño prefabricado».
Luego busque el diseño de la página de contacto de Business Coach y haga clic en el botón «Usar este diseño».
Ajustes de 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 de sección y relleno
- Altura mínima: 600 px
- Altura: 104vh
- Relleno: arriba 0px, abajo 0px
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 una altura de 104vh para que tengamos un poco de espacio adicional para cuando el usuario se desplace a la sección.
Establecer la altura mínima en 600 px es una altura alternativa para que ninguno de los elementos dentro de la sección se oculte si alguna vez la altura del navegador es demasiado pequeña. Esto deberá ajustarse de acuerdo con la cantidad de contenido que tenemos 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 al elemento principal.
|
01
|
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 prefabricada a continuación.
Eliminar secciones adicionales del diseño prefabricado
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 el diseño receptivo de pantalla completa
Ahora que se completó el diseño de la sección, estamos listos para comenzar a personalizar el contenido (o los elementos secundarios) de la sección con un diseño receptivo que se escalará muy bien para 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 pequeñas.
Configuración de fila
Abra la configuración de la fila y actualice lo siguiente:
- Ancho del canalón: 1
- Ancho: 100%
- Relleno: 0px arriba, 0px abajo, 7vh izquierda, 7vh 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)
- Título 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 agréguelo a una de las páginas del sitio web.
Uso de la sección de 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 de pantalla completa a una página (o publicación) en Divi, ábralo 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 de la biblioteca y seleccione el diseño de sección guardado 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 del formulario de contacto a pantalla completa lo 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 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 escuchar de usted en los comentarios.
¡Salud!