Jul 03, 2018 87

Add an Anchor

Key Topics  

Add an Anchor 

Link to Anchor

Using Anchors

Add an anchor to your story to link one element to another. This can be particularly useful if you want to send a user directly to another CTA or directive on the page.

Add an Anchor

Maker provides you with a couple of different ways to add anchors: custom anchors or grid anchors. 

To add a custom anchor, click the Media panel tab icon on the left side of the editor and select the anchor icon. Click to insert the anchor to your story.

A blue line will appear in the editor - this is your anchor. Once this anchor is added, you will place the anchor exactly where you need it in the story and you can label it as well. With the anchor selected, you will see three icons appear: arrows, settings and delete. Click on the arrows icon and drag to move the anchor in the story.

Then, click on the settings icon to give your anchor a name. (This is how you can recognize the anchor when you connect it to a link). Click on Save to keep the anchor name.

To add a grid anchor, you will click on the layers panel on the left side of the editor. Rename the grid type to any name you would like to call your anchor.


Link to Anchor

After you have added your custom or grid anchors, you can now link them: Select the CTA button, text or image that you wish to add the anchor to in the story. With the element selected, click on the right side contextual panel and select add link. A modal with all the link options will open. Select link to anchor > choose the appropriate anchor > add link. 

The link will then direct your end-user to the anchor dropped on the page. Use the preview icon to test the link.

Note: Manual anchors will need to be manually placed on each breakpoint and move position as new content is added or deleted from the story. Grid anchors are automatically positioned on breakpoints therefore we strongly encourage the use of grid anchors.