¡Tu licencia Divi con un -20% de DescuentoOferta aquí

Cómo crear una sección de formulario de contacto a pantalla completa que se amplie al deslizar con Divi

May 31, 2020 | Tutoriales para Divi

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 se contacten con ellos para 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 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.

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. 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 de sección a su Biblioteca Divi, navegue a la Biblioteca Divi.

Haz 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 de su computadora.

Luego haga clic en el botón Importar.

cuadro de notificación divi

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 ver cómo agregar el diseño de sección a una página .

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

  1. Si aún no lo ha hecho, instale y active el Divi Theme .
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (visual builder).

Creación del diseño de la sección de contacto

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 centrarnos 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 unir todo al final.

Agregar diseño prefabricado

Una vez que haga clic para editar la página con el generador de Divi, seleccione la opción «Elegir un diseño prefabricado».

formulario de contacto de pantalla completa

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».

formulario de contacto de pantalla completa

Configuraciones de sección

Una vez que el diseño se ha cargado en la página, abra la configuración de la sección en la parte superior del diseño y actualice lo siguiente:

Antecedentes

  • Color de fondo: # 3550a0

formulario de contacto de pantalla completa

Altura de sección y acolchado

  • Altura mínima: 600 px
  • Altura: 104vh
  • Relleno: 0px superior, 0px inferior

formulario de contacto de pantalla completa

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 la altura completa 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 alternativa para que ninguno de los elementos dentro de la sección esté oculto si la altura del navegador es demasiado pequeña. Será necesario ajustar esto de acuerdo con 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.

01
display:flex;flex-direction: column;

formulario de contacto de pantalla completa

Agregar formulario de contacto

Para agregar el formulario de contacto a la sección, arrástrelo debajo del módulo de texto existente desde la sección prefabricada a continuación.

formulario de contacto de pantalla completa

Eliminar secciones adicionales del diseño prefabricado

Luego, elimine la sección inferior para que solo quede la única sección que estamos construyendo.

formulario de contacto de pantalla completa

Personalizar los elementos de sección para un diseño receptivo 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 para una sección de pantalla completa en todos los dispositivos.

Utilizaremos la unidad de longitud vh para la mayoría del tamaño del texto y el espaciado para 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 fila

Abra la configuración de la fila y actualice lo siguiente:

  • Ancho de canal: 1
  • Ancho: 100%
  • Relleno: 0px arriba, 0px abajo, 7vh izquierda, 7vh derecha

formulario de contacto de pantalla completa

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 de encabezado: 7vh (escritorio), 5vh (tableta y teléfono)

formulario de contacto de pantalla completa

  • Título 3 Tamaño del texto: 2vh (escritorio), 3vh (tableta), 12px (teléfono)

formulario de contacto de pantalla completa

Margen

  • Margen: fondo 3vh

formulario de contacto de pantalla completa

Configuración del formulario de contacto

Ahora continuaremos 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:

Configuraciones de campo

  • Margen de campos: 3vh
  • Relleno de Fleids: 2vh arriba, 2vh abajo
  • Tamaño del texto de los campos: 2.5vh

formulario de contacto de pantalla completa

Tamaño del texto del botón

  • Tamaño del texto del botón: 2vh

formulario de contacto de pantalla completa

Anchura

  • Ancho máximo: ninguno

formulario de contacto de pantalla completa

Agregar los efectos de desplazamiento

El último paso para el 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 escalar hacia arriba y hacia abajo: SÍ
  • Escala inicial: 60% (al 0%)
  • Escala media: 60% (al 70%)
  • Escala final: 100% (al 100%)

formulario de contacto de pantalla completa

Eso completa el diseño de la sección de formulario de contacto de pantalla completa. Pero antes de que podamos ver el resultado final, agreguémoslo primero 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 diseño de sección en Divi Library

Antes de que podamos agregar esta sección a otra página en 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».

formulario de contacto de pantalla completa

Ahora el diseño de la sección estará disponible dentro de la Biblioteca Divi para uso futuro.

formulario de contacto de pantalla completa

Agregar diseño de sección a la página desde Divi Library

Para agregar el diseño de sección de formulario de contacto de pantalla completa a una página (o publicación) en Divi, ábralo para editar la página con 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»).

formulario de contacto de pantalla completa

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

¡20% de Descuento en Divi!

Sitios web y usuarios ilimitados

Únete a más de 700.000 clientes y obten acceso a Divi, Extra, Bloom, Monarch y mucho más. Impulsa a todo tu equipo y crea sitios web ilimitados con una licencia.

¡Ir al descuento!



You have Successfully Subscribed!

Pin It on Pinterest

Share This