¿Cómo abro los iconos de pie de página de Divi en una nueva ventana del navegador?

Actualizado el 28/11/2018 | Publicado el 09/02/2018 | 23 comentarios

El tema Divi ofrece la opción de que aparezcan iconos sociales en la parte inferior de cada página, pero ¿cómo se personaliza esto? ¿Cómo abro los iconos del pie de página de Divi en una nueva ventana del navegador? De hecho, las opciones de visualización de los iconos de pie de página de Divi son básicas, este tema no nos deja demasiadas opciones: ¡sólo 4 iconos para colocar en la parte inferior derecha y abrir en la misma pestaña del navegador! No te asustes, en este artículo, veremos que en dos o tres clics, podemos cambiar la ventana de apertura de nuestros enlaces en el pie de página.

 

1 - Apertura de los iconos de pie de página de Divi: noción de Objetivo _Self / Objetivo _Blanco

En HTML, la etiqueta permite añadir un enlace a una nueva página web, ya sea una página de su sitio o una página de un sitio externo. La sintaxis es la siguiente:

Mon blog

Siendo el "href" el destino y el "objetivo" el camino a seguir para llegar allí... Por eso hay diferentes valores que se añadirán al atributo "objetivo" - todos tenidos en cuenta por los navegadores - pero sólo conservaremos los valores principales:

  • en blanco: abre el enlace en una nueva ventana o pestaña del navegador
  • se abre el enlace en la ventana actual => este es el valor por defecto

 

Por defecto, WorPress utiliza el "target _self", tal vez cambie este atributo sin saberlo por su cuenta cuando inserte un enlace en el cuerpo de sus mensajes. Esto es exactamente lo que pasa cuando marcas la pequeña casilla debajo de la dirección de destino, mira:

Ajouter un Target Blank dans un lien de WordPress

Al marcar la pequeña casilla, se añade un "blanco de objetivo" a los enlaces que se insertan en los artículos.

Sin embargo, el tema Divi no nos ofrece tal opción cuando rellenamos las direcciones de nuestros perfiles sociales desde la pestaña Divi > Opción temática > GeneralQué lástima...

 

2 - ¿Cómo permitir la apertura de una nueva ventana con el clic de un icono en el pie de página de Divi?

Si ya estás usando el tema Divi, habrás notado que los iconos del pie de página de tu sitio web o blog no se abren cuando usas el tema Divi. "blanco en blanco".

Esto significa que si un visitante de su sitio hace clic en uno de los iconos en la parte inferior de cada página, saldrá de su sitio e irá a uno de sus perfiles sociales. Este visitante habrá abandonado su sitio y no podrá volver a él, es el "El auto-objetivo".

Por otro lado, si pudieras abrir tus perfiles sociales en una nueva ventana del navegador, podrían sentirse tentados a seguir leyendo tu artículo o navegando por tu sitio.

¡Para remediar esto, es muy, muy simple! Necesitarás añadir un pequeño trozo de código en Divi que te permitirá abrir tus perfiles sociales en una nueva ventana cuando el usuario haga clic en él. Este trozo de código está aquí :


 

3 - ¿Dónde insertar el fragmento de código para abrir los iconos de pie de página de Divi en una nueva ventana?

Recuerda, en un último artículo, te expliqué que Divi te permite insertar fácilmente el código en la sección "Head" de tu sitio... Así que aquí es precisamente donde tendrás que añadir este pequeño guión.

Entonces vaya a la pestaña Divi > Opciones temáticas > Integración > Añadir línea de código al blog de tu blog

Bout de code à insérer pour ouvrir les icônes du footer Divi dans une nouvelle fenêtre

Fragmento de código a insertar en la pestaña "integración" de las opciones de Divi para abrir los iconos de pie de página de Divi en una nueva ventana

Alternativamente, si prefiere integrar esta función directamente en el tema de su hijo, esto también es posible. En este caso, sólo tienes que duplicar el archivo header.php en el tema de tu hijo y añade este pedazo de código.

 

Para ir más lejos...

Abrir los iconos de pie de página de Divi en una nueva ventana es muy importante ya que facilita la navegación y la experiencia de usuario de su reproductor.

Si está interesado en su artículo, puede molestarse si tiene que volver a él haciendo clic en las flechas de "volver a una página" de su navegador.

Además, es súper importante para sus estadísticas internas: si el lector abandona su sitio después de unos segundos, sin siquiera haber visitado otra página, aumenta su tasa de rebote => no es lo que estás buscando, ¿verdad?

 

Comment ouvrir en target-blank les icônes placés dans le footer de Divi

 

Divi tutorial : open icon footer in a new tab

783 palabras

3

A ti también debería gustarte:

23 Commentaires

  1. emmanuelle.audouard

    Bonjour Lycia
    Je voulais vous remercier pour toutes ces astuces très utiles.
    J’ai développé mon site seule grâce à Divi : très facile d’usage et compliqué à la fois de créer son site mais des ressources comme les vôtres sont très aidantes.
    Merci encore!

  2. Lycia

    Merci Emmanuelle ! C’est très gentil à vous de laisser un tel message. Ça m’encourage pour continuer. Je suis en train de rédiger de nouveaux tutoriels actuellement… ils vous serviront peut-être. À bientôt !

  3. Jean-Michel

    Bonjour Lycia et merci une fois de plus pour ce tuto.
    En plus des icones de reseaux sociaux, j’ai un lien vers mon forum exterieur a WordPress. Je ne vois pas bien quelle « variante » de ce code utiliser.

    [jQuery(« .l’id css de ma ligne de menu »).attr(‘target’, ‘_blank’);] ?

    Pouvez-vous me mettre sur la voie svp ?

  4. Lycia

    Bonsoir Jean Michel. Vous ne devez pas toucher à ce code. Il sert seulement à ouvrir les icônes du footer dans un nouvel onglet. La réponse à votre besoin se trouve plutôt dans ce tuto : https://astucesdivi.com/ajouter-icones-footer-divi/
    Vous pourrez ajouter un icône qui renvoi à votre forum. Le seul souci est que les icônes disponibles dans Divi ne sont que des icônes de réseaux sociaux.

  5. Jean-Michel

    Bonjour,
    je me reponds a moi-meme puisque j’ai resolu mon probleme :
    J’ai utilise la meme technique que pour les icones des reseaux sociaux en leur donnant une classe CSS :

    /* renvoi de l’ouverture des icones bleues et des menus sur une nouvelle page */

    jQuery(document).ready(function(){
    jQuery(« .et-social-icon a »).attr(‘target’, ‘_blank’);
    jQuery(« .amis a »).attr(‘target’, ‘_blank’);
    jQuery(« .forum a »).attr(‘target’, ‘_blank’);
    jQuery(« .blog a »).attr(‘target’, ‘_blank’);
    jQuery(« .contact a »).attr(‘target’, ‘_blank’);
    });

  6. Lycia Diaz

    Merci du retour Jean Michel !

  7. Jérôme

    Merci Lycia, comme d’habitude le savoir est au rendez-vous !

  8. Lycia Diaz

    Merci Jérôme 😉

  9. Sandrine

    Merci Lycia ! Adopté ! à tout hasard : Aurais tu une petite astuce pour faire de meme avec l’email que l’on peut ajouter à l’entête ? et faire en sorte que le numéro de telephone ajouté à l’entête puisse être appelé lorsque le site est consulté sur mobile en cliquant dessus ? J’ai essayé le code
    ( avec mailto: / tel: pour les liens)
    dans les espaces réservés ( email / mobile) au niveau de la personnalisation du thème. mais ca ne colle pas . Merci pour tes précieux conseils !

  10. Lycia Diaz

    Salut Sandrine, je pense qu’on peut faire cela avec un peu de code mais je n’ai jamais essayé. Je me demande si cette fonctionnalité ne serait pas disponible avec le plugin Divi Switch, du moins celle du téléphone… Regarde cet article : https://astucesdivi.com/divi-switch-plugin-multifonction/
    Bonne journée.

  11. Julie

    Super article, j’ai pu insérer ce bout de code dans mon thème enfant, ça marche impeccable !

    Merci à vous pour cette aide précieuse !

    Par contre, aurez vous une solution afin d’ouvrir les boutons de « l’en tête plein écran » dans une nouvelle fenêtre ? j’ai bien coché « dans le même onglet » mais cela ne fonctionne pas …

  12. Lycia Diaz

    Salut Julie, merci 😉
    Pour le bouton de l’entête plein écran, je viens de vérifier et effectivement tu as raison : les deux options ouvrent le lien dans la même fenêtre. C’est un bug qui faudrait signaler au support de Divi. Ils pourraient le corriger lors de la prochaine mise à jour 😉

  13. Sandra

    Bonjour Lycia
    Lorsque je colle le code dans le fichier header.php de mon theme enfant j’ai le message d’erreur suivant : syntax error, unexpected ‘ Options du Thème > Intégration > Ajouter ligne de code à la de votre blog, fonctionne bien. Mais est-ce que le code sera conservé lors de la mise à jour du thème ?

    Un grand merci pour votre aide.

  14. Lycia Diaz

    Salut Sandra, si tu as une erreur, c’est que le code est mal collé ou qu’il en manque un bout… Mais effectivement, si l’option de passer par les options du thème > intégration fonctionne, tu n’auras pas de problème. Et oui, ce code sera conservé lors des mises à jour, c’est justement fait pour ça.
    Donc tu ne crainds rien 😉

  15. Sandra

    Merci Lycia pour ta réponse malgré que mon message soit quelque peu incompréhensible… ! Je pense qu’une partie a été tronqué lors de l’envoi 🙂

  16. Olivier.LM

    Deux tutos utilisés dans la même journée, merci encore Lycia et chapeau bas pour tes contenus très pédagogiques.

  17. Lycia Diaz

    Merci Olivier 😉

  18. Maud

    Bonjour et d’avance merci votre blog m’aide très souvent !
    Je cherche à faire le même procédé mais avec les icônes Linkedin du module Personne.
    J’ai essayer d’adapter le code comme ceci :

    jQuery(document).ready(function(){
    jQuery(« .et-social-icon a »).attr(‘target’, ‘_blank’);
    jQuery(« .et_pb_font_icon a »).attr(‘target’, ‘_blank’);
    jQuery(« .et_pb_linkedin_icon a »).attr(‘target’, ‘_blank’);
    });

    Mais cela ne fonctionne pas. Avez-vous une idée de solution ?
    Merci d’avance !

  19. Lycia Diaz

    Salut Maud, je vais chercher…

  20. Maud Colly

    Bonjour Lycia,
    C’est bon j’ai trouvé la solution ! En fait le code précédent visait un cran trop haut. Voilà le code corrigé :

    jQuery(document).ready(function(){
    jQuery(« .et_pb_member_social_links a »).attr(‘target’, ‘_blank’);
    });

    Merci pour votre article qui m’a permis de trouvé la bonne piste !

  21. Lycia Diaz

    Super Maud !
    Merci pour le retour 😉

  22. Virginie SASSERANT

    Merci pour vos astuces, je viendrais ici directement la prochaine fois… avant de m’arracher les cheveux !

  23. Lycia Diaz

    Merci Virginie

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Ponerlo en el interés

Acciones
Comparte esto