El pie de página del sitio web es un lugar popular para colocar un formulario de suscripción por correo electrónico. Dado que Divi tiene un módulo de suscripción de correo electrónico, esta es una tarea fácil con el generador de temas Divi . En este artículo, veremos cómo agregar una suscripción de correo electrónico al pie de página de Divi . También veremos algunas configuraciones dentro del módulo de suscripción de correo electrónico Divi que crea diferentes opciones de diseño.
Aquí está el pie de página que construiremos.
Escritorio Optin de correo electrónico
Así es como se verá nuestro formulario de suscripción por correo electrónico en una computadora de escritorio. Estoy reemplazando un elemento existente en este diseño con la opción de correo electrónico.
Email Optar Teléfono
Así es como se ve nuestro formulario de suscripción por correo electrónico en un teléfono inteligente.
Suscríbete a nuestro canal de Youtube
Plantilla de generador de temas Divi
Para agregar una opción de correo electrónico al pie de página de Divi, necesitaremos una plantilla para construir nuestro pie de página. Puede crear uno desde cero o utilizar una de las plantillas gratuitas que proporciona Elegant Themes. Para encontrarlos, busque en el blog de Elegant Themes «pie de página gratuito».
Estoy usando la plantilla de pie de página de la plantilla GRATUITA de encabezado y pie de página para el paquete de diseño de ONG de Divi . Descarga tu pie de página y descomprime el archivo. Deberá cargar el archivo JSON en Divi Theme Builder.
Para cargar su pie de página de Divi, vaya a Divi > Divi Theme Builder en el panel de control de WordPress. Selecciona Portabilidad . En el modal que se abre, elija la pestaña Importar . Haga clic para elegir el archivo y navegue hasta el archivo JSON en su computadora. Seleccione el archivo y haga clic en Importar plantillas de Divi Theme Builder .
Espere a que se cargue el archivo. Puede eliminar la plantilla de encabezado si no desea utilizarla. Haga clic para guardar los cambios en la parte superior izquierda del constructor.
Para este tutorial, reemplazaré el área encuadrada a la derecha con una opción de correo electrónico. Usaré el mismo estilo, por lo que se combinará con el sitio web.
Este elemento se compone de un módulo de imagen, dos módulos de texto y un módulo de botón. Los reemplazaré con un solo módulo. Puede eliminarlos ahora o dejarlos hasta que termine si desea usarlos como colas de diseño. Puede trabajar en la parte delantera o trasera.
A continuación, agregaremos una opción de correo electrónico al pie de página de Divi. Pase el cursor por debajo del último módulo de la fila y haga clic en el ícono gris oscuro más . Busque correo electrónico y seleccione el módulo Email Optin .
Cierre la configuración del módulo y mueva el módulo a la parte superior de la columna con la herramienta Mover . Esto nos permite ver cómo se verá en su ubicación exacta y seguir usando el módulo original hasta que terminemos de diseñarlo.
Abra la configuración del módulo y agregue el Título , el Texto del botón y el Texto del cuerpo . Estoy usando el texto de los módulos originales.
- Título: Involúcrese
- Botón: Únete hoy
- Cuerpo: el mensaje de su empresa
Desplácese hacia abajo hasta Cuenta de correo electrónico . Seleccione su proveedor de servicios de correo electrónico de la lista desplegable. Haga clic en Agregar para conectarse a su proveedor de servicios. Necesitará el nombre de su cuenta y la clave API. A continuación, seleccione la lista de correo electrónico que desea utilizar.
Desplácese hacia abajo hasta Acción de éxito . Elija la acción de la lista. Selecciona entre mostrar un mensaje o redirigir a una URL. He seleccionado redirigir a una URL. También puede seleccionar qué datos del formulario de correo electrónico incluir como argumentos de consulta si lo desea.
Desplácese hasta Fondo y elimínelo. Observe que el fondo verde todavía está detrás del módulo de correo electrónico. Este fondo está en la configuración de Columna para la Fila. Dejaremos esto como está, pero la Configuración de columna de fila es donde puede cambiarlo si lo desea.
Dale estilo a la opción de correo electrónico Divi
Para diseñar el módulo de suscripción de correo electrónico, tomo las colas de diseño del propio paquete de diseño de la ONG . Este diseño tiene varios módulos de texto con fondos blancos y esquinas redondeadas. Reflejaremos esos elementos de diseño en los campos del formulario de suscripción de correo electrónico.
Opciones de campo
En Campos, establezca la Fuente de los campos en DM Sans. Establezca la alineación en Centro.
- Fuente de los campos: DM Sans
- Alineación de texto de campos: Centro
Desplácese hasta la configuración del borde de los campos . Establezca las esquinas redondeadas de los campos en 20 px.
- Campos Esquinas redondeadas: 20px
Texto del título
Desplácese hasta Texto del título . Seleccione DM Sans para la Fuente del título y configúrelo en Alineación central.
- Encabezado: DM Sans
- Alineación: Centro
Establezca el tamaño del texto del título del escritorio en 38 px y el tamaño del teléfono en 20 px. Ajuste el Espaciado entre letras a -0,02 em y la Altura de línea a 1,15 em.
- Tamaño de texto de escritorio: 38px
- Tamaño del texto del teléfono: 20px
- Espaciado entre letras: -0.02em
- Altura de la línea: 1,15 em
Cuerpo de texto
Desplácese hasta Texto del cuerpo . Seleccione DM Sans para la Fuente del cuerpo y configúrelo en Alineación central .
- Encabezado: DM Sans
- Alineación: Centro
Establezca el tamaño del texto del título del escritorio en 16 px y el tamaño del teléfono en 14 px. Ajuste la altura de la línea a 1,8 em.
- Tamaño de texto de escritorio: 16px
- Tamaño del texto del teléfono: 14px
- Altura de la línea: 1,8 em
Desplácese hacia abajo hasta Configuración de botones y seleccione para usar los estilos personalizados. Establezca el Tamaño del texto del botón en 14 px y cambie el Color de fondo a #ef8451.
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 14px
- Fondo del botón: #ef8451
Establezca el Ancho en 0px, el Radio en 37px y seleccione DM Sans para la Fuente .
- Ancho del borde del botón: 0px
- Radio del borde del botón: 37px
- Fuente del botón: DM Sans
Establezca el Grosor de la fuente en Negrita y elija Todo en mayúsculas para el Estilo de fuente . Habilite el ícono del botón , seleccione un ícono y configúrelo para que se muestre solo al pasar el mouse por encima.
- Peso de la fuente del botón: Negrita
- Estilo de fuente del botón: Todo en mayúsculas
- Mostrar icono de botón: Sí
- Icono de botón: >
- Solo mostrar icono al pasar el mouse por el botón: Sí
Agregue relleno a los cuatro lados del botón.
- Relleno de botones: 15 px arriba, 12 px abajo, 22 px a la izquierda, 22 px a la derecha
Configuración de columna de fila
Finalmente, elimine los elementos originales que no esté utilizando. Abra la configuración de la columna en esta Fila. Navegue a la pestaña Diseño y establezca el Relleno en 42px para la parte superior e inferior. Guarda tu trabajo.
- Relleno: 42px arriba y abajo
Diseño de formulario alternativo y opciones de campo
El módulo Divi Email Optin le brinda varias opciones para el diseño y las características del formulario. Las opciones de diseño incluyen varias opciones de diseño. Escoge de:
- Cuerpo a la izquierda, Formulario a la derecha
- Cuerpo a la derecha, Formulario a la izquierda
- Cuerpo arriba, forma abajo
- Cuerpo abajo, forma arriba
También puede establecer el ancho de los campos. Son de ancho completo por defecto. Deshabilitar Fullwidth le brinda algunas opciones de diseño interesantes. Puede utilizar múltiples combinaciones.
En el ejemplo anterior, he seleccionado Cuerpo en la parte inferior, Formulario en la parte superior . También deshabilité Fullwidth para los campos Nombre y Apellido . Esto coloca el formulario sobre el texto y el nombre y apellido en la misma línea.
He colocado este formulario en una fila de una sola columna. El diseño muestra al niño a la izquierda y la forma a la derecha. También deshabilité las opciones de ancho completo para los campos de nombre y apellido.
Éste coloca la forma a la izquierda y el cuerpo a la derecha. He deshabilitado la opción de ancho completo para el campo de correo electrónico. El resto están en su configuración predeterminada.
Resultados
Aquí están nuestros resultados.
Escritorio Optin de correo electrónico
Así es como se ve nuestro formulario de suscripción por correo electrónico en una computadora de escritorio.
Email Optar Teléfono
Aquí está nuestro formulario de suscripción por correo electrónico en un teléfono inteligente.
Ese es nuestro vistazo a cómo agregar una opción de correo electrónico al pie de página de Divi. El módulo de suscripción por correo electrónico lo hace fácil. Dado que es un módulo Divi, se puede diseñar para que funcione con cualquier diseño Divi. El módulo optin incluye varias opciones de diseño para que pueda adaptar el formulario a las necesidades de diseño de su sitio web.
Queremos escuchar de ti. ¿Agrega una opción de correo electrónico al pie de página de Divi? Cuéntanoslo en los comentarios.