# CMS elements
In this section of the documentation you will find all the **ThemeWare® CMS elements** that you can add to CMS blocks.
## ThemeWare® CMS elements
ThemeWare® provides you with an extensive and growing selection of CMS elements to customise your shop. The ThemeWare® CMS elements are available in the **Pro Edition** from version 0.5.0.
More elements are already in the pipeline and will follow soon. Be curious!
{% hint style="success" %}
**Tip**: If you have further ideas or wishes for existing or new blocks, please send us your [suggestions for improvement](https://service.themeware.design/en/feature-request) via our Service Portal.
{% endhint %}
{% hint style="warning" %}
**Important**: CMS elements are unfortunately not currently possible in the Shopware Cloud! The ThemeWare® Cloud Edition therefore does not currently contain any CMS elements.
{% endhint %}
***
## Add ThemeWare® CMS element
To be able to place a CMS element, you need a suitable CMS block in your Shopping Experience. You can then assign a CMS element to this CMS block. You can find out more about this in the section [cms-blocks](https://docs.themeware.design/additional-features/cms-extensions/cms-blocks "mention").
***
## Replace ThemeWare® CMS element
1. Move the mouse over the CMS block
2. Click on the  "Replace" icon (1)
3. The pop-up "Select element" opens
4. Select the desired CMS element (2)
Add or replace CMS element
CMS element selection
***
## Configure ThemeWare® CMS element
1. Click on the corresponding CMS block to activate the "edit mode"
2. Hover the mouse over the desired CMS element
3. Click on the  "gear" icon (1) to configure the CMS element
4. The "Element Settings" pop-up will open (2)
5. Make the desired changes
6. Save your changes
Configure or edit CMS element
CMS element settings
{% hint style="success" %}
**Tip**: Make sure that all mandatory fields "\*" are filled in, otherwise you will not be able to save the Shopping Experience. ThemeWare® shows you all mandatory fields with a small blue asterisk behind the field name.
{% endhint %}
{% hint style="info" %}
**Note**: With Shopware 6.5, an **HTML sanitizer** has been implemented. This sanitizer improves security, reliability and usability of the editor by removing unsafe HTML code.
It also sanitizes styles and attributes for consistent and correct code rendering regardless of platform and browser. (see [HTML sanitizer](https://knowledge.themeware.design/knowledge-base/profi-knowledge/html-sanitizer))
{% endhint %}
***
## General information
Many CMS elements from ThemeWare® have a similar structure. They consist of different "layers".
The bottom layer is often the image or background image (1). A "Coloured overlay" (2) can often be placed on top of this. Another layer above this is the "Content overlay" (3). This is the actual content, i.e. the text or labelling of the element.
There are also similarities in the configuration of CMS elements. Below you will find settings that can be found in many CMS elements:
***
### SEO & Pagespeed settings
In many CMS elements, you will find the "SEO & Pagespeed" tab. Here you can define the HTML tag (p, h1, h2, ...) of headlines and use it to optimise the HTML hierarchy of your Shopping Experiences.
{% hint style="success" %}
**Tip**: You can define the "alt text" and the "title" attribute of images in Shopware 6 in the media manager.
{% endhint %}
#### Pagespeed
In the "Pagespeed" section, you have the option to configure "Lazy loading" for images.
**eager** – Instructs the browser to prioritise the loading of the image. This should be used for images "above the fold".
**lazy** – Instructs the browser not to load the image until the user scrolls to it. This should be used for images "below the fold".
***
### Advanced Mode
Some CMS elements have an "**Advanced Mode**". This can be activated via a toggle in the element configuration and reveals additional configuration fields that are hidden in the standard mode.
Depending on the element, these may include:
* **Padding** (inner spacing) of the element
* **Border radius** of the element
{% hint style="info" %}
**Note**: The additional fields in Advanced Mode are intended for users who want more control over the appearance of a CMS element.
{% endhint %}
***
### Advanced settings
In almost every CMS element you will find the "Advanced" tab. Here you can configure CSS classes and use expert settings.
#### CSS classes
You can select each HTML element in a CMS element using the appropriate CSS classes. However, if you want to use your own CSS classes, you can insert them in the "Advanced" tab.
In the section "CSS classes", you can add your own CSS classes to various components of a CMS element. Separate multiple CSS classes with a space (blank).
#### Expert settings
In some CMS elements, you will find the "**Expert settings**" section in the "Advanced" tab.
These settings are **intended for experts** who are very familiar with CMS blocks, CMS elements and the Bootstrap grid system!
{% hint style="info" %}
**Note**: You can find more information on how to use these in the ThemeWare® Knowledge Base in the "[Profi knowledge](https://knowledge.themeware.design/knowledge-base/profi-knowledge/expert-settings-in-cms-elements)" section.
{% endhint %}
***
## Style CMS element individually
You can style a specific CMS element individually by assigning it a custom CSS class in the element settings and defining the desired styles in your stylesheet or theme configuration.
Additionally, you can use the automatically generated element ID – especially for CMS elements where assigning a custom CSS class is not possible. This ID is included as a `data-cms-element-id` attribute in the HTML structure of the storefront:
<div class="col-12" data-cms-element-id="019762d3f5ac74cd97043411f86aec36">
<div class="cms-element-twt-modern-teaser element ...">
...
**To target this element via CSS**, use an attribute selector like this:
```css
[data-cms-element-id="019762d3f5ac74cd97043411f86aec36"] {
/* Custom styles here */
}
```
{% hint style="info" %}
**Note:** For **ThemeWare® CMS elements**, you can also find the automatically generated element ID directly in the **element’s configuration** under the **"Advanced"** tab. This allows you to avoid manually inspecting the HTML markup in the storefront.
{% endhint %}
***
## Multilingual
If you want to configure an alternative language in a CMS element, you can simply change the language in the top right corner of the editor of the corresponding Shopping Experience.
Shopping Experience: Switch language
***
## Further information
Further information and basics about "Shopware 6 Shopping Experiences" and "CMS elements" can be found in the ThemeWare® Knowledge Base:
{% embed url="" %}
ThemeWare® Knowledge Base
{% endembed %}
