Styling Elements

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.

How does it work?

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.

Adding styles

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.

Some Elements may have multiple settings for a specific style property, e.g. for the Standard Menu Element you can set the Background of both the “Menu Item” and the “Sub Menu Item”.

Compact style controls

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.

The compact editor for the Background style property on the blank Section Element.

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.

Full controls for the background property.

Full style controls

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.

Available style controls

Note that not all style controls will be available for all Elements.

Color Wheel

Gradient

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.

Background image

Text

Text-Shadow

Margin & Padding

Border / Border-radius

Shadow

Opacity

Display (Flex)

Shared Styles

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.

Image shows other circles changing color when a preset is changed.

Select a Shared Style

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.

A Shared Style belongs to the type of Element it was made for. So if you have a Shared Style for a text Element, it can only be used on other text Elements.

Add a new Shared Style

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.

Update a Shared Style

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

Update the Shared Style by clicking the Quick-add Icon marked in the image

Reset Changes to a Shared Style

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.