Cómo agregar automáticamente un formulario de contacto en la parte inferior de todas las páginas con el constructor de temas de Div.

Cuando está ocupado configurando todas las páginas que desea incluir en su sitio, hay altas posibilidades de incluir un formulario de contacto al final de cada página para que los visitantes viajen más fácilmente. Con Div, por supuesto, puede agregar un formulario de contacto en la página en sí, pero si prefiere simplificar el proceso, esto es posible. En el tutorial de la división de hoy, le mostraremos cómo agregar automáticamente un formulario de contacto en la parte inferior de todas sus páginas simultáneamente. También agregaremos automáticamente un icono correcto fijo con un enlace de anclaje que redirigirá automáticamente a las personas a la sección de contacto de la página. ¡También podrá descargar la plantilla de página gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue la plantilla de página gratuita para poner su mano en la plantilla de página gratuita, primero deberá descargarla usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
La presentación general del tutorial
Configure páginas en su sitio web utilizando un paquete de look
Una vez que establezca el estilo de diseño de la página, puede reutilizar el estilo de diseño en el formulario de contacto en la página inferior
Para agregar el formulario de contacto en 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 Div Visual.
Para garantizar que toda la página única de la página aparezca en cada página, agregaremos el módulo para el contenido de la publicación
El módulo de publicación contiene todo el diseño dinámico de la página
En el módulo de publicación de 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 en la sección, utilizaremos esta ID de CSS para crear un enlace de anclaje
Bonificación: agregaremos un icono fijo a la esquina inferior derecha de cada una de nuestras páginas y conectaremos el icono a la sección de contacto de esa página.
1. Configure las páginas del sitio web utilizando el paquete de diseño de elección El enfoque que adoptamos trabaja en cualquier tipo de sitio web que cree. Pero para este tutorial, utilizamos el estilo de diseño de la revista de paquete de diseño. Si utiliza este enfoque en cualquier otro sitio web, no dude en cambiar su diseño de acuerdo con sus necesidades2. Vaya al Temo Builder Divin y agregue una nueva plantilla de página Access Div DivCe Builder y agregue una nueva plantilla de página Access Div Div Divce Builder en su sitio web. Allí, agregue una nueva plantilla.
Use esta nueva plantilla en todas las páginas si desea que el formulario de contacto en la página inferior aparezca en todas las páginas. Puede hacer que aparezca en ciertas páginas y / o excluir de ciertas páginas.
Usar en: todas las páginas

Comience a construir el cuerpo de la plantilla después de crear la nueva plantilla, puede comenzar a construir el cuerpo personalizado.
3. Agregue el contenido de la página al cuerpo de la configuración de la plantilla Sparation en el editor de plantillas, notará una sección. Abra esa sección y elimine todo el revestimiento predeterminado e inferior.

SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:
Dimensión sin agregar módulos, abra la configuración de la fila y permita que la fila ocupe todo el ancho del contenedor de sección.

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
Espaciado Retire el revestimiento predeterminado e inferior de todas las filas.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Agregue un módulo de contenido para publicar en la columna Continuar agregando el módulo Publicar el contenido en la columna. Este módulo representa todo el contenido dinámico de la página que creó. Agregue un formulario de contacto en la parte inferior del cuerpo de la plantilla Agregue un nuevo fondo de gradiente en la sección que contenga el contenido posterior, agregaremos otra sección ordinaria. Esta sección se dedicará al formulario de contacto. Abra la configuración de la sección y agregue un fondo de gradiente.
Color 1: #ffffff

Color 2: # FFC077

Posición inicial: 50%
Posición final: 50%
ID CSS también incluye una ID de CSS.
ID CSS: contacto
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea a la sección y use la siguiente estructura de columnas:

Agregue el módulo de texto no. 1 en la columna 1 Agregar contenido H2 El primer módulo que necesitamos en la primera columna es un módulo de texto. Ingrese un contenido de su elección.
Configuración de texto H2 Vaya a la pestaña Diseño del módulo y cambie la configuración de texto H2 de la siguiente manera:

2 Sección de fuentes: Montserrat

Título 2 Fuente de peso: Bold

Rúbrica 2 Color de texto: # 000000
Título 2 Dimensión de texto: 70 PX (escritorio), 48 PX (tableta), 36 PX (teléfono)
Título 2 Altura de la línea: 1.2em
Dimensionamiento agregue un ancho máximo.
Ancho máximo: 750 PX
Agregue el módulo de texto no. 2 en la columna 1 Agregar contenido Agregue otro módulo de texto en la columna 1 con un contenido de su elección.

Configuración de texto Cambie la configuración de texto del módulo de la siguiente manera:
Texto de fuente: cardo

El peso de la fuente de texto: en negrita

Color de texto: RGBA (0.0,0,0.03)
Tamaño de texto: 150 PX (escritorio), 100 px (tableta), 60 px (teléfono)
La altura de la línea de texto: 1emsparation y reproducir 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)
Agregue el formulario de contacto a la columna 2 Agregue todos los campos necesarios a la segunda columna, la única forma en que necesitamos es un módulo de contacto. Agregue cuántos campos necesita y conecte su cuenta de correo electrónico al módulo.


Gire el nombre del campo y el correo electrónico de ancho completo Continúe rotando el ancho completo de los campos de nombre y dirección de correo electrónico.
Haga un ancho completo: Sí
Configuración de campo Vuelve a la configuración general del formulario de contacto y cambia el color de fondo de los campos.

El color del fondo del campo: #ffffff

Botón de configuración y luego cambie la configuración del botón.
Use estilos personalizados para el botón: Sí

Tamaño de texto de texto: 14 PX
El color del texto del botón: #ffffff

El color de fondo del botón: # 000000 (predeterminado), # FF2A38 (coloque el cursor)
El ancho del nudo del botón: 8 PX
Color de borde de dibujo: RGBA (0.0,0,0)
El rasgo de botón de botón: 0 px
Distancia entre letras y botones: 2 PX
Peso de fuente de fuente: Ultra Bold

El estilo de la fuente del botón: mayúscula
Icono del botón: Buscar en la lista
Borde agregue un rayo de borde.
Todas las esquinas: 5 PX
Sombra de cuadro y complete la configuración del módulo agregando un tono de caja sutil.
Poder de poco claro de la sombra de la caja: 50 px

Poder de extender la sombra de la caja: -4px
Shadow Color: RGBA (0.0,0,0.08)

Bonificación: agregue el icono de anclaje fijo al final de derecha al cuerpo de la plantilla Agregue una nueva sección ahora, para agregar el icono correcto fijo a cada página, necesitaremos agregar otra sección ordinaria. Abra la sección y elimine todo el valor predeterminado e inferior
Finamiento inferior: 0 PX
El índice Z también aumenta el índice Z de la sección. Esto le asegurará que el icono permanecerá por encima de todo el contenido de la página.
IND ÍNDICE: 99999

Agregue una nueva estructura de columna de fila Agregue una nueva fila a la sección utilizando la siguiente estructura de columnas:
Dimensión Abra la configuración de la fila y permita que la fila tome todo el ancho de la sección.
Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Ancho: 100%

Ancho máximo: 100%

Espacio eliminar y todo el revestimiento predeterminado, superior e inferior.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Agregue los módulos de la propaganda a la columna Deje el cuadro de título y vacío de contenido para mostrar el icono inferior derecho, usaremos un módulo de propaganda. Asegúrese de dejar el objetivo del título y el contenido.
Seleccione el icono y luego, seleccione un icono de su elección.

Enlace Conecte el icono a la sección de contacto agregando la ID a la URL del enlace del módulo.
URL del módulo: #contact
Cambio de color del papel tapiz y el color de fondo del módulo.

Color de fondo: # FFC077

Icono de configuración Vaya a la pestaña Diseño del módulo y cambie la configuración del icono de la siguiente manera:

Icono de color: #ffffff
Colocación de la imagen / icono: arriba

Use el icono del tamaño de la fuente: sí
Icono de tamaño de fuente: 30 PX

Configuración de dimensiones de dimensión y dimensionamiento del módulo. Poco: 100 PX
Alineación del módulo: correcto
Espacio y agregue un poco de revestimiento personalizado desde arriba e abajo.
Revestimiento superior: 33 PX
Finamiento inferior: 33 PX

Border luego, acceda a la configuración del borde y agregue algunas esquinas redondeadas.
Todas las esquinas: 100 px
Box Shadow también agregue un tono de caja.

Poder de poco claro de la sombra de la caja: 50 px
Poder de extender la sombra de la caja: -15 PX
Color de la sombra: RGBA (0.0,0,0.23)

El elemento CSS principal Para remediar el icono, aplicaremos tres líneas de código CSS del elemento principal en la pestaña avanzada. Abajo: 20px;
Derecha: 20px;

Posición: fijo;
PROGRAR CSS CSS y elimine el relleno predeterminado de la imagen del módulo. Botón de margen: 0px;
6. Guarde todos los cambios y el resultado de la prevalización del fabricante después de haber completado el cuerpo de la plantilla de página, ¡puede guardar todos los cambios, salir del generador de temas y ver el resultado en todas sus páginas!
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio

Móvil