Création d'une ancre sur mes WiziBlocks

Une ancre est une option HTML qui vous permet de créer un lien vers un autre endroit de votre page.

Par exemple, si vous avez une promotion en cours, ou bien une sélection de produits que vous souhaitez mettre en avant. Vous avez la possibilité d'ajouter un bouton sur votre page, qui redirigera vos visiteurs vers l'endroit de votre page sur lequel se trouvent les produits concernés. 

De quoi ai-je besoin pour créer une ancre ? 

Vous aurez besoin de 3 blocs :

  1. Un bloc qui vous permet d'ajouter un lien ou un bouton (c'est le bloc de départ, sur lequel vos visiteurs devront cliquer)
 
 

2. Un bloc Code HTML (c'est le bloc qui contiendra le code nécessaire pour que votre ancre fonctionne)

 

 

3. Le bloc d'arrivée (c'est le bloc vers lequel vos visiteurs seront redirigés). Il peut s'agir de n'importe quel type de bloc. 

 

Créer mon ancre

1. Mon bloc d'arrivée

La première étape ici consiste à créer le bloc vers lequel vous souhaitez rediriger vos visiteurs, s'il n'est pas encore existant. Si vous l'avez déjà créé, assurez-vous qu'il soit bien visible et publié : le bloc n'est pas masqué, et vous avez bien cliqué sur Publier en haut de page pour valider vos dernières modifications. 

Nous prendrons ici l'exemple d'une sélection de produits : 

 

mceclip0.png

 

2. Mon bloc de départ 

Vous pouvez maintenant créer votre bloc de départ, soit le bloc sur lequel vos visiteurs pourront cliquer pour être redirigés ailleurs sur votre page. 

Nous prendrons ici l'exemple d'un bloc Texte avec fond avec ajout d'un bouton :

 

 

Une fois votre image et votre texte ajoutés, dans la configuration de l'élément, section Lien du bouton, ajoutez un # suivi du texte de votre choix.

Ici, nous ajouterons #coupdecoeur.

 

mceclip1.png

 

 

Notez que ce texte sera visible au passage de la souris sur le bouton. Attention donc au texte que vous choisissez.

      

3. Mon bloc HTML

La dernière étape consistera à créer le lien entre vos 2 blocs. Pour cela, ajoutez un nouveau bloc sur votre page : un bloc Code. Dans les mises en pages, sélectionnez le bloc Ajouter du code HTML.

 

mceclip2.png

 

Dans le contenu du bloc, supprimez le texte "Vos éléments" et renseignez dans la première balise <div> le texte que vous avez ajouté plus haut. Votre texte doit être entre guillemets, sans le # et précédé de id=.

Dans notre exemple, nous ajouterons donc :

id="coupdecoeur"

 

mceclip0.png

mceclip1.png

mceclip2.png

mceclip3.png


La dernière étape consistera à placer ce bloc HTML juste au-dessus du bloc sur lequel vous souhaitez rediriger vos clients. 

Dans notre exemple, une sélection de produits coup de cœur : 

 

 

Votre ancre est prête ! Cliquez sur Publier en haut de page. Voici le résultat sur la boutique :

 


💬 N’hésitez pas à contacter vos Business Coachs si vous avez des questions !