Divi - Documentación en español

Actualizada v3.28

El módulo Suscripción

Incrementar las suscripciones a listas de correo es fácil con este módulo. Posee soporte para los servicios de MailChimp, AWeber, FeedBurner, ConvertKit, Mailerlite, Mailster, Infusionsoft, Ontraport, iContact, HubSpot, Emma, MadMimi, GetResponse, Feedblitz, ConstantContact, SendinBlue, ActiveCampaign, SalesForce, CampaignMonitor y MailPoet.

Divi - Módulo "Suscripción"

Cómo añadir un módulo Suscripción en una página

Antes de poder añadir un módulo Suscripción, deberá abrir el constructor de Divi. Una vez instalado el tema en su sitio, notará en la parte superior del editor que se ha añadido un botón morado Usar el constructor de Divi. Este botón estará presente en cada página o entrada nueva. Haga clic en este botón para activar el constructor de Divi, con el cual tendrá acceso a los módulos. A continuación haga clic en el botón azul Usar constructor visual para iniciar el el constructor en su modalidad visual. También puede hacer clic en el botón Activar constructor visual al navegar en la interfaz de usuario de su sitio si ha iniciado sesión en WordPress.

Una vez que haya entrado en el constructor visual, puede hacer clic en el botón + para añadir un nuevo módulo en la página. Los módulos nuevos solo pueden agregarse dentro de las filas. Si está construyendo una página de cero, no olvide añadir una fila primero. Tenemos algunos muy buenos tutoriales sobre cómo usar los elementos de las filas y secciones de Divi.

Divi - Insertar módulo Suscripción

Localice el módulo Suscripción dentro de la lista de módulos y haga clic sobre el botón gris para añadirlo a la página. La lista de módulos tiene un motor de búsqueda, lo cual significa que también puede escribir “suscripción” y pulsar enter para encontrar el módulo más rápidamente. Cuando haya agregado el módulo aparecerá la ventana de ajustes correspondientes. Estos ajustes son opciones que están separadas en tres grupos principales: Contenido, Diseño y Avanzado.

Configuración de cuentas de correo

Antes de que pueda usar este módulo, debe conectarse primero con su cuenta del proveedor del servicio. Podrá añadirlo dentro de los ajustes del módulo. Primero selecciónelo de la lista Proveedor del servicio y luego haga clic en el botón Añadir para enlazar el módulo con su cuenta de correo.

Sistema de ayuda de Divi

Dentro de cada pestaña de los ajustes de módulos, filas y secciones, a continuación de las opciones, se incluye un enlace al sistema de ayuda de Divi, que incluye más de 70 vídeos completos con instrucciones de configuración y uso del constructor. Este sistema único les da a usted y a sus clientes la ayuda que necesiten, permitiéndoles aprender al mismo tiempo que crean sus sitios.

Sistema de ayuda de Divi

Los vídeos individuales de cada lista de reproducción se pueden abrir en una ventana emergente, fuera del cuadro de ayuda, lo cual le permite redimensionar o mover la interfaz del vídeo por toda la pantalla para que encuentre la mejor ubicación. El vídeo permanece abierto y anclado a su posición mientras usted explora el constructor, siguiendo el tutorial y construyendo la página. Puede visitar uno por uno los vídeos de la lista, cerrar el vídeo y volver a la lista de reproducción en cualquier momento. Los vídeos solo están disponibles en inglés.

Filtros de búsqueda de opciones

Dentro de todas las ventanas de ajustes de los modulos está disponible un botón de Filtros. Los filtros limitan la visibilidad de muchas opciones disponibles que aparecen dentro de cada ventana. Estos filtros incluyen: Estilos modificados, Contenido / Estilos adaptables, Contenido / Estilos al pasar el cursor y Contenido activo.

Divi - Filtro de búsqueda en módulos

Ver más información aquí.

Opciones de contenido

Dentro de la pestaña Contenido encontrará todos los elementos de contenido del módulo, tales como texto, proveedor del servicio y fondo. Todo aquello que controla lo que aparece en el módulo siempre se encontrará en esta pestaña.

Texto
  • Título – Escriba aquí el título para el formulario de suscripción.
  • Botón – Defina aquí el texto para el botón de suscripción.
  • Contenido – En este campo puede introducir el contenido del módulo Suscripción.
  • Pie – En este campo puede introducir un texto que aparecerá debajo del botón de suscripción
Cuenta de correo electrónico
  • Proveedor del servicio – Aquí puede elegir el proveedor de la lista de correos que esté usando. El módulo actualmente incluye integración con MailChimp, AWeber, FeedBurnerConvertKit, Mailerlite, Mailster, Infusionsoft, Ontraport, iContact, HubSpot, Emma, MadMimi, GetResponse, Feedblitz, ConstantContact, SendinBlue, ActiveCampaign, SalesForce, CampaignMonitor y MailPoet. Seleccione el proveedor de la lista y continúe con las opciones siguientes.
  • Lista de [Proveedor del servicio] – De acuerdo con el proveedor que haya seleccionado, podrá seleccionar la lista correspondiente del menú desplegable. Si no ve ninguna lista, haga clic en el botón Añadir.
  • Título del Feed – Si seleccionó FeedBurner como proveedor, aparecerá esta opción. Así es como identificará su cuenta de FeedBurner. Deberá escribir el título de su Feed, el cual podrá encontrar aquí.
Campos
  • Usar campo único “Nombre” – Seleccione si se debe incluir o no un campo único Nombre en el formulario de suscripción.
  • Mostrar campo “Nombre” – Seleccione si se debe incluir o no el campo Nombre en el formulario de suscripción.
  • Mostrar campo “Apellido – Seleccione si se debe incluir o no el campo Apellido en el formulario de suscripción.
  • Usar campos personalizados – Active esta opción para usar campos personalizados en el formulario de suscripción (más información).
Acción de éxito
  • Acción – Elija qué sucede cuando un visitante del sitio se ha suscrito con éxito a su lista: Mostrar un mensaje o Redirigir a una URL personalizada.
  • Mensaje – Si seleccionó mostrar un mensaje, escriba el mensaje que se mostrará a los visitantes del sitio que se suscriban a su lista.
  • URL de redirección – Si seleccionó redirigir a una URL personalizada, los visitantes del sitio que se suscriban a su lista serán redirigidos a la URL que introduzca aquí.
  • Consulta de URL de redirección – Elija qué datos (si los hubiere) incluir en la URL de redirección como argumentos de consulta.
Enlace
  • URL del enlace del botón – Escriba una URL válida en este campo para especificar la página de destino del botón.
  • Destino del enlace del botón – Elija si el enlace se abre en la misma ventana o no.
Fondo
  • Fondo – Aquí puede definir un fondo para el módulo. Las opciones son las mismas que para los demás fondos: color, degradado, imagen y vídeo.
  • Usar color de fondo – Esta opción está activada de manera predeterminada. Seleccione No para desactivar el color de fondo.
Etiqueta de administración
  • Etiqueta de administración – De manera predeterminada, este módulo aparecerá con el nombre Suscripción en el constructor. La etiqueta de administración le permite cambiar el nombre para identificar el módulo más fácilmente. Cuando use la vista de estructura, estas etiquetas aparecerán dentro del bloque del módulo en la interfaz del constructor.

Opciones de diseño

Dentro de la pestaña Diseño encontrará todas las opciones de estilo del módulo, tales como color, estilo y tamaño. Esta es la pestaña que usará para cambiar la apariencia del módulo. Cada módulo de Divi tiene una larga lista de ajustes de diseño con los cuales podrá modificar casi todo.

Diseño
  • Diseño – Elija dónde desea que aparezcan los campos de entrada en relación con el texto del cuerpo y el texto del título: Cuerpo a la izquierda, formulario a la derecha, Cuerpo a la derecha, formulario a la izquierda, Cuerpo arriba, formulario abajo o Cuerpo abajo, formulario arriba.
  • Nombre de ancho completo – Al activar esta opción se ampliará el ancho del campo del nombre al 100% del ancho del módulo.
  • Apellido de ancho completo – Al activar esta opción se ampliará el ancho del campo del apellido al 100% del ancho del módulo.
  • Correo electrónico de ancho completo – Al activar esta opción se ampliará el ancho del campo del correo electrónico al 100% del ancho del módulo.
Campos
  • Color de fondo de Campos – El formulario de inicio de sesión contiene dos campos de entrada de texto, para el nombre de usuario y la contraseña. Puede usar esta opción para asignar un color de fondo a esos campos.
  • Color de texto de Campos – Puede usar esta opción para asignar un color de texto a los campos. Si ha ajustado el color de fondo, puede que también quiera ajustar el color del texto para un mejor contraste.
  • Color de fondo al enfocar Campos – Cuando se lleva el cursor al campo para introducir texto, el color de fondo cambia para dejar en claro que ese campo está activo. Aquí puede definir un color de fondo para ese comportamiento.
  • Color de texto al enfocar Campos – Cuando se lleva el cursor al campo para introducir texto, el color de texto cambia para dejar en claro que ese campo está activo. Aquí puede definir un color de texto para ese comportamiento.
  • Margen de Campos – El margen es el espacio que se agrega fuera del campo, entre sus extremos y los elementos contiguos (arriba, abajo, a la izquierda o a la derecha).
  • Relleno de Campos – El relleno es el espacio que se agrega dentro del campo, entre sus extremos y el contenido. Puede añadir valores personalizados de relleno a cualquiera de los cuatro lados del campo.
  • Fuente de Campos – Puede cambiar la fuente del texto del módulo Buscar, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
  • Campos Peso de fuente – Esto controla el peso de la fuente del texto de entrada. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
  • Campos Estilo de fuente – Esto controla el estilo de la fuente del texto de entrada. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
  • Alineación del texto de Campos – Esto controla la alineación del texto dentro de este módulo: izquierda, derecha, centrada o justificada.
  • Tamaño de texto de Campos – Aquí puede ajustar el tamaño del texto de entrada. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
  • Espacio entre letras de Campos – El espacio entre letras es la separación entre cada uno de los caracteres del texto de entrada. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Altura de línea de Campos – La altura de línea afecta el espacio entre cada una de las líneas de texto de entrada. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Sombra de texto de Campos – Elija un estilo de sombra para activar en el texto de entrada. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
  • Campos Esquinas redondeadas – Aquí puede controlar el radio de la esquina de este módulo. Active el icono del enlace para controlar las cuatro esquinas a la vez, o desactívelo para definir un valor personalizado para cada una.
  • Campos Estilos del borde – Esta opción controla de manera individual la apariencia de los cuatro bordes: izquierdo, derecho, superior e inferior.
  • Campos Ancho del borde – De manera predeterminada, los bordes tienen un ancho de 0 (sin borde). Puede aumentar este valor arrastrando el selector de rango o escribirlo en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, vh, vw, etc.
  • Campos Color del borde – Esta opción afecta al color del borde. Elija un color personalizado del selector para aplicarlo.
  • Campos Estilo del borde – Los bordes incluyen ocho estilos diferentes: sólido, punteado, rayado, doble, surco, cresta, interior y exterior. Seleccione el estilo que desee del menú desplegable para aplicarlo.
  • Usar borde al enfocar – Si se activa esta opción, se añadirán bordes a los campos de entrada cuando están enfocados y se mostrarán las siguientes opciones.
  • Enfoque de campos Esquinas redondeadas – Aquí puede controlar el radio de la esquina de este módulo. Active el icono del enlace para controlar las cuatro esquinas a la vez, o desactívelo para definir un valor personalizado para cada una.
  • Enfoque de campos Estilos del borde – Esta opción controla de manera individual la apariencia de los cuatro bordes: izquierdo, derecho, superior e inferior.
  • Enfoque de campos Ancho del borde – De manera predeterminada, los bordes tienen un ancho de 0 (sin borde). Puede aumentar este valor arrastrando el selector de rango o escribirlo en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, vh, vw, etc.
  • Enfoque de campos Color del borde – Esta opción afecta al color del borde. Elija un color personalizado del selector para aplicarlo.
  • Enfoque de campos Estilo del borde – Los bordes incluyen ocho estilos diferentes: sólido, punteado, rayado, doble, surco, cresta, interior y exterior. Seleccione el estilo que desee del menú desplegable para aplicarlo.
  • Sombra de Campos – Elija un estilo de sombra para activar en el campo. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
Texto
  • Alineación del texto – Esto controla la alineación del texto dentro de este módulo: izquierda, derecha, centrada o justificada.
  • Sombra de texto – Elija un estilo de sombra de texto para activar en este elemento. Una vez activado, podrá personalizar aún más el estilo de la sombra del texto. Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
  • Posición horizontal de sombra de texto – La distancia horizontal de la sombra respecto del texto. Un valor negativo colocará la sombra a la izquierda del texto.
  • Posición vertical de sombra de texto – La distancia vertical de la sombra respecto del texto. Un valor negativo colocará la sombra arriba del texto.
  • Fuerza de desenfoque de sombra de texto – Cuanto mayor sea el valor, mayor será el desenfoque; la sombra se hace más amplia y clara.
  • Color de sombra de texto – Elija el color de la sombra del selector.
Título Texto
  • Nivel de encabezado Título – Seleccione aquí la etiqueta HTML de encabezado que se usará para este elemento.
  • Fuente de Título – Puede cambiar la fuente del texto del módulo Carrusel, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
  • Título Peso de fuente – Esto controla el peso de la fuente del texto del título. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
  • Título Estilo de fuente – Esto controla el estilo de la fuente del texto del título. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
  • Alineación del texto de Título – Esto controla la alineación del texto del título: izquierda, derecha, centrada o justificada.
  • Color de texto de Título – Si desea cambiar el color de texto del título, elija el color del selector en esta opción.
  • Tamaño de texto de Título – Aquí puede ajustar el tamaño del texto del título. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
  • Espacio entre letras de Título – El espacio entre letras es la separación entre cada uno de los caracteres del texto del título. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Altura de línea de Título – La altura de línea afecta el espacio entre cada una de las líneas de texto del título. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Sombra de texto de Título – Elija un estilo de sombra para activar en el texto del título. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
Contenido Texto
  • Fuente de Contenido – Puede cambiar la fuente del texto del contenido, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
  • Contenido Peso de fuente – Esto controla el peso de la fuente del texto del contenido. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
  • Contenido Estilo de fuente – Esto controla el estilo de la fuente del texto del contenido. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
  • Alineación del texto de Contenido – Esto controla la alineación del texto del contenido: izquierda, derecha, centrada o justificada.
  • Color de texto de Contenido – Si desea cambiar el color de texto del contenido, elija el color del selector en esta opción.
  • Tamaño de texto de Contenido – Aquí puede ajustar el tamaño del texto del contenido. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
  • Espacio entre letras de Contenido – El espacio entre letras es la separación entre cada uno de los caracteres del texto del contenido. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Altura de línea de Contenido – La altura de línea afecta el espacio entre cada una de las líneas de texto del contenido. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Sombra de texto de Contenido – Elija un estilo de sombra para activar en el texto del contenido. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
Mensaje de resultado Texto
  • Fuente de Mensaje de resultado – Puede cambiar la fuente del texto del mensaje de resultado, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
  • Mensaje de resultado Peso de fuente – Esto controla el peso de la fuente del texto del mensaje de resultado. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
  • Mensaje de resultado Estilo de fuente – Esto controla el estilo de la fuente del texto del mensaje de resultado. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
  • Alineación del texto de Mensaje de resultado – Esto controla la alineación del texto del mensaje de resultado: izquierda, derecha, centrada o justificada.
  • Color de texto de Mensaje de resultado – Si desea cambiar el color de texto del mensaje de resultado, elija el color del selector en esta opción.
  • Tamaño de texto de Mensaje de resultado – Aquí puede ajustar el tamaño del texto del mensaje de resultado. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
  • Espacio entre letras de Mensaje de resultado – El espacio entre letras es la separación entre cada uno de los caracteres del texto del mensaje de resultado. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Altura de línea de Mensaje de resultado – La altura de línea afecta el espacio entre cada una de las líneas de texto del mensaje de resultado. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Sombra de texto de Mensaje de resultado – Elija un estilo de sombra para activar en el texto del mensaje de resultado. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
Botón
  • Usar estilos personalizados para Botón – Si activa esta opción aparecerán varios ajustes de personalización para el botón Responder, que le permitirán cambiar la apariencia.
  • Tamaño de texto de Botón – Puede usar este ajuste para aumentar o disminuir el tamaño del texto dentro del botón, el cual se escalará de acuerdo con ese tamaño.
  • Color de texto de Botón – De manera predeterminada, los botones tomarán el color de acento definido en el personalizador de tema. Con esta opción podrá asignar un color de texto personalizado. Elija un color del selector para aplicarlo.
  • Color de fondo de Botón – De manera predeterminada, los botones tienen un color de fondo transparente. Puede elegir el color que desee del selector.
  • Ancho del borde de Botón – Todos los botones de Divi tienen un ancho de borde predeterminado de 2 píxeles. Puede aumentar o disminuir ese tamaño con este ajuste. También puede eliminar el borde, asignando un valor 0.
  • Color del borde de Botón – De manera predeterminada, los bordes tomarán el color de acento definido en el personalizador de tema. Con esta opción podrá asignar un color de borde personalizado. Elija un color del selector para aplicarlo.
  • Radio del borde de Botón – El radio de borde tiene efecto sobre el redondeado de las esquinas del botón. De manera predeterminada, los botones de Divi tiene un radio de 3 píxeles. Puede aumentar o disminuir ese tamaño con este ajuste, usar 0 para que las esquinas sean cuadradas o un valor muy alto para que sean circulares.
  • Espacio entre letras de Botón – El espacio entre letras es la separación entre cada uno de los caracteres del texto del botón. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Fuente de Botón – Puede cambiar la fuente del texto del botón, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
  • Peso de fuente – Esto controla el peso de la fuente del texto del botón. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
  • Estilo de fuente – Esto controla el estilo de la fuente del texto del botón. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
  • Mostrar icono de Botón – Si desactiva este ajuste, no se mostrará ningún icono en el botón. De manera predeterminada, todos los botones de Divi muestran una flecha al posar el puntero del ratón.
  • Icono de Botón – Si está activado el icono, puede usar este ajuste para elegir uno de la lista de iconos de Divi.
  • Color de icono de Botón – De manera predeterminada, el color del icono es el mismo que el del texto, pero con este ajuste puede cambiarlo independientemente.
  • Ubicación de icono de Botón – Puede elegir mostrar el icono del lado derecho o izquierdo.
  • Solo mostrar icono al pasar el cursor en el Botón – De manera predeterminada, los iconos de los botones solo se muestran al posar el puntero. Si desea que el icono se muestre siempre, desactive este ajuste.
  • Alineación del botón – Aquí puede elegir la posición del botón: alineado a la izquierda, al centro o a la derecha.
  • Sombra de texto de Botón – Elija un estilo de sombra para activar en el texto del botón. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
  • Margen de Botón – El margen añade espacio adicional al exterior del elemento, aumentando la distancia entre el elemento y otros elementos de la página.
  • Relleno de Botón – El relleno añade espacio adicional al interior del elemento, aumentando la distancia entre el contorno del elemento y su contenido interno.
  • Sombra de botón – Use estos ajustes para añadir una sombra en el botón. Podrá controlar la posición axial y la fuerza de la sombra asignando valores en píxeles; cambiar el color con el selector, y la posición respecto del borde (interior o exterior).
Tamaño
  • Ancho – De manera predeterminada, los elementos se ampliarán al ancho completo de su elemento contenedor. Si desea establecer un ancho estático personalizado, puede hacerlo con esta opción.
  • Ancho máximo – Si se establece un ancho máximo, se evitará que el elemento sobrepase el valor de ancho definido. El ancho máximo se puede usar en combinación con el ajuste estándar de ancho. El ancho máximo reemplaza el valor de ancho normal.
  • Alineación del módulo – Aquí puede elegir la posición del módulo en caso de que haya modificado el ancho en el ajuste anterior: alineado a la izquierda, al centro o a la derecha.
  • Altura mínima – Cuando se establece una altura mínima, el elemento siempre tendrá una altura de al menos la cantidad definida. Esto reemplaza los valores de altura estática más pequeños. A diferencia de la altura, la altura mínima no da como resultado un desbordamiento de contenido y permitirá que la altura del elemento permanezca dinámica.
  • Altura – Esto establece un valor de altura estática para el elemento. Una vez establecida, la altura del elemento ya no será determinada por su contenido interno. El contenido que supere la altura estática del elemento desbordará el contenedor del elemento.
  • Altura máxima – Si se establece una altura máxima, se evitará que el elemento sobrepase el valor de altura definido. A medida que el contenido del módulo aumenta y supera la altura máxima, desbordará el contenedor del elemento.
Espaciado
  • Margen – El margen es el espacio que se agrega fuera del módulo, entre sus extremos y los elementos contiguos (arriba, abajo, a la izquierda o a la derecha). Puede añadir valores personalizados de margen a cualquiera de los cuatro lados del módulo. Para eliminar el margen personalizado, borre el valor agregado del campo de entrada. De manera predeterminada, estos valores se miden en píxeles, pero puede usar unidades de medida personalizadas.
  • Relleno – El relleno es el espacio que se agrega dentro del módulo, entre sus extremos y los elementos internos. Puede añadir valores personalizados de relleno a cualquiera de los cuatro lados del módulo. Para eliminar el relleno personalizado, borre el valor agregado del campo de entrada. De manera predeterminada, estos valores se miden en píxeles, pero puede usar unidades de medida personalizadas.
Borde
  • Esquinas redondeadas – Aquí puede controlar el radio de la esquina de este módulo. Active el icono del enlace para controlar las cuatro esquinas a la vez, o desactívelo para definir un valor personalizado para cada una.
  • Estilos del borde – Esta opción controla de manera individual la apariencia de los cuatro bordes: izquierdo, derecho, superior e inferior.
  • Ancho del borde – De manera predeterminada, los bordes tienen un ancho de 0 (sin borde). Puede aumentar este valor arrastrando el selector de rango o escribirlo en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, vh, vw, etc.
  • Color del borde – Esta opción afecta al color del borde. Elija un color personalizado del selector para aplicarlo.
  • Estilo del borde – Los bordes incluyen ocho estilos diferentes: sólido, punteado, rayado, doble, surco, cresta, interior y exterior. Seleccione el estilo que desee del menú desplegable para aplicarlo.
Sombra
  • Sombra – Use estos ajustes para añadir una sombra en el módulo. Podrá controlar la posición axial y la fuerza de la sombra asignando valores en píxeles; cambiar el color con el selector, y la posición respecto del borde (interior o exterior).
Filtros
  • Filtros – Seleccione aquí el tipo de filtro para aplicar al módulo: podrá controlar valores de Tonalidad, Saturación, Brillo, Contraste, Invertir, Sepia, Opacidad y Desenfoque. También podrá definir el modo de mezcla con la imagen o color de fondo que haya elegido para este módulo, con las siguientes opciones: Normal, Multiplicar, Pantalla, Superposición, Oscurecer, Aclarar, Sobreexposición de color, Subexposición de color, Luz fuerte, Luz suave, Diferencia, Exclusión, Tonalidad, Saturación, Color y Luminosidad.
Transformación
  • Transformación – Con estos controles puede realizar ajustes visuales mediante una combinación de configuraciones de escala, traslación, rotación, sesgo y origen. Esto le permite crear efectos de diseño avanzados sin necesidad de un programa de diseño gráfico independiente.
Animación
  • Estilo de la animación – Elija un estilo de animación para activar las animaciones en este elemento. Las opciones son: Desvanecer, Diapositiva, Rebotar, Zoom, Voltear, Plegar o Rodar. Una vez activado, podrá personalizar aún más el estilo de animación. Para desactivar las animaciones, elija la opción Ninguna.
  • Repetición de la animación – De manera predeterminada, las animaciones solo se ejecutarán una vez. Si desea que la animación se repita continuamente puede elegir aquí la opción Repetir.
  • Dirección de la animación – Esta opción está disponible para todos los estilos de animación, excepto Desvanecer. Elija una de las cinco direcciones de animación diferentes, cada una de las cuales ajustará la posición inicial y final del elemento animado: Centrada, Derecha, Izquierda, Arriba, Abajo.
  • Duración de la animación – Aumente o disminuya la velocidad mediante el ajuste de duración de la animación. Las unidades son en milisegundos y la duración predeterminada de la animación es de un segundo.
  • Retardo de la animación – Si desea añadir un retardo antes de ejecutar la animación puede designar aquí ese retraso en milisegundos. Esto puede ser útil si usa varios módulos animados juntos.
  • Intensidad de la animación – Esta opción está disponible para todos los estilos de animación, excepto Desvanecer y Rebotar. La intensidad afecta la suavidad o fuerza de la animación. Si baja la intensidad, la animación será más suave y sutil. Si la aumenta, la animación será más agresiva y ágil.
  • Opacidad inicial de la animación – Si aumenta la opacidad inicial, puede reducir o eliminar el efecto de desvanecido que es aplicado a todos los estilos de animación.
  • Curva de velocidad de la animación – Aquí puede ajustar el método de atenuación de la animación. Las opciones son: Atenuación de entrada y salida, Atenuación, Atenuación de entrada y Atenuación de salida. Atenuar la entrada o salida de la animación creará un efecto más suave en comparación con una curva de velocidad lineal.

Opciones avanzadas

Dentro de la pestaña Avanzado encontrará opciones que podrían ser útiles para diseñadores web más experimentados, tales como los atributos CSS y HTML. Aquí puede aplicar código CSS personalizado al módulo, y también puede aplicar clases CSS e ID personalizadas, las cuales pueden ser usadas para personalizar el módulo dentro de la hoja de estilos del tema hijo.

Privacidad
  • Incluir dirección IP  – Esta opción permite incluir la dirección IP del suscriptor en los datos enviados a su proveedor de correo electrónico.
Clases & ID CSS
  • ID CSS – Escriba una ID CSS opcional para usar en este módulo. Puede usar una ID para aplicarle estilos o usarla como anclaje de enlace.
  • Clase CSS – Escriba una o varias clases CSS opcionales para usar en este módulo. Una clase CSS puede ser usada para aplicar estilos.
CSS personalizado

Introduzca en los campos disponibles los códigos CSS personalizados para aplicar en el módulo.

Atributos
  • Relación del botón – Especifique el valor del atributo rel del enlace. El atributo rel especifica la relación entre el documento actual y el documento vinculado.
Visibilidad
  • Desactivar en – Esta opción le permite controlar en qué dispositivos aparecerá el módulo. Puede elegir desactivarlo de manera individual en tablets, teléfonos móviles o en equipos de escritorio. Esto es especialmente útil si desea usar módulos distintos para cada dispositivo, o si desea simplificar el diseño para móviles al eliminar ciertos módulos de la página.
  • Desbordamiento horizontal – Aquí puede controlar el desbordamiento de elementos en el eje X. Si se establece en Desplazar, el contenido que desborda los anchos o alturas estáticos activará una barra de desplazamiento del navegador. Si se establece en Oculto, se recortará el desbordamiento de contenido
  • Desbordamiento vertical – Aquí puede controlar el desbordamiento de elementos en el eje Y. Si se establece en Desplazar, el contenido que desborda los anchos o alturas estáticos activará una barra de desplazamiento del navegador. Si se establece en Oculto, se recortará el desbordamiento de contenido.
  • z-index – Aquí puede controlar la posición del elemento en el eje Z. Los elementos con valores de índice z más altos se colocarán encima de los elementos con valores de índice z inferiores.
Transiciones
  • Duración de la transición – Esto controla la duración de la transición de la animación al pasar el cursor.
  • Retardo de transición – Esto controla el retardo de la transición de la animación al pasar el cursor.
  • Curva de velocidad de transición – Esto controla la curva de velocidad de transición de la animación al pasar el cursor.

Añadir campos personalizados al módulo de suscripción

El módulo de suscripción de Divi es compatible con varios proveedores de correo electrónico. Dentro de cada uno, podrá crear campos de datos personalizados que almacenarán diferentes porciones de información sobre sus suscriptores. Estos datos pueden ser usados para segmentar las listas de correo o crear respuestas automáticas. De manera predeterminada, todos los proveedores  incluyen los campos Nombre y Correo electrónico. Si desea recolectar información adicional, tendrá que configurar nuevos campos personalizados.

Una vez creada una nueva columna de información para su lista dentro del proveedor de correo, podrá añadir un campo personalizado al formulario de suscripción. Cuando un visitante complete ese campo, los datos que haya introducido se guardarán en el perfil del usuario de su lista, dentro del sistema del proveedor.

Añadir campos personalizados en su proveedor de correo

Cada proveedor funciona distinto. Antes de que pueda añadir campos personalizados al módulo, deberá iniciar sesión en su cuenta del proveedor de correo y crear esos campos que desee usar. Por favor, use las instrucciones correspondientes a su proveedor para aprender a crear campos personalizados. Luego de eso, vea las instrucciones para añadirlos en el módulo de Divi Suscripción.

ActiveCampaign

ActiveCampaign tiene un tutorial sobre cómo añadir campos personalizados en su cuenta. Puede visitarlo aquí (en inglés). Una vez que haya creado los campos personalizados en el sistema, se mostrarán automáticamente en Divi y en Bloom cuando añada campos personalizados. Para más información, proceda al segundo paso.

AWeber

AWeber tiene un tutorial sobre cómo añadir campos personalizados en su cuenta. Puede visitarlo aquí (en inglés). Una vez que haya creado los campos personalizados en el sistema, se mostrarán automáticamente en Divi y en Bloom cuando añada campos personalizados. Para más información, proceda al segundo paso.

CampaignMonitor

CampaignMonitor tiene un tutorial sobre cómo añadir campos personalizados en su cuenta. Puede visitarlo aquí (en inglés). Una vez que haya creado los campos personalizados en el sistema, se mostrarán automáticamente en Divi y en Bloom cuando añada campos personalizados. Para más información, proceda al segundo paso.

ConstantContact

Por desgracia, ConstantContact no tiene soporte para campos personalizados. Si necesita usarlos en su lista, le sugerimos que use un proveedor diferente que incluya esa característica.

Convertkit

Convertkit tiene un tutorial sobre cómo añadir campos personalizados en su cuenta. Puede visitarlo aquí (en inglés). Una vez que haya creado los campos personalizados en el sistema, se mostrarán automáticamente en Divi y en Bloom cuando añada campos personalizados. Para más información, proceda al segundo paso.

Emma

Emma tiene un tutorial sobre cómo añadir campos personalizados en su cuenta. Puede visitarlo aquí (en inglés). Una vez que haya creado los campos personalizados en el sistema, se mostrarán automáticamente en Divi y en Bloom cuando añada campos personalizados. Para más información, proceda al segundo paso.

Feedblitz

Feedblitz no requiere que añada campos personalizados dentro de su plataforma. Una vez que recibe datos de un campo personalizado que haya añadido al módulo de suscripción, se guardarán automáticamente dentro del sistema. Vea estas instrucciones para aprender a añadir campos personalizados en el módulo de suscripción.

GetResponse

GetResponse tiene un tutorial sobre cómo añadir campos personalizados en su cuenta. Puede visitarlo aquí (en inglés). Una vez que haya creado los campos personalizados en el sistema, se mostrarán automáticamente en Divi y en Bloom cuando añada campos personalizados. Para más información, proceda al segundo paso.

HubSpot

HubSpot tiene un tutorial sobre cómo añadir campos personalizados en su cuenta. Puede visitarlo aquí (en inglés). Una vez que haya creado los campos personalizados en el sistema, se mostrarán automáticamente en Divi y en Bloom cuando añada campos personalizados. Para más información, proceda al segundo paso.

iContact

iContact tiene un tutorial sobre cómo añadir campos personalizados en su cuenta. Puede visitarlo aquí (en inglés). Una vez que haya creado los campos personalizados en el sistema, se mostrarán automáticamente en Divi y en Bloom cuando añada campos personalizados. Para más información, proceda al segundo paso.

Infusionsoft

Infusionsoft tiene un tutorial sobre cómo añadir campos personalizados en su cuenta. Puede visitarlo aquí (en inglés). Una vez que haya creado los campos personalizados en el sistema, se mostrarán automáticamente en Divi y en Bloom cuando añada campos personalizados. Para más información, proceda al segundo paso.

MadMimi

MadMimi tiene un tutorial sobre cómo añadir campos personalizados en su cuenta. Puede visitarlo aquí.

MadMimi no requiere que añada campos personalizados dentro de su plataforma. Una vez que recibe datos de un campo personalizado que haya añadido al módulo de suscripción, se guardarán automáticamente dentro del sistema. Vea estas instrucciones para aprender a añadir campos personalizados en el módulo de suscripción.

MailChimp

MailChimp tiene un tutorial sobre cómo añadir campos personalizados en su cuenta. Puede visitarlo aquí (en inglés). Una vez que haya creado los campos personalizados en el sistema, se mostrarán automáticamente en Divi y en Bloom cuando añada campos personalizados. Para más información, proceda al segundo paso.

MailerLite

MailerLite tiene un tutorial sobre cómo añadir campos personalizados en su cuenta. Puede visitarlo aquí (en inglés). Una vez que haya creado los campos personalizados en el sistema, se mostrarán automáticamente en Divi y en Bloom cuando añada campos personalizados. Para más información, proceda al segundo paso.

MailPoet

MailPoet tiene un tutorial sobre cómo añadir campos personalizados en su cuenta. Puede visitarlo aquí (en inglés). Una vez que haya creado los campos personalizados en el sistema, se mostrarán automáticamente en Divi y en Bloom cuando añada campos personalizados. Para más información, proceda al segundo paso.

Mailster

Mailster tiene un tutorial sobre cómo añadir campos personalizados en su cuenta. Puede visitarlo aquí.

Mailster no requiere que añada campos personalizados dentro de su plataforma. Una vez que recibe datos de un campo personalizado que haya añadido al módulo de suscripción, se guardarán automáticamente dentro del sistema. Vea estas instrucciones para aprender a añadir campos personalizados en el módulo de suscripción.

Ontraport

Ontraport tiene un tutorial sobre cómo añadir campos personalizados en su cuenta. Puede visitarlo aquí (en inglés). Una vez que haya creado los campos personalizados en el sistema, se mostrarán automáticamente en Divi y en Bloom cuando añada campos personalizados. Para más información, proceda al segundo paso.

SalesForce

SalesForce tiene un tutorial sobre cómo añadir campos personalizados en su cuenta. Puede visitarlo aquí (en inglés). Una vez que haya creado los campos personalizados en el sistema, se mostrarán automáticamente en Divi y en Bloom cuando añada campos personalizados. Para más información, proceda al segundo paso.

SendinBlue

SendinBlue tiene un tutorial sobre cómo añadir campos personalizados en su cuenta. Puede visitarlo aquí. Una vez que haya creado los campos personalizados en el sistema, se mostrarán automáticamente en Divi y en Bloom cuando añada campos personalizados. Para más información, proceda al segundo paso.

Añadir campos personalizados predefinidos al módulo de suscripción

La mayoría de los proveedores de correos enviarán a Divi todos los datos de campos personalizados, y el módulo de suscripción se llenará con una lista de esos campos disponibles. Una vez añadidos los campos personalizados como se describió al principio, estarán disponibles en la opción Contenido > Campos > Usar campos personalizados.

Divi - Usar campos personalizados

Para añadir un nuevo campo personalizado, haga clic en el botón + y luego elija el campo deseado del menú desplegable en Contenido > Campo > Field (Campo).

Divi - Agregar campo personalizado

Añadir campos personalizados manualmente

Algunos proveedores de correo no envían a Divi los datos de los campos personalizados. Para estos proveedores, deberá configurar los campos manualmente. Estos proveedores son: AWeber, Mailster y MadMimi.

Si usa alguno de estos proveedores, tendrá la posibilidad de seleccionar manualmente el tipo de campo y crear los elementos necesarios luego de activar los campos personalizados.

Divi - Agregar campo personalizado manualmente

Divi - Opciones de campo personalizado manual

Añadir enlaces a las casillas de selección/botones radio

Un uso común para los campos personalizados del tipo casilla de selección o botón radio, es registrar el consentimiento para el manejo de datos de acuerdo con ciertas regulaciones, tales como el RGPD (Reglamento General de Protección de Datos). En estos casos, puede que quiera incluir un enlace a su política de privacidad o términos del servicio desde un texto con una casilla de selección. Para añadir un enlace a un determinado elemento del campo, haga clic en el icono del enlace y añada la URL y el texto del enlace en los espacios correspondientes.

Divi - Campo personalizado insertar enlace

Ver demostración en vivo del módulo

Share on facebook
Facebook
Share on whatsapp
WhatsApp
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pocket
Pocket
Share on reddit
Reddit
Share on email
Enviar por correo
Share on print
Imprimir

10 comentarios en “El módulo Suscripción”

  1. Hola!

    Antes de nada agradecerte toda la información acerca del módulo, pues resulta muy útil y fácil de entender.

    Tengo un problema con este módulo, desde divi…

    Lo tengo conectado con MailChimp a una lista y va todo muy bien, y luego lo tengo redireccionado para que cuando alguien se suscriba, vaya a otra página de mi web.

    El problema está en que desde el ordenador la persona que se suscribe si se redirecciona a la web marcada, pero desde el móvil, no ocurre nada…

    Puedes intuir sobre esta el error? Porque ya he probado de mil formas y nada..

    Gracias!!!

    (*) Lo tengo puesto en la configuración para que sea visible en móvil también, de hecho en el móvil, el módulo de suscripción de ve, pero no redirecciona…

  2. Hola!

    Estoy intentando regalar un dossier cuando se subscriben a la newsletter pero el apartado Enlace URL hace que cuando clicken en los campos se les descargue, antes de darle al botón de subscribirse, alguna solución?

    1. Hola, Araceli.

      Creo que estás usando la opción URL del enlace del módulo, y esto solo sirve para hacer del módulo entero un enlace. Tendrías que usar la opción Redirigir a una URL personalizada en el panel Acción de éxito.

      Saludos.

  3. Hola, estoy empezando a construir con Diví y ando un poco perdida con una cuestión que no veo como solucionar. Quiero crear un lead magnet pero no sé donde se almacena el recurso que regalo para que con la subscripción te llegue el regalo, en este caso es un ebok.
    Por más que busco, no encuentro, si alguien me puede ayudar estaría agradecida.

  4. Hola he construido un modulo de suscripción y cuando alguien pone su correo electrónico en el Newsletter le sale un mensaje que dice: Error de suscripción: An error ocurred, please try later.
    ¿Como puedo arreglar eso?

    1. Hola, Victoria.

      Gracias por tu comentario.

      Comprobá que las claves API del servicio que uses estén configuradas correctamente, y el formulario conectado con la lista que hayas creado en ese servicio.

      Saludos.

  5. Hola buenas noches,
    Estoy tratando de integrarlo con sendinblue que es mi proveedor de email mkt. Me pueden indicar como lo hago? Tengo mi landing creada con Divi.
    Saludos

    1. Hola, Raúl.

      Gracias por tu comentario y disculpas por la demora.

      En tu cuenta de SendInBlue tenés que generar una clave API (en la sección API & Integration) y crear una lista donde irán los contactos. En la pestaña Cuenta de correo electrónico deberás pegar esos datos para conectar con el servicio.

      Saludos.

Deja un comentario

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

 

Ir arriba