Text is an essential part of any design, and it's important to consider text structure and hierarchy as you build your site. Here we'll run through how to add various text styles and markups to your Vev project, as well as how to style them with SEO optimization in mind.
Add a text element
There are two ways to add text to your canvas: from the top menu and from inside the add menu.
From the top menu:
Navigate to the left of the top menu
Select the 'T' icon
Click and drag onto your canvas
From the Add menu
From the top menu, click the Add Menu (
Shortcut: M)Search for and select Text
Click and drag onto your canvas
Note: The height for text elements is set to 'Auto' by default. This means your text box will automatically resize to fit your content. To change the default setting, click on the text element and change the height (H) to pixels or percentage.
Selecting text tags
When selecting a text box you can change the text tag from the top bar. Ensuring your project is using appropriate header tags is important for SEO. After selecting a text tag
you will be able to change the styling options from the style panel on the right-hand side.
Text tag options:
Paragraph
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
Quote
Bullet List
Numbered List
Table
Text style editor
First, select the text box on your canvas to reveal the options from the style panel on the right. Options are organized by header tags and text type (H1, H2, paragraph, etc.). Click on the text tag you want to style to open the text style editor as shown in the screenshot below.
Style options | Description |
Font family | Select the font |
Style | Set the weight of your text |
Alignment | Set the position of your text |
Letter case |
|
Size | Set the size of your text in pixels, ems, or vw. Tip: viewport width allows your text to be automatically responsive; decreasing or increasing relative to the size of the viewer's screen. |
Line height | Set text line height in pixels, ems, or vw. |
Letter spacing | Set the space between letters in pixels, ems, or vw. |
Word spacing | Set the space between words in pixels, ems, or vw |
Fill | Set the fill to be a color, image, or gradient. |
Tip: Building content that could benefit from a shared text design system?
Check out how to create Shared Styles in Vev.
In-line formatting text
In-line formatting of your text allows you to bold or italicize certain parts of the text like you would in your favorite writing tool.
Format your text
Double-click on the text element
Highlight the specific text you want to edit
Use the in-line formatting options to edit your text
Adding fonts
Check out our article on adding fonts to your project.
Note: You need to upgrade to the Professional plan to upload custom fonts.