The Style tab is located in the right-hand panel of the Vev Design Editor. This tab contains all settings related to styling and layout. The options displayed in the Style tab are dynamic and change based on the element you have selected on the canvas.
Position
The Position section helps you control the placement of elements on your canvas.
Alignment: Quickly position or distribute elements relative to the canvas or a parent element.
Constraints: Control how an element responds to changes in the size of its parent frame or the overall canvas. This is crucial for creating responsive designs.
Position: Manually set an element's position on the canvas using its X and Y coordinates.
Rotate: Adjust the element's rotation. The element will rotate around its top-left corner.
Size
The Size section allows you to set the dimensions of your elements.
Dimensions: Set the exact width and height of an element.
Resize buttons: Use these buttons to quickly resize an element to fit its parent frame or to match the size of its content.
Aspect Ratio: Lock the width and height proportions to maintain a consistent aspect ratio, which is essential for images and videos.to maintain the aspect ratio.
Layout
Clip Content / Add Scroll Bars: Use this feature to hide content that extends outside of a frame's outline. You can also add vertical, horizontal, or both types of scroll bars to a frame.
Clip overflow using a shape: You can also modify the shape of the overflow from the dropdown. Make sure you have selected ‘clip overflow’, a dropdown reveals to select a shape, then drag the white indicators to further customize the shape. For more advanced settings, click the settings button next to the shape selection.
Scroll
The Scroll dropdown offers various scrolling behaviors for the selected element.
Scroll with Page: The element scrolls up and down along with the page (this is the default behavior).
Pin Position: Fixes the element to a specific position within the viewport, so it remains visible as the user scrolls. This option is not available for sections.
Stick to Top: The element scrolls with the page until it reaches the top of the viewport, where it "sticks" until the end of its parent section.
Fix Background: Keeps the background static while the content scrolls over it. This option is only available for sections.
Shared Style
The Shared Styles section is used for saving and reusing styling options.
Create new shared style: Save a set of styles (like typography, background, or margins) for easy reuse across multiple elements in your project.
Select shared style: Apply an existing shared style to the selected element.
Reset styles: Use the overflow menu to reset overridden styles for a specific breakpoint (desktop, tablet, or mobile).
Background
Open editor: Access advanced background settings.
Color code: Displays the color (typically a HEX code).
Alpha value: Adjust transparency (0% is fully transparent, 100% is fully opaque).
Border
Open editor: Access advanced border settings.
Border style: Choose a style (solid, dashed, or dotted).
Border weight: Set the thickness.
Add border: Apply border to parts of the selected element.
Border Radius
Open editor: Adjust the border radius for individual corners.
Border radius: Set the curvature of the corners.
Add border radius: Apply border radius to parts of the selected element.
Effects
Open editor: Adjust visual effects like shadows or blur.
Effect: Displays the name of the selected effect.
Add effects: Apply effects to parts of the selected element.
Opacity
Opacity: Use the slider or input field to adjust an element's transparency.
Add opacity: Apply opacity settings to parts of the selected element.