ElegantThemes

8 posibilidades de diseño integradas para el módulo de optimización de correo electrónico de Divi

Los formularios de correo electrónico son una parte importante del desarrollo de sitios web. Es importante tener un formulario bien diseñado que se adapte a las necesidades de su sitio, y esto incluye el diseño del formulario. El módulo de suscripción de correo electrónico de Divi le brinda control sobre el diseño y los elementos incluidos. Esto le permite crear muchos tipos de diseños de formularios de correo electrónico. En este artículo, cubriremos las 8 posibilidades de diseño integradas de Divi Email Picker del módulo Divi’s Email Picker.

Configuración del módulo de opciones de correo electrónico de Divi

Primero, veamos la configuración en el módulo de Opciones de correo electrónico que nos permite crear una combinación de diseños de Opciones de correo electrónico de Divi.

Configuración del campo de opciones de correo electrónico de Divi

El primer conjunto de opciones se encuentra en la pestaña Contenido.desplácese hacia abajo hasta aproximadamente el medio contenido pestaña, verá una campoPuede habilitar o deshabilitar tres opciones. Muestran campos en varias combinaciones. Puede mostrar un solo nombre o deshabilitarlo para mostrar los campos de nombre y/o apellido. También puede deshabilitar todos los campos de nombre si solo desea mostrar el campo de correo electrónico.

También tiene la opción de campos personalizados. Estos deben configurarse con su proveedor de correo electrónico. Los campos personalizados variarán según las opciones de los distintos proveedores de correo electrónico, por lo que nos centraremos en los campos estándar que funcionan para todos.

Configuración de diseño del módulo de opciones de correo electrónico Divi

A continuación, lo harás diseño Etiqueta. El módulo de suscripción de correo electrónico de Divi incluye una opción en la pestaña Diseño llamada diseñoEsta sección incluye 4 opciones diferentes para varias combinaciones. Estas configuraciones incluyen un cuadro desplegable con 4 opciones de diseño y 3 interruptores de ancho completo para habilitar o deshabilitar el nombre, el apellido y el correo electrónico. Si deshabilitó los campos Nombre y/o Apellido en la pestaña Contenido, no aparecerán como opciones en esta sección.

Configuración de diseño del módulo de opciones de correo electrónico Divi

Diseño del módulo de opciones de correo electrónico Divi

hacer clic caja desplegable Echa un vistazo a las 4 opciones de diseño. Especifican la ubicación del cuerpo y la forma.

Diseño del módulo de opciones de correo electrónico Divi

elemento de texto de opciones de correo electrónico divi

discapacitado ancho de pantalla completo Opción para mostrar campos al 50% de ancho. Si los campos Nombre y Apellido están deshabilitados, se moverán a la misma fila. Si First Name Fullwidth está habilitado y están deshabilitados, los campos Apellido y Correo electrónico harán lo mismo. Este es el formulario con los tres deshabilitados.

elemento de texto de opciones de correo electrónico divi

Posibilidades de diseño de las opciones de correo electrónico de Divi

Todas las configuraciones que hemos visto se pueden usar para crear muchas combinaciones para diseños de opciones de correo electrónico. Usaré el ejemplo del Stone Factory Layout Pack gratuito disponible en Divi. Determinaré todos los ajustes en cada ejemplo. Además, el formulario responde, por lo que el diseño cambiará según el ancho de la columna o la pantalla. Mostraré un ejemplo de una fila de una sola columna con ancho predeterminado.

Antes de ver nuestro diseño de opciones de correo electrónico Divi, echemos un vistazo a las opciones de correo electrónico originales que voy a modificar. Deshabilita el campo de nombre y no usa el título y el cuerpo en el módulo. En su lugar, utiliza el módulo de texto para estos. Reemplazaré el módulo de texto con el módulo de texto en el módulo de suscripción de correo electrónico. Los botones de este formulario utilizan CSS. Lo eliminé en el ejemplo para centrarme en la configuración del formulario.

Posibilidades de diseño de las opciones de correo electrónico de Divi

Divi Opciones de correo electrónico Posibilidades de diseño 1

Comenzaremos usando los elementos de texto de encabezado y cuerpo en el módulo de suscripción de correo electrónico en lugar del reemplazo del módulo de texto. El formulario tiene el mismo aspecto que el original, pero los anchos del texto del cuerpo y del botón son ligeramente diferentes porque este formulario ahora usa una fila de una sola columna en lugar de dos columnas. Los botones se agrandan y el espacio entre los lados del formulario se reduce.

Divi Opciones de correo electrónico Posibilidades de diseño Uno

Esta campo Esta configuración deshabilita todos los campos de nombre.

  • Usar campo de nombre único: No
  • Campo de nombre para mostrar: No
  • Mostrar campo de apellido: No

Divi Opciones de correo electrónico Posibilidades de diseño Uno

Esta diseño Configure para mostrar el texto a la izquierda y el formulario a la derecha. El ancho completo del correo electrónico está habilitado. Como he deshabilitado los campos de nombre, no son una opción en la configuración de diseño.

  • Diseño: texto a la izquierda, tabla a la derecha
  • Ancho completo del correo electrónico: Sí

Divi Opciones de correo electrónico Posibilidades de diseño Uno

Divi Opciones de correo electrónico Posibilidades de diseño 2

Mi segunda posibilidad de diseño mueve el formulario a la derecha y el cuerpo a la izquierda. He habilitado el campo de nombre y lo he hecho de ancho completo.

Opción de diseño de correo electrónico Divi Posibilidad dos

he habilitado Usar un solo campo de nombrepor lo que el otro campo de nombre ya no es una opción.

  • Usar un solo campo de nombre: sí

1648193089 361 8 posibilidades de diseno integradas para el modulo de optimizacion

Esta diseño Hay texto a la derecha y opciones de tabla a la izquierda. He habilitado las opciones Nombre de ancho completo y Correo electrónico de ancho completo.

  • Diseño: texto a la derecha, tabla a la izquierda
  • nombre de ancho completo: sí
  • Ancho completo del correo electrónico: Sí

1648193089 108 8 posibilidades de diseno integradas para el modulo de optimizacion

Posibilidades de diseño 3

Esta opción de diseño coloca el cuerpo sobre el formulario y coloca los campos de nombre y correo electrónico en la misma línea.

Divi Email Optin Diseño Posibilidades Tres

Esta campo Configure Habilitar para usar un solo campo de nombre.

  • Usar un solo campo de nombre: sí

1648193089 748 8 posibilidades de diseno integradas para el modulo de optimizacion

por diseño Opciones, elegí Cuerpo en la parte superior, Mesa en la parte inferior. Configuré Name Fullwidth y Email Fullwidth en No. Esto colocará el campo en la misma línea que el ancho de esta línea.

  • Diseño: texto en la parte superior, tabla en la parte inferior
  • Nombre de ancho completo: no
  • Ancho completo del correo electrónico: No

1648193089 578 8 posibilidades de diseno integradas para el modulo de optimizacion

Posibilidades de diseño 4

Esto muestra el texto sobre el formulario, incluidos los campos de nombre y apellido.

1648193089 436 8 posibilidades de diseno integradas para el modulo de optimizacion

por campoeste usa nombres y apellidos.

  • Usar campo de nombre único: No
  • Campo de nombre para mostrar: Sí
  • Mostrar campo de apellido: Sí

1648193089 618 8 posibilidades de diseno integradas para el modulo de optimizacion

por diseño, que tiene texto en la parte superior y tablas en la parte inferior. El ancho completo del nombre y el ancho completo del apellido están deshabilitados y el ancho completo del correo electrónico está habilitado.

  • Diseño: texto en la parte superior, tabla en la parte inferior
  • Nombre completo: Sí
  • Apellido Tamaño completo: No
  • Ancho completo del correo electrónico: Sí

Divi Email Optin Diseño Posibilidades Cuatro

Divi Opciones de correo electrónico Posibilidades de diseño 5

Este ejemplo muestra los campos de nombre y correo electrónico encima del cuerpo en la misma línea.

Divi Email Optin Diseño Posibilidades Cinco

elegí Usar un solo campo de nombre.

  • Usar un solo campo de nombre: sí

1648193089 755 8 posibilidades de diseno integradas para el modulo de optimizacion

Esto usa el cuerpo en la parte inferior, la forma en la parte superior diseñoHe deshabilitado las opciones Ancho completo de nombre y Ancho completo de correo electrónico.

  • Diseño: cuerpo en la parte inferior, mesa en la parte superior
  • Nombre de ancho completo: no
  • Ancho completo del correo electrónico: No

1648193089 35 8 posibilidades de diseno integradas para el modulo de optimizacion

Divi Opciones de correo electrónico Posibilidades de diseño 6

Éste pone el cuerpo a la izquierda y la mesa a la derecha. El formulario muestra el nombre y el apellido en la misma línea y muestra el campo de correo electrónico en todo su ancho.

Divi Email Optin Diseño Posibilidades Seis

he activado Campo de nombre para mostrar y Mostrar campo de apellido.

  • Usar campo de nombre único: No
  • Campo de nombre para mostrar: Sí
  • Mostrar campo de apellido: Sí

1648193089 900 8 posibilidades de diseno integradas para el modulo de optimizacion

Este muestra el cuerpo a la izquierda, la forma a la derecha. diseñoEl ancho completo del nombre y el ancho completo del apellido están deshabilitados. El ancho completo del correo electrónico está habilitado.

  • Diseño: texto a la izquierda, tabla a la derecha
  • Nombre completo: Sí
  • Apellido Tamaño completo: No
  • Ancho completo del correo electrónico: Sí

1648193090 263 8 posibilidades de diseno integradas para el modulo de optimizacion

Opciones de diseño de correo electrónico de Divi Posibilidades 7

Este ejemplo coloca el formulario a la izquierda y el cuerpo a la derecha. Muestra campos de nombre y apellido. Todos los campos son de ancho completo.

Divi Email Optin Diseño Posibilidades Siete

he habilitado Campo de nombre para mostrar y Mostrar campo de apellido.

  • Usar campo de nombre único: No
  • Campo de nombre para mostrar: Sí
  • Mostrar campo de apellido: Sí

1648193090 809 8 posibilidades de diseno integradas para el modulo de optimizacion

por diseño, Seleccioné el cuerpo a la derecha, la mesa a la izquierda. El nombre de ancho completo, el apellido de ancho completo y el correo electrónico de ancho completo están habilitados.

  • Diseño: texto a la derecha, tabla a la izquierda
  • Nombre Ancho completo: Sí
  • Apellido Tamaño completo: Sí
  • Ancho completo del correo electrónico: Sí

1648193090 501 8 posibilidades de diseno integradas para el modulo de optimizacion

Posibilidades de diseño 8

En este ejemplo, seleccioné el apellido y puse el formulario en la parte superior. El apellido y el correo electrónico son de ancho completo.

Posibilidades de diseño de opción de correo electrónico Divi Ocho

por campo, tengo habilitado mostrar apellido. Este formulario no le pedirá un nombre.

  • Usar campo de nombre único: No
  • Campo de nombre para mostrar: No
  • Mostrar campo de apellido: Sí

1648193090 221 8 posibilidades de diseno integradas para el modulo de optimizacion

por diseño, seleccioné el cuerpo en la parte inferior, la mesa en la parte superior. Tengo habilitado el ancho completo para el apellido y el ancho completo para el correo electrónico.

  • Diseño: cuerpo en la parte inferior, mesa en la parte superior
  • Apellido Tamaño completo: Sí
  • Ancho completo del correo electrónico: Sí

1648193090 634 8 posibilidades de diseno integradas para el modulo de optimizacion

la idea de terminar

Aquí está nuestra opinión sobre las 8 posibilidades de diseño integradas para el módulo de suscripción de correo electrónico de Divi. Solo hemos mostrado algunas de las posibles combinaciones de diseño que le ofrece el módulo de suscripción de correo electrónico de Divi. Los nombres de campo, las opciones de diseño y la configuración de ancho de campo se combinan para brindar muchas posibilidades de diseño para los formularios de suscripción de correo electrónico. Son fáciles de elegir y usar, lo que hace que la personalización de sus formularios de correo electrónico sea un proceso sencillo.

Nos encantaría saber de usted. ¿Utilizó las opciones de correo electrónico integradas de Divi para crear diferentes diseños? Háganos saber en los comentarios.

La publicación Las 8 posibilidades de diseño integradas con el módulo de optimización de correo electrónico de Divi apareció primero en el blog The Elegant Themes.

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada.