ElegantThemes

Use el contenido del módulo de opciones de correo electrónico en línea con el módulo de texto combinado

El módulo de suscripción de correo electrónico de Divi tiene varias áreas de texto y contenido que pueden mostrar contenido adicional. Estas áreas se pueden diseñar en el módulo de suscripción de correo electrónico. Junto con las opciones de diseño del módulo, esto proporciona un diseño sólido para formularios de correo electrónico simples. Sin embargo, esto limita las posibilidades de diseño. Afortunadamente, podemos usar el módulo de suscripción de correo electrónico con un módulo de texto para crear aún más opciones de diseño y estilo. En este artículo, compararemos el uso de campos de texto en el propio módulo de suscripción de correo electrónico con el uso de un módulo separado para copiar.

¡Empecemos!

Elemento de contenido del módulo de opciones de correo electrónico en línea

Además del formulario en sí, el módulo de suscripción de correo electrónico de Divi contiene tres áreas de contenido. Incluyen encabezado, contenido del cuerpo y contenido del pie de página. El título es un campo de texto único sin ningún ajuste en la pestaña Contenido. El contenido del cuerpo y el pie de página tiene un editor de contenido completo que acepta texto, medios, HTML, CSS y más. También puede usar contenido dinámico, personalizarlo para cada tamaño de dispositivo y ajustar su estado de desplazamiento.

Pestaña de diseño del módulo de opciones de correo electrónico en línea

La pestaña Diseño tiene configuraciones de estilo básicas para el encabezado y las áreas de contenido. Las opciones incluyen el nivel del título, la fuente, el peso de la fuente (normal o en negrita), el estilo, la alineación, el color, el tamaño, el espaciado, la altura de la línea y la sombra. Echemos un vistazo a cada uno.

Opciones de encabezado del módulo de opciones de correo electrónico

A continuación se muestran los ajustes de diseño para el título. He ajustado el nivel del título por el color del texto en esta imagen.

Opciones de encabezado del módulo de opciones de correo electrónico

He cambiado el tamaño del texto por la sombra del texto en esta imagen.

Artículo Recomendado:  JetCompareWishlist For Elementor v1.2.2

Opciones de encabezado del módulo de opciones de correo electrónico

Opciones de correo electrónico Cuerpo del módulo y opciones de texto de pie de página

El texto del cuerpo y el pie de página están controlados por la misma configuración de diseño. La siguiente imagen incluye opciones de color de fuente a fuente. Esta sección también agrega funciones de texto estándar, como viñetas, enlaces, citas y más. El texto del encabezado sigue el estilo del texto del cuerpo a menos que tenga su propio estilo. El botón usará algunas opciones de texto a menos que se le dé un estilo por separado.

Opciones de correo electrónico Cuerpo del módulo y opciones de texto de pie de página

La imagen a continuación agrega tamaño de texto con la opción de sombra de texto.

Opciones de correo electrónico Cuerpo del módulo y opciones de texto de pie de página

Puede usar CSS en línea en el editor de contenido, pero cualquier contenido sin estilo seguirá los estilos en la pestaña Diseño.

Opciones de correo electrónico Cuerpo del módulo y opciones de texto de pie de página

Diseño de contenido del módulo de opciones de correo electrónico en línea

Las opciones de diseño nos permiten colocar el encabezado y el contenido del cuerpo arriba, abajo, a la derecha o a la izquierda del formulario. El siguiente ejemplo pone el cuerpo en la parte superior y el formulario en la parte inferior.

Diseño de contenido del módulo de opciones de correo electrónico en línea

Pros y contras de la selección de correo electrónico

ventaja

  • Todo está contenido en un módulo. Esto simplifica la creación y el estilo de los formularios de correo electrónico.
  • Es fácil de usar y eficiente. Si desea copiar o mover formularios de correo electrónico, solo tiene que lidiar con un módulo.
  • El módulo de suscripción de correo electrónico proporciona tres campos de texto que podemos usar. El texto se ve muy bien y funciona bien para un formulario de correo electrónico básico.
  • Para realizar ajustes, solo necesita abrir un módulo.

defecto

  • El texto del título tiene un campo simple para ingresar el título y tiene opciones de estilo básicas en la pestaña de diseño.
  • El cuerpo y el pie de página tienen editores de contenido separados en la pestaña Contenido, pero usan la misma configuración en la pestaña Diseño.
  • El módulo tiene cuatro opciones de diseño para colocar el cuerpo y la forma. Puede colocar el texto del cuerpo arriba, abajo, a la derecha o a la izquierda del formulario, pero no puede separarlos.
  • Los campos del formulario tienen opciones de estilo individuales, pero otros elementos de estilo se aplican a todo el módulo. Por ejemplo, los fondos, los tamaños, el espaciado, los bordes, las sombras de los cuadros, los filtros, las transformaciones y las animaciones se aplican a todos los elementos del módulo. Esto significa que no puede ajustar el fondo del encabezado por separado del cuerpo, pie de página o formulario.
  • El título siempre está encima del cuerpo del texto. El contenido del pie de página siempre está debajo del botón.
  • Cualquier ajuste de ubicación o estilo que no esté disponible en la pestaña Diseño debe agregarse al campo CSS de la pestaña Avanzado.

Combinar texto con módulos

Otra forma es crear el mismo elemento de texto usando un módulo de texto separado junto con el módulo de suscripción de correo electrónico. Esta opción requiere que aplique estilo a varios elementos y es posible que deba usar una fila con la opción de varias columnas. Sin embargo, también le brinda la mayoría de las funciones y opciones.

Para usar este método, simplemente deje en blanco los campos Título, Cuerpo y Pie de página del módulo de suscripción de correo electrónico, como hago en el ejemplo a continuación. Esto le da el formulario sin otros elementos de texto.

Combinar texto con módulos

Luego, use el módulo de texto para crear el elemento que desee. En el siguiente ejemplo, agregué dos módulos de texto al lado del formulario. Como se muestra en este ejemplo, el editor de contenido es el mismo que en el módulo de selección de correo electrónico.

1647803764 696 Use el contenido del modulo de opciones de correo electronico

Opciones de diseño de contenido del módulo de texto

El módulo de texto tiene la misma configuración de diseño de texto de cuerpo y encabezado que el módulo de selección de correo electrónico, pero agrega más opciones. El texto del encabezado incluye cinco pesos de fuente. Dado que puede usar diferentes módulos para cada conjunto de texto, puede configurar diferentes fondos, bordes, sombras de cuadro, etc. para cada conjunto de texto.

El siguiente ejemplo utiliza el módulo de suscripción de correo electrónico para un formulario y agrega tres módulos de texto diferentes para crear texto de encabezado, cuerpo y pie de página. He diseñado cada módulo individualmente. Esto muestra la configuración de fuente, peso, estilo, color, tamaño, espaciado, altura de línea y sombra de texto. También ajusté el fondo, el espaciado y los bordes.

Opciones de diseño de contenido del módulo de texto

Pros y contras de usar módulos de texto para contenido de suscripción de correo electrónico

ventaja

  • El módulo de texto proporciona más capacidades de estilo para cada elemento. Dado que cada módulo tiene un estilo individual, puede diseñar cada elemento de manera diferente. Esto incluye diferentes fondos, espacios, tamaños, bordes, etc.
  • No está limitado por las opciones de diseño.
  • No está limitado a un conjunto de contenido. Puede rodear el formulario con cualquier número de módulos para crear cualquier diseño que desee.
  • No está limitado a módulos de texto. Puede usar lo que quiera, como imágenes, videos, controles deslizantes, CTA y más.
  • Todavía puede usarlos con contenido del módulo de suscripción de correo electrónico.

defecto

  • Para poner el contenido al lado del formulario, tienes que usar una fila con más columnas.
  • Es más difícil copiar o mover módulos individuales.
  • Hay más módulos abiertos si desea realizar cambios.
  • Es posible que se necesite un poco de trabajo de estilo adicional para que se vean como un solo formulario. Si desea cambiarlos y hacer que parezca un solo módulo, los bordes y fondos de las opciones de correo electrónico deben realizarse en la configuración de la fila.

Ejemplo de combinación de módulo de correo electrónico y texto

A continuación, veamos algunos ejemplos de módulos de selección de correo electrónico combinados con módulos de texto. Para la mayoría de estos ejemplos, usaré el formulario de suscripción por correo electrónico del paquete de diseño de ONG gratuito disponible en Divi. Mostraré vistas de escritorio y de estructura alámbrica.

Primero, aquí están las opciones de correo electrónico que se muestran en el diseño. Utiliza dos módulos de texto y un módulo de suscripción por correo electrónico. El estilo de fondo se realiza en líneas. Pone un pequeño título en la parte superior, una gran descripción debajo y luego el formulario.

Ejemplo de combinación de módulo de correo electrónico y texto

Esta es la vista de estructura alámbrica.

Ejemplo de combinación de módulo de correo electrónico y texto

Ejemplo uno de combinación de módulo de correo electrónico y texto

Nuestro primer ejemplo mueve la descripción a la derecha del formulario, pero mantiene el título encima del formulario. Este diseño es simple, pero no es posible sin usar el módulo de texto sobre el formulario. He cambiado la fila a 2 columnas.

Ejemplo uno de combinación de módulo de correo electrónico y texto

Esta es la vista de estructura alámbrica.

Ejemplo uno de combinación de módulo de correo electrónico y texto

Ejemplo dos de combinación de módulo de correo electrónico y texto

Para nuestro segundo ejemplo, cambié la fila a 3 columnas y coloqué el módulo de texto en la columna exterior. Cada línea con texto contiene un título y una descripción que proporciona pasos numerados. El módulo de suscripción por correo electrónico puede mostrar un paso, pero no ambos.

1647803764 79 Use el contenido del modulo de opciones de correo electronico

Esta es la vista de estructura alámbrica.

1647803764 32 Use el contenido del modulo de opciones de correo electronico

Ejemplo de combinación de módulo de correo electrónico y texto tres

Nuestro tercer ejemplo utiliza secciones especiales con varias filas y varios anchos de columna. Muestra el título y dos módulos para la descripción a la izquierda y el formulario de correo electrónico a la derecha.

1647803764 499 Use el contenido del modulo de opciones de correo electronico

Esta es la vista de estructura alámbrica.

1647803764 829 Use el contenido del modulo de opciones de correo electronico

Combinación de módulo de correo electrónico y texto ejemplo cuatro

Este es nuestro cuarto ejemplo. Utiliza el formulario de suscripción por correo electrónico del paquete gratuito de diseño de alquiler de scooters. Agregué una imagen al fondo del encabezado y cambié el color de fuente del encabezado a blanco. Todo lo demás es igual que el original. El fondo blanco de la columna hace que parezca un módulo separado.

1647803764 303 Use el contenido del modulo de opciones de correo electronico

Esta es la vista de estructura alámbrica.

1647803764 842 Use el contenido del modulo de opciones de correo electronico

la idea de terminar

Eso es lo que pensamos de usar el módulo de suscripción de correo electrónico en línea en lugar de combinarlo con el módulo de texto. El módulo de suscripción por correo electrónico funciona bien y proporciona un formulario de correo electrónico simple, pero es limitado. Los módulos de texto con títulos y descripciones le brindan más opciones de diseño. Con algo de estilo, varios módulos pueden parecer uno solo. Con varios módulos, puede crear formularios exclusivos de suscripción de correo electrónico con más opciones de diseño y diseño.

Nos encantaría saber de usted. ¿Utiliza la funcionalidad de contenido en el módulo de suscripción de correo electrónico Divi, o prefiere usar el módulo de texto para ese contenido? Háganos saber en los comentarios.

La publicación Contenido modular combinado con módulo de texto usando opciones de correo electrónico en línea apareció por primera vez en el blog The Elegant Themes.

Artículo Recomendado:  Tokoo v1.1.14 – Tema de WooCommerce para tiendas electrónicas de afiliados

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *