Smart Guides

Green guides

When you're dragging and dropping an element, you'll occassionally see green lines appear. These green lines show the user alignment in relation to the canvas. 25%, 50%, and 75% are the areas on the canvas that will light up with green guide-lines when your selected element lines up with those areas. The image above shows that our selected element (the title) is aligned with 25% on the width of the canvas (top) and 25% on the height of the canvas (side)

Purple guides

It's also important to ensure that your elements are lined up with other elements. From a design perspective, we want to make our pages look as polished as possible, and alignment and consistent margins help a lot with acheiving that polished look. The image above shows an example of what our guide-lines look like when you align elements. The selected textbox element containing the text "So, why should I care"? has it's left-side, middle, and right-side all in alignment with the textbox element above it, as it should.

For a live demonstration of the smart guide feature, check out our video below.