Learn about the text editor in your SiteDu.de builder

The SiteDu.de builder includes a powerful WYSIWYG text editor that enables you to effortlessly handle and control the text on your website. Simply click on any text element to access it.

The two text edition panels will appear. One of them is a bit reduced and appears only when you don't need all the WYSIWYG features everywhere.

Regular text edition panel:

![](https://help.webwave.me/lib/dkwr2z/2023-09-27_16-01-ln1th2o9.png)

Simplified text edition panel displayed when changing text's style.

![](https://help.webwave.me/lib/dkwr2z/2023-09-28_14-44-ln363xgz.png)

## Formatting styles (1)

Choose text's formatting style from a list. If you ever decide to change a text's color or size on the whole website, you can easily do it by changing the formatting style.

[Read more about formatting styles](https://help.sitedu.de/articles/text-style-automatic-change-of-a-text-and-header-style-f0a2d0-4ce92).

## Font name (2)

You can choose a font from the fonts' list. If none of them suits your project, you can easily add some more.

[Read how to add more fonts to the fonts' list.](https://help.sitedu.de/articles/add-custom-fonts-f0a2d0-154ce)

![image.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_image.1715263933777.png?alt=media)

## Text Size (3)

You can set font's height in pixels.

![image.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_image.1715264161129.png?alt=media)

## Line height (4)

You can set spaces between lines in a text.

![image.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_image.1715264194828.png?alt=media)

## Letter spacing (5)

Change space betwen letters

![image.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_image.1715264233346.png?alt=media)

## Text style (6)

### Text color

You can choose a color for letters and characters.

![image.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_image.1715264290137.png?alt=media)

### Background color

Set the letter's background color. It is not a background color of the whole element, but of the letters.

![image.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_image.1715264315894.png?alt=media)

### Text shadow

Set a color, size and alignment of the text's shadow.

![image.png](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_image.1715264365875.png?alt=media)

## Font style (7)

### Bold

Use this effect if you want some part of your text to be more visible on the website.

||
<colgroup><col /></colgroup>|:---|
|John has a****dog.****|

### Italic

Italic is another way to make your text more visible. It is often used for quotations.

||
<colgroup><col /></colgroup>|:---|
|**"John has a dog."**|

### Underline

Distinguish some part of the text by underlining it.

||
<colgroup><col /></colgroup>|:---|
|John has adog.|

### Strikethrough

This effect is useful when you need to mark what you want to be changed in the text. It just crosses the marked text with a horizontal line.

||
<colgroup><col /></colgroup>|:---|
|<ul class="PlaygroundEditorTheme__ul" __lexicallisttype="check"><li role="checkbox" tabindex="-1" aria-checked="true" value="1" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__listItemChecked">John has a dog cat .</li></ul>|

## Remove format (8)

This option allows you to remove previously added styles. The text will go back to default look.

## Text alignment (9)

The well-known effect of Microsoft Office Word. It allows you to decide how the text will be aligned in the element. You can align text sections differently. Alignation works also for images and videos placed in a text element.

* ****Align left**** - align text to the left side of the element.
* ****Align center****\- align text to the center so each line is positioned in the middle of the element.
* ****Align right**** - align text to the right side of the element.
* ****Justify****\- align text to the left, then when you add text, the effect will make sure if it is aligned to the right as well. It might cause bigger spaces between words.

||
<colgroup><col /></colgroup>|:---|
|John has a dog.|

||
<colgroup><col /></colgroup>|:---|
|John has a dog.|

||
<colgroup><col /></colgroup>|:---|
|John has a dog.|

## Lists (10)

### Numbered list

Create a list on which elements will be numbered.

||
<colgroup><col /></colgroup>|:---|
|<ol class="PlaygroundEditorTheme__ol1"><li value="1" class="PlaygroundEditorTheme__listItem">one</li><li value="2" class="PlaygroundEditorTheme__listItem">two</li><li value="3" class="PlaygroundEditorTheme__listItem">three</li></ol>|

### Bulleted list

Whenever you don't feel like creating a numbered list, you can make a bulleted one. Each element will start from a big dot.

||
<colgroup><col /></colgroup>|:---|
|Shopping list:
<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">milk</li><li value="2" class="PlaygroundEditorTheme__listItem">beer</li><li value="3" class="PlaygroundEditorTheme__listItem">ham</li><li value="4" class="PlaygroundEditorTheme__listItem">beer</li><li value="5" class="PlaygroundEditorTheme__listItem">eggs</li><li value="6" class="PlaygroundEditorTheme__listItem">beer</li></ul>|

## Increase/Decrease Indent (11)

If you need a sublist in your list, just increase indent.

||
<colgroup><col /></colgroup>|:---|
|<ol class="PlaygroundEditorTheme__ol1"><li value="1" class="PlaygroundEditorTheme__listItem">one</li><li value="2" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ol class="PlaygroundEditorTheme__ol2"><li value="1" class="PlaygroundEditorTheme__listItem">one a</li><li value="2" class="PlaygroundEditorTheme__listItem">one b</li></ol></li><li value="2" class="PlaygroundEditorTheme__listItem">two</li><li value="3" class="PlaygroundEditorTheme__listItem">three</li></ol>|

## Links (12)

### Add/Edit a regular link

Links are basic element of every webpage. Thanks to that option you can make every fragment of your text link. You can choose action for your link from:

* None - selected text changes to link format, but it doesnt't redirect anywhere,
* Webpage - redirection to a webpage on our website,
* Go to newspage - you can select one of yours articles to redirect,
* Go to object on page - you can go to selected position in selected webpage,
* Website address - you can paste any webpage to that option,
* Go to the anchor in the text - move you to the created anchor.
* More - options like Call phone number, Send e-mail, Open file from media library.

User after clicking will be redirected to website or it's part that is poited by you. 
Text style will also change to that selected as Link hover on[text styles](https://help.sitedu.de/articles/text-style-automatic-change-of-a-text-and-header-style-f0a2d0-4ce92).

### Remove a regular link

Removes a link from the marked text. Formatting style goes back to the previous one.

### Internal links - anchor

Add an anchor to your website. This element is not visible for users. Set a reference which will transfer a user to a certain place in the text that you anchored . It can be very useful when creating a table of content, like exactly the one at the beginning of this article🙂

## Multimedia (13)

### ****Image****

Allows you to add an image from the Media library in the text.

### ****Embed Youtube video****

Allows you to insert a YouTube video into the text and adjust its style.

### ****HTML5 video****

Allows you to insert into the text a video from File Manager and adjust its style.

### Media library

A button which opens the[media library](https://help.sitedu.de/articles/the-site-dude-media-library-f0a2d0-824dc).

## Additions (14)

### ****Table****

This feature allows you to insert a table into the text . After you click on the table button you will be able to set a number of rows and columns. If it turns out that you need more of them, you can easily edit already existing table by right-clicking on it and selecting adequate options.

|||
<colgroup><col /><col /></colgroup>|:---|:---|
|English|French|
|I am|Je suis|
|You are|Tu es|

### Insert Horizontal Line

Allows you to insert into the text a horizontal line.

### ****Insert special character****

Allows you to insert a special character from the list.

Example ¼ or ®

## Text transformations (15)

### ****Transform Text to Uppercase****

Transforms all the marked text to Uppercase.

### ****Transform Text to Lowercase****

Transforms all the marked text to Lowercase.

### ****Capitalize Text****

Changes the first letter in each word in the marked text to Uppercase and the rest of it to Lowercase.

### ****Transform Text Switcher****

Each click changes the marked text to one of the three previously described options:

the first click - Uppercase,

the second click - Lowercase,

the third click - Capitalize,

the forth click - Uppercase etc.

## File source (16)

Allows to see a file source where you can edit an HTML element. Helpful for more advanced users.

## ChatGPT (17)

Generate your text using AI

WYSIWYG - The Text editing panel on your website

Got a builder package? Learn how to use it and how to edit your content

Was this article helpful?