Cómo agregar automáticamente un formulario de contacto de la página inferior a todas las páginas con el generador de temas de Divi

Avance

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

Escritorio

Móvil

Descargue la plantilla de página GRATIS

Para poner sus manos en la plantilla de página gratuita, primero deberá descargarla 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.

Descripción general del tutorial

• Configure las páginas de su sitio web utilizando un paquete de diseño de su elección
• Una vez que se establece el estilo de diseño de su 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 de página único aparezca en cada página, agregaremos el módulo de contenido de publicación
• El módulo de contenido de la publicación contiene todo el diseño 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 con el paquete de diseño elegido

El enfoque que estamos adoptando funciona en cualquier tipo de sitio web que construyas. Pero para este tutorial en particular, estamos usando el estilo de diseño de Magazine Layout Pack . Si está utilizando este enfoque en cualquier otro sitio web, siéntase libre de modificar el diseño según 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.

Utilice 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

Comience a construir el cuerpo de la plantilla

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

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

Ajustes de sección

Espaciado

Dentro del editor de plantillas, verás una sección. Abra esa sección y elimine todo el relleno superior e inferior predeterminado.

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

Agregar nueva fila

Estructura de la columna

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

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ón personalizado: Sí
• Ancho del canalón: 1
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

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

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

Agregar módulo de contenido de publicación a la 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 de la página dinámica que ha creado.

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 normal. 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 inicial: 50%
• Posición final: 50%

ID de CSS

Incluya también un ID de CSS.

• ID de CSS: contacto

Agregar nueva fila

Estructura de la columna

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

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

Agregar contenido H2

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

Configuración de texto H2

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

• Título 2 Fuente: Montserrat
• Encabezado 2 Peso de 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,2 em

Dimensionamiento

Agregue un ancho máximo también.

• Ancho máximo: 750px

Agregue el Módulo de Texto #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.

Configuración de texto

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

• Fuente del 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 línea de texto: 1em

Espaciado

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

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

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 también su cuenta de correo electrónico al módulo.

Gire los campos de nombre y correo electrónico de ancho completo

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

• Hacer ancho completo: Sí

Configuración de campos

Regrese 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

Configuración 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: 14px
• Color del texto del botón: #ffffff
• Color de fondo del botón: #000000 (Predeterminado), #ff2a38 (Hover)
• Ancho del borde del botón: 8px

• Color del borde del botón: rgba(0,0,0,0)
• Radio del borde del botón: 0px
• Espaciado entre letras de botones: 2px
• Peso de la fuente del botón: ultra negrita
• Estilo de fuente del botón: Mayúsculas
• Icono de botón: Buscar en la lista

Borde

Agregue un poco de radio de borde también.

• Todas las esquinas: 5px

Sombra de la caja

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

• Fuerza de desenfoque de sombra de cuadro: 50px
• Fuerza de propagación de la sombra del cuadro: -4px
• Color de sombra: rgba(0,0,0,0.08)

Bonificación: agregue el icono de ancla inferior derecha fija al cuerpo de la plantilla

Agregar nueva sección

Espaciado

Ahora, para agregar el icono fijo de la parte inferior derecha a cada página, necesitaremos agregar otra sección regular. Abra la sección y elimine todo el relleno superior e inferior predeterminado.

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

Índice Z

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

• Índice Z: 99999

Agregar nueva fila

Estructura de la columna

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

Dimensionamiento

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

• Usar ancho de canalón personalizado: Sí
• Ancho del canalón: 1
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Elimine también todo el relleno superior e inferior predeterminado.

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

Agregar módulo de Blurb a la columna

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

Para mostrar el icono de abajo a la derecha, usaremos un módulo de Blurb. Asegúrese de dejar el título y el cuadro de contenido vacíos.

Seleccionar icono

Luego, seleccione un icono de su elección.

Enlace

Vincule el ícono a la sección de contacto agregando la ID a la URL del vínculo del módulo.

• URL del enlace del módulo: #contacto

Color de fondo

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

• Color de fondo: #ffc077

Configuración 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/icono: Arriba
• Usar tamaño de fuente de icono: Sí
• Icono Tamaño de fuente: 30px

Dimensionamiento

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

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

Espaciado

Y agregue un poco de relleno superior e inferior personalizado.

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

Borde

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

• Todas las esquinas: 100px

Sombra de la caja

Agregue una sombra de cuadro también.

• Fuerza de desenfoque de sombra de cuadro: 50px
• Fuerza de propagación de la sombra del cuadro: -15px
• Color de sombra: rgba(0,0,0,0.23)

Elemento principal CSS

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

Imagen de Blurb CSS

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

6. Guardar todos los cambios del generador de temas y obtener una vista previa del resultado

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.

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo agregar un formulario de contacto en la parte inferior de la página a todas sus páginas a la vez. Para lograr esto, configuramos una nueva plantilla de página, incluimos el Módulo de contenido de publicación y agregamos una sección de contacto al final de la plantilla. También hemos incluido un icono fijo en la parte inferior derecha con un enlace ancla que redirigirá a los visitantes a la sección de contacto de la página en la que se encuentran. ¡También pudo descargar el archivo JSON de la plantilla de página de forma gratuita! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.