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 section anchors. 

Note: Custom anchors will need to be placed manually on each breakpoint and move position as new content is added or deleted from the story. Section anchors, don't move and  are  positioned automatically on breakpoints therefore we strongly encourage the use of section 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 section anchor, you will click on the layers panel on the left side of the editor. Double click on the grid type (Section, Auto Grid, Section Slider etc.) and rename the grid type to any name you would like to call your anchor. 

Screen_Shot_2020-01-29_at_10.25.24_AM.png
Screen_Shot_2020-01-29_at_10.29.48_AM.png

(Rename the grid) 


Link to Anchor

After you have added your custom or section 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.

maker