Cuando esté ocupado configurando todas las páginas que desea incluir en su sitio web, es muy probable que desee incluir un formulario de contacto al final de cada página para facilitar el viaje de sus visitantes. Con Divi, puede, por supuesto, agregar un formulario de contacto a la página en sí, pero si prefiere agilizar el proceso, también es posible. En el tutorial de Divi de hoy, le mostraremos cómo agregar automáticamente un formulario de contacto de la página inferior a todas sus páginas a la vez. También agregaremos automáticamente un ícono fijo en la esquina inferior derecha con un enlace de anclaje que redirigirá automáticamente a las personas a la sección de contacto de la página en la que se encuentran. 

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

formulario de contacto de la página inferior

Móvil

formulario de contacto de la página inferior

 

Resumen del tutorial

  • Configure las páginas en su sitio web usando un paquete de diseño de su elección
  • Una vez que se establece el estilo de diseño de la página, puede reutilizar el estilo de diseño en el formulario de contacto de la página inferior
  • Para agregar el formulario de contacto de la página inferior, primero deberá crear una nueva plantilla dedicada a todas las páginas
  • Una vez que se ha creado la plantilla, puede comenzar a construir el cuerpo de la plantilla utilizando el generador visual de Divi
  • Para asegurarnos de que todo el contenido único de la página aparezca en cada página, agregaremos el módulo de contenido de la publicación
  • El módulo de contenido de la publicación contiene el diseño completo de su página dinámica
  • Debajo del módulo de contenido de la publicación, agregaremos otra sección para nuestro formulario de contacto
  • Diseñaremos el formulario de contacto y nos aseguraremos de agregar una ID de CSS única a la sección, usaremos esta ID de CSS para crear un enlace de anclaje
  • Bonificación: agregaremos un ícono fijo en la esquina inferior derecha de cada una de nuestras páginas y vincularemos el ícono a la sección de contacto de esa página en particular

1. Configure las páginas del sitio web utilizando el paquete de diseño de elección

El enfoque que estamos adoptando funciona en cualquier tipo de sitio web que cree. Pero para este tutorial en particular, estamos utilizando el estilo de diseño del paquete de diseño de la revista . Si está utilizando este enfoque en cualquier otro sitio web, no dude en ajustar el diseño a sus necesidades.

2. Vaya a Divi Theme Builder y agregue una nueva plantilla de página

Vaya a Divi Theme Builder y agregue una nueva plantilla de página

Vaya al Divi Theme Builder en su sitio web. Allí, agregue una nueva plantilla.

formulario de contacto de la página inferior

Use esta nueva plantilla en todas las páginas si desea que el formulario de contacto de la página inferior aparezca en todas las páginas. También puede hacer que aparezca en páginas específicas y / o excluirlo de ciertas páginas.

  • Usar en: todas las páginas

formulario de contacto de la página inferior

Comience a construir el cuerpo de la plantilla

Una vez que haya creado la nueva plantilla, puede comenzar a construir el cuerpo personalizado.

formulario de contacto de la página inferior

3. Agregar contenido de la página al cuerpo de la plantilla

Configuraciones de sección

Espaciado

Dentro del editor de plantillas, verás una sección. Abra esa sección y elimine todos los rellenos superiores e inferiores predeterminados.

  • Relleno superior: 0px
  • Relleno inferior: 0px

formulario de contacto de la página inferior

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:

formulario de contacto de la página inferior

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho del contenedor de la sección.

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

formulario de contacto de la página inferior

Espaciado

Elimine también el relleno superior e inferior predeterminado de todas las filas.

  • Relleno superior: 0px
  • Relleno inferior: 0px

formulario de contacto de la página inferior

Agregar módulo de contenido de publicación a columna

Continúe agregando el Módulo de contenido de publicación a la columna de su fila. Este módulo representa todo el contenido dinámico de la página que ha creado.

formulario de contacto de la página inferior

4. Agregue el formulario de contacto de la página inferior al cuerpo de la plantilla

Agregar nueva sección

Fondo degradado

Debajo de la sección que contiene el Módulo de contenido de publicación, agregaremos otra sección regular. Esta sección estará dedicada al formulario de contacto. Abra la configuración de la sección y agregue un fondo degradado.

  • Color 1: #ffffff
  • Color 2: # ffc077
  • Posición de inicio: 50%
  • Posición final: 50%

formulario de contacto de la página inferior

ID de CSS

Incluya también una ID de CSS.

  • ID de CSS: contacto

formulario de contacto de la página inferior

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila a la sección y use la siguiente estructura de columnas:

formulario de contacto de la página inferior

Agregue el módulo de texto n. ° 1 a la columna 1

Añadir contenido H2

El primer módulo que necesitamos en la primera columna es un módulo de texto. Ingrese algún contenido de su elección.

formulario de contacto de la página inferior

Configuraciones de texto H2

Pase a la pestaña de diseño del módulo y cambie la configuración del texto H2 de la siguiente manera:

  • Título 2 Fuente: Montserrat
  • Título 2 Peso de la fuente: negrita
  • Título 2 Color del texto: # 000000
  • Título 2 Tamaño del texto: 70 px (escritorio), 48 px (tableta), 36 px (teléfono)
  • Encabezado 2 Altura de línea: 1.2em

formulario de contacto de la página inferior

Dimensionamiento

Agregue un ancho máximo también.

  • Ancho Máx .: 750px

formulario de contacto de la página inferior

Agregue el módulo de texto n. ° 2 a la columna 1

Agregar contenido

Agregue otro módulo de texto a la columna 1 con algún contenido de su elección.

formulario de contacto de la página inferior

Configuraciones de texto

Cambie la configuración de texto del módulo de la siguiente manera:

  • Fuente de texto: Cardo
  • Peso de fuente de texto: negrita
  • Color del texto: rgba (0,0,0,0.03)
  • Tamaño del texto: 150 px (escritorio), 100 px (tableta), 60 px (teléfono)
  • Altura de la línea de texto: 1em

formulario de contacto de la página inferior

Espaciado

Y juegue con la configuración de espaciado en diferentes tamaños de pantalla.

  • Margen superior: -0.8em (escritorio), -100px (tableta), -80px (teléfono)
  • Margen izquierdo: -0.8em (escritorio y tableta), -60px (teléfono)

formulario de contacto de la página inferior

Agregar formulario de contacto a la columna 2

Agregar todos los campos necesarios

En la segunda columna, el único módulo que necesitamos es un Módulo de formulario de contacto. Agregue tantos campos como necesite y vincule su cuenta de correo electrónico al módulo también.

formulario de contacto de la página inferior

Convertir nombre y campos de correo electrónico de ancho completo

Continúe girando los campos de nombre y dirección de correo electrónico a ancho completo.

  • Hacer ancho completo: sí

formulario de contacto de la página inferior

Configuraciones de campos

Vuelva a la configuración general del formulario de contacto y cambie el color de fondo de los campos.

  • Color de fondo de los campos: #ffffff

formulario de contacto de la página inferior

Configuraciones de botones

Modifique la configuración del botón a continuación.

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 14 px
  • Color del texto del botón: #ffffff
  • Color de fondo del botón: # 000000 (predeterminado), # ff2a38 (pasar el mouse)
  • Ancho del borde del botón: 8 px

formulario de contacto de la página inferior

  • Color del borde del botón: rgba (0,0,0,0)
  • Radio del borde del botón: 0px
  • Espacio entre letras de botones: 2px
  • Peso de fuente del botón: Ultra negrita
  • Estilo de fuente del botón: mayúscula
  • Icono de botón: Buscar en la lista

formulario de contacto de la página inferior

Frontera

Agregue también un radio de borde.

  • Todas las esquinas: 5px

formulario de contacto de la página inferior

Sombra de la caja

Y complete la configuración del módulo agregando una sombra de cuadro sutil.

  • Caja Shadow Blur Fuerza: 50px
  • Fuerza de propagación de la sombra de la caja: -4px
  • Color de sombra: rgba (0,0,0,0.08)

formulario de contacto de la página inferior

Bonificación: Agregue el icono fijo de anclaje inferior derecha al cuerpo de la plantilla

Agregar nueva sección

Espaciado

Ahora, para agregar el ícono fijo inferior derecho a cada página, necesitaremos agregar otra sección regular. Abra la sección y elimine todos los rellenos superiores e inferiores predeterminados.

  • Relleno superior: 0px
  • Relleno inferior: 0px

formulario de contacto de la página inferior

Índice Z

Aumenta también el índice z de la sección. Esto asegurará que el ícono permanezca en la parte superior de todo el contenido de la página.

  • Índice Z: 99999

formulario de contacto de la página inferior

Agregar nueva fila

Estructura de columna

Agregue una nueva fila a la sección utilizando la siguiente estructura de columnas:

formulario de contacto de la página inferior

Dimensionamiento

Abra la configuración de la fila y permita que la fila tome todo el ancho de la sección.

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

formulario de contacto de la página inferior

Espaciado

Elimine también todos los rellenos superiores e inferiores predeterminados.

  • Relleno superior: 0px
  • Relleno inferior: 0px

formulario de contacto de la página inferior

Agregar módulo de difusión a la columna

Deje el título y el cuadro de contenido vacíos

Para mostrar el ícono en la esquina inferior derecha, usaremos un módulo Blurb. Asegúrese de dejar el título y el cuadro de contenido en blanco.

formulario de contacto de la página inferior

Seleccionar icono

Luego, seleccione un icono de su elección.

formulario de contacto de la página inferior

Enlace

Enlace el icono a la sección de contacto agregando la ID a la URL del enlace del módulo.

  • URL del enlace del módulo: #contact

formulario de contacto de la página inferior

Color de fondo

Cambie también el color de fondo del módulo.

  • Color de fondo: # ffc077

formulario de contacto de la página inferior

Configuraciones de iconos

Pase a la pestaña de diseño del módulo y cambie la configuración del icono de la siguiente manera:

  • Color del icono: #ffffff
  • Colocación de imagen / ícono: Arriba
  • Usar tamaño de fuente de icono: sí
  • Tamaño de fuente del icono: 30 px

formulario de contacto de la página inferior

Dimensionamiento

Modifique también la configuración de tamaño del módulo.

  • Ancho: 100 px
  • Alineación del módulo: derecha

formulario de contacto de la página inferior

Espaciado

Y agregue algunos rellenos superiores e inferiores personalizados.

  • Relleno superior: 33px
  • Relleno inferior: 33px

formulario de contacto de la página inferior

Frontera

Luego, vaya a la configuración del borde y agregue algunas esquinas redondeadas.

  • Todas las esquinas: 100 px

formulario de contacto de la página inferior

Sombra de la caja

Agregue una caja de sombra también.

  • Caja Shadow Blur Fuerza: 50px
  • Fuerza de propagación de la sombra de la caja: -15 px
  • Color de sombra: rgba (0,0,0,0.23)

formulario de contacto de la página inferior

Elemento principal CSS

Para arreglar el icono, aplicaremos tres líneas de código CSS al elemento principal del módulo en la pestaña avanzada.

01
02
03
bottom: 20px;
right: 20px;
position: fixed;

formulario de contacto de la página inferior

Blurb Image CSS

Y elimine también el relleno inferior predeterminado de la imagen del módulo.

01
margin-bottom: 0px;

formulario de contacto de la página inferior

6. Guardar todos los cambios del generador de temas y el resultado de la vista previa

Una vez que haya completado el cuerpo de la plantilla de su página, puede guardar todos los cambios, salir del generador de temas y ver el resultado en todas sus páginas.

formulario de contacto de la página inferior

formulario de contacto de la página inferior

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

You have Successfully Subscribed!