Every element added to a website&nbsp;created the SiteDu.de builder&nbsp;has a set of basic attributes which define its style and alignment. Each of these attributes can be changed in the&nbsp;<a href="https://help.sitedu.de/articles/settings-panel-f0a2d0-bbd6c" rel="noreferrer" class="PlaygroundEditorTheme__link">Settings Panel</a>.&nbsp;&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Alignment</h2>In this section, you have the ability to adjust the size and alignment of elements. You can choose to set an element to 100% width or position it in a specific location on your website, ensuring that the element remains in place as the page is scrolled.&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Height and width</h3>You can set element's width&nbsp;and height in pixels by hand and&nbsp;see its measurements when you change the element's size using a&nbsp;computer mouse. If you want the&nbsp;element to keep proportions, select a&nbsp;lock between width and height. If you want to set dynamic&nbsp;width and height which depend on your screen resolution turn on the&nbsp;<a href="https://help.sitedu.de/articles/dynamic-elements-in-the-pro-mode-f0a2d0-6d6f6" target="_self" rel="noreferrer" class="PlaygroundEditorTheme__link">PRO mode</a>&nbsp;and set Width and Height to vw and vh&nbsp;values respectively.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_88-l9pzcoox.png" alt="" width="inherit" height="inherit">&nbsp;A Hint!If you want all the&nbsp;elements to have the same size, select them all and set width and height in the&nbsp;Settings Panel.&nbsp;&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Alignment</h3>Change the element's alignment by setting its distance in pixels from the left side&nbsp;of your website (X) and from the top of it (Y). If you would like to preciselly place elements on your website, you can set the elements&nbsp;position up to 1px.&nbsp; If you want to set dynamic&nbsp;width and height which depend on your screen resolution turn on the&nbsp;PRO mode&nbsp;and set x&nbsp;and y&nbsp;to vw and vh values respectively.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_89-l9pzceww.png" alt="" width="inherit" height="inherit">&nbsp;Keep in mind that X parameter is a distance from the left side of your&nbsp;website, not the&nbsp;builder!&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Fixed element</h3>If you tick a box next to&nbsp;"Fixed element", you will pin&nbsp;this element to a certain place on your&nbsp;website and it will always be displayed in this particular location. This feature&nbsp;comes in handy when you want the main&nbsp;menu to be always visible while scrolling the page. Users will scroll down the&nbsp;websitea and&nbsp;the&nbsp;menu will stay in the same place on the screen.&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Width 100%&nbsp;</h3>Selecting this feature makes an element&nbsp;take 100% of width over the whole&nbsp;browser tab.&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Style</h2>In this section&nbsp;you can apply the element's style parameters. <h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Background</h3>Set a background color and&nbsp;its visibiliy or make&nbsp;an image&nbsp;as a background of the element.&nbsp;As a background image you can set any picture&nbsp;from Media library. When adding an image, you will be able to configure:&nbsp;<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Repeat in&nbsp;X axis&nbsp;- image will be repeated horizontally</li><li value="2" class="PlaygroundEditorTheme__listItem">Repeat in Y axis&nbsp;- image will be repetead vertically</li><li value="3" class="PlaygroundEditorTheme__listItem">Cover- adjusts how background fits the&nbsp;element</li><li value="4" class="PlaygroundEditorTheme__listItem">Parallax&nbsp;- &nbsp;scrolling speed&nbsp; of&nbsp;graphics in relation to the rest of a website</li><li value="5" class="PlaygroundEditorTheme__listItem">Background position&nbsp;- chooses the background alignment in px or &nbsp;%</li><li value="6" class="PlaygroundEditorTheme__listItem">Background position X&nbsp;- horizontal&nbsp;background alignment</li><li value="7" class="PlaygroundEditorTheme__listItem">Background position Y&nbsp;- vertical background alignment</li></ul>&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_90-l9pzbtza.png" alt="" width="inherit" height="inherit">&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Border</h3>In this section you can set element's border -&nbsp;its color, thickness&nbsp;and shape.&nbsp;What's more, you can make element edges rounded.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_91-l9pzbtgw.png" alt="" width="inherit" height="inherit">&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Border's color, width&nbsp;and style&nbsp;</h3>Choose any border's color from the&nbsp;color palette or make it transparent.&nbsp;&nbsp;Border width is set in pixels. A Change of the border's thickness doesn't influence the element;s&nbsp;size, but its "capacity".&nbsp;&nbsp;You may set up the&nbsp;border's style in roll up menu:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">solid&nbsp;- the&nbsp;border is made of a continuous line</li><li value="2" class="PlaygroundEditorTheme__listItem">dashed&nbsp;- the&nbsp;border is made of a set of dashes&nbsp;</li><li value="3" class="PlaygroundEditorTheme__listItem">dotted&nbsp;- the&nbsp;border is made of a line&nbsp;of dots</li><li value="4" class="PlaygroundEditorTheme__listItem">double&nbsp; - the border is made of two continuous lines with a space between them</li></ul>&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Enable and disable a certain border's&nbsp;part&nbsp;</h3>Four options will help you choose&nbsp;which part of a border will&nbsp;be visible (top, bottom, left, right).&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Rounding</h3>This feature allows you to make the element's borders round. Set the roundness in pixels.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_92-l9pzbt1g.png" alt="" width="inherit" height="inherit">&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Shadow</h3>Cast a shadow on the element.&nbsp;Enable a shadow and set:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">shadow's&nbsp;alignation horizontally and vertically</li><li value="2" class="PlaygroundEditorTheme__listItem">shadow's color and transparency</li><li value="3" class="PlaygroundEditorTheme__listItem">shadow's blur</li></ul><h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Transparency</h3>In this section&nbsp;there is only one attribute&nbsp;which allows you to set element&nbsp;visibility. If you are changing the&nbsp;style of a text element, the&nbsp;text itself will also become transparent.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_93-l9pzbsjj.png" alt="" width="inherit" height="inherit">&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Element's padding</h3>Setting element's padding makes sense only for the elements with images or text. Enter measurements in pixels and draw the element from its borders. <h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Rotation</h3>This functionality allows you to rotate elements on a website. You would need to select an element&nbsp;and set a&nbsp;rotation parameter.<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_94-l9pzbs2n.png" alt="" width="inherit" height="inherit"><h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Filters</h3>In this section you can add filters to your elements. You would need to select an element&nbsp;and set an Filters.<img src="https://help.webwave.me/lib/dkwr2z/2024-02-05_10-31-ls8qgxar.png" alt="" width="inherit" height="inherit"><h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Color overlay</h3>This functionality allows you to add color overlay to elements <img src="https://help.webwave.me/lib/dkwr2z/Screenshot_96-l9pzbr0v.png" alt="" width="inherit" height="inherit">

There are many ways to style the elements within your SiteDu.de builder

Every element added to a website created the SiteDu.de builder has a set of basic attributes which define its style and alignment. Each of these attributes can be changed in the[Settings Panel](https://help.sitedu.de/articles/settings-panel-f0a2d0-bbd6c).

## Alignment

In this section, you have the ability to adjust the size and alignment of elements. You can choose to set an element to 100% width or position it in a specific location on your website, ensuring that the element remains in place as the page is scrolled.

### Height and width

You can set element's width and height in pixels by hand and see its measurements when you change the element's size using a computer mouse. If you want the element to keep proportions, select a lock between width and height. If you want to set dynamic width and height which depend on your screen resolution turn on the[PRO mode](https://help.sitedu.de/articles/dynamic-elements-in-the-pro-mode-f0a2d0-6d6f6) and set Width and Height to vw and vh values respectively.

![](https://help.webwave.me/lib/dkwr2z/Screenshot_88-l9pzcoox.png)

A Hint!

If you want all the elements to have the same size, select them all and set width and height in the Settings Panel.

### Alignment

Change the element's alignment by setting its distance in pixels from the left side of your website (X) and from the top of it (Y). If you would like to preciselly place elements on your website, you can set the elements position up to 1px. If you want to set dynamic width and height which depend on your screen resolution turn on the PRO mode and set x and y to vw and vh values respectively.

![](https://help.webwave.me/lib/dkwr2z/Screenshot_89-l9pzceww.png)

Keep in mind that X parameter is a distance from the left side of your website, not the builder!

### Fixed element

If you tick a box next to "Fixed element", you will pin this element to a certain place on your website and it will always be displayed in this particular location. This feature comes in handy when you want the main menu to be always visible while scrolling the page. Users will scroll down the websitea and the menu will stay in the same place on the screen.

### Width 100%

Selecting this feature makes an element take 100% of width over the whole browser tab.

## Style

In this section you can apply the element's style parameters.

### Background

Set a background color and its visibiliy or make an image as a background of the element.

As a background image you can set any picture from Media library. When adding an image, you will be able to configure:

* ****Repeat in X axis**** - image will be repeated horizontally
* ****Repeat in Y axis**** - image will be repetead vertically
* ****Cover****\- adjusts how background fits the element
* ****Parallax**** - scrolling speed of graphics in relation to the rest of a website
* ****Background position**** - chooses the background alignment in px or %
* ****Background position X****\- horizontal background alignment
* ****Background position Y**** - vertical background alignment

![](https://help.webwave.me/lib/dkwr2z/Screenshot_90-l9pzbtza.png)

### Border

In this section you can set element's border - its color, thickness and shape. What's more, you can make element edges rounded.

![](https://help.webwave.me/lib/dkwr2z/Screenshot_91-l9pzbtgw.png)

### Border's color, width and style

Choose any border's color from the color palette or make it transparent.

Border width is set in pixels. A Change of the border's thickness doesn't influence the element;s size, but its "capacity".

You may set up the border's style in roll up menu:

* ****solid**** - the border is made of a continuous line
* ****dashed**** - the border is made of a set of dashes
* ****dotted**** - the border is made of a line of dots
* ****double**** - the border is made of two continuous lines with a space between them

### Enable and disable a certain border's part

Four options will help you choose which part of a border will be visible (top, bottom, left, right).

### Rounding

This feature allows you to make the element's borders round. Set the roundness in pixels.

![](https://help.webwave.me/lib/dkwr2z/Screenshot_92-l9pzbt1g.png)

### Shadow

Cast a shadow on the element.

Enable a shadow and set:

* shadow's alignation horizontally and vertically
* shadow's color and transparency
* shadow's blur

### Transparency

In this section there is only one attribute which allows you to set element visibility. If you are changing the style of a text element, the text itself will also become transparent.

![](https://help.webwave.me/lib/dkwr2z/Screenshot_93-l9pzbsjj.png)

### Element's padding

Setting element's padding makes sense only for the elements with images or text. Enter measurements in pixels and draw the element from its borders.

### Rotation

This functionality allows you to rotate elements on a website. You would need to select an element and set a rotation parameter.

![](https://help.webwave.me/lib/dkwr2z/Screenshot_94-l9pzbs2n.png)

### Filters

In this section you can add filters to your elements. You would need to select an element and set an Filters.

![](https://help.webwave.me/lib/dkwr2z/2024-02-05_10-31-ls8qgxar.png)

### Color overlay

This functionality allows you to add color overlay to elements

![](https://help.webwave.me/lib/dkwr2z/Screenshot_96-l9pzbr0v.png)

Every element added to a website&nbsp;created the SiteDu.de builder&nbsp;has a set of basic attributes which define its style and alignment. Each of these attributes can be changed in the&nbsp;<a href="https://help.sitedu.de/articles/settings-panel-f0a2d0-bbd6c" rel="noreferrer" class="PlaygroundEditorTheme__link">Settings Panel</a>.&nbsp;&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Alignment</h2>In this section, you have the ability to adjust the size and alignment of elements. You can choose to set an element to 100% width or position it in a specific location on your website, ensuring that the element remains in place as the page is scrolled.&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Height and width</h3>You can set element's width&nbsp;and height in pixels by hand and&nbsp;see its measurements when you change the element's size using a&nbsp;computer mouse. If you want the&nbsp;element to keep proportions, select a&nbsp;lock between width and height. If you want to set dynamic&nbsp;width and height which depend on your screen resolution turn on the&nbsp;<a href="https://help.webwave.me/pro-panel---elements%27-alignment-and-size" target="_self" class="PlaygroundEditorTheme__link">PRO mode</a>&nbsp;and set Width and Height to vw and vh&nbsp;values respectively.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_88-l9pzcoox.png" alt="" width="inherit" height="inherit">&nbsp;A Hint!If you want all the&nbsp;elements to have the same size, select them all and set width and height in the&nbsp;Settings Panel.&nbsp;&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Alignment</h3>Change the element's alignment by setting its distance in pixels from the left side&nbsp;of your website (X) and from the top of it (Y). If you would like to preciselly place elements on your website, you can set the elements&nbsp;position up to 1px.&nbsp; If you want to set dynamic&nbsp;width and height which depend on your screen resolution turn on the&nbsp;<a href="https://help.webwave.me/pro-panel---elements%27-alignment-and-size" target="_self" class="PlaygroundEditorTheme__link">PRO mode</a>&nbsp;and set x&nbsp;and y&nbsp;to vw and vh values respectively.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_89-l9pzceww.png" alt="" width="inherit" height="inherit">&nbsp;Keep in mind that X parameter is a distance from the left side of your&nbsp;website, not the&nbsp;builder!&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Fixed element</h3>If you tick a box next to&nbsp;"Fixed element", you will pin&nbsp;this element to a certain place on your&nbsp;website and it will always be displayed in this particular location. This feature&nbsp;comes in handy when you want the main&nbsp;menu to be always visible while scrolling the page. Users will scroll down the&nbsp;websitea and&nbsp;the&nbsp;menu will stay in the same place on the screen.&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Width 100%&nbsp;</h3>Selecting this feature makes an element&nbsp;take 100% of width over the whole&nbsp;browser tab.&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Style</h2>In this section&nbsp;you can apply the element's style parameters. <h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Background</h3>Set a background color and&nbsp;its visibiliy or make&nbsp;an image&nbsp;as a background of the element.&nbsp;As a background image you can set any picture&nbsp;from Media library. When adding an image, you will be able to configure:&nbsp;<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Repeat in&nbsp;X axis&nbsp;- image will be repeated horizontally</li><li value="2" class="PlaygroundEditorTheme__listItem">Repeat in Y axis&nbsp;- image will be repetead vertically</li><li value="3" class="PlaygroundEditorTheme__listItem">Cover- adjusts how background fits the&nbsp;element</li><li value="4" class="PlaygroundEditorTheme__listItem">Parallax&nbsp;- &nbsp;scrolling speed&nbsp; of&nbsp;graphics in relation to the rest of a website</li><li value="5" class="PlaygroundEditorTheme__listItem">Background position&nbsp;- chooses the background alignment in px or &nbsp;%</li><li value="6" class="PlaygroundEditorTheme__listItem">Background position X&nbsp;- horizontal&nbsp;background alignment</li><li value="7" class="PlaygroundEditorTheme__listItem">Background position Y&nbsp;- vertical background alignment</li></ul>&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_90-l9pzbtza.png" alt="" width="inherit" height="inherit">&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Border</h3>In this section you can set element's border -&nbsp;its color, thickness&nbsp;and shape.&nbsp;What's more, you can make element edges rounded.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_91-l9pzbtgw.png" alt="" width="inherit" height="inherit">&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Border's color, width&nbsp;and style&nbsp;</h3>Choose any border's color from the&nbsp;color palette or make it transparent.&nbsp;&nbsp;Border width is set in pixels. A Change of the border's thickness doesn't influence the element;s&nbsp;size, but its "capacity".&nbsp;&nbsp;You may set up the&nbsp;border's style in roll up menu:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">solid&nbsp;- the&nbsp;border is made of a continuous line</li><li value="2" class="PlaygroundEditorTheme__listItem">dashed&nbsp;- the&nbsp;border is made of a set of dashes&nbsp;</li><li value="3" class="PlaygroundEditorTheme__listItem">dotted&nbsp;- the&nbsp;border is made of a line&nbsp;of dots</li><li value="4" class="PlaygroundEditorTheme__listItem">double&nbsp; - the border is made of two continuous lines with a space between them</li></ul>&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Enable and disable a certain border's&nbsp;part&nbsp;</h3>Four options will help you choose&nbsp;which part of a border will&nbsp;be visible (top, bottom, left, right).&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Rounding</h3>This feature allows you to make the element's borders round. Set the roundness in pixels.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_92-l9pzbt1g.png" alt="" width="inherit" height="inherit">&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Shadow</h3>Cast a shadow on the element.&nbsp;Enable a shadow and set:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">shadow's&nbsp;alignation horizontally and vertically</li><li value="2" class="PlaygroundEditorTheme__listItem">shadow's color and transparency</li><li value="3" class="PlaygroundEditorTheme__listItem">shadow's blur</li></ul><h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Transparency</h3>In this section&nbsp;there is only one attribute&nbsp;which allows you to set element&nbsp;visibility. If you are changing the&nbsp;style of a text element, the&nbsp;text itself will also become transparent.&nbsp;<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_93-l9pzbsjj.png" alt="" width="inherit" height="inherit">&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Element's padding</h3>Setting element's padding makes sense only for the elements with images or text. Enter measurements in pixels and draw the element from its borders. <h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Rotation</h3>This functionality allows you to rotate elements on a website. You would need to select an element&nbsp;and set a&nbsp;rotation parameter.<img src="https://help.webwave.me/lib/dkwr2z/Screenshot_94-l9pzbs2n.png" alt="" width="inherit" height="inherit"><h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Filters</h3>In this section you can add filters to your elements. You would need to select an element&nbsp;and set an Filters.<img src="https://help.webwave.me/lib/dkwr2z/2024-02-05_10-31-ls8qgxar.png" alt="" width="inherit" height="inherit"><h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Color overlay</h3>This functionality allows you to add color overlay to elements <img src="https://help.webwave.me/lib/dkwr2z/Screenshot_96-l9pzbr0v.png" alt="" width="inherit" height="inherit">

How to style an element

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

Was this article helpful?