Depending on which type of Element you have selected, the right panel will show a different set of style controls you can use to adjust the look and feel of your content. This includes background colors, images, gradients, fonts, margins, padding, and so forth. Different Elements have different controls available for you to adjust.
The style of an Element can be adjusted per property with a set of corresponding controls. These controls directly correspond to the CSS attributes that web browsers use to display your content. When you are i.e. adjusting the background color of an Element, you are setting the CSS property background on that Element. This helps the content you create in Vev stay consistent across all browsers and devices.
If you create a style you would like to re-use for other Elements of the same type, save it as a Shared Style and apply it to other Elements with one click.
To add styles to an Element, begin by selecting it. The style options may vary depending on which type of Element you have selected. If you can add a specific style to the Element, it is indicated by the Plus icon on the right of the style property.
In the right panel you will see compact controls for all the active style rules for your selected Element. These controls let you quickly change properties such as border radius, border width, or background color. They also offer quick buttons to add a fill color or background image to Elements.
To see the full controls for a style rule, click on the corresponding icon on the left. Click the + icon to add a style rule if none exists.
To adjust more style settings for a property such as background or border, click on the icon next to the style rule.
The set of full controls will vary depending on which style rule you are working with. See the list of available style controls below for more information.
Note that not all style controls will be available for all Elements.
If gradient controls are enabled, use this to adjust and add gradients to an Element. You can set the gradient type (linear / radial), adjust and add colors, add the current gradient to your swatches, and set its direction.
Styling Elements can be tedious. If you need to make a color adjustment it would be great if you didn’t have to go to every place that color is used and adjust it. This is where Shared Styles comes in.
A Shared Style preset is a style template for your Element. If you update the style preset it will be reflected across all Elements using said preset.
With an Element selected, click on the “No shared style” at the top of your right bar. This will open a dropdown with available style presets and a button to open the style manager.
Click the + icon to create a new Shared Style based on the styles of the Element you currently have selected. You will be prompted to give it a name, press Enter to create it.
If you have made changes to an Element with a set Shared Style in the Design Editor, you have the option of quick-updating the preset by clicking the circular arrow icon that appears when a change is detected
If you have style changes on your currently selected Element, you can reset it back to its Shared Style by clicking the three dots. You can then select which view mode you want to reset the style changes for.
Reset all styles - Resets all the style changes you have made to reflect the Shared Style it belongs to.
Reset Desktop styles - Resets Element style changes made on Desktop, keeps changes on Tablet and Mobile.
Reset Tablet styles - Resets Element style changes made on Tablet, keeps changes on Desktop and Mobile.
Reset Mobile styles - Resets Element style changes made on Mobile, keeps changes on Desktop and Tablet.