Text editing

Webround includes a WYSIWYG (What You See Is What You Get) to write text content. In this video you'll learn how to add text components in Webround and how to use the memorized styles to edit properties such as font size, font family or text color.

You'll also learn how to add your favorite font families from Google Fonts.

Transcription

Adding Text Components

To add a text component to our section, we go to the top left bar of our canvas. By drag and drop, we place our text in the website. We can easily copy and paste content into Webround text components, but be careful that styling will not be preserved, because Webround automatically applies the default text style. Webround reuses the same text styles in the website.

Defining Text Styles

To apply a specific font size to the selected text, you need to define a text style composed of font, font size for each device, color and HTML text tag. This speeds up the process of applying styles to text sections. To define text styles, we need to right click on a text component and access the text styles menu. Let's first delete the existing styles. Be careful, deleting a style will alter all the text components that are currently using that style.

Creating Text Styles

Let's first create a clear distinction between styles by creating a tile, a paragraph and a small paragraph. For simplicity, we'll mark the paragraph style as the default text style. This means that once we start writing text or paste it from outside, the text will automatically load the paragraph style. Since the template we're replicating uses the font Geist mono, we need to import it.

Applying Text Styles

Webround natively supports all Google fonts by just typing the name of the fonts in the input and clicking the plus icon in the text menu. If you correctly upload the font, you will see that the font selector will style the entry accordingly. This is a small paragraph, so it's best to keep font sizes small. We use 12 pixels for desktop and 10 pixels for tablet and mobile devices.

Adding Additional Text Blocks

The small text in the template uses a medium brown color. We'll apply a default color to this style, so that whenever we apply it to some text components, it will automatically change the color. Now that we're ready, let's just select the interested text to apply the style to and use the default styles entry in the text toolbar. The text was correctly applied.

Copying and Pasting Text Components

To add another block of text, we can easily copy and paste the text component. To do so, press Ctrl + Shift + C on the keyboard to save the component to the clipboard. Press Ctrl + Shift + V to paste the same component. Webround pastes the component in the original position of the canvas you're using, so copying and pasting will overwrite the component in the same position of the canvas.

Editing Existing Text Styles

Move the component below. We'll stretch the container and make it larger so that it can correctly fit the title context, which has a very large font size. As expected, Webround has applied the default text style, the paragraph. We need to edit the existing Title 1 style.

Using Google Fonts

Using a Google font, Instruments Serif can be easily added inside your Webround draft by typing its name in the text style menu. We set a very large font size on every device, and we also set a H1 tag to ensure the correct ordering of Title tags in the HTML page.

Changing Text Color

Let's apply the Title 1 style as usual. Our template uses a blue accent on the text. To specifically change the text color for that word, we can use the text color option in the toolbar that allows us to pick a color from the color picker. After picking the color and copying it to the clipboard, I can apply it in the text from the color picker.

Adjusting Text Spacing

I will also save it for later use. As we can see, the default spacing on the text line height is a bit larger than the one used in the template. We need to apply a smaller one. Let's use 1.15. Since text height was reduced, we can also adapt the text wrapper to have a more adequate height.