La página de contacto puede ser una de las páginas más importantes de un sitio web. Le muestra al visitante cómo comunicarse con usted, dónde se encuentra, les brinda una forma de seguirlo en las redes sociales e incluso puede ser su llamado a la acción. Las páginas de contacto no son el centro de atención, por lo que no siempre reciben la atención de diseño que necesitan. En este artículo, veremos 17 sitios web de Divi con páginas de contacto únicas para ayudarlo a inspirarse para su próximo diseño de Divi.
Las páginas de contacto suelen incluir formularios de contacto, pero solo necesitan proporcionar información de contacto que satisfaga las necesidades del visitante. Muchos incluyen números de teléfono, direcciones de correo electrónico, direcciones físicas, mapas, enlaces sociales o cualquier combinación de estas opciones.
Mostraré una imagen de la sección que me gusta y discutiré lo que me gustó de ella. Los sitios web no están en ningún orden en particular. Espere hasta el final para ver algunos enlaces que lo ayudarán a subir de nivel su propia página de contacto única.
Este usa una imagen de fondo con superposición para ayudar a describir la empresa. Una sección que se superpone muestra un mapa con estilo en un lado con información en el otro e incluye una dirección en la que se puede hacer clic que abre un mapa, correo electrónico en el que se puede hacer clic, enlaces de seguimiento social y un formulario de contacto. Un borde con estilo encierra esta fila. A esto le sigue una imagen de pantalla completa, un formulario de registro e información sobre la empresa, todo diseñado para que coincida con la marca del sitio.
Ver sitio web
2. Brionne Davis
Esta es una de las páginas de contacto más dramáticas que he visto. Muestra una imagen de fondo de pantalla completa de Brionne Davis en paralaje. Los campos de formulario están diseñados para crear un patrón. Un formulario de contacto se coloca a la izquierda con un formulario de suscripción a la derecha. La imagen permanece en su lugar en el desplazamiento. El desplazamiento revela la información de contacto del gerente por un lado y la agencia de talentos por el otro.
Ver sitio web
3. Lucía Evelyn
Este sitio utiliza un formulario de contacto simple que está diseñado para adaptarse al diseño del sitio. Incluye un CTA dentro del texto que invita al lector a hacer preguntas. El formulario se coloca sobre una imagen de fondo de pantalla completa que ayuda a resaltar la elegancia del diseño del sitio.
Imagen destacada a través del artista / shutterstock.com
Ver sitio web
4. Jason José
Este incluye un estilo único. Una imagen de pantalla completa muestra un título con texto grande que está diseñado para que coincida con el sitio web. La imagen utiliza un elegante divisor de secciones y el formulario de contacto se superpone a la imagen. El formulario en sí es simple pero coincide con el estilo del sitio. Junto al formulario se proporcionan enlaces de seguimiento social con estilo, correo electrónico y un número de teléfono.
Ver sitio web
5. Control de Plagas Fénix
Este sitio incluye una gran sección de título con un logotipo para presentar la información de contacto y proporcionar información sobre el servicio. Un formulario de contacto con estilo sin fondo proporciona selecciones con botones de opción y un cuadro desplegable. Lo que encuentro más interesante es el mapa con estilo que se superpone a la sección anterior y tres anuncios publicitarios que se superponen al mapa. Los anuncios publicitarios proporcionan información de contacto para tres ubicaciones diferentes.
Ver sitio web
6. MBS Contabilidad
Todos los elementos de la página de contacto de este sitio, incluidos los campos de formulario de contacto individuales, incluyen efectos de sombra. Incluye un CTA de ancho completo con gráfico y un botón. El texto del botón muestra el número de teléfono. Una sección de texto de ancho completo proporciona información sobre los servicios. Los anuncios junto al formulario de contacto incluyen un número de teléfono en el que se puede hacer clic e información sobre cómo chatear con ellos. Una imagen anotada muestra el estacionamiento. Una sección de información se superpone a una imagen de fondo de un mapa e incluye iconos de seguimiento social.
Ver sitio web
7. Petratec
Esta página mantiene el tema de ingeniería del sitio web con imágenes de fondo azul oscuro e industrial. El formulario de contacto incluye una sección con una descripción de su proceso de información de contacto. Después de esto hay una sección que incluye una fila con texto y un mapa que está delineado con el mismo borde azul. El texto proporciona la dirección, el teléfono y los números de fax. El mapa está desplazado y se superpone a la fila superior.
Ver sitio web
8. Concepto de jardín
Este muestra una imagen de fondo de pantalla completa con la información de contacto que se muestra sobre ella dentro de una fila con un fondo transparente negro y esquinas redondeadas. La información incluye cuatro anuncios publicitarios para mostrar el número de teléfono, la dirección, el correo electrónico y los enlaces de seguimiento social. El formulario es simple e incluye un botón de envío centrado en la parte inferior que coincide con los colores de la marca de la empresa.
Ver sitio web
9. Frente Real Colegio Cristiano
Este usa azul oscuro con texto dorado y blanco para que coincida con la marca del sitio. La dirección se muestra en un mapa de ancho completo que no se acerca al pasar el mouse por encima. Un formulario de contacto y la información de la escuela se colocan sobre una imagen de la escuela con una superposición azul oscuro. Se puede hacer clic en el número de teléfono. Me encanta lo bien que combinan el azul y el dorado.
Ver sitio web
10. Amor, no vertedero
En lugar de un formulario de contacto, este proporciona un enlace de correo electrónico en el que se puede hacer clic, una dirección física y enlaces de seguimiento social, todo colocado sobre un corazón en el fondo para que coincida con el mensaje del sitio. También incluye un hashtag para ayudar a difundir el mensaje de la empresa.
Ver sitio web
11. Disfruta Comer En Vivo
Este sitio incluye un mapa de ancho completo que no hace zoom al pasar el mouse con un formulario de contacto superpuesto y un módulo de texto con información. En lugar de mostrar colores de fondo para los campos, el formulario los subraya con un color que coincide con los títulos del sitio web. La información utiliza iconos de estilo con los mismos colores.
Ver sitio web
12. Boutique sin sal
Este sitio muestra un formulario de contacto simple con un estilo mínimo pero interesante. El borde es blanco, al igual que los fondos de los campos, y el fondo en sí es azul para que coincida con el color de fondo de la sección. El título se superpone al borde. Los botones de seguimiento social están incluidos en el pie de página.
Ver sitio web
13. Casas Dukeries
Esta página muestra anuncios publicitarios con íconos que crean grandes bloques con información de contacto de ubicación, correo electrónico y número de teléfono. Los íconos están en dorado y los bordes usan sombras para ayudar a separarlos. La siguiente sección muestra un formulario de contacto y un mapa juntos dentro de una fila con una sombra de fondo. El título y el borde dorado se superponen a la fila, dándole un diseño elegante. La parte del formulario de contacto muestra la información de contacto encima del formulario.
Ver sitio web
14. Salón Claire
Este no muestra el formulario a menos que quieras verlo. Proporciona toda la información de contacto, incluida la información de la empresa, la dirección física, el número de teléfono, el correo electrónico, el mapa, las imágenes y los CTA. Esto lleva a un botón que está resaltado por una flecha. Al hacer clic en el botón, se abre el formulario de contacto en una ventana emergente. El formulario en sí usa efectos de sombra sobre el fondo dorado que está diseñado para que coincida con el sitio web.
Ver sitio web
15. Medios de comunicación
Este ayuda a reducir el tipo de información de contacto que necesita al proporcionar opciones que usan fondos grandes con superposiciones, texto e íconos grandes. Al hacer clic en Ventas, accederá a un formulario de contacto con estilo sobre una imagen de fondo de pantalla completa. Al hacer clic en Soporte, se abre una página con este fondo en pantalla completa y tres íconos para ayudarlo a delimitar aún más. Esto ayuda al sitio web a brindarle la información específica que necesita y garantiza que su información llegue al departamento correcto.
Ver sitio web
16. Medios de libros de NXT
Este maneja información de contacto para múltiples ubicaciones dentro de dos columnas. Muestra tarjetas que incluyen una imagen, una dirección con un número de teléfono y un mapa para cada ubicación. A continuación se muestra un formulario de contacto simple que tiene un estilo que combina el fondo con la sección. La página incluye una introducción de ancho completo y termina con un CTA para ver la página del miembro del equipo.
Ver sitio web
17. Semilla de uva EE. UU.
Este sitio superpone el formulario de contacto con la primera sección. El formulario se muestra sobre un fondo de paralaje con una superposición que coincide con la marca del sitio. Justo debajo del formulario hay preguntas frecuentes seguidas de íconos sociales, un número de teléfono y un botón que lo lleva de regreso a la parte superior de la pantalla donde puede ver el formulario de contacto.
Ver sitio web
pensamientos finales
Ese es nuestro vistazo a 17 sitios web de Divi con páginas de contacto únicas para ayudarlo a inspirarse para su próximo diseño de Divi. Hay muchos artículos aquí en el blog de ET para obtener aún más ayuda con sus diseños de Divi. Algunos incluyen diseños, mientras que otros discuten complementos específicos de formularios de WordPress . Aquí hay algunos que hablan de diseño con Divi:
- Descargue el paquete de diseño de páginas de contacto de Divi gratis
- Cómo solicitar un acuerdo de términos y condiciones en su formulario de contacto
- Cómo crear un formulario de contacto al hacer clic con Divi
- Cómo crear un formulario de contacto en línea con Divi
- Cómo crear un formulario de cotización con el módulo de formulario de contacto de Divi
- 5 formas únicas de diseñar el módulo de formulario de contacto de Divi
Queremos escuchar de ti. ¿Cuáles de estos sitios web con páginas de contacto únicas son sus favoritos? Háganos saber en los comentarios.
Imagen destacada a través de Keep Calm y Vector / shutterstock.com