Es fácil hacer crecer su lista de correo utilizando el módulo de suscripción al boletín que ofrece el tema de WordPress división Este módulo admite la integración MailChimp , Aweber et Feedburner.
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 acceder a Divi Builder. Una vez el Tema divi instalado en su sitio web, notará un botón Utilice Divi Builder encima del editor de publicaciones cada vez que crea una página nueva. 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 puede 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.
Una vez que haya ingresado a 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 filas. Si está comenzando una nueva página, recuerde agregar una fila a su página primero. Tenemos excelentes tutoriales sobre el uso de elementos de línea y sección de Divi.
Busque el módulo de correo electrónico de suscripción en la lista de módulos y haga clic en él para agregarlo a su página. La lista de módulos se puede buscar, lo que significa que también puede escribir la palabra "suscripción de correo electrónico" y luego hacer clic en "Entrar" para buscar y agregar automáticamente el módulo de suscripción. Una vez que se agrega el módulo, será recibido por la lista de opciones del módulo. Estas opciones se dividen en tres grupos principales: Contenido , diseño et Avanzado .
Configurar cuentas de correo electrónico
Antes de poder utilizar el módulo de correo electrónico de suscripción, 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.
Para agregar un nuevo proveedor de correo electrónico, primero seleccione su proveedor de correo electrónico de la lista Selecciona un proveedor . Luego haga clic en el botón Añadir para vincular el módulo a su cuenta de correo electrónico. Divi admite actualmente tres proveedores: MailChimp, AWeber y Feedburner.
Enlace su cuenta AWeber
Antes de poder utilizar este módulo con AWeber, primero debe conectar su cuenta AWeber. Para hacer esto, seleccione AWeber de la lista de proveedores, luego haga clic en el botón Agregar para iniciar el proceso. Después de hacer clic en el botón Agregar, se lo llevará a una página donde se le pedirá que inicie sesión en su cuenta de AWeber. Inicie sesión para generar su clave API.
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 vinculado 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 de la lista de proveedores, 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, luego presione el botón Enviar . Su cuenta ahora ha sido vinculada 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. Inicie sesión y vaya a su página de perfil. Busque en la categoría Extras y encuentra el enlace Claves de la API . aquí están algunas informaciones suplementarias sobre cómo encontrar su clave API.
Ejemplo de caso de uso: agregar una publicación de suscripción al final de una publicación de blog
Un lugar común para agregar un formulario la opción de correo electrónico está justo debajo del contenido de su mensaje.
Para este ejemplo rápido, le mostraré lo fácil que es insertar y diseñar un módulo de correo electrónico Optin debajo de una publicación de blog usando Visual Builder.
Usando Visual Builder, agregue la sección estándar con una fila de 1/2 columna (2 columnas) debajo de la sección que contiene el contenido de la publicación.
Dado que este ejemplo será una oferta de libro electrónico con la opción de suscripción, agregue un módulo de imagen en 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.
Luego agregue el módulo Optin Email a la columna derecha.
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 convincente que lo dejará al borde de su asiento". Proveedor de servicios: [seleccionar proveedor de servicios] Seleccionar lista o título de transmisión
Opciones de diseño
Color de fondo del campo: # f1f1f1 Color de fondo: #ffffff Color del borde de enfoque: SÍ Color del borde: # 02b875 Color del texto: Oscuro Orientación del texto: Encabezado central Fuente: PT Sin encabezado Tamaño de fuente: 35px Altura de la cabeza: 1.3em Tamaño de fuente del cuerpo: 18px Relleno personalizado: 20px Derecha, 20px Izquierda Estilos Uso personalizado para botón: SÍ Botón de tamaño de texto: 26px Color del botón de texto: #ffffff Color de fondo del botón: # 02b875 Ancho del borde del botón: 2 Color del borde del botón: # 02b875 Espaciado entre letras del botón: 1px Agregar icono de botón: Sí Icono de botón: [agregar icono]
Es todo. Si desea mejorar sus formularios de suscripción, puede utilizar Florecer (bloom), la opción de correo electrónico Divi y el complemento de generación de prospectos especialmente diseñado para ayudarlo a hacer crecer 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.
Título
Inserta el título de tu formulario registro aquí.
Texto del botón
Especifique aquí el texto del botón de registro.
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 utiliza. El módulo actualmente admite integraciones MailChimp , Aweber et Feedburner. Seleccione su proveedor de la lista, luego proceda 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 una lista aquí, debe asegurarse de que la clave API de MailChimp esté configurada en ePanel y de que tenga al menos una lista en una cuenta de MailChimp. Si ha agregado una nueva lista, pero no aparece aquí, habilite la opción 'Regenerar listas de MailChimp' en ePanel. No olvide desactivarlo 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 Aweber para agregar clientes. Si no ve una 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 ha agregado una nueva lista, pero no aparece aquí, active la opción 'Regenerar listas Aweber' en ePanel. No olvide desactivarlo 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 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 un color de fondo no está activado, el fondo del módulo se vuelve transparente y se elimina el relleno adicional.
Color de fondo
Puede hacer que su mosaico de inscripción 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 efecto de ancho o 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ódulo 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 utilizará para cambiar la apariencia de su módulo. Cada módulo Divi tiene una larga lista de configuraciones de diseño que puede usar para cambiar cualquier cosa.
Color de fondo del campo de formulario
Le formulario El correo electrónico de suscripción contiene dos campos de entrada para nombre de usuario y contraseña. Puede utilizar esta configuración para ajustar el color de fondo de estos campos.
Color de texto del campo de formulario
El formulario de correo electrónico de suscripción contiene dos campos de entrada para el nombre de usuario y la contraseña. Puede utilizar esta configuración para ajustar el color del texto de estos campos. Si ha ajustado el color de fondo del campo del formulario, también puede ajustar el color del texto para garantizar una relación de color armoniosa.
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 definir 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 definir 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". Sin embargo, 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 geniales impulsadas por Google Fonts. De forma predeterminada, 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 de negrita, cursiva, mayúsculas y subrayado.
Tamaño de fuente del encabezado
Aquí puede ajustar el tamaño del texto de su encabezado. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto o ingresar directamente el valor de tamaño de texto 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" según el valor de su tamaño para cambiar su tipo de unidad.
Color del texto del encabezado
De forma predeterminada, todos los colores del texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto de su encabezado, elija el color deseado en el selector de color usando esta opción.
Espaciado entre letras del encabezado
El espaciado de 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" según el valor de su tamaño para cambiar su tipo de unidad.
Altura de la fila del encabezado
La altura de la fila afecta el espacio entre cada fila del texto del encabezado. Si desea aumentar el espacio entre cada fila, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espaciado deseado en el 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" según el 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 en el menú desplegable. Divi viene con docenas de fuentes geniales impulsadas por Google Fonts. De forma predeterminada, 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 de negrita, cursiva, mayúsculas y subrayado.
Tamaño de letra del cuerpo
Aquí puede ajustar el tamaño del texto del cuerpo. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto o ingresar directamente el valor de tamaño de texto 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" según el valor de su tamaño para cambiar su tipo de unidad.
Color del texto del cuerpo
De forma predeterminada, todos los colores del texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color de su texto, elija el color deseado en el selector de color usando esta opción.
Espaciado de letras corporales
El espaciado de 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" según el 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 espaciado 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" según el 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 del selector de color para aplicarlo a su borde.
Ancho del borde
De forma predeterminada, los bordes tienen 1 píxel de ancho. 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 algo más como em, vh, vw, etc.
Estilo del borde
Los bordes admiten ocho estilos diferentes: sólido, punteado, punteado, doble, surco, cresta, superpuesto e inicio. Seleccione el estilo que desee en el menú desplegable para aplicarlo a su borde.
Margen personalizado
El margen es el espacio que se agrega al exterior de su módulo, entre el módulo y el siguiente elemento arriba, abajo o a la izquierda y derecha de él. Puede agregar valores de margen personalizados a cualquiera de los cuatro lados del módulo. Para eliminar el margen personalizado, elimine el valor agregado del campo de entrada. De forma predeterminada, estos valores se miden en píxeles, pero puede ingresar unidades de medida personalizadas en los campos de entrada.
Relleno personalizado
El 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 cualquiera de los cuatro lados del módulo. Para eliminar el margen personalizado, elimine el valor agregado del campo de entrada. De forma predeterminada, 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
Habilitar esta opción revela varias configuraciones de personalización de botones que puede usar para cambiar la apariencia del botón de 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 se adapta a medida que aumenta y disminuye el tamaño del texto.
Color del texto del botón
De forma predeterminada, los botones adoptan el color de acento de su tema como se define en el Personalizador de temas. 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 de 2px por defecto. Este borde se puede aumentar o disminuir con esta configuración. Los bordes se pueden eliminar ingresando un valor de 0.
Color del borde del botón
De forma predeterminada, los bordes de los botones adoptan el color de acento de su tema como se define en el Personalizador de temas. Esta opción le permite asignar un color de borde personalizado al botón de este módulo. Seleccione su color personalizado con 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 sus botones. De forma predeterminada, los botones en Divi tienen un pequeño radio de borde que redondea las esquinas en 3 píxeles. 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 letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto de su 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" según el 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 geniales impulsadas por Google Fonts. De forma predeterminada, 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 de negrita, cursiva, mayúsculas y subrayado.
Agregar un ícono de botón
Desactivado, esta configuración eliminará los iconos de su botón. De forma predeterminada, todos los botones Divi muestran un icono de flecha en el desplazamiento.
Icono de botón
Si los íconos están habilitados, puede usar esta configuración para elegir qué ícono usar en su botón. Divi tiene diferentes iconos para elegir.
Botón de icono de color
El ajuste de 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 del texto del botón, 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 icono solo al pasar el cursor sobre el botón
De forma predeterminada, los iconos de los botones se muestran solo cuando se desplaza. Si desea que el icono aparezca siempre, desactive esta configuración.
Color de texto de desplazamiento del botón
Cuando el botón de un visitante pasa por encima del botón, se utilizará este color. El color cambiará del color base definido en la configuración anterior.
Color de fondo del botón de desplazamiento
Cuando el botón de un visitante pasa por encima del botón, se utilizará este color. El color cambiará del color base definido en la configuración anterior.
Botón de borde Color Hover
Cuando el botón de un visitante pasa por encima del botón, se utilizará este color. El color cambiará del color base definido en la configuración anterior.
Botón de radio del borde deslizante
Cuando el mouse de un visitante pasa el mouse sobre el botón, se utilizará este valor. El valor cambiará del valor base definido en la configuración anterior.
Botón de espaciado de nota apuntando
Cuando el mouse de un visitante pasa el mouse sobre el botón, se utilizará este valor. El valor cambiará del valor base definido en la configuración anterior.
Opciones avanzadas de correo electrónico Optin
En la pestaña avanzada, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como los atributos personalizados de CSS y HTML. Aquí puede aplicar CSS personalizado a cualquiera de los muchos elementos del módulo. También puede aplicar clases e ID de CSS personalizados al módulo, que se pueden usar para personalizar el módulo en el archivo style.css de su tema secundario.
ID de CSS
Ingrese un ID de CSS opcional para usar en este módulo. Se puede usar una identificación para crear un estilo CSS personalizado o para vincular a secciones particulares de su página.
Clase de CSS
Ingrese las clases de CSS opcionales para usar en este módulo. Se puede usar una clase CSS para crear estilos CSS personalizados. 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 agrega a su página o sitio web usando el opciones de tema Divi o parámetros de la página Divi Builder.
CSS personalizado
También se puede aplicar CSS personalizado al módulo y a cualquiera de los componentes internos del módulo. En la sección CSS personalizado, encontrará un campo de texto donde puede agregar hojas de estilo CSS personalizadas directamente a cada elemento. Las entradas CSS en esta configuración ya están envueltas en etiquetas de estilo. Así que simplemente 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 optar por desactivar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio individualmente. Esto es útil si desea utilizar diferentes mods en diferentes dispositivos o si desea simplificar el diseño del móvil eliminando ciertos elementos de la página.
Otros tutoriales sobre WordPress Theme Divi
- 5 sitios web para su uso restaurante temático Divi
- Cómo agregar texto en un producto Divi WooCommerce
- Cómo cambiar el color del menú entre páginas Divi
- Cómo personalizar las cuadrículas de un blog con Divi
- Cómo utilizar la función de editor Divi en WordPress
- Cómo crear un control deslizante Divi a pantalla completa
- Cómo cambiar el color de los menús entre páginas Divi
- Características que probablemente no conozcas sobre Divi
- Cómo usar Divi Builder en WordPress
- Cómo usar el módulo de desplazamiento de video Divi
- Cómo usar el módulo Divi Builder Flip
- Cómo agregar un módulo testimonial en Divi Builder
- Cómo usar el módulo de texto Divi
- Cómo crear un control deslizante en Divi
- Cómo editar un rol de usuario Divi
- Cómo usar el módulo de Divi Social Media
- Cómo usar el módulo de tienda en el tema WordPress Divi
- Cómo usar el módulo de la barra lateral Divi
- Cómo usar el Módulo Divi Price Table
- Cómo usar el módulo de título de las publicaciones de Divi
- Cómo agregar un módulo de video de Divi
- Cómo usar el módulo de navegación del artículo
- Cómo usar el módulo de búsqueda Divi
- Cómo usar el módulo Divi wallet
- Cómo usar el módulo de persona en Divi Builder
- Cómo usar el módulo de billetera con filtro Divi
- Cómo usar el módulo deslizante de ancho completo
- Cómo usar el Módulo de imagen Divi Builder
- Cómo utilizar el módulo de navegación de ancho completo de Divi Builder
- Cómo usar el módulo de la galería de imágenes
- Cómo utilizar el módulo de tarjeta de ancho completo de Divi Builder
- Cómo utilizar el módulo de cartera de ancho completo de Divi
- Cómo usar el módulo de encabezado de ancho completo Divi
- Cómo usar el módulo Divi Counter
- Cómo usar el control deslizante de artículos en Divi Builder
- Cómo usar el módulo Divi Email Optin
[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" extended "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DESCARGUE EL TEMA DIVI [/ vcex_button] [/ width_column] [»vc_column] »1/2 ″] [vcex_button url =" https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials "target =" blank "layout =" extended "align =" center " font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] DESCARGAR PLANTILLAS DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
