Vous souhaitez parfois faire arriver un visiteur sur une section, une rangée ou un module d’une page. Vous allez alors créer un lien intégrant une ancre, par exemple : https://mon-site.com/ma-page/#mon-ancre (voir notre article sur le fonctionnement des ancres).
Si vous intégrez ce lien sur une autre page de votre site, ou une newsletter par exemple, Divi positionne parfois la page au mauvais endroit à l’arrivée sur celle-ci. Il se peut aussi que vos réglages d’espacement soient parfaits pour un déroulé au scroll, mais moins satisfaisant en arrivant sur votre contenu depuis ce lien.
Un mauvais placement peut être dérourant pour l’utilisateur. Dans le meilleur des cas, cela nuit à l’expérience. Sinon, le visiteur quitte tout simplement votre site, n’ayant pas trouvé l’information qu’il pensait trouver.
La solution pour résoudre ce problème de position du contenu
Heureusement, le problème de placement d’ancres peut être résolu en utilisant un petit morceau de code JavaScript. Ce code viendra ajuster la position de l’ancre selon le nombre de pixels que vous définissez.
Ci-dessous le code à utiliser. Pour régler l’espacement de votre ancre par rapport au haut de votre navigateur, il vous suffit de faire varier la valeur « 143 » de la variable « var headerHeight » (ligne 6).
<script>
jQuery(function($) {
window.et_pb_smooth_scroll = function( $target, $top_section, speed, easing ) {
var $window_width = $( window ).width();
$menu_offset = -1;
var headerHeight = 143;
if ( $ ('#wpadminbar').length && $window_width <= 980 ) {
$menu_offset += $( '#wpadminbar' ).outerHeight() + headerHeight;
} else {
$menu_offset += headerHeight;
}
if ( $top_section ) {
$scroll_position = 0;
} else {
$scroll_position = $target.offset().top - $menu_offset;
}
if( typeof easing === 'undefined' ){
easing = 'swing';
}
$( 'html, body' ).animate( { scrollTop : $scroll_position }, speed, easing );
}
});
</script>Pour placer ce code :
- Dans le tableau de bord WordPress, naviguez vers Divi > Options du thème.
- Dans le menu des options du thème, cliquez sur l’onglet « Intégrations ».
- Vous verrez une boîte intitulée « Ajoutez un code à l’en-tête (head) ». C’est ici que vous devez coller le code JavaScript.
- Collez le code fourni dans la boîte et cliquez sur « Enregistrer les modifications ».
Et voilà, vous avez maintenant la main sur la position d’affichage de vos contenus depuis un lien contenant une ancre. A noter que ce réglage ne peut être effectué qu’au global et ne permet pas de cibler des ancres en particulier.