# Text Editor

The Text Editor element is a TinyMCE WYSIWYG editor that works just like the classic WordPress editor. It allows you to write, edit, format text, and even WordPress shortcodes on your website.

<figure><img src="https://2798932742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKBGfOeYOvP45qYmu7SWy%2Fuploads%2F2ERqltEni3mXUncjm9Rs%2Fimage.png?alt=media&#x26;token=cd3f9c43-6634-494a-8067-2963bf3265dd" alt=""><figcaption></figcaption></figure>

You can add images to your text by selecting the **Add Media** button in the upper left corner. It opens the WordPress Media Library where you can upload your files to the library or select files already uploaded before.

### There are 3 ways of styling a text element

### 1. From the TinyMCE editor

![](https://2798932742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKBGfOeYOvP45qYmu7SWy%2Fuploads%2Fsl6JZdRteEUkPHdtwFI9%2Fimage.png?alt=media\&token=e1da4d61-104b-4844-952a-a75132017322)

### 2.Using the live editor

![](https://2798932742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKBGfOeYOvP45qYmu7SWy%2Fuploads%2F4VSD24v2XkLm5pyqAaoK%2Fimage.png?alt=media\&token=51f4137e-637d-4af5-81c7-65c69982fd01)

If you double click twice on any text, the live editor will show up, this editor is in sync with the TinyMCE editor, so any style that you apply using the live editor it will apply also to the TinyMCE. The CSS code will be saved as inline CSS wich you can edit from the text tab.

![](https://2798932742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKBGfOeYOvP45qYmu7SWy%2Fuploads%2F5MWeCutJ4VquyGDuFV6e%2Fimage.png?alt=media\&token=141e08b8-dead-4611-8cf8-eb33b82e566d)

### 3. From Styling > Typography

![](https://2798932742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKBGfOeYOvP45qYmu7SWy%2Fuploads%2Fv4vv9yoXRRBS5RVDeaCN%2Fimage.png?alt=media\&token=3ac3b2fa-a6de-4e30-a503-ce163ecddc55)

### Best practices

We usually recommend using this third option to style your text, and use the 1st option to style only text that has different Styling on the same line of text.

Like for example in the example above.

You can Use TinyMCE to change “the true” to italic bold and if you want a color/font/spacing etc that applies to all text you can use the 3rd option.

2nd option should be used mainly for editing text live, renaming text etc.

We recommend this because the TinyMCE styling (since it is applied as inline CSS) will overwrite any styling that will be applied from the Styling > Typography tab.

### Dynamic data

### How to add dynamic data text ?

You can change your text to be displayed as Dynamic data from this icon here

![](https://2798932742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKBGfOeYOvP45qYmu7SWy%2Fuploads%2FOMaWcjzKBexNv1tlnP8h%2Fimage.png?alt=media\&token=09c9835c-d5c4-4942-b9e6-2704a20b23ae)

### Where can I use dynamic text ?

In any page\
In a repeater element\
In a slider that has the repeater enabled\
In a theme builder component

### Can I use ACF & CPT to fetch dynamic data?

Yes.

### Useful links for dynamic text

[Advanced Custom Fields](https://zion-builder.gitbook.io/documentation/integrations/advanced-custom-fields)

[Repeater](https://zion-builder.gitbook.io/documentation/features/features/repeater-query-loop)

[How to use Advanced Custom Fields and Custom Post Types](https://zion-builder.gitbook.io/documentation/video-tutorials/dynamic-data/how-to-use-advanced-custom-fields-and-custom-post-types)

[Create a custom WooCommerce Product Slider with the Slider Builder + Repeater + Dynamic Data](https://zion-builder.gitbook.io/documentation/video-tutorials/dynamic-data/create-a-custom-woocommerce-product-slider-with-the-slider-builder-+-repeater-+-dynamic-data)
