Saltar al contenido principal

Tutorial Divi: Cómo usar el módulo Email Optin

Divi: el tema de WordPress más fácil de usar

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 600.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

Es fácil hacer crecer su lista de correo utilizando el módulo de suscripción al boletín ofrecido por el tema Divi de WordPress. Este módulo admite integración MailChimp , Aweber et Feedburner.

integración mailchimp divi.png

Cómo agregar un módulo de suscripción al boletín a su página

Antes de que pueda agregar un módulo de correo electrónico a su página, primero debe saltar a Divi Builder. Una vez que el tema Divi esté instalado en su sitio web, notará un botón Utilice Divi Builder encima del editor cada vez que crea una nueva página. Haga clic en este botón para activar Divi Builder y acceder a todos los módulos de Divi Builder. Luego haga clic en el botón Use Visual Builder para iniciar el generador en modo visual. También puedes hacer clic en el botón Habilitar Visual Builder cuando navega por su sitio web en primer plano si está conectado a su panel de WordPress.

usar el constructor divi

Una vez que haya ingresado en Visual Builder, puede hacer clic en el botón gris más para agregar un nuevo módulo a su página. Los nuevos módulos solo se pueden agregar dentro de las líneas. Si comienza una nueva página, no olvide agregar primero una línea a su página. Tenemos excelentes tutoriales sobre el uso de elementos de línea y sección Divi.

correo electrónico optin.png

Localice el módulo de correo electrónico optin en la lista de módulos y haga clic en él para agregarlo a su página. Se puede buscar en la lista de módulos, lo que significa que también puede escribir la palabra "email optin" y luego hacer clic en "Enter" para buscar automáticamente y agregar el módulo optin. Una vez que se agrega el módulo, la lista de opciones lo recibirá. Estas opciones se separan en tres grupos principales: Contenido , diseño et Avanzado .

Configurar cuentas de correo electrónico

Antes de poder usar el módulo de correo electrónico opcional, primero debe conectarlo a un proveedor de correo electrónico. Estos proveedores se pueden agregar y administrar en la configuración del módulo. Una vez que haya agregado un nuevo proveedor de correo electrónico, aparecerá en la configuración del módulo cada vez que edite un módulo de correo electrónico en su sitio web.

correo electrónico optin configuration.png

Para agregar un nuevo proveedor de correo electrónico, primero seleccione su proveedor de correo electrónico de la lista Selecciona un proveedor . Luego haz clic en el botón añadir para vincular el módulo a su cuenta de correo electrónico. Divi actualmente admite tres proveedores: MailChimp, AWeber y Feedburner.

Enlace su cuenta AWeber

Antes de poder usar este módulo con AWeber, primero debe conectar su cuenta de AWeber. Para hacer esto, seleccione AWeber de la lista de proveedores, luego haga clic en el botón Agregar para comenzar el proceso. Después de hacer clic en el botón Agregar, accederá a una página donde se le pedirá que inicie sesión en su cuenta AWeber. Inicie sesión para generar su clave API.

iniciar sesión aweber divi.png

Luego copie y pegue la clave en el campo Clave API en la configuración del módulo, luego haga clic en el botón Enviar .

Su cuenta ahora se ha asociado y puede elegir su lista de correo electrónico en el menú desplegable Listas de AWeber .

Enlace su cuenta de MailChimp

Antes de poder usar el módulo con MailChimp, primero debe conectar su cuenta de MailChimp. Para hacer esto, seleccione MailChimp en la lista de proveedores y luego haga clic en Agregar. Después de hacer clic en el botón Agregar, un campo Clave API aparecer. Copie y pegue su clave API en el campo y presione el botón Enviar . Ahora se ha vinculado su cuenta y puede elegir su lista de correo electrónico en el menú desplegable Listas de MailChimp .

Puede ubicar su clave API de MailChimp en su cuenta de MailChimp.com. Inicia sesión y ve a tu página de perfil. Mira en la categoría Extras y encuentra el enlace Claves de la API . Éstos son algunos informaciones suplementarias sobre cómo encontrar su clave API.

api mailchimp divi.png

Ejemplo de caso de uso: Agregar un mensaje de suscripción en la parte inferior de una publicación de blog

Un lugar común para agregar un formulario de correo electrónico optin es justo debajo del contenido de su mensaje.
Para este ejemplo rápido, le mostraré lo fácil que es insertar y estilizar un módulo de correo electrónico Optin en una publicación de blog usando Visual Builder.

constructor visual divi example.jpg

Con Visual Builder, agregue la sección estándar con una fila de columnas 1 / 2 (columnas 2) debajo de la sección que contiene el contenido de la publicación.

Dado que este ejemplo será una oferta de libro electrónico opcional, agregue un módulo de imagen a la columna izquierda y cargue una imagen del libro. Establezca la alineación de la imagen en "Centro" y establezca el ancho máximo de la imagen en 300px.

agregar un módulo de correo electrónico optin divi.jpg

Luego agregue el módulo Optin Email a la columna derecha.

ejemplo de correo electrónico optin tutorial divi.png

Actualice la configuración de correo electrónico de Optin de la siguiente manera:

Opciones de contenido

Título: "Los nuevos suscriptores obtienen una copia GRATUITA de mi libro electrónico" Texto del botón: "Suscribirse" Contenido: "Una historia cautivadora que lo dejará al borde de su asiento". Proveedor de servicios: [seleccione proveedor de servicios] 
Seleccionar lista o título de transmisión

Opciones de diseño

Color del fondo del campo: # f1f1f1 Color de fondo: #ffffff Color del borde de enfoque: SÍ Color del borde: # 02b875 Color del texto: Oscuro Dirección del texto: Encabezado central Fuente: PT Sans Header Tamaño de fuente: 35px Altura de la cabeza: 1.3px Tamaño de fuente del cuerpo: 18px Relleno personalizado: 20px Derecha, 20px Izquierda Estilos Usar botón personalizado: SÍ Botón de tamaño de texto: 26px Color del botón de texto: # ffffff Color de fondo del botón: # 02b875 Botón de ancho del borde: 2 Color del botón del borde: # 02b875 Botón de espaciado entre letras: 1px Icono del botón Agregar: Sí Icono del botón: [agregar un icono]

Ejemplo de ebook por correo electrónico divi configuration.png

Es todo. Si desea mejorar sus formularios de suscripción, puede usar Florecer, la opción de correo electrónico Divi y el complemento de generación de leads diseñado específicamente para ayudarlo a desarrollar su lista de correo.

Opciones de Optin módulo de contenido de correo electrónico

En la pestaña de contenido, encontrará todos los elementos de contenido del módulo, como texto, imágenes e iconos. Todo lo que controla lo que aparece en su módulo siempre se encontrará en esta pestaña.

Cree fácilmente su sitio web con Elementor

Elementor le permite crear fácilmente cualquier diseño de sitio web con un aspecto profesional. Deja de pagar caro por lo que puedes hacer tú mismo. [Gratis]

opciones de configuración de correo electrónico opción content.png

Título

Inserte el título de su formulario de registro aquí.

Texto del botón

Especifique el texto del botón de registro aquí.

Contenido

Este campo es donde puede ingresar el contenido del módulo SignUp.

Proveedor de servicios

Aquí puede elegir qué proveedor de listas de correo está utilizando. El módulo actualmente admite integraciones MailChimp , Aweber et Feedburner. Seleccione su proveedor de la lista y luego vaya a las siguientes opciones.

Listas de MailChimp

Si ha elegido MailChimp como proveedor, aparecerá esta opción. Aquí puede elegir la lista de MailChimp para agregar clientes. Si no ve ninguna lista aquí, debe asegurarse de que la clave API de MailChimp esté definida en ePanel y que tenga al menos una lista en una cuenta de MailChimp. Si agregó una nueva lista, pero no aparece aquí, active la opción 'Regenerar listas de MailChimp' en ePanel. Recuerde deshabilitarlo una vez que se regenere la lista.

Listados de Aweber

Si ha seleccionado Aweber como proveedor, aparecerá esta opción. Aquí puede elegir la lista de Aweber para agregar clientes. Si no ve ninguna lista aquí, debe asegurarse de que Aweber esté configurado correctamente en ePanel y que tenga al menos una lista en una cuenta de Aweber. Si agregó una nueva lista, pero no aparece aquí, active la opción 'Regenerar listas de Aweber' en ePanel. Recuerde deshabilitarlo una vez que se regenere la lista.

Título de Feedburner

Si ha seleccionado Feedburner como proveedor, aparecerá esta opción. Así es como identificas tu cuenta de Feedburner. Deberá ingresar el título de su feed, que se puede encontrar aquí .

Usa el color de fondo

Si está habilitado, se aplicará un color de fondo al módulo. Si se ha habilitado un color de fondo, se agrega un relleno adicional dentro del módulo para separar el contenido del texto del borde visible del módulo. Si no se habilita un color de fondo, el fondo del módulo se vuelve transparente y se elimina el relleno adicional.

Color de fondo

Puede hacer que su mosaico de registro tenga el color que desee utilizando el selector de color. Seleccione el mismo color que el fondo de la sección para crear la apariencia de un ancho o efecto sin bordes.

Etiqueta de administración

Esto cambiará la etiqueta del módulo en el constructor para una fácil identificación. Cuando usa la vista WireFrame en Visual Builder, estas etiquetas aparecen en el bloque de módulos de la interfaz Divi Builder.

Diseño de la sección Optin de correo electrónico

En la pestaña Diseño, encontrará todas las opciones de estilo del módulo, como fuentes, colores, tamaño y espaciado. Esta es la pestaña que usará para cambiar la apariencia de su módulo. Cada módulo Divi tiene una larga lista de parámetros de diseño que puede usar para cambiar cualquier cosa.

opción sección diseño correo electrónico módulo optin.png

Color de fondo del campo de formulario

El formulario de correo electrónico optin contiene dos campos de entrada para el nombre de usuario y la contraseña. Puede usar este parámetro para ajustar el color de fondo de estos campos.

Color de texto del campo de formulario

El formulario de correo electrónico optin contiene dos campos de entrada para el nombre de usuario y la contraseña. Puede usar este parámetro para ajustar el color del texto de estos campos. Si ha ajustado el color de fondo del campo de formulario, también puede ajustar el color del texto para garantizar una relación de color uniforme.

Color de fondo

Cuando un campo de entrada se enfoca con el mouse de un visitante, los colores cambian para indicar claramente qué campo está activo. Aquí puede establecer el color de fondo de los campos enfocados.

Color del texto en foco

Cuando un campo de entrada se enfoca con el mouse de un visitante, los colores cambian para indicar claramente qué campo está activo. Aquí puede establecer el color del texto de los campos enfocados.

Use el color del borde de enfoque

Si desea agregar un borde a los campos de entrada cuando están enfocados, puede habilitar esta opción.

Color del borde de enfoque

Al usar esta configuración, puede cambiar el color del borde que aparece en los campos de entrada enfocados.

Color del texto

Si el color de fondo es oscuro, el color del texto debe establecerse en "Claro". Por otro lado, si el color de fondo es claro, el color del texto debe establecerse en "Oscuro".

Orientación del texto

Este menú desplegable le permite especificar la orientación de su texto para que esté justificado a la izquierda, centrado o justificado a la derecha.

Fuente de encabezado

Puede cambiar la fuente del texto del encabezado seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes grandes con tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones en negrita, cursiva, mayúscula y subrayada.

Tamaño de la fuente del encabezado

Aquí puede ajustar el tamaño del texto del encabezado. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto, o ingresar el valor del tamaño de texto deseado directamente en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color del texto del encabezado

Por defecto, todos los colores de texto Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto del encabezado, elija el color deseado en el selector de color con esta opción.

Espaciado de membretes

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto del encabezado, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

Altura de la línea del encabezado

La altura de la línea afecta el espacio entre cada línea del texto del encabezado. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en la línea. campo de entrada a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Fuente del cuerpo

Puede cambiar la fuente de su cuerpo seleccionando la fuente deseada del menú desplegable. Divi viene con docenas de fuentes grandes con tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones en negrita, cursiva, mayúscula y subrayada.

Tamaño de letra del cuerpo

Aquí puede ajustar el tamaño del texto de su cuerpo. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto, o ingresar el valor del tamaño de texto deseado directamente en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color del texto del cuerpo

Por defecto, todos los colores de texto Divi aparecen en blanco o gris oscuro. Si desea cambiar el color de su texto, elija el color deseado en el selector de color con esta opción.

Espaciado de letras corporales

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en su texto, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea del cuerpo

La altura de la línea afecta el espacio entre cada línea de texto en su cuerpo. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada ubicado a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Usa el borde

Habilitar esta opción colocará un borde alrededor de su módulo. Este borde se puede personalizar utilizando los siguientes parámetros condicionales.

Color del borde

Esta opción afecta el color de su borde. Seleccione un color personalizado en el selector de color para aplicarlo a su borde.

Ancho del borde

Por defecto, los bordes tienen un ancho de píxel 1. Puede aumentar este valor arrastrando el control deslizante de rango o ingresando un valor personalizado en el campo de entrada a la derecha del control deslizante. Se admiten unidades de medida personalizadas, lo que significa que puede cambiar la unidad predeterminada de "px" a otra, como em, vh, vw, etc.

Estilo del borde

Los bordes admiten ocho estilos diferentes: sólido, punteado, punteado, doble, ranura, cresta, incrustación y comienzo. Seleccione su estilo deseado en el menú desplegable para aplicarlo a su borde.

Margen personalizado

El margen es el espacio agregado al exterior de su módulo, entre el módulo y el siguiente elemento arriba, abajo o a la izquierda y derecha del mismo. Puede agregar valores de margen personalizados a uno de los cuatro lados del módulo. Para eliminar el margen personalizado, elimine el valor agregado del campo de entrada. Por defecto, estos valores se miden en píxeles, pero puede ingresar unidades de medida personalizadas en los campos de entrada.

Relleno personalizado

Relleno es el espacio agregado dentro de su módulo, entre el borde del módulo y sus elementos internos. Puede agregar valores de relleno personalizados a uno de los cuatro lados del módulo. Para eliminar el margen personalizado, elimine el valor agregado del campo de entrada. Por defecto, estos valores se miden en píxeles, pero puede ingresar unidades de medida personalizadas en los campos de entrada.

Use estilos personalizados para el botón

Al activar esta opción, se muestran diferentes configuraciones de personalización de botones que puede usar para cambiar la apariencia del botón en su módulo.

Tamaño del texto del botón

Esta configuración se puede utilizar para aumentar o disminuir el tamaño del texto en el botón. El botón cambia a medida que el tamaño del texto aumenta y disminuye.

Color del texto del botón

De forma predeterminada, los botones adoptan el color de acento de su tema tal como se define en el Personalizador del tema. Esta opción le permite asignar un color de texto personalizado al botón de este módulo. Seleccione su color personalizado con el selector de color para cambiar el color del botón.

Color de fondo del botón

Por defecto, los botones tienen un color de fondo transparente. Esto se puede cambiar seleccionando el color de fondo deseado en el selector de color.

Botón de ancho del borde

Todos los botones Divi tienen un borde 2px predeterminado. Este borde se puede aumentar o disminuir utilizando este parámetro. Las fronteras se pueden eliminar ingresando un valor de 0.

Color del borde del botón

De forma predeterminada, los bordes de los botones cambian al color de acento de su tema tal como se define en el Personalizador del tema. Esta opción le permite asignar un color de borde personalizado al botón en este módulo. Seleccione su color personalizado utilizando el selector de color para cambiar el color del borde del botón.

Radio del borde del botón

El radio del borde afecta la redondez de las esquinas de los botones. Por defecto, los botones en Divi tienen un radio de borde pequeño que redondea las esquinas de los píxeles 3. Puede reducir este valor a 0 para crear un botón cuadrado o aumentarlo significativamente para crear botones con bordes circulares.

Espaciado de letras de los botones

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto del botón, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Fuente de botón

Puede cambiar la fuente del texto de su botón seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes grandes con tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones en negrita, cursiva, mayúscula y subrayada.

Agregar un ícono de botón

Deshabilitado, esta configuración eliminará los íconos de su botón. Por defecto, todos los botones Divi muestran un icono de flecha en el cursor.

Icono de botón

Si los íconos están habilitados, puede usar esta configuración para elegir el ícono que usará en su botón. Divi tiene diferentes íconos para elegir.

Botón de icono de color

Establecer esta configuración cambiará el color del icono que aparece en su botón. De forma predeterminada, el color del icono es el mismo que el color de texto de sus botones, pero esta configuración le permite ajustar el color de forma independiente.

Botón de ubicación del icono

Puede elegir mostrar el icono de su botón a la izquierda o derecha de su botón.

Mostrar solo el icono de desplazamiento del botón

De manera predeterminada, los iconos de los botones solo se muestran durante la renovación. Si desea que el icono siempre aparezca, desactive esta configuración.

Color de texto de desplazamiento del botón

Cuando el botón de un visitante sobrevuela el botón, se usará ese color. El color cambiará desde el color base definido en la configuración anterior.

Color de fondo del botón de desplazamiento

Cuando el botón de un visitante sobrevuela el botón, se usará ese color. El color cambiará desde el color base definido en la configuración anterior.

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [Recomendado]

Botón de borde Color Hover

Cuando el botón de un visitante sobrevuela el botón, se usará ese color. El color cambiará desde el color base definido en la configuración anterior.

Botón de radio del borde deslizante

Cuando el botón de un visitante hace clic en el botón, se utilizará este valor. El valor cambiará del valor base definido en los parámetros anteriores.

Botón de espaciado de nota apuntando

Cuando el botón de un visitante hace clic en el botón, se utilizará este valor. El valor cambiará del valor base definido en los parámetros anteriores.

Opciones avanzadas de correo electrónico Optin

En la pestaña Avanzado, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como los atributos personalizados CSS y HTML. Aquí puede aplicar CSS personalizado a uno de los muchos elementos del módulo. También puede aplicar clases personalizadas e ID de CSS al módulo, que se pueden usar para personalizar el módulo en el archivo style.css de su tema secundario.

módulo de correo electrónico optin

ID de CSS

Ingrese un identificador CSS opcional para usar para este módulo. Se puede usar una ID para crear un estilo CSS personalizado o para crear enlaces a secciones particulares de su página.

Clase de CSS

Ingrese las clases de CSS opcionales que se utilizarán para este módulo. Se puede usar una clase CSS para crear un estilo CSS personalizado. Puede agregar varias clases, separadas por un espacio. Estas clases se pueden usar en su tema secundario Divi o en la hoja de estilo CSS personalizada que agregue a su página o sitio web utilizando opciones de tema Divi o parámetros de la página Divi Builder.

CSS personalizado

El CSS personalizado también se puede aplicar al módulo y a uno de los elementos internos del módulo. En la sección CSS personalizado, encontrará un campo de texto en el que puede agregar hojas de estilo CSS personalizadas directamente a cada elemento. Las entradas CSS en estos parámetros ya están envueltas en las etiquetas de estilo. Tan solo ingrese las reglas CSS separadas por punto y coma.

visibilidad

Esta opción le permite controlar los dispositivos en los que aparece su módulo. Puede elegir deshabilitar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio de forma individual. Esto es útil si desea utilizar diferentes módulos en diferentes dispositivos, o si desea simplificar el diseño móvil al eliminar ciertos elementos de la página.

Otros tutoriales sobre WordPress Theme Divi

Este artículo contiene los comentarios 0

Dejar un comentario

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

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Volver arriba
11 acciones
cuota6
Tweet1
Siguiente 4