Todos sabemos que crear un sitio web que atraiga y se dirija a un público en particular es un proceso. Cada acción que realizan en su sitio web es importante porque es parte de su recorrido como cliente. Cada visitante y cliente potencial necesita sentirse personalmente abordado y comprendido.
Lograr que su sitio web sea perfecto requiere muchas cosas, como un buen diseño, contenido bien pensado y definitivamente suficientes CTA que impulsen a sus visitantes a realizar las acciones que tanto usted como ellos desean .
Uno de los elementos más utilizados que soportan las llamadas a la acción en un sitio web es un botón. Por lo general, puede encontrar botones en varias secciones de un sitio web. Pueden conducir a diferentes partes del sitio web o pueden remitir a un visitante a un sitio web externo.
Con Divi , permitimos que cada persona que está creando un sitio web incluya sus botones donde quiera y cuánto quiera. Si desea interactuar con su público objetivo de una manera rápida y si desea despertar la curiosidad desde el comienzo de su visita a su sitio web, es bueno agregar un CTA en su sección principal.
No podemos influir en que un enlace se abra en una ventana nueva. Es algo que mucha gente abusó en el pasado, y ahora, todo depende de las preferencias que tenga el usuario. Sin embargo, tenemos la opción de abrir un determinado enlace en una nueva pestaña en lugar de en la misma ventana. Hay muchas razones por las que querrías abrir un enlace en una nueva pestaña, estas son algunas de ellas:
No permitir que sus visitantes se alejen del sitio web
En el momento en que pierde a sus visitantes, es muy difícil recuperarlos en su sitio web nuevamente. Ese suele ser el caso cuando los envía a un sitio web externo dentro de la misma ventana al hacer clic en un botón.
Entonces, ¿por qué enviarlos lejos en primer lugar? Al hacer que los botones se abran en una nueva pestaña, te aseguras de que todavía tengan una página abierta con tu sitio web en sus pestañas. Pueden volver a su página sin tener que revisar su historial.
Continuar su estancia en su sitio web después de haber cerrado el enlace que abrieron
Es natural cerrar una pestaña cada vez que terminas de leer algo. Es eso, o estás haciendo clic. En ambas situaciones, desde el momento en que pasa a la siguiente acción, está a un paso más de ti.
Abrir automáticamente el enlace en una nueva pestaña o ventana le ayuda a recordar a las personas cómo aterrizaron en otro lugar en primer lugar; a través de su sitio web.
Recogiendo en la pestaña abierta más tarde
No serías la primera persona en tener un montón de pestañas alineadas una al lado de la otra durante días. Eso es exactamente lo que hace que sea valioso mantener el tuyo presente en el navegador de las personas. Si los visitantes encuentran su sitio web en sus pestañas abiertas después de unos días, es posible que hayan tenido tiempo para dejar que su contenido se asiente y darle otra vuelta.
Es probable que el contenido se entienda mucho mejor cuando se lea por segunda, tercera o cuarta vez.
Cuando no usamos una sección de ancho completo con un encabezado de ancho completo o un control deslizante de ancho completo, generalmente agregamos una sección estándar y módulos de botones manualmente. En la pestaña Contenido de cada Módulo de botones, puede elegir si desea abrir un enlace en la misma ventana o en una nueva pestaña. Puede encontrar esta opción en la subcategoría Enlace de la pestaña Contenido.
En Fullwidth Header & Slider, estas posibilidades no están incluidas. Y debido a que el HTML está predefinido, no podemos simplemente modificar el código HTML que lo acompaña. Es por eso que vamos a agregar código jQuery que hará que los botones de encabezado de ancho completo y control deslizante de ancho completo se abran en una nueva pestaña/ventana.
Creación de un encabezado de ancho completo
Comencemos agregando una nueva sección de ancho completo a una página existente o nueva.
Dentro de esa sección de ancho completo, seleccione el encabezado de ancho completo. El encabezado de ancho completo proporciona un sitio web con un hermoso encabezado que tiene todo lo que necesita. Ahora, desplácese hacia abajo en la pestaña Contenido del encabezado de ancho completo y escriba el texto que desea que aparezca en el botón. Después de eso, agregue un enlace al botón también.
Luego, vaya a la pestaña Avanzado del encabezado de ancho completo y desplácese hacia abajo hasta que encuentre los campos del botón. En este caso, solo queremos usar el botón número uno. Suponga que desea abrir el segundo botón en una nueva pestaña, tendrá que usar la clase asignada al botón dos.
Haga clic en el campo Botón uno y observe cómo aparece la clase en un color de fuente naranja. La clase es ‘.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button’. Necesitaremos esta clase en nuestro código jQuery. Si desea que el segundo botón se abra en una nueva pestaña o ventana, continúe y guarde esa clase en algún lugar.
Creación de un control deslizante de ancho completo
Si desea agregar un control deslizante de ancho completo, continúe y agregue una nueva sección de ancho completo. Esta vez, coloque un control deslizante de ancho completo en la sección. Escriba el texto del botón en la pestaña Contenido y pase a la pestaña Avanzado.
Desplácese hacia abajo en esa pestaña hasta que encuentre la opción Botón deslizante. Copie la clase asignada del botón que forma parte del Control deslizante de ancho completo.
Agregar código jQuery a las opciones del tema Divi
El código que usaremos para ayudar a abrir los enlaces en una nueva pestaña para el encabezado y control deslizante de ancho completo es diferente. Además de eso, también podemos integrar el código jQuery en nuestro sitio web de dos maneras diferentes. El más común es agregar código a las Opciones de tema de su sitio web Divi.
La razón por la que las personas usan esta opción con mayor frecuencia es porque se aplicará a todo el sitio web. En cualquier página de su sitio en la que se encuentre, se aplicará el código. Es la forma más fácil de agregar código personalizado a su sitio web si está reutilizando ciertas secciones o elementos en diferentes páginas de su sitio web.
Para agregar el código a todo tu sitio web, ve a Divi > Opciones de tema > Integración y agrega el siguiente código al <head> de tu sitio web :
Código jQuery para el botón Encabezado de ancho completo
|
01
02
03
04
05
|
<script>jQuery(function($){$('.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button').attr('target', '_blank');});</script> |
Código jQuery para el botón Control deslizante de ancho completo
|
01
02
03
04
05
|
<script>jQuery(function($){$('.et_pb_slide_0.et_pb_slide .et_pb_container a.et_pb_more_button.et_pb_button').attr('target', '_blank');});</script> |
No olvide agregar el texto entre las etiquetas <script> como se muestra en la pantalla de impresión anterior.
Como puede notar, el código es ligeramente diferente para el encabezado de ancho completo y el control deslizante de ancho completo. Puedes notar como la clase de cada botón está escrita entre paréntesis en la tercera línea del código. Entonces, suponga que desea que el código se aplique al segundo botón del encabezado de ancho completo, simplemente reemplace la clase escrita con la que está asignada al segundo botón.
Después de eso, guarde los cambios. El código se aplicará inmediatamente en todo su sitio web.
Agregar código jQuery al módulo de código
Otra posibilidad de agregar el código a su sitio web es utilizando el Módulo de código. Este Módulo generalmente se usa cuando el código que desea incluir solo se aplica a una página.
Abra la página donde desea aplicar los cambios y agregue una fila con una columna en la parte superior de la página. Después de eso, agregue un módulo de código a esa fila.
Copie el mismo código y péguelo en el Cuadro de contenido dentro de la subcategoría Texto de la pestaña Contenido.
Código jQuery para el botón Encabezado de ancho completo
|
01
02
03
04
05
|
<script>jQuery(function($){$('.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button').attr('target', '_blank');});</script> |
Código jQuery para el botón Control deslizante de ancho completo
|
01
02
03
04
05
|
<script>jQuery(function($){$('.et_pb_slide_0.et_pb_slide .et_pb_container a.et_pb_more_button.et_pb_button').attr('target', '_blank');});</script> |
Guarde los cambios.
No olvide agregar el texto entre las etiquetas <script> como se muestra en la pantalla de impresión anterior. El código ahora se aplicará solo a esa página del sitio web.
Pensamientos finales
Agregar el siguiente código en su sitio web solo es necesario cuando desea que se abra un botón en una nueva pestaña mientras usa el encabezado y el control deslizante de ancho completo en una sección de ancho completo. Con el Módulo de botones, tiene una opción incluida dentro de Divi Builder donde puede elegir abrir un enlace en una nueva pestaña.
Si desea utilizar el código en varias páginas de su sitio web, agréguelo a las Opciones de tema de su sitio web. Pero si solo usa el código para un encabezado de ancho completo o un control deslizante de ancho completo, es mejor que agregue el código en un módulo de código en esa página específica.
¿Con qué frecuencia hace que sus enlaces se abran en una nueva pestaña y por qué? ¡Háganos saber en la sección de comentarios!