---
title: "Editing content with the WYSIWYG"
date: "2017-11-13T08:19:14+00:00"
summary: "Enhance your Drupal content editing with Site Studio's advanced WYSIWYG features. Learn to apply custom styles and colors inline, creating visually appealing and well-formatted text effortlessly."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/editing-content-wysiwyg"
id: "b2139c76-44b8-4307-a009-8bff38977ee6"
---

Drupal includes a rich text editor, also known as a WYSIWYG or CKEditor. Site Studio provides a new text format called **Site Studio** for CKEditor which includes additional features to allow more formatting control over content.

These are:

*   Applying Custom styles to elements within the WYSIWYG
*   Applying Custom styles inline to elements within the WYSIWYG
*   Applying colors inline to elements within the WYSIWYG

Applying custom styles to content in CKEditor
---------------------------------------------

To apply a Custom styles to content within CKEditor:

### Step 1 - Create a custom style

To apply a Custom style within CKEditor, first create your Custom style and make sure the **Make available in WYSIWYG editor** is ticked. Find more information on [Creating custom styles](/drupal-starter-kits/add-ons/site-studio/creating-custom-styles "Creating custom styles").

![c4e02587-make-style-available.png](https://acquia.widen.net/content/40d11c59-5fbc-45ff-a019-19ea1dd32ac1/web/c4e02587-make-style-available.png)

### **Step 2 - Apply a custom style within CKEditor**

1.  Navigate to a component or template with a Layout canvas
2.  Drag a **WYSIWYG element** onto the Layout canvas
3.  Double click on the **WYSIWYG element** to open its settings
4.  Select the text to apply your custom style to
5.  Click on the **Format menu** and select the element to apply. For example, Heading 1
6.  Then click on the **Element styles** menu and select your Custom style. This menu only shows Custom styles for the element. For example, if you have made your text a Heading 1, the Element styles menu will only show Heading custom styles.

![0e6719a0-apply-a-custom-style.png](https://acquia.widen.net/content/b636662a-0e39-4436-8335-fd1abfa13b37/web/0e6719a0-apply-a-custom-style.png)

Applying custom styles and colors inline to content in CKEditor
---------------------------------------------------------------

You can apply Custom styles and colors inline within your content in CKEditor. You might want to do this to apply a style or a color to a word in the middle of a sentence. When you apply a style inline, it wraps the word in a <span> element and applies a class to the span.

To add a Custom style inline:

### Step 1 - Create a custom style or color

To apply a Custom style or color inline within CKEditor, first create your Custom style or color and make sure the **Make available in WYSIWYG editor** is ticked. Find more information on [Creating custom styles](/drupal-starter-kits/add-ons/site-studio/creating-custom-styles "Creating custom styles") and [Creating your color palette](/drupal-starter-kits/add-ons/site-studio/creating-your-color-palette "Creating your color palette").

![c4e02587-make-style-available.png](https://acquia.widen.net/content/40d11c59-5fbc-45ff-a019-19ea1dd32ac1/web/c4e02587-make-style-available.png)

![e9e21e6f-make-color-available.png](https://acquia.widen.net/content/03f488cc-171b-4087-a18b-8351a9871693/web/e9e21e6f-make-color-available.png)

### Step 2 - Apply a custom style or color inline within CKEditor

1.  Navigate to a component or template with a Layout canvas
2.  Drag a **WYSIWYG element** onto the Layout canvas
3.  Double click on the **WYSIWYG element** to open its settings
4.  Select the text to apply your custom style or color to
5.  Click on the **Inline styles** menu and select your Custom style or color.

![4bb83858-apply-inline-style.png](https://acquia.widen.net/content/a278d570-edcf-4036-8c39-2d7804edbb2b/web/4bb83858-apply-inline-style.png)