Comment ouvrir les boutons Divi Fullwidth Header & Slider dans un nouvel onglet / une nouvelle fenêtre

Nous savons tous que la création d'un site Web qui attire et parle à un public particulier est un processus. Chaque action qu'ils entreprennent sur votre site Web est importante car elle fait partie de leur parcours client. Chaque visiteur et client potentiel a besoin de se sentir personnellement approché et compris.

La mise en place de votre site Web nécessite beaucoup de choses, comme une bonne conception, un contenu bien pensé et certainement suffisamment de CTA pour pousser vos visiteurs à prendre les mesures que vous et eux souhaitez.

L'un des éléments les plus utilisés pour prendre en charge les appels à l'action sur un site Web est un bouton. Vous pouvez généralement trouver des boutons dans différentes sections d'un site Web. Ils peuvent conduire à différentes parties du site Web ou ils peuvent renvoyer un visiteur vers un site Web externe.

Avec Divi, nous permettons à chaque personne qui crée un site web d'inclure ses boutons où elle veut et combien elle veut. Si vous souhaitez interagir rapidement avec votre public cible et si vous souhaitez éveiller la curiosité dès le début de sa visite sur votre site Web, c'est une bonne chose d'ajouter un CTA dans votre section héros.

Pourquoi devriez-vous ouvrir automatiquement un lien dans un nouvel onglet/une nouvelle fenêtre ?

Nous ne pouvons pas influencer l'ouverture d'un lien dans une nouvelle fenêtre. C'est quelque chose que beaucoup de gens ont mal utilisé dans le passé, et maintenant, tout dépend des préférences de l'utilisateur. Cependant, nous avons la possibilité d'ouvrir un certain lien dans un nouvel onglet plutôt que dans la même fenêtre. Il existe de nombreuses raisons pour lesquelles vous voudriez ouvrir un lien dans un nouvel onglet, en voici quelques-unes :

Ne pas laisser vos visiteurs s'éloigner du site Web

Au moment où vous perdez vos visiteurs, il est si difficile de les récupérer à nouveau sur votre site Web. C'est généralement le cas lorsque vous les envoyez vers un site Web externe dans la même fenêtre lorsque vous cliquez sur un bouton.

Alors, pourquoi les renvoyer en premier lieu ? En créant des boutons ouverts dans un nouvel onglet, vous vous assurez qu'ils ont toujours une page ouverte avec votre site Web dans leurs onglets. Ils peuvent revenir sur votre page sans avoir à parcourir leur historique.

Continuer leur séjour sur votre site après avoir fermé le lien qu'ils ont ouvert

C'est une chose naturelle de fermer un onglet chaque fois que vous avez fini de lire quelque chose. C'est soit ça, soit vous cliquez loin. Dans les deux situations, à partir du moment où ils passent à une action suivante, ils sont à un pas de plus de vous.

L'ouverture automatique du lien dans un nouvel onglet ou une nouvelle fenêtre vous aide à rappeler aux gens comment ils ont atterri ailleurs en premier lieu ; via votre site web.

Reprendre l'onglet ouvert plus tard

Vous ne seriez pas la première personne à avoir un tas d'onglets alignés les uns à côté des autres pendant des jours. C'est exactement ce qui rend précieux le fait de garder le vôtre présent dans le navigateur des gens. Si les visiteurs trouvent votre site Web dans leurs onglets ouverts après quelques jours, ils ont peut-être eu le temps de laisser votre contenu pénétrer et de lui donner un autre tour.

Il y a de fortes chances que le contenu soit beaucoup mieux compris lorsqu'il est lu une deuxième, une troisième ou une quatrième fois.

Pour commencer : ouvrez les boutons d'en-tête et de curseur pleine largeur dans un nouvel onglet

Lorsque nous n'utilisons pas une section pleine largeur avec un en-tête pleine largeur ou un curseur pleine largeur, nous ajoutons généralement une section standard et y ajoutons manuellement des modules de boutons. Dans l'onglet Contenu de chaque module de boutons, vous pouvez choisir si vous souhaitez ouvrir un lien dans la même fenêtre ou dans un nouvel onglet. Vous pouvez trouver cette option dans la sous-catégorie Lien de l'onglet Contenu.

Dans le Fullwidth Header & Slider, ces possibilités ne sont pas incluses. Et parce que le HTML est prédéfini, nous ne pouvons pas simplement modifier le code HTML qui l'accompagne. C'est pourquoi nous allons ajouter du code jQuery qui ouvrira les boutons Fullwidth Header et Fullwidth Slider dans un nouvel onglet/fenêtre.

Création d'un en-tête pleine largeur

Commençons par ajouter une nouvelle section pleine largeur à une page existante ou nouvelle.

Dans cette section pleine largeur, sélectionnez l'en-tête pleine largeur. L'en-tête Fullwidth fournit un site Web avec un bel en-tête qui a tout ce dont il a besoin. Maintenant, faites défiler l'onglet Contenu de l'en-tête Fullwidth et notez le texte que vous souhaitez voir apparaître sur le bouton. Après cela, ajoutez également un lien vers le bouton.

Ensuite, accédez à l'onglet Avancé de l'en-tête Fullwidth et faites défiler vers le bas jusqu'à ce que vous trouviez les champs du bouton. Dans ce cas, nous voulons uniquement utiliser le bouton numéro un. Supposons que vous souhaitiez ouvrir le deuxième bouton dans un nouvel onglet, vous devrez utiliser la classe affectée au bouton deux.

Cliquez dans le champ Button One et regardez la classe apparaître dans une couleur de police orange. La classe est '.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button'. Nous aurons besoin de cette classe dans notre code jQuery. Si vous voulez que le deuxième bouton s'ouvre dans un nouvel onglet ou une nouvelle fenêtre, allez-y et enregistrez cette classe quelque part.

Création d'un curseur pleine largeur

Si vous souhaitez plutôt ajouter un curseur pleine largeur, allez-y et ajoutez une nouvelle section pleine largeur. Cette fois, placez un curseur pleine largeur dans la section. Notez le texte du bouton dans l'onglet Contenu et passez à l'onglet Avancé.

Faites défiler cet onglet jusqu'à ce que vous trouviez l'option Slide Button. Copiez la classe attribuée du bouton qui fait partie du curseur pleine largeur.

Ajout de code jQuery aux options du thème Divi

Le code que nous utiliserons pour ouvrir les liens dans un nouvel onglet pour l'en-tête et le curseur pleine largeur est différent. En plus de cela, nous pouvons également intégrer le code jQuery dans notre site Web de deux manières différentes. La plus courante consiste à ajouter du code aux options de thème de votre site Web Divi.

La raison pour laquelle les gens utilisent le plus souvent cette option est qu'elle s'appliquera à l'ensemble du site Web. Quelle que soit la page de votre site que vous soyez, le code s'appliquera. C'est le moyen le plus simple d'ajouter du code personnalisé à votre site Web si vous réutilisez certaines sections ou éléments dans différentes pages de votre site Web.

Pour ajouter le code à l'ensemble de votre site web, allez dans Divi > Options du thème > Intégration et ajoutez le code suivant à l'<head> de votre site web :

Code jQuery pour le bouton Fullwidth Header

<script>
jQuery(function($){
$('.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button').attr('target', '_blank');
});
</script>

Code jQuery pour le bouton Fullwidth Slider

<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>

N'oubliez pas d'ajouter le texte entre les balises <script> comme indiqué dans l'écran d'impression ci-dessus.

Comme vous pouvez le remarquer, le code est légèrement différent pour le Fullwidth Header et le Fullwidth Slider. Vous pouvez remarquer comment la classe de chaque bouton est écrite entre parenthèses dans la troisième ligne du code. Donc, supposons que vous vouliez que le code s'applique au deuxième bouton de l'en-tête pleine largeur, remplacez simplement la classe écrite par celle qui est affectée au deuxième bouton.

Après cela, enregistrez les modifications. Le code s'appliquera immédiatement sur l'ensemble de votre site Web.

Ajout de code jQuery au module de code

Une autre possibilité d'ajouter le code à votre site Web consiste à utiliser le module de code. Ce module est généralement utilisé lorsque le code que vous souhaitez inclure ne s'applique qu'à une seule page.

Ouvrez la page sur laquelle vous souhaitez appliquer les modifications et ajoutez une ligne avec une colonne en haut de la page. Après cela, ajoutez un module de code à cette ligne.

Copiez le même code et collez-le dans la zone de contenu de la sous-catégorie Texte de l'onglet Contenu.

Code jQuery pour le bouton Fullwidth Header

<script>
jQuery(function($){
$('.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button').attr('target', '_blank');
});
</script>

Code jQuery pour le bouton Fullwidth Slider

<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>

Enregistrez les modifications.

N'oubliez pas d'ajouter le texte entre les balises <script> comme indiqué dans l'écran d'impression ci-dessus. Le code ne s'appliquera désormais qu'à cette page du site Web.

Dernières pensées

L'ajout du code suivant sur votre site Web n'est nécessaire que lorsque vous souhaitez qu'un bouton s'ouvre dans un nouvel onglet tout en utilisant l'en-tête et le curseur pleine largeur dans une section pleine largeur. Avec le module Button, vous avez une option incluse dans le Divi Builder où vous pouvez choisir d'ouvrir un lien dans un nouvel onglet.

Si vous souhaitez utiliser le code dans plusieurs pages de votre site Web, ajoutez-le aux Options du thème de votre site Web. Mais si vous n'utilisez le code que pour un en-tête pleine largeur ou un curseur pleine largeur, vous feriez peut-être mieux d'ajouter le code dans un module de code sur cette page spécifique.

À quelle fréquence ouvrez-vous vos liens dans un nouvel onglet et pourquoi ? Faites-nous savoir dans la section commentaires ci-dessous!