Cómo personalizar el Módulo de Email Optin de Divi a una sola línea

Inicio / Blog / Cómo personalizar el Módulo de Email Optin de Divi a una sola línea

Autor: Jefferson M

Publicación: 02 Feb, 2022

En este tutorial te mostraremos cómo puedes personalizar el módulo optin de Divi y hacerlo para que se vea con una sola línea, es decir, el campo de email a la izquierda y el botón de suscripción a la derecha. Veamos en este tutorial como lograrlo.

El módulo de optin de Divi es especialmente útil cuando queremos ofrecerle a usuario una manera simple de poder suscribirse, sobre todo, cuando solo necesitamos el correo electrónico del usuario para nuestra estrategia de email marketing.

A pesar de que anteriormente te hemos mostrado todas las opciones que da Bloom para recolectar emails, es cierto que a veces solo necesitamos la opción que nos da el módulo optin de Divi para empezar a recolectar nuestros correos electrónicos.

Mira el resultado que lograremos:

Cómo personalizar el Módulo de Email Optin de Divi a una sola línea

Crear módulo optin y dar estilos básicos.

Para comenzar, diseña un módulo de Email Optin como desees utilizando la configuración de diseño del mismo. Puedes diseñar los campos de entrada y el botón usando todas las configuraciones de diseño que te da Divi. Para este ejemplo, dejáremos solo el campo de email disponible y no colocaremos ningún texto en el módulo.

Cómo personalizar el Módulo de Email Optin de Divi a una sola línea
Cómo personalizar el Módulo de Email Optin de Divi a una sola línea

Esto nos permitirá personalizar el módulo optin de Divi a nuestra manera y dejarlo con un aspecto minimalista y simple.

Debes asegurarte de configurar el diseño en “Cuerpo en la parte superior, formulario en la parte inferior” para que esto funcione bien. Este es el último paso requerido, de esa manera, garantizaremos que el CSS personalizado que usaremos, funcione bien.

Personalizar el Módulo de Email Optin de Divi a una sola línea con CSS

Ahora que tenemos el módulo configurado, es hora de agregar el CSS que hará que el módulo se coloque a una sola línea. Puedes hacerlo en Divi > Opciones de tema > Código CSS personalizado, o directamente desde las opciones de la página que estás editando tal como mostramos en este tutorial. Copia y pega el siguiente CSS:

@media (min-width: 767px) {
	/*Ajustar ancho de campo menos ancho de boton*/
	.et_pb_newsletter_fields .et_pb_newsletter_field {
		flex-basis: calc(100% - 255px) !important;
	}
	/*Ajustar anchos de boton*/
	.et_pb_newsletter_fields .et_pb_newsletter_button_wrap {
		flex-basis: 240px !important;
	}
}

Notarás que están sucediendo un par de cosas aquí. En primer lugar, todo el fragmento de código esta dentro de una media querie. El propósito de eso es permitir que el módulo optin cambie a un diseño de una sola línea solo en pantallas de menos de 767 px, o lo que es lo mismo, solo para dispositivos de escritorio.

En segundo lugar, que tendremos los valores del ancho del campo de email en la primera parte del código, y los valores del botón del módulo en la segunda parte del código.

Estos son los valores que debes modificar en caso de que quieras estos campos más grandes o pequeños, al mismo tiempo que puedes jugar también con el tamaño de la fila que contiene el módulo optin para jugar que quede del tamaño que desees.

¡Y eso es todo! Con ello tendrás un módulo de email optin para Divi totalmente personalizado y ajustado a una sola línea.

Puedes descargar acá un layout de un módulo de suscripción con estilo lineal siendo premium:

Conclusiones

Poder alinear el módulo optin de Divi de forma horizontal puede ser muy útil si tu objetivo es poder crear una caja de suscripción minimalista y simple para los usuarios, y con este pequeño snippet puedes lograrlo de manera sencilla.

¿Te ha gustado el tutorial? Recuerda compartir acá abajo y dejar tus comentarios.

¡Un abrazo!

0 comentarios

Enviar un comentario

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

Iniciar Sesión

¿No tienes cuenta? Registrarse

Otros planes

¡Accede a más de 1330 contenidos especializados en Diseño Web con Divi por un solo precio!

Trimestral

Ahorra 6 USD 🔥

$US 18/ Mes

*Pagando US$ 54 cada 3 meses

¿A qué accedes con este plan?

Lifetime

Un solo pago 🔥

$US 499/ Lifetime

*UN SOLO PAGO DE POR VIDA

¿A qué accedes con este plan?

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord
  6. ✅ Descuentos en Templates para Divi

Solicitud de cancelación de suscripción

Aviso importe

🚩 Debes solicitar la cancelación de tu suscripción al menos 24 horas antes de tu renovación, de otro modo, no podremos procesar a tiempo la cancelación antes de tu renovación.

Al cancelar tu suscripción, perderás el acceso a todo esto:

🚩 A más de mil contenidos especializados en el aprendizaje del diseño web
🚩 El soporte personalizado en Divi
🚩 Acceso al grupo de Discord
🚩 Acceso a la descarga de las actualizaciones de los plugins, el contenido y las descargas de nuestro sitio.
🚩 Puntos y rangos obtenidos en la plataforma

✅ Te ofrecemos la opción de pausar tu suscripción 2 o 3 meses y así no perderás el progreso obtenido en la plataforma.

Lamentamos mucho 😩 que tu experiencia en nuestra plataforma no haya sido la mejor. Para poder procesar tu solicitud y hacerla efectiva, necesitaremos que por favor nos envíes lleno este formato. Esto nos ayudará a poder seguir mejorando nuestra propuesta de valor y siendo útil para todos los usuarios.

Solicitud de cancelación

¿Por cuál o cuáles razones deseas cancelar tu suscripción?

¿Qué características mejorarías en nuestra web?

¿Cuál es tu nivel de satisfacción en relación con la calidad del soporte que ofrecemos por diferentes medios? donde 1 es insatisfecho y 5 es satisfecho

¿En esta escala que tanto recomendarías a UXDIVI a un amigo o colega? donde 1 es "no lo recomendaría" y 5 es "Lo recomendaría totalmente"

5 + 8 =