Welcome to our detailed guide on using guides in Vev! Whether you're new to design or an experienced developer, guides are indispensable tools that will improve your design workflow.
What is a Guide?
Guide in the Vev visual tool that assists in aligning and organizing components within the safe zone on your page. Similar to virtual rulers, you can position them anywhere on your canvas to achieve a consistent and structured design. These guides are solely for your reference during the design process and do not appear on the published site.
Why use Guide?
Guides are invaluable during the design process for ensuring alignment and assisting designers in placing components accurately
Precision: Guarantee that each element on your page is perfectly aligned.
Consistency: Achieve a cohesive and uniform appearance across various sections and pages of your site.
Efficiency: Enhance your workflow with clear visual references, minimizing the need for frequent adjustments
Applying the Guide
To apply and disable the guide, simply use the shortcut: "G" on your keyboard.
You can also access the guides by clicking the settings icon. In the Project Settings panel, go to "Guides". By default, the guides are turned off. To activate them, simply click the eye icon, and the red columns will appear on your canvas. Once activated, you'll have more options to adjust the columns, spacing, and padding on all sides.
Parameters
| Description |
Snap to guides | When activated, it automatically aligns objects with vertical guidelines for precise and consistent placement. |
Columns | This option allows you to add the necessary number of columns. |
Column gap | Adjust the space between the columns to your preference. |
Padding top | Use this option to add space at the top. |
Padding right | Apply this setting to add space on the right side. |
Padding Bottom | Adjust the bottom space as needed. |
Padding left | Similarly, use this option to add space on the left side |
Tip: Grids are great to help design your content to be consistent but don't be afraid to break the grid to make unique layouts.
📐 Distance Indicator
Distance Indicator is a valuable feature that assists designers in measuring and visualizing the spacing between elements within a design. By using the Distance Indicator effectively, designers can greatly enhance the precision and consistency of their design layouts in Vev. This tool ensures that elements are evenly spaced, aligned, and positioned correctly, contributing to a more polished and professional appearance.
The Distance Indicator displays measurements in various units depending on the settings configured in constraints.
These units can include:
pixels (px),
percentages (%),
and viewport width/height (vw/vh),
allowing designers to work with the unit that best suits their needs. By understanding and utilizing these measurements, designers can ensure their layouts are responsive and adaptable across different devices and screen sizes.
