Tutorial Divi: Cómo personalizar el Email Optin

Nadie puede poner en duda de que Divi es un theme que atrae desde el minuto 1 a los clientes. Se sienten interesados en poder tener una web que para ellos resulte manejable, pudiendo cambiar lo que necesiten de forma rápida y fácil cuando ellos quieran y sin tener que depender de nadie.

El otro día, trabajando con un cliente que quería usar este theme, surgió una pregunta y propuesta a la vez: quería tener un formulario de suscripción de los que se llevan ahora, en el que todos los campos se sitúan en una misma franja horizontal. Seguro que ya has visto algo parecido a esto:

Captación de leads mediante formulario

Este tipo de formulario que se utiliza para captar leads, en Divi se inserta desde Divi Builder mediante el módulo llamado “Email Optin” (o Correo Electrónico Optin, si lo tienes en español).

El módulo Email Optin de Divi

Si haces uso de ese módulo, lo que vas a lograr es un formulario que distribuye los campos y el botón verticalmente, tal que así:

El Email Optin que crea Divi por defecto

Te darás cuenta de que lo único que puedes cambiar desde el módulo es el texto del botón (que aquí dice Suscribirse), además de los colores. Y por supuesto, los campos de Nombre, Apellido y Dirección de correo electrónico son intocables. No podrás decidir si quieres prescindir de uno, o modificar el texto que en ellos aparece desde el panel.

Un poco coñazo, ¿no?

Ahora, si te parece, vamos a ver un caso concreto: cómo prescindir del campo “Apellido” y alinearlo en una franja horizontal.

Cómo eliminar el campo “Apellido” del Optin Email de Divi

En realidad no lo eliminaremos, sino que lo ocultaremos mediante código CSS.

Dicho código puedes introducirlo directamente desde Divi en Opciones del Tema > En General, abajo del todo, en la casilla de Css personalizado.

Añadir CSS personalizado en Divi

Mi recomendación es que utilices siempre un child theme para este tipo de cambios. Hagas lo que hagas, el código a utilizar es el siguiente:

Este código lo que hace es ocultar el segundo campo del formulario. En el ejemplo se correspondería con el campo de Apellido. Imagínate que quisieras ocultar el primer campo (Nombre), el código sería así:

Cómo cambiar “Dirección de correo electrónico” por E-mail

Cambiar el texto del Optin Email de Divi
Si lo que quieres es que en lugar de Dirección de correo electrónico aparezca E-mail o cualquier otra cosa, tendrás que copiar y pegar esta función en tu functions.php (lo recomendable es que lo hagas en el archivo de tu child theme):

Cómo poner el Email Optin de Divi en una franja horizontal

Email Optin de Divi con ancho completo
De nuevo recurriremos al código CSS para efectuar los cambios. Inserta este código (de nuevo, desde Divi o en un childtheme):

En este caso, únicamente queríamos modificar el aspecto del Optin en la home. Dicha home tenía por nombre home-3, por eso puedes ver que todas las líneas empiezan utilizando esa clase. Si quieres saber qué clase debes utilizar para una página en concreto, bastará con que abras el Inspector de Elementos y te fijes en la primera clase que aparece tras la etiqueta body:

Ver la clase de una página en Divi

En este ejemplo la primera clase que tiene body es home, por lo que utilizaríamos .home en lugar de .home-3 en el código expuesto.

 

💡 [Extra] Cómo hacer que el formulario ocupe todo el ancho de la web

El código anterior está pensado para cuando utilizamos este formulario en una sección dividida en 2 columnas.

¿Y si lo ponemos justo debajo de una imagen o un bloque de color, a ancho completo? Algo así:

Email Optin de Divi a ancho completo

Para empezar, tendremos que crear una sección estándar que contenga una fila de única columna. A esta fila, en Ajustes Generales, le dejaremos marcada la opción de Hacer que esta fila tenga anchura completa. Insertamos el módulo del Correo electrónico email y lo configuramos.

En el código del anterior apartado tendremos que añadirle esta característica:  width: 100%;

Dentro de esta línea:  .home-3 .et_pb_newsletter_form p, .demo-subscribe-section .et_pb_newsletter_form p { AQUÍ }

Por lo que nos quedaría todo el código así:

Rizando el rizo: Cómo añadir un campo de formulario

Añadir un campo nuevo en el Email Optin de Divi
Está muy bien conseguir el nombre de tus suscriptores para enviarles newsletters, pero es posible que en función del proyecto que estés gestionando necesites otro tipo de información. ¿Qué ocurre si quieres saber de dónde son? ¿Cómo puedes añadir un campo en Divi?

Ahora mismo, esto no puede hacerse mediante el módulo Email Optin.

Tal vez en el futuro sea posible, pero actualmente la única posibilidad de hacer esto es copiando y pegando el código que nos facilitará nuestro proveedor de mensajería.

En nuestro caso, el cliente utilizaba MailChimp. Por lo que si también lo estás usando estos son los pasos a seguir.

1) Añadiendo el campo en MailChimp

En la página principal de MailChimp, una vez hayas ingresado con tu usuario y contraseña, dirígete a Lists. Suponiendo que ya tienes creada la lista en la que quieres guardar a los suscriptores que te lleguen a través del formulario que vamos a crear, en el lado derecho de la pantalla verás una flecha al lado de Stats. Tras presionar la flecha, pincha sobre Signup forms y luego sobre Select al lado del icono General forms.

Asegúrate de que en Forms and response emails tengas seleccionada la opción Signup form.

Ahora tienes que prestar especial atención en esta zona:

Añadir campo en Email Optin de Divi con MailChimp

Simplemente piensa qué tipo de campo vas a querer insertar (un campo de texto, una dirección, una fecha…) y añádelo seleccionando la opción que corresponda de la columna derecha. Por ejemplo, un campo de texto.

Tan pronto pulsas una opción entras automáticamente en Field settings para establecer la descripción del campo si lo deseas en Field label (aunque no lo utilizarás en este ejemplo), decidir si será un campo obligatorio, si estará oculto o visible, etc. Lo relevante aquí es que marques si es obligatorio o no y que estará visible.

🚦OJO: fíjate en que los campos sigan el orden que tú quieras. En la imagen puedes ver que el primer campo es el E-mail, y yo quiero que pase al final de todo. Desde esta misma pantalla puedes desplazarlos.

Cuando termines presiona sobre Save Field.

2) Copiando y pegando el código en nuestra web

Ahora vamos a conseguir el código que necesitamos insertar en nuestra web. Volvemos a List > (la flecha de al lado de Stats) > Signup Forms > Select al lado del icono Embedded forms.

Embedded form en MailChimp

Dentro de la pestaña Classic vamos a desmarcar las casillas de “Include form title” y “Show required field indicators”, y nos aseguraremos de que la opción “Disable all JavaScript” aparece desmarcada. Seleccionas todo el código que te brinda MailChimp en el lado derecho de la pantalla y lo copias.

Código de MailChimp para Divi

Fíjate en que este código:

  • Carga una hoja de estilos externa desde la CDN de MailChimp.
  • Inserta estilos CSS directamente.
  • Inserta código HTML para crear el formulario.
  • Carga un código jQuery externo para formar los mensajes de error.
  • Inserta directamente la traducción al español del código jQuery anterior.

Te digo esto para que sepas que este procedimiento tiene margen de optimización, y que insertarlo así directamente no es lo más ideal.

Ahora vete a la página de tu web en la que quieras insertar el formulario y pon el módulo de Código:

Módulo Código en Divi

Te toca pegar el código de MailChimp. El que me dio a mí era algo así:

🚦OJO: No copies y pegues el código anterior sin prestar atención a la URL de este trozo

. Sustituye //tuusuario.us11.list-manage.com/subscribe/post?u=f34786af337810bbda1812dac&id=1acdf2e46b por la que te haya dado a ti MailChimp.

Guarda los cambios y dale al módulo un color de fondo:

Cambia el color de fondo del módulo en Divi

 

Ahora mismo, tu formulario debe de tener este aspecto:

Formulario de MailChimp en Divi

3) Dando estilo al formulario de MailChimp en Divi

Yo voy a quitarle el color blanco del fondo, ocultar las etiquetas y utilizar en su lugar los placeholder, introducir el texto dentro de los campos (mediante value), ponerlos todos alineados horizontalmente y cambiarle el estilo del botón.

Si quieres tener más información sobre los ID y las clases que utiliza MailChimp para sus formularios, te recomiendo que veas este enlace en el que aparecen todos listados junto con una breve explicación.

Código retocado (recuerda sustituir la URL del formulario por la que a ti te corresponda):

 

Y no olvides que sin aplicar el CSS en tu childtheme no podrás verlo bien:

Así obtendrás algo parecido a esto:

Personalización del Email Optin de Divi

¿Quieres jugar con el código y aplicar diferentes estilos? Te lo he dejado en CodePen para que puedas trastear con él.

El método rápido (y más cutre): sustituyendo el texto de un campo por otro

Por defecto los campos del Email Optin son Nombre, Apellido y Correo electrónico. Si no necesitas o no quieres tener el apellido de tus suscriptores para nada, lo que podemos hacer es sustituir el texto que sale en el campo por la información que queramos. En este caso nos interesa que en lugar de Apellido diga Provincia.

Lo que hay que hacer es introducir este código en tu archivo de functions.php . Lo mejor es que lo hagas en el archivo de tu child theme, para no perder los cambios cuando aparezcan las actualizaciones:

Mediante esto lo que hacemos es reemplazar el texto que aparece en el campo et_pb_signup_lastname , que es el campo de Apellido.


Y hasta aquí los “trucos” que he traído. Espero que te ayuden lo suficiente y no te den muchos dolores de cabeza.

¿Crees que este código se puede mejorar y te gustaría aportar el tuyo? ¡No te cortes y comparte en los comentarios tu sabiduría! Estaré encantada de ver mejoras u otras formas de hacerlo.

Divi es un tema con el que se puede hacer prácticamente cualquier cosa. Pero hay ciertas modificaciones que requieren tener conocimientos sobre el funcionamiento de WordPress y los temas, además del código. Si crees que necesitas ayuda para poner tu web a punto no descartes la opción de contactar con algún profesional 😉

Valora este artículo para mejorar la calidad del blog ...

FlojitoNo está malEstá bienMe ha servidoFantástico (5 votos, promedio: 5,00 de 5)
Cargando…

Autor: Lúa Louro

Lúa Louro es diseñadora y desarrolladora frontend especializada en WordPress. Pulula por la red desde que le pusieron un ordenador entre las manos. Con formación en bellas artes y dirección de arte, actualmente colabora con los equipos de Blogger3cero y LifeStyle Al Cuadrado en tareas de diseño y mantenimiento web. Además ayuda con la traducción de temas y plugins en la comunidad de WordPress España.

Comparte esta entrada en
468 ad

LOS BURÓCRATAS DE LA UE ME EXIGEN QUE TE DIGA QUE SI VISITAS AYUDA WORDPRESS PUEDES RECIBIR ALGUNA COOKIE. AQUÍ NO HAY COOKIES DE PUBLICIDAD, COMO LAS QUE SI TE DEJAN GOOGLE, AMAZÓN Y MONTÓN DE SITIOS, SIN AVISAR, PERO EL QUE TE TENGO QUE AVISAR SOY YO. LAS COOKIES QUE TE DEJA AYUDA WORDPRESS SON PARA FACILITARTE LA NAVEGACIÓN, COMPARTIR Y COMENTAR. SI NO QUIERES RECIBIR COOKIES PUEDES NAVEGAR EN MODO PRIVADO, ABANDONAR ESTE SITIO Y PERDERTE EL CONTENIDO GRATIS QUE COMPARTO CADA DÍA SOBRE WORDPRESS O IRTE A UNA ISLA DESIERTA PARA VIVIR AISLADO DEL MUNDO, ESO SÍ, SIN COOKIES. O SINO, SIMPLEMENTE CIERRA ESTA VENTANA COÑAZO Y SIGUE DISFRUTANDO DEL BLOG. SI TIENES CURIOSIDAD SOBRE ESTO DE LAS COOKIES TE DEJO UN ENLACE >> MÁS INFORMACIÓN

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar