Creating an anchor link on my WiziBlocks

An anchor link is an HTML option that allows you to create a link to another place on your page.

For example, if you have a special discount, or a selection of products that you want to highlight. You can add a button on your page, which will redirect your visitors to the place on your page where the products are located. 

What do I need to create an anchor? 

You will need 3 blocks:

  1. A block that allows you to add a link or a button (this is the starting block, which your visitors will have to click on)
  • Slideshow 
  • One or several images
  • One or several texts
  • Text with background image
  • Images and text
  • etc

2. An HTML Code block (this is the block that will contain the code needed for your anchor link to work)

mceclip0.png

 

3. The target block (this is the block to which your visitors will be redirected). It can be any type of block.

 

Create my anchor

1. My target block

The first step here is to create the block you want to redirect your visitors to, if it doesn't already exist. If you have already created it, make sure that it is visible and published: the block is not hidden, and you have clicked on Publish at the top of the page to save your last modifications. 

We will take here a selection of products as an example : 

 

mceclip0.png

 

2. My starting block 

You can now create your starting block, the block on which your visitors will have to click to be redirected elsewhere on your page. 

Here we will take the example of a link added to a slideshow image :

mceclip1.png

 

In the Element configuration of your block, add a # followed by the text of your choice. Here, we will enter #selection. 

mceclip2.png

mceclip3.png

      

3. My HTML block

The last step will be to link your 2 blocks. To do this, add a new block to your page: a Code block. In the layouts, select Add HTML code.

mceclip4.png

 

In the content of the block, delete the text "Your elements" and fill in the first <div> tag with the text you added earlier. Your text must be in quotes, without the # and preceded by id=.

In our example, we will add:

id="selection"

 

mceclip5.png

 

mceclip6.png

mceclip7.png

mceclip8.png

The last step will be to place this HTML block right above the block you want to redirect your customers to. 

In our example, a selection of products: 

 

mceclip9.png

 

Your anchor is ready! Click on Publish at the top of the page. Here is the result on the store:

 

ezgif.com-gif-maker__6_.gif

 

💬 Feel free to contact your Business Coaches if you have any questions!