The Sitedu.de Website Builder offers an advanced Web Creation System that allows users to have full control and flexibility in their website creation process. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_advanced-view-sitedu.de.1714749377761.png?alt=media" alt="The Advanced View of the editor allows plenty of editing possibilities" width="inherit" height="inherit"> The Builder offers a multitude of editing possibilities, allowing you to customize every aspect of your website to your liking. However, with great power comes great responsibility. Using all functions adds more complexity to the website creation process and thus involves the risk of breaking layouts if not handled correctly. Therefore, we advise you to use the Builder with care. Make sure you understand the impact of the changes you're making, and always keep the overall design and functionality of your website in mind. <blockquote class="PlaygroundEditorTheme__quote" dir="ltr">In most cases, it is recommended to simply exchange text and images and keep all design settings.</blockquote> If you're unsure about any feature or need assistance, don't hesitate to look through this Knowledge Base. If you don’t find what you require, reach out to our team. We're here to help you create the best possible website for your needs. <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Enable/disable view of advanced blocks</h2>Having too many options on the screen can be overwhelming at times. That's why the advanced builder is not enabled by default. However, even when it's activated, you can remove the editing panels from your view to fully concentrate on your website. You can either hover over the screen borders or keep the editing blocks fixed in your view. You can also rearrange the panels on your screen to place them wherever it suits you. <div data-lexical-embed-block="<div style=&quot;position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(51.09%, 95vh);&quot;><iframe src=&quot;https://komododecks.com/embed/recordings/5Vng74Dw780DbMLTl230?onlyRecording=1&quot; allowfullscreen=&quot;&quot; mozallowfullscreen=&quot;&quot; webkitallowfullscreen=&quot;&quot; width=&quot;100%&quot; height=&quot;100%&quot; frameborder=&quot;0&quot; style=&quot;border: 0px; position: absolute; inset: 0px;&quot;></iframe></div>"><div style="position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(51.09%, 95vh);"><iframe src="https://komododecks.com/embed/recordings/5Vng74Dw780DbMLTl230?onlyRecording=1" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" width="100%" height="100%" frameborder="0" style="border: 0px; position: absolute; inset: 0px;"></iframe></div></div> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Editing blocks in the SiteDu.de Builder</h2>First, let's take a look on the right side next to your website preview. Here, you'll now find different panels. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Settings Panel</h3>The Settings Panel panel allows you to adjust different settings for the whole website, a single page, or an individual element. The available options depend on the selected element.<img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_settings-panel-sitedude-builder.1715151442624.jpg?alt=media" alt="" width="inherit" height="inherit"> <a href="https://help.sitedu.de/articles/settings-panel-f0a2d0-bbd6c" rel="noreferrer" class="PlaygroundEditorTheme__link">Check out this article to learn more about the Settings Panel.</a> <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Layers Panel</h3>In the Sitedu.de Website Builder's Layers panel, you can arrange the order of your elements by moving them up or down in the list. This determines which elements are in front or behind others on your website. Elements higher in the Layers panel will cover elements lower in the list. <img src="https://help.webwave.me/lib/dkwr2z/LP2-lsx9um0s.gif" alt="" width="inherit" height="inherit"> <a href="https://help.sitedu.de/articles/the-layers-panel-f0a2d0-edbc5" rel="noreferrer" class="PlaygroundEditorTheme__link">Find out more about the Layers Panel here.</a>&nbsp; <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Compositions</h3>Compositions are used to easily prepare a page in the SiteDu.de builder. We can also add our elements to the compositions, which we can then use when editing another page or the current page. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_image.1715160210424.png?alt=media" alt="image.png" width="inherit" height="inherit"> <a href="https://help.sitedu.de/articles/compositions-f0a2d0-2e73e" rel="noreferrer" class="PlaygroundEditorTheme__link">Here you can find out more on how to use compositions.</a> <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Elements Panel</h3>The Elements Panel provides a wide range of useful elements that can be effortlessly incorporated directly into your website. These elements are designed to enhance the functionality and visual appeal of your site, making it easier for you to create a professional and engaging online presence. Whether you need buttons, forms, or other interactive features, the Elements Panel offers a convenient way to customize and improve your website's design. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_elements-panel.1715160504017.jpg?alt=media" alt="" width="inherit" height="inherit"> <a href="https://help.sitedu.de/articles/add-elements-f0a2d0-03e1a" rel="noreferrer" class="PlaygroundEditorTheme__link">Check out this Knowledge base article if you want to find out more about how to add elements.</a>

Get to know the Advanced SiteDu.de Builder

The Sitedu.de Website Builder offers an advanced Web Creation System that allows users to have full control and flexibility in their website creation process.

![The Advanced View of the editor allows plenty of editing possibilities](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_advanced-view-sitedu.de.1714749377761.png?alt=media)

The Builder offers a multitude of editing possibilities, allowing you to customize every aspect of your website to your liking. However, with great power comes great responsibility. Using all functions adds more complexity to the website creation process and thus involves the risk of breaking layouts if not handled correctly. Therefore, we advise you to use the Builder with care. Make sure you understand the impact of the changes you're making, and always keep the overall design and functionality of your website in mind.

> In most cases, it is recommended to simply exchange text and images and keep all design settings.

If you're unsure about any feature or need assistance, don't hesitate to look through this Knowledge Base. If you don’t find what you require, reach out to our team. We're here to help you create the best possible website for your needs.

## Enable/disable view of advanced blocks

Having too many options on the screen can be overwhelming at times. That's why the advanced builder is not enabled by default. However, even when it's activated, you can remove the editing panels from your view to fully concentrate on your website. You can either hover over the screen borders or keep the editing blocks fixed in your view. You can also rearrange the panels on your screen to place them wherever it suits you.

">

## Editing blocks in the SiteDu.de Builder

First, let's take a look on the right side next to your website preview. Here, you'll now find different panels.

### Settings Panel

The Settings Panel panel allows you to adjust different settings for the whole website, a single page, or an individual element. The available options depend on the selected element.

![](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_settings-panel-sitedude-builder.1715151442624.jpg?alt=media)

[****Check out this article to learn more about the Settings Panel.****](https://help.sitedu.de/articles/settings-panel-f0a2d0-bbd6c)

### Layers Panel

In the Sitedu.de Website Builder's Layers panel, you can arrange the order of your elements by moving them up or down in the list. This determines which elements are in front or behind others on your website. Elements higher in the Layers panel will cover elements lower in the list.

![](https://help.webwave.me/lib/dkwr2z/LP2-lsx9um0s.gif)

[****Find out more about the Layers Panel here.****](https://help.sitedu.de/articles/the-layers-panel-f0a2d0-edbc5)

### Compositions

Compositions are used to easily prepare a page in the SiteDu.de builder. We can also add our elements to the compositions, which we can then use when editing another page or the current page.

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

[****Here you can find out more on how to use compositions.****](https://help.sitedu.de/articles/compositions-f0a2d0-2e73e)

### Elements Panel

The Elements Panel provides a wide range of useful elements that can be effortlessly incorporated directly into your website. These elements are designed to enhance the functionality and visual appeal of your site, making it easier for you to create a professional and engaging online presence. Whether you need buttons, forms, or other interactive features, the Elements Panel offers a convenient way to customize and improve your website's design.

![](https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_elements-panel.1715160504017.jpg?alt=media)

[Check out this Knowledge base article if you want to find out more about how to add elements.](https://help.sitedu.de/articles/add-elements-f0a2d0-03e1a)

The Advanced Builder

The Sitedu.de Website Builder offers an Advanced Builder for users who wish to have more control and flexibility in their website creation process. This feature is not active by default and needs to be manually activated by the SiteDu.de team. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_advanced-view-sitedu.de.1714749377761.png?alt=media" alt="The Advanced View of the editor allows plenty of editing possibilities" width="inherit" height="inherit"> The Advanced Builder offers a multitude of editing possibilities, allowing you to customize every aspect of your website to your liking. However, with great power comes great responsibility. The Advanced Builder adds more complexity to the website creation process and thus involves the risk of breaking layouts if not handled correctly. Therefore, we advise you to use the Advanced Builder with care. Make sure you understand the impact of the changes you're making, and always keep the overall design and functionality of your website in mind. If you're unsure about any feature or need assistance with the Advanced Builder, don't hesitate to look through this Knowledge Base. If you don’t find what you require, reach out to our team. We're here to help you create the best possible website for your needs. <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Enable/disable view of advanced blocks</h2>Having too many options on the screen can be overwhelming at times. That's why the advanced builder is not enabled by default. However, even when it's activated, you can remove the editing panels from your view to fully concentrate on your website. You can either hover over the screen borders or keep the editing blocks fixed in your view. You can also rearrange the panels on your screen to place them wherever it suits you. <div data-lexical-embed-block="<div style=&quot;position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(51.09%, 95vh);&quot;><iframe src=&quot;https://komododecks.com/embed/recordings/5Vng74Dw780DbMLTl230?onlyRecording=1&quot; allowfullscreen=&quot;&quot; mozallowfullscreen=&quot;&quot; webkitallowfullscreen=&quot;&quot; width=&quot;100%&quot; height=&quot;100%&quot; frameborder=&quot;0&quot; style=&quot;border: 0px; position: absolute; inset: 0px;&quot;></iframe></div>"><div style="position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(51.09%, 95vh);"><iframe src="https://komododecks.com/embed/recordings/5Vng74Dw780DbMLTl230?onlyRecording=1" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" width="100%" height="100%" frameborder="0" style="border: 0px; position: absolute; inset: 0px;"></iframe></div></div> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Editing blocks in the Advanced Builder</h2>First, let's take a look on the right side next to your website preview. Here, you'll now find different panels. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Settings Panel</h3>The Settings Panel panel allows you to adjust different settings for the whole website, a single page, or an individual element. The available options depend on the selected element.<img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_settings-panel-sitedude-builder.1715151442624.jpg?alt=media" alt="" width="inherit" height="inherit"> <a href="https://textdude.helpcenter.guide/articles/settings-panel-f0a2d0-bbd6c" rel="noreferrer" class="PlaygroundEditorTheme__link">Check out this article to learn more about the Settings Panel.</a> <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Layers Panel</h3>In the Sitedu.de Website Builder's Layers panel, you can arrange the order of your elements by moving them up or down in the list. This determines which elements are in front or behind others on your website. Elements higher in the Layers panel will cover elements lower in the list. <img src="https://help.webwave.me/lib/dkwr2z/LP2-lsx9um0s.gif" alt="" width="inherit" height="inherit"> <a href="https://help.sitedu.de/articles/the-layers-panel-f0a2d0-edbc5" rel="noreferrer" class="PlaygroundEditorTheme__link">Find out more about the Layers Panel here.</a>&nbsp; <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Compositions</h3>Compositions are used to easily prepare a page in the SiteDu.de builder. We can also add our elements to the compositions, which we can then use when editing another page or the current page. How to use a composition.1. Go to edit your page.2. Under the elements' menu on the right side of the builder, click the composition icon. <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_08-56-lhk7ln0i.png" alt="" width="inherit" height="inherit"> 3. Select the composition categories that interest you - by clicking on it. <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_08-57-lhk7mtv8.png" alt="" width="inherit" height="inherit">&nbsp;4. Click/drag the compositions that interest you. <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_08-57_1-lhk7noak.png" alt="" width="inherit" height="inherit">&nbsp;5. Your composition has been correctly added to the page! &nbsp;How to add your own composition.Once you add your own composition, you will be able to use it on any page you design in the WebWave wizard.<ol class="PlaygroundEditorTheme__ol1"><li value="1" class="PlaygroundEditorTheme__listItem">Go to edit your page.</li><li value="2" class="PlaygroundEditorTheme__listItem">Under the elements menu on the right side of the builder, click the composition icon. <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_08-56-lhk7ln0i.png" alt="" width="inherit" height="inherit"> </li><li value="3" class="PlaygroundEditorTheme__listItem">Click the&nbsp;"My compositions"&nbsp;tab <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_09-11-lhk808el.png" alt="" width="inherit" height="inherit"> &nbsp;</li><li value="4" class="PlaygroundEditorTheme__listItem">Select the elements/groups you want to add to your compositions, then click&nbsp;"Add". <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_09-21-lhk8dpdc.png" alt="" width="inherit" height="inherit"> </li><li value="5" class="PlaygroundEditorTheme__listItem">To add your own composition to the page. Go to your compositions and drag/click it. &nbsp;</li></ol>Description of the functionalities present in the Composition <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_09-29-lhk9507u.png" alt="" width="inherit" height="inherit">1.&nbsp;"Edit"This button allows you to edit the composition category name, composition name, thumbnail, and remove the composition from the composition list.1.1 Edit composition category:Edit the category namea. Click the three dots next to the name, then click&nbsp;"Edit". <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_09-45-lhk9801o.png" alt="" width="inherit" height="inherit"> &nbsp;b. Then change the name of the composition, approve this change with the&nbsp;"Save"&nbsp;button. <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_09-47-lhk9axlp.png" alt="" width="inherit" height="inherit"> &nbsp;Deleting composition categories: a. Click the 3 dots, then click&nbsp;"Delete". <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_09-49-lhk9fn55.png" alt="" width="inherit" height="inherit">Attention!&nbsp;There must be more than 1 category for this function to show. &nbsp;Changing the order of composition categories: Hold the composition category name and move it up/down (in edit mode). &nbsp;1.2&nbsp;Edit composition: <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_09-58-lhk9o2ff.png" alt="" width="inherit" height="inherit"> "Delete"&nbsp;- A button that allows you to delete a composition. "Change thumbnail"&nbsp;- A button that allows you to change the thumbnail of the composition, by selecting an image from the media library.&nbsp; "Change composition name"&nbsp;- A button that allows you to give your own name to the composition. &nbsp;Changing the order of compositions:Hold down the composition name and move it up/down (in edit mode). &nbsp;2. "Add Category"Add your composition tab.Enter the name of your category, then click&nbsp;"Save" <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_10-02-lhk9toxt.png" alt="" width="inherit" height="inherit"> 3. "Reload"Refreshes the entire list of compositions. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Add Elements</h3>The Elements Panel provides a wide range of useful elements that can be effortlessly incorporated directly into your website. These elements are designed to enhance the functionality and visual appeal of your site, making it easier for you to create a professional and engaging online presence. Whether you need buttons, forms, or other interactive features, the Elements Panel offers a convenient way to customize and improve your website's design. <a href="https://help.sitedu.de/articles/add-elements-f0a2d0-03e1a" rel="noreferrer" class="PlaygroundEditorTheme__link">Check out this Knowledge base article if you want to find out more about how to add elements.</a>

The Sitedu.de Website Builder offers an Advanced Builder for users who wish to have more control and flexibility in their website creation process. This feature is not active by default and needs to be manually activated by the SiteDu.de team. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_advanced-view-sitedu.de.1714749377761.png?alt=media" alt="The Advanced View of the editor allows plenty of editing possibilities" width="inherit" height="inherit"> The Advanced Builder offers a multitude of editing possibilities, allowing you to customize every aspect of your website to your liking. However, with great power comes great responsibility. The Advanced Builder adds more complexity to the website creation process and thus involves the risk of breaking layouts if not handled correctly. Therefore, we advise you to use the Advanced Builder with care. Make sure you understand the impact of the changes you're making, and always keep the overall design and functionality of your website in mind. If you're unsure about any feature or need assistance with the Advanced Builder, don't hesitate to look through this Knowledge Base. If you don’t find what you require, reach out to our team. We're here to help you create the best possible website for your needs. <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Enable/disable view of advanced blocks</h2>Having too many options on the screen can be overwhelming at times. That's why the advanced builder is not enabled by default. However, even when it's activated, you can remove the editing panels from your view to fully concentrate on your website. You can either hover over the screen borders or keep the editing blocks fixed in your view. You can also rearrange the panels on your screen to place them wherever it suits you. <div data-lexical-embed-block="<div style=&quot;position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(51.09%, 95vh);&quot;><iframe src=&quot;https://komododecks.com/embed/recordings/5Vng74Dw780DbMLTl230?onlyRecording=1&quot; allowfullscreen=&quot;&quot; mozallowfullscreen=&quot;&quot; webkitallowfullscreen=&quot;&quot; width=&quot;100%&quot; height=&quot;100%&quot; frameborder=&quot;0&quot; style=&quot;border: 0px; position: absolute; inset: 0px;&quot;></iframe></div>"><div style="position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(51.09%, 95vh);"><iframe src="https://komododecks.com/embed/recordings/5Vng74Dw780DbMLTl230?onlyRecording=1" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" width="100%" height="100%" frameborder="0" style="border: 0px; position: absolute; inset: 0px;"></iframe></div></div> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Editing blocks in the Advanced Builder</h2>First, let's take a look on the right side next to your website preview. Here, you'll now find different panels. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Settings Panel</h3>The Settings Panel panel allows you to adjust different settings for the whole website, a single page, or an individual element. The available options depend on the selected element.<img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_settings-panel-sitedude-builder.1715151442624.jpg?alt=media" alt="" width="inherit" height="inherit"> <a href="https://textdude.helpcenter.guide/articles/settings-panel-f0a2d0-bbd6c" rel="noreferrer" class="PlaygroundEditorTheme__link">Check out this article to learn more about the Settings Panel.</a> <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Layers Panel</h3>In the Sitedu.de Website Builder's Layers panel, you can arrange the order of your elements by moving them up or down in the list. This determines which elements are in front or behind others on your website. Elements higher in the Layers panel will cover elements lower in the list. <img src="https://help.webwave.me/lib/dkwr2z/LP2-lsx9um0s.gif" alt="" width="inherit" height="inherit"> <a href="https://help.sitedu.de/articles/the-layers-panel-f0a2d0-edbc5" rel="noreferrer" class="PlaygroundEditorTheme__link">Find out more about the Layers Panel here.</a>&nbsp; <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Compositions</h3>Compositions are used to easily prepare a page in the SiteDu.de builder. We can also add our elements to the compositions, which we can then use when editing another page or the current page. How to use a composition.1. Go to edit your page.2. Under the elements' menu on the right side of the builder, click the composition icon. <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_08-56-lhk7ln0i.png" alt="" width="inherit" height="inherit"> 3. Select the composition categories that interest you - by clicking on it. <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_08-57-lhk7mtv8.png" alt="" width="inherit" height="inherit">&nbsp;4. Click/drag the compositions that interest you. <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_08-57_1-lhk7noak.png" alt="" width="inherit" height="inherit">&nbsp;5. Your composition has been correctly added to the page! &nbsp;How to add your own composition.Once you add your own composition, you will be able to use it on any page you design in the WebWave wizard.<ol class="PlaygroundEditorTheme__ol1"><li value="1" class="PlaygroundEditorTheme__listItem">Go to edit your page.</li><li value="2" class="PlaygroundEditorTheme__listItem">Under the elements menu on the right side of the builder, click the composition icon. <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_08-56-lhk7ln0i.png" alt="" width="inherit" height="inherit"> </li><li value="3" class="PlaygroundEditorTheme__listItem">Click the&nbsp;"My compositions"&nbsp;tab <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_09-11-lhk808el.png" alt="" width="inherit" height="inherit"> &nbsp;</li><li value="4" class="PlaygroundEditorTheme__listItem">Select the elements/groups you want to add to your compositions, then click&nbsp;"Add". <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_09-21-lhk8dpdc.png" alt="" width="inherit" height="inherit"> </li><li value="5" class="PlaygroundEditorTheme__listItem">To add your own composition to the page. Go to your compositions and drag/click it. &nbsp;</li></ol>Description of the functionalities present in the Composition <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_09-29-lhk9507u.png" alt="" width="inherit" height="inherit">1.&nbsp;"Edit"This button allows you to edit the composition category name, composition name, thumbnail, and remove the composition from the composition list.1.1 Edit composition category:Edit the category namea. Click the three dots next to the name, then click&nbsp;"Edit". <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_09-45-lhk9801o.png" alt="" width="inherit" height="inherit"> &nbsp;b. Then change the name of the composition, approve this change with the&nbsp;"Save"&nbsp;button. <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_09-47-lhk9axlp.png" alt="" width="inherit" height="inherit"> &nbsp;Deleting composition categories: a. Click the 3 dots, then click&nbsp;"Delete". <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_09-49-lhk9fn55.png" alt="" width="inherit" height="inherit">Attention!&nbsp;There must be more than 1 category for this function to show. &nbsp;Changing the order of composition categories: Hold the composition category name and move it up/down (in edit mode). &nbsp;1.2&nbsp;Edit composition: <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_09-58-lhk9o2ff.png" alt="" width="inherit" height="inherit"> "Delete"&nbsp;- A button that allows you to delete a composition. "Change thumbnail"&nbsp;- A button that allows you to change the thumbnail of the composition, by selecting an image from the media library.&nbsp; "Change composition name"&nbsp;- A button that allows you to give your own name to the composition. &nbsp;Changing the order of compositions:Hold down the composition name and move it up/down (in edit mode). &nbsp;2. "Add Category"Add your composition tab.Enter the name of your category, then click&nbsp;"Save" <img src="https://help.webwave.me/lib/dkwr2z/2023-05-12_10-02-lhk9toxt.png" alt="" width="inherit" height="inherit"> 3. "Reload"Refreshes the entire list of compositions. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Add Elements</h3>The Elements Panel provides a wide range of useful elements that can be effortlessly incorporated directly into your website. These elements are designed to enhance the functionality and visual appeal of your site, making it easier for you to create a professional and engaging online presence. Whether you need buttons, forms, or other interactive features, the Elements Panel offers a convenient way to customize and improve your website's design. <a href="https://help.sitedu.de/articles/add-elements-f0a2d0-03e1a" rel="noreferrer" class="PlaygroundEditorTheme__link">Check out this Knowledge base article if you want to find out more about how to add elements.</a>

The Sitedu.de Website Builder offers an Advanced Builder for users who wish to have more control and flexibility in their website creation process. This feature is not active by default and needs to be manually activated by the SiteDu.de team. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_advanced-view-sitedu.de.1714749377761.png?alt=media" alt="The Advanced View of the editor allows plenty of editing possibilities" width="inherit" height="inherit"> The Advanced Builder offers a multitude of editing possibilities, allowing you to customize every aspect of your website to your liking. However, with great power comes great responsibility. The Advanced Builder adds more complexity to the website creation process and thus involves the risk of breaking layouts if not handled correctly. Therefore, we advise you to use the Advanced Builder with care. Make sure you understand the impact of the changes you're making, and always keep the overall design and functionality of your website in mind. If you're unsure about any feature or need assistance with the Advanced Builder, don't hesitate to look through this Knowledge Base. If you don’t find what you require, reach out to our team. We're here to help you create the best possible website for your needs. <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Enable/disable view of advanced blocks</h2>Having too many options on the screen can be overwhelming at times. That's why the advanced builder is not enabled by default. However, even when it's activated, you can remove the editing panels from your view to fully concentrate on your website. You can either hover over the screen borders or keep the editing blocks fixed in your view. You can also rearrange the panels on your screen to place them wherever it suits you. <div data-lexical-embed-block="<div style=&quot;position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(51.09%, 95vh);&quot;><iframe src=&quot;https://komododecks.com/embed/recordings/5Vng74Dw780DbMLTl230?onlyRecording=1&quot; allowfullscreen=&quot;&quot; mozallowfullscreen=&quot;&quot; webkitallowfullscreen=&quot;&quot; width=&quot;100%&quot; height=&quot;100%&quot; frameborder=&quot;0&quot; style=&quot;border: 0px; position: absolute; inset: 0px;&quot;></iframe></div>"><div style="position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(51.09%, 95vh);"><iframe src="https://komododecks.com/embed/recordings/5Vng74Dw780DbMLTl230?onlyRecording=1" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" width="100%" height="100%" frameborder="0" style="border: 0px; position: absolute; inset: 0px;"></iframe></div></div> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Editing blocks in the Advanced Builder</h2>First, let's take a look on the right side next to your website preview. Here, you'll now find different panels. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Settings Panel</h3>The Settings Panel panel allows you to adjust different settings for the whole website, a single page, or an individual element. The available options depend on the selected element.<img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_settings-panel-sitedude-builder.1715151442624.jpg?alt=media" alt="" width="inherit" height="inherit"> <a href="https://textdude.helpcenter.guide/articles/settings-panel-f0a2d0-bbd6c" rel="noreferrer" class="PlaygroundEditorTheme__link">Check out this article to learn more about the Settings Panel.</a> <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Layers Panel</h3>In the Sitedu.de Website Builder's Layers panel, you can arrange the order of your elements by moving them up or down in the list. This determines which elements are in front or behind others on your website. Elements higher in the Layers panel will cover elements lower in the list. <img src="https://help.webwave.me/lib/dkwr2z/LP2-lsx9um0s.gif" alt="" width="inherit" height="inherit"> <a href="https://help.sitedu.de/articles/the-layers-panel-f0a2d0-edbc5" rel="noreferrer" class="PlaygroundEditorTheme__link">Find out more about the Layers Panel here.</a>&nbsp; <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Compositions</h3>Compositions are used to easily prepare a page in the SiteDu.de builder. We can also add our elements to the compositions, which we can then use when editing another page or the current page. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_image.1715160210424.png?alt=media" alt="image.png" width="inherit" height="inherit"> <a href="https://help.sitedu.de/articles/compositions-f0a2d0-2e73e" rel="noreferrer" class="PlaygroundEditorTheme__link">Here you can find out more on how to use compositions.</a> <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Elements Panel</h3>The Elements Panel provides a wide range of useful elements that can be effortlessly incorporated directly into your website. These elements are designed to enhance the functionality and visual appeal of your site, making it easier for you to create a professional and engaging online presence. Whether you need buttons, forms, or other interactive features, the Elements Panel offers a convenient way to customize and improve your website's design. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_elements-panel.1715160504017.jpg?alt=media" alt="" width="inherit" height="inherit"> <a href="https://help.sitedu.de/articles/add-elements-f0a2d0-03e1a" rel="noreferrer" class="PlaygroundEditorTheme__link">Check out this Knowledge base article if you want to find out more about how to add elements.</a>

The Sitedu.de Website Builder offers an Advanced Builder for users who wish to have more control and flexibility in their website creation process. This feature is not active by default and needs to be manually activated by the SiteDu.de team. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_advanced-view-sitedu.de.1714749377761.png?alt=media" alt="The Advanced View of the editor allows plenty of editing possibilities" width="inherit" height="inherit"> The Advanced Builder offers a multitude of editing possibilities, allowing you to customize every aspect of your website to your liking. However, with great power comes great responsibility. The Advanced Builder adds more complexity to the website creation process and thus involves the risk of breaking layouts if not handled correctly. Therefore, we advise you to use the Advanced Builder with care. Make sure you understand the impact of the changes you're making, and always keep the overall design and functionality of your website in mind. If you're unsure about any feature or need assistance with the Advanced Builder, don't hesitate to look through this Knowledge Base. If you don’t find what you require, reach out to our team. We're here to help you create the best possible website for your needs. <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Enable/disable view of advanced blocks</h2>Having too many options on the screen can be overwhelming at times. That's why the advanced builder is not enabled by default. However, even when it's activated, you can remove the editing panels from your view to fully concentrate on your website. You can either hover over the screen borders or keep the editing blocks fixed in your view. You can also rearrange the panels on your screen to place them wherever it suits you. <div data-lexical-embed-block="<div style=&quot;position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(51.09%, 95vh);&quot;><iframe src=&quot;https://komododecks.com/embed/recordings/5Vng74Dw780DbMLTl230?onlyRecording=1&quot; allowfullscreen=&quot;&quot; mozallowfullscreen=&quot;&quot; webkitallowfullscreen=&quot;&quot; width=&quot;100%&quot; height=&quot;100%&quot; frameborder=&quot;0&quot; style=&quot;border: 0px; position: absolute; inset: 0px;&quot;></iframe></div>"><div style="position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(51.09%, 95vh);"><iframe src="https://komododecks.com/embed/recordings/5Vng74Dw780DbMLTl230?onlyRecording=1" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" width="100%" height="100%" frameborder="0" style="border: 0px; position: absolute; inset: 0px;"></iframe></div></div> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Editing blocks in the Advanced Builder</h2>First, let's take a look on the right side next to your website preview. Here, you'll now find different panels. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Settings Panel</h3>The Settings Panel panel allows you to adjust different settings for the whole website, a single page, or an individual element. The available options depend on the selected element.<img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_settings-panel-sitedude-builder.1715151442624.jpg?alt=media" alt="" width="inherit" height="inherit"> <a href="https://textdude.helpcenter.guide/articles/settings-panel-f0a2d0-bbd6c" rel="noreferrer" class="PlaygroundEditorTheme__link">Check out this article to learn more about the Settings Panel.</a> <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Layers Panel</h3>In the Sitedu.de Website Builder's Layers panel, you can arrange the order of your elements by moving them up or down in the list. This determines which elements are in front or behind others on your website. Elements higher in the Layers panel will cover elements lower in the list. <img src="https://help.webwave.me/lib/dkwr2z/LP2-lsx9um0s.gif" alt="" width="inherit" height="inherit"> <a href="https://help.sitedu.de/articles/the-layers-panel-f0a2d0-edbc5" rel="noreferrer" class="PlaygroundEditorTheme__link">Find out more about the Layers Panel here.</a>&nbsp; <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Compositions</h3>Compositions are used to easily prepare a page in the SiteDu.de builder. We can also add our elements to the compositions, which we can then use when editing another page or the current page. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_image.1715160210424.png?alt=media" alt="image.png" width="inherit" height="inherit"> <a href="https://help.sitedu.de/articles/compositions-f0a2d0-2e73e" rel="noreferrer" class="PlaygroundEditorTheme__link">Here you can find out more on how to use compositions.</a> <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Elements Panel</h3>The Elements Panel provides a wide range of useful elements that can be effortlessly incorporated directly into your website. These elements are designed to enhance the functionality and visual appeal of your site, making it easier for you to create a professional and engaging online presence. Whether you need buttons, forms, or other interactive features, the Elements Panel offers a convenient way to customize and improve your website's design. <img src="https://firebasestorage.googleapis.com/v0/b/click-connector-staging.appspot.com/o/f0a2d0_elements-panel.1715160504017.jpg?alt=media" alt="" width="inherit" height="inherit"> <a href="https://help.sitedu.de/articles/add-elements-f0a2d0-03e1a" rel="noreferrer" class="PlaygroundEditorTheme__link">Check out this Knowledge base article if you want to find out more about how to add elements.</a>

Using the SiteDu.de Builder

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

Was this article helpful?