En el tutorial de hoy, le mostraremos cómo eliminar los campos de nombre del módulo Divi Email Optin. Eliminar los campos de nombre no se trata solo de asegurarse de que el campo de nombre y apellido, que son estándar en el módulo de suscripción de correo electrónico, no aparezca visualmente. También se trata de la funcionalidad. De forma predeterminada, se requieren el nombre y la dirección de correo electrónico para una suscripción. Es por eso que hacer que los campos de nombre sean invisibles no ayudará al proceso.
Sin embargo, para ayudarlo a hacerlo, le mostraremos cómo deshacerse de los campos de nombre visualmente y hacer que funcione funcionalmente también.
Resultado
Si sigues este post paso a paso, obtendrás el siguiente resultado:
Por qué querría eliminar los campos de nombre del módulo de opción de correo electrónico
Probablemente hay algunas razones por las que desea eliminar los campos de nombre. Si no tienes idea de por qué; eche un vistazo a las dos razones que se enumeran a continuación.
Para ahorrarle tiempo a su visitante
La primera razón tiene en cuenta la experiencia del usuario. Al solicitar solo un campo de correo electrónico, sus visitantes tendrán la posibilidad de interactuar con usted rápidamente. Lo único que tendrán que hacer es escribir su dirección de correo electrónico y les estarás proporcionando el contenido que les interesa.
Para hacer la barrera más pequeña/Confiar en el comportamiento rápido
Si las personas completaran todos los módulos de optin que encuentran en la web, probablemente se quedarían sin tiempo. Los formularios optin son parte de todo tipo de sitios web hoy en día. Los días en que la gente estaba fascinada con ellos han terminado. Si ven que tienen que esforzarse demasiado (léase: tienen que completar demasiados campos obligatorios) para suscribirse, probablemente simplemente lo ignoren. Sin embargo, si solo solicita la dirección de correo electrónico, es más probable que estén de acuerdo con eso. Se tarda un máximo de 5 segundos en escribir una dirección de correo electrónico (que es menos de los 7 segundos de atención promedio que tienen los humanos).
Cómo eliminar los campos de nombre del módulo de opción de correo electrónico Divi
Suscríbete a nuestro canal de Youtube
Sin más demora, hagamos que esto funcione.
Agregar nueva página
Lo primero que deberá hacer es agregar una nueva página o abrir la página donde desea colocar el módulo de opción de correo electrónico solo con el campo de correo electrónico.
Agregar módulo de opción de correo electrónico
Una vez que esté en esa página, agregue el Módulo de suscripción de correo electrónico donde desee que quepa. Una vez que obtenga una vista previa de la página con el Módulo de suscripción de correo electrónico, verá que se verá así:
Si continúa y hace clic en el botón de suscripción, sin completar ningún campo, verá que no funcionará. De forma predeterminada, el módulo de opción de correo electrónico requiere un nombre y un valor de correo electrónico para que funcione. Es por eso que simplemente hacer que los campos desaparezcan (pero que aún existan) no funcionará. Eliminarlos tampoco funcionará.
Sin embargo, lo que puede hacer es agregar un valor predeterminado al campo de nombre. Podría usar algo como ‘*’, que solo se asegurará de que el campo tenga un valor. Otra cosa que tendremos que hacer es eliminar las etiquetas que están vinculadas a los campos de entrada. Para lograr todo esto, usaremos código jQuery y código CSS.
Agregar código CSS
Comenzaremos agregando el código CSS. El código CSS únicamente se asegurará de que los dos campos no se muestren en la página. Para la parte funcional, tendremos que usar algunas líneas de código jQuery.
Puede hacer que el código CSS se aplique a una página en particular o a todo el sitio web. El método que usará probablemente dependerá de la frecuencia con la que desee usar el módulo de código solo con el campo de correo electrónico. Si desea utilizar el Módulo de optimización de correo electrónico varias veces y en diferentes páginas, utilice el segundo método. Si desea que cuente solo para una página, use el primer método.
Agregar código CSS a una página en particular
Para agregar el código CSS a una página en particular, haga clic en el siguiente ícono dentro de la página en la que está trabajando:
Dentro de la pantalla que aparece, copia y pega las siguientes líneas de código CSS:
|
01
02
03
04
05
06
|
.et_pb_newsletter_form p:nth-child(2){display: none !important;}.et_pb_newsletter_form p:nth-child(3) {display: none !important;} |
Agregar código CSS a las opciones del tema
Para agregar el código CSS a todo el sitio web, vaya a su Panel de WordPress> Divi> Opciones de tema> Desplácese hacia abajo en la pestaña General y agregue las siguientes líneas de código CSS al campo CSS personalizado:
|
01
02
03
04
05
06
|
.et_pb_newsletter_form p:nth-child(2){display: none !important;}.et_pb_newsletter_form p:nth-child(3) {display: none !important;} |
Añadir código jQuery
Continuando, vamos a agregar el código jQuery que se necesita. Para agregar el código jQuery, también tiene dos posibilidades: agregar el código para que se aplique a una página en particular o agregar el código a todo el sitio web.
Agregar código jQuery a una página en particular (módulo de código)
Para agregar el código jQuery a una página en particular, agregue un módulo de código justo debajo del módulo de opción de correo electrónico. Abra el Módulo de código y coloque las siguientes líneas de código jQuery en él:
|
01
02
03
04
05
06
07
08
|
<script type="text/javascript">jQuery(function($){$(".et_pb_contact_form_label").remove();$("#et_pb_signup_firstname").val("*");$("#et_pb_signup_email").val("");$("#et_pb_signup_email").attr("placeholder", "Email address");});</script> |
Dado que eliminamos la etiqueta, nos aseguramos de que el valor del campo de la dirección de correo electrónico no tenga nada. Para compensar la etiqueta y asegurarnos de que las personas sepan qué escribir, estamos usando un marcador de posición en su lugar. En este caso, el marcador de posición es ‘dirección de correo electrónico’, pero no dude en convertirlo en cualquier otra cosa.
Agregar código jQuery a las opciones del tema
Para que el código jQuery se aplique a todo el sitio web, puede colocarlo en Opciones de tema. Para hacer eso, vaya a su Panel de WordPress> Divi> Opciones de tema> Integración y coloque las siguientes líneas de código jQuery en el encabezado de su sitio web:
|
01
02
03
04
05
06
07
08
|
<script type="text/javascript">jQuery(function($){$(".et_pb_contact_form_label").remove();$("#et_pb_signup_firstname").val("*");$("#et_pb_signup_email").val("");$("#et_pb_signup_email").attr("placeholder", "Email address");});</script> |
Resultado
Si sigue todos los pasos de esta publicación y aplica el código CSS y jQuery a una página en particular o a todas las páginas de su sitio web, debería lograr el siguiente resultado:
Pensamientos finales
En esta publicación, le mostramos cómo lograr un módulo de opción de correo electrónico que solo tiene un campo de dirección de correo electrónico. La razón por la que es posible que desee lograr tal resultado es la de la eficacia. Al solicitar solo la dirección de correo electrónico, su audiencia tendrá que esforzarse menos para suscribirse y podrá crear su lista de correo electrónico más rápidamente. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!
Imagen destacada por adichrisworo / shutterstock.com