You can place your step on the page in the following ways:

  • Relative to screen: step is anchored to a fixed position on screen, regardless of scrolling
  • Snap to element: step is anchored to a specific element on the page

Both of these options are available once you select the "Focus" menu within the Chameleon Editor topbar when editing a step. 

Relative to the screen

First select how you want the step to be anchored. After this you can decide the placement of the step relative to the screen, with the following options: 

  • Top-left
  • Top-right
  • Top-center
  • Bottom-left
  • Bottom-right
  • Bottom-center
  • Center

For additional control over where your step is placed, you can adjust the X and Y axis for the step placement:

You can use pixel values (px) or %  (as shown above in the example).


Note: Steps positioned to screen will automatically adjust to the browser and are responsive to changing sizes, as shown below. 


Anchored to element

This option lets you snap or attach your step to an element that's present on the page.

Once you select this option, you can "Select element" to point-and-click at the element to which you want to attach the step. 

Chameleon then uses CSS Selectors to identify this particular element. 

To learn more about how Chameleon identifies the correct element and how you can adjust this, click the button below: 

Once you've selected an element to attach your step to, you can now select the position of the step relative to the element:

In the Auto case, the step will automatically be placed between the element and the centre of the page. This will enable the step to automatically adjust it's exact position if the element changes where it appears on the page.

In this case, you cannot further manually adjust the position of the step. However if you select one of the other options: 

  • Left of element
  • Above element
  • Right of element
  • Below element

Then you will be able to further adjust the position using px or % values. 

Note: In some cases, you might find that the placement isn't possible, so Chameleon will auto-adjust and show the step on the bottom right corner.

In this example, I selected 'Left of element' but there is no room for the step, so it's been auto adjusted:

Troubleshooting element selection

Sometimes your step may not show because the element is not found on this page. This may be due to how that element is identified; Chameleon uses CSS Selectors to match the element, and collects these from the page when the element is clicked. To learn more about how this works please read this article.

For any questions or feedback on this article, let us know by clicking on the chat bubble to the bottom right of the page! 

Did this answer your question?