Icons become more and more popular in website design.&nbsp;They can&nbsp;be used for example as decorations or buttons leading to social media. In&nbsp;your SiteDu.de builder, you can use a few hundreds of icons with the SIL OFL 1.1. license&nbsp;which means they can use them for free for both personal and commercial purposes.&nbsp;&nbsp;&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Add an&nbsp;icon</h2>An icon can be added through the menu on the left side of the builder. Select smiley face emoji, drag and drop it on a website.&nbsp; <img src="https://help.webwave.me/lib/dkwr2z/ICON-l9my3041.png" alt="" width="inherit" height="inherit"> When you add a new Icon to a website, you will see a list of icons. Pick an icon of your choice, change the color in the preview window on the right and press the green button Select.&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Icon settings</h2>After adding an icon, click on it and in the Settings Panel set its attributes:&nbsp; <img src="https://help.webwave.me/lib/dkwr2z/ICON2-l9my2zep.png" alt="" width="inherit" height="inherit">&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Image settings</h2>In&nbsp;"Image settings"&nbsp;you can set:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Color&nbsp;- Set an icon color.</li><li value="2" class="PlaygroundEditorTheme__listItem">Crop type&nbsp;:</li><li value="3" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Cover (default)&nbsp;- Image is proportionally rescaled&nbsp;and fully fits&nbsp;the frame. Top, bottom or side image boarders can get cropped.&nbsp;&nbsp;</li><li value="2" class="PlaygroundEditorTheme__listItem">Contain&nbsp;- A whole image is proportionally rescaled. There might be left some blank space in the frame.</li><li value="3" class="PlaygroundEditorTheme__listItem">Stretch&nbsp;- Image is rescaled but not proportionally. It fully fits the frame.</li><li value="4" class="PlaygroundEditorTheme__listItem">Original size- Image is not rescaled - it is in the frame in the original size.&nbsp;</li></ul></li><li value="3" class="PlaygroundEditorTheme__listItem">No image compression- Turn off automaticall image compression.</li><li value="4" class="PlaygroundEditorTheme__listItem">Ken Burns Effect&nbsp;- Turn on<a href="https://help.sitedu.de/articles/the-ken-burns-effect-f0a2d0-3acd7" rel="noreferrer" class="PlaygroundEditorTheme__link">&nbsp;Ken Burns Effect</a>.</li><li value="5" class="PlaygroundEditorTheme__listItem">Scrolling speed -&nbsp;&nbsp;Turn on&nbsp;<a href="https://help.sitedu.de/articles/the-parallax-effect-f0a2d0-5c779" rel="noreferrer" class="PlaygroundEditorTheme__link">Parallax Effect</a>.</li></ul>&nbsp;&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Click action (link)</h3>After choosing&nbsp;"Click action"&nbsp;you will be able to make a linked button out of the icon and transfer a&nbsp;user to a website of your choice.&nbsp;This effect is often used for example to link the company logo to its website. You can set a&nbsp;link to: <ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">None (default)&nbsp;- nothing happens after clicking an image.</li><li value="2" class="PlaygroundEditorTheme__listItem">Webpage&nbsp;-&nbsp;opens your website's subpage</li><li value="3" class="PlaygroundEditorTheme__listItem">Go to newspage&nbsp;-&nbsp;opens a&nbsp;certain article.</li><li value="4" class="PlaygroundEditorTheme__listItem">Go to object on page&nbsp;-&nbsp;website will be dynamically scrolled down to a certain element on the subpage.&nbsp;</li><li value="5" class="PlaygroundEditorTheme__listItem">Website address&nbsp;- opens a&nbsp;website with a certain site address.</li><li value="6" class="PlaygroundEditorTheme__listItem">Perform interaction&nbsp;- show or hide elements.</li><li value="7" class="PlaygroundEditorTheme__listItem">More:</li><li value="8" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Open URL address&nbsp;-&nbsp;opens a&nbsp;website with a&nbsp;certain URL address.</li><li value="2" class="PlaygroundEditorTheme__listItem">Call phone number&nbsp;- runs default calling&nbsp;application like Skype on the user's computer or telephone dial on a&nbsp;mobile phone&nbsp;and automatically dials the&nbsp;number of your choice.</li><li value="3" class="PlaygroundEditorTheme__listItem">Send e-mail&nbsp;- opens default mailbox application like Mailbox (Windows 10) on the user's computer or Gmail on users mobile phone and automatically puts e-mail address of your choice.</li><li value="4" class="PlaygroundEditorTheme__listItem">Open a file from media library&nbsp;- opens a file form media library.</li></ul></li></ul><h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;"> Change icon</h2>To change the icon, click on the element and select cogwheel icon "More actions"&nbsp;and "Edit content" or enter the Settings Panel and click on "Edit content". Pick a new icon and confirm your choice with a green button Select.&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" style="text-align: start;">&nbsp;</h2><ul class="PlaygroundEditorTheme__ul"></ul><h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Image description and SEO</h2>In image description you can set:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Image title for SEO&nbsp;- set a title which is&nbsp;displayed when a&nbsp;mouse cursor is on the image.&nbsp;</li><li value="2" class="PlaygroundEditorTheme__listItem">SEO&nbsp;image description (ALT)&nbsp;- set a text which will appear when an&nbsp;image can't be displayed. ALT is important in website positioning.&nbsp;</li></ul>&nbsp;

Learn how to use icons on your SiteDu.de website

Icons become more and more popular in website design. They can be used for example as decorations or buttons leading to social media. In your SiteDu.de builder, you can use a few hundreds of icons with the SIL OFL 1.1. license which means they can use them for free for both personal and commercial purposes.

## Add an icon

An icon can be added through the menu on the left side of the builder. Select smiley face emoji, drag and drop it on a website.

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

When you add a new Icon to a website, you will see a list of icons. Pick an icon of your choice, change the color in the preview window on the right and press the green button Select.

## Icon settings

After adding an icon, click on it and in the Settings Panel set its attributes:

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

## Image settings

In****"Image settings"**** you can set:

* ****Color****\- Set an icon color.
* ****Crop type**** :
* * ****Cover (default)**** - Image is proportionally rescaled and fully fits the frame. Top, bottom or side image boarders can get cropped.
  * ****Contain**** - A whole image is proportionally rescaled. There might be left some blank space in the frame.
  * ****Stretch**** - Image is rescaled but not proportionally. It fully fits the frame.
  * ****Original size****\- Image is not rescaled - it is in the frame in the original size.
* ****No image compression****\- Turn off automaticall image compression.
* ****Ken Burns Effect**** - Turn on[Ken Burns Effect](https://help.sitedu.de/articles/the-ken-burns-effect-f0a2d0-3acd7).
* ****Scrolling speed -**** Turn on[Parallax Effect](https://help.sitedu.de/articles/the-parallax-effect-f0a2d0-5c779).

### Click action (link)

After choosing****"Click action"**** you will be able to make a linked button out of the icon and transfer a user to a website of your choice. This effect is often used for example to link the company logo to its website. You can set a link to:

* ****None (default)**** - nothing happens after clicking an image.
* ****Webpage****\- opens your website's subpage
* ****Go to newspage**** - opens a certain article.
* ****Go to object on page**** - website will be dynamically scrolled down to a certain element on the subpage.
* ****Website address**** - opens a website with a certain site address.
* ****Perform interaction****\- show or hide elements.
* ****More:****
* * ****Open URL address**** - opens a website with a certain URL address.
  * ****Call phone number****\- runs default calling application like Skype on the user's computer or telephone dial on a mobile phone and automatically dials the number of your choice.
  * ****Send e-mail**** - opens default mailbox application like Mailbox (Windows 10) on the user's computer or Gmail on users mobile phone and automatically puts e-mail address of your choice.
  * ****Open a file from media library**** - opens a file form media library.

## Change icon

To change the icon, click on the element and select cogwheel icon "More actions" and "Edit content" or enter the Settings Panel and click on "Edit content". Pick a new icon and confirm your choice with a green button Select.

## Image description and SEO

In image description you can set:

* ****Image title for SEO**** - set a title which is displayed when a mouse cursor is on the image.
* ****SEO image description (ALT)**** - set a text which will appear when an image can't be displayed. ALT is important in website positioning.

Icons become more and more popular in website design.&nbsp;They can&nbsp;be used for example as decorations or buttons leading to social media. In&nbsp;your SiteDu.de builder, you can use a few hundreds of icons with the SIL OFL 1.1. license&nbsp;which means they can use them for free for both personal and commercial purposes.&nbsp;&nbsp;&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Add an&nbsp;icon</h2>An icon can be added through the menu on the left side of the builder. Select smiley face emoji, drag and drop it on a website.&nbsp; <img src="https://help.webwave.me/lib/dkwr2z/ICON-l9my3041.png" alt="" width="inherit" height="inherit"> When you add a new Icon to a website, you will see a list of icons. Pick an icon of your choice, change the color in the preview window on the right and press the green button Select.&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Icon settings</h2>After adding an icon, click on it and in the Settings Panel set its attributes:&nbsp; <img src="https://help.webwave.me/lib/dkwr2z/ICON2-l9my2zep.png" alt="" width="inherit" height="inherit">&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Image settings</h2>In&nbsp;"Image settings"&nbsp;you can set:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Color&nbsp;- Set an icon color.</li><li value="2" class="PlaygroundEditorTheme__listItem">Crop type&nbsp;:</li><li value="3" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Cover (default)&nbsp;- Image is proportionally rescaled&nbsp;and fully fits&nbsp;the frame. Top, bottom or side image boarders can get cropped.&nbsp;&nbsp;</li><li value="2" class="PlaygroundEditorTheme__listItem">Contain&nbsp;- A whole image is proportionally rescaled. There might be left some blank space in the frame.</li><li value="3" class="PlaygroundEditorTheme__listItem">Stretch&nbsp;- Image is rescaled but not proportionally. It fully fits the frame.</li><li value="4" class="PlaygroundEditorTheme__listItem">Original size- Image is not rescaled - it is in the frame in the original size.&nbsp;</li></ul></li><li value="3" class="PlaygroundEditorTheme__listItem">No image compression- Turn off automaticall image compression.</li><li value="4" class="PlaygroundEditorTheme__listItem">Ken Burns Effect&nbsp;- Turn on<a href="https://help.webwave.me/ken-burns" class="PlaygroundEditorTheme__link">&nbsp;Ken Burns Effect</a>.</li><li value="5" class="PlaygroundEditorTheme__listItem">Scrolling speed -&nbsp;&nbsp;Turn on&nbsp;<a href="https://help.webwave.me/parallax" class="PlaygroundEditorTheme__link">Parallax Effect</a>.</li></ul>&nbsp;&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Click action (link)</h3>After choosing&nbsp;"Click action"&nbsp;you will be able to make a linked button out of the icon and transfer a&nbsp;user to a website of your choice.&nbsp;This effect is often used for example to link the company logo to its website. You can set a&nbsp;link to: <ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">None (default)&nbsp;- nothing happens after clicking an image.</li><li value="2" class="PlaygroundEditorTheme__listItem">Webpage&nbsp;-&nbsp;opens your website's subpage</li><li value="3" class="PlaygroundEditorTheme__listItem">Go to newspage&nbsp;-&nbsp;opens a&nbsp;certain article.</li><li value="4" class="PlaygroundEditorTheme__listItem">Go to object on page&nbsp;-&nbsp;website will be dynamically scrolled down to a certain element on the subpage.&nbsp;</li><li value="5" class="PlaygroundEditorTheme__listItem">Website address&nbsp;- opens a&nbsp;website with a certain site address.</li><li value="6" class="PlaygroundEditorTheme__listItem">Perform interaction&nbsp;- show or hide elements.</li><li value="7" class="PlaygroundEditorTheme__listItem">More:</li><li value="8" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Open URL address&nbsp;-&nbsp;opens a&nbsp;website with a&nbsp;certain URL address.</li><li value="2" class="PlaygroundEditorTheme__listItem">Call phone number&nbsp;- runs default calling&nbsp;application like Skype on the user's computer or telephone dial on a&nbsp;mobile phone&nbsp;and automatically dials the&nbsp;number of your choice.</li><li value="3" class="PlaygroundEditorTheme__listItem">Send e-mail&nbsp;- opens default mailbox application like Mailbox (Windows 10) on the user's computer or Gmail on users mobile phone and automatically puts e-mail address of your choice.</li><li value="4" class="PlaygroundEditorTheme__listItem">Open a file from media library&nbsp;- opens a file form media library.</li></ul></li></ul><h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;"> Change icon</h2>To change the icon, click on the element and select cogwheel icon "More actions"&nbsp;and "Edit content" or enter the Settings Panel and click on "Edit content". Pick a new icon and confirm your choice with a green button Select.&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" style="text-align: start;">&nbsp;</h2><ul class="PlaygroundEditorTheme__ul"></ul><h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Image description and SEO</h2>In image description you can set:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Image title for SEO&nbsp;- set a title which is&nbsp;displayed when a&nbsp;mouse cursor is on the image.&nbsp;</li><li value="2" class="PlaygroundEditorTheme__listItem">SEO&nbsp;image description (ALT)&nbsp;- set a text which will appear when an&nbsp;image can't be displayed. ALT is important in website positioning.&nbsp;</li></ul>&nbsp;More about positioning read&nbsp;<a href="https://help.webwave.me/positioning" class="PlaygroundEditorTheme__link">here</a>.

The Icon element

Icons become more and more popular in website design.&nbsp;They can&nbsp;be used for example as decorations or buttons leading to social media. In&nbsp;your SiteDu.de builder, you can use a few hundreds of icons with the SIL OFL 1.1. license&nbsp;which means they can use them for free for both personal and commercial purposes.&nbsp;&nbsp;&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Add an&nbsp;icon</h2>An icon can be added through the menu on the left side of the builder. Select smiley face emoji, drag and drop it on a website.&nbsp; <img src="https://help.webwave.me/lib/dkwr2z/ICON-l9my3041.png" alt="" width="inherit" height="inherit"> When you add a new Icon to a website, you will see a list of icons. Pick an icon of your choice, change the color in the preview window on the right and press the green button Select.&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Icon settings</h2>After adding an icon, click on it and in the Settings Panel set its attributes:&nbsp; <img src="https://help.webwave.me/lib/dkwr2z/ICON2-l9my2zep.png" alt="" width="inherit" height="inherit">&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Image settings</h2>In&nbsp;"Image settings"&nbsp;you can set:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Color&nbsp;- Set an icon color.</li><li value="2" class="PlaygroundEditorTheme__listItem">Crop type&nbsp;:</li><li value="3" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Cover (default)&nbsp;- Image is proportionally rescaled&nbsp;and fully fits&nbsp;the frame. Top, bottom or side image boarders can get cropped.&nbsp;&nbsp;</li><li value="2" class="PlaygroundEditorTheme__listItem">Contain&nbsp;- A whole image is proportionally rescaled. There might be left some blank space in the frame.</li><li value="3" class="PlaygroundEditorTheme__listItem">Stretch&nbsp;- Image is rescaled but not proportionally. It fully fits the frame.</li><li value="4" class="PlaygroundEditorTheme__listItem">Original size- Image is not rescaled - it is in the frame in the original size.&nbsp;</li></ul></li><li value="3" class="PlaygroundEditorTheme__listItem">No image compression- Turn off automaticall image compression.</li><li value="4" class="PlaygroundEditorTheme__listItem">Ken Burns Effect&nbsp;- Turn on<a href="https://help.sitedu.de/articles/the-ken-burns-effect-f0a2d0-3acd7" rel="noreferrer" class="PlaygroundEditorTheme__link">&nbsp;Ken Burns Effect</a>.</li><li value="5" class="PlaygroundEditorTheme__listItem">Scrolling speed -&nbsp;&nbsp;Turn on&nbsp;<a href="https://help.webwave.me/parallax" class="PlaygroundEditorTheme__link">Parallax Effect</a>.</li></ul>&nbsp;&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Click action (link)</h3>After choosing&nbsp;"Click action"&nbsp;you will be able to make a linked button out of the icon and transfer a&nbsp;user to a website of your choice.&nbsp;This effect is often used for example to link the company logo to its website. You can set a&nbsp;link to: <ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">None (default)&nbsp;- nothing happens after clicking an image.</li><li value="2" class="PlaygroundEditorTheme__listItem">Webpage&nbsp;-&nbsp;opens your website's subpage</li><li value="3" class="PlaygroundEditorTheme__listItem">Go to newspage&nbsp;-&nbsp;opens a&nbsp;certain article.</li><li value="4" class="PlaygroundEditorTheme__listItem">Go to object on page&nbsp;-&nbsp;website will be dynamically scrolled down to a certain element on the subpage.&nbsp;</li><li value="5" class="PlaygroundEditorTheme__listItem">Website address&nbsp;- opens a&nbsp;website with a certain site address.</li><li value="6" class="PlaygroundEditorTheme__listItem">Perform interaction&nbsp;- show or hide elements.</li><li value="7" class="PlaygroundEditorTheme__listItem">More:</li><li value="8" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Open URL address&nbsp;-&nbsp;opens a&nbsp;website with a&nbsp;certain URL address.</li><li value="2" class="PlaygroundEditorTheme__listItem">Call phone number&nbsp;- runs default calling&nbsp;application like Skype on the user's computer or telephone dial on a&nbsp;mobile phone&nbsp;and automatically dials the&nbsp;number of your choice.</li><li value="3" class="PlaygroundEditorTheme__listItem">Send e-mail&nbsp;- opens default mailbox application like Mailbox (Windows 10) on the user's computer or Gmail on users mobile phone and automatically puts e-mail address of your choice.</li><li value="4" class="PlaygroundEditorTheme__listItem">Open a file from media library&nbsp;- opens a file form media library.</li></ul></li></ul><h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;"> Change icon</h2>To change the icon, click on the element and select cogwheel icon "More actions"&nbsp;and "Edit content" or enter the Settings Panel and click on "Edit content". Pick a new icon and confirm your choice with a green button Select.&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" style="text-align: start;">&nbsp;</h2><ul class="PlaygroundEditorTheme__ul"></ul><h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Image description and SEO</h2>In image description you can set:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Image title for SEO&nbsp;- set a title which is&nbsp;displayed when a&nbsp;mouse cursor is on the image.&nbsp;</li><li value="2" class="PlaygroundEditorTheme__listItem">SEO&nbsp;image description (ALT)&nbsp;- set a text which will appear when an&nbsp;image can't be displayed. ALT is important in website positioning.&nbsp;</li></ul>&nbsp;More about positioning read&nbsp;<a href="https://help.webwave.me/positioning" class="PlaygroundEditorTheme__link">here</a>.

Icons become more and more popular in website design.&nbsp;They can&nbsp;be used for example as decorations or buttons leading to social media. In&nbsp;your SiteDu.de builder, you can use a few hundreds of icons with the SIL OFL 1.1. license&nbsp;which means they can use them for free for both personal and commercial purposes.&nbsp;&nbsp;&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Add an&nbsp;icon</h2>An icon can be added through the menu on the left side of the builder. Select smiley face emoji, drag and drop it on a website.&nbsp; <img src="https://help.webwave.me/lib/dkwr2z/ICON-l9my3041.png" alt="" width="inherit" height="inherit"> When you add a new Icon to a website, you will see a list of icons. Pick an icon of your choice, change the color in the preview window on the right and press the green button Select.&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Icon settings</h2>After adding an icon, click on it and in the Settings Panel set its attributes:&nbsp; <img src="https://help.webwave.me/lib/dkwr2z/ICON2-l9my2zep.png" alt="" width="inherit" height="inherit">&nbsp;<h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Image settings</h2>In&nbsp;"Image settings"&nbsp;you can set:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Color&nbsp;- Set an icon color.</li><li value="2" class="PlaygroundEditorTheme__listItem">Crop type&nbsp;:</li><li value="3" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Cover (default)&nbsp;- Image is proportionally rescaled&nbsp;and fully fits&nbsp;the frame. Top, bottom or side image boarders can get cropped.&nbsp;&nbsp;</li><li value="2" class="PlaygroundEditorTheme__listItem">Contain&nbsp;- A whole image is proportionally rescaled. There might be left some blank space in the frame.</li><li value="3" class="PlaygroundEditorTheme__listItem">Stretch&nbsp;- Image is rescaled but not proportionally. It fully fits the frame.</li><li value="4" class="PlaygroundEditorTheme__listItem">Original size- Image is not rescaled - it is in the frame in the original size.&nbsp;</li></ul></li><li value="3" class="PlaygroundEditorTheme__listItem">No image compression- Turn off automaticall image compression.</li><li value="4" class="PlaygroundEditorTheme__listItem">Ken Burns Effect&nbsp;- Turn on<a href="https://help.sitedu.de/articles/the-ken-burns-effect-f0a2d0-3acd7" rel="noreferrer" class="PlaygroundEditorTheme__link">&nbsp;Ken Burns Effect</a>.</li><li value="5" class="PlaygroundEditorTheme__listItem">Scrolling speed -&nbsp;&nbsp;Turn on&nbsp;<a href="https://help.sitedu.de/articles/the-parallax-effect-f0a2d0-5c779" rel="noreferrer" class="PlaygroundEditorTheme__link">Parallax Effect</a>.</li></ul>&nbsp;&nbsp;<h3 class="PlaygroundEditorTheme__h3" dir="ltr" style="text-align: start;">Click action (link)</h3>After choosing&nbsp;"Click action"&nbsp;you will be able to make a linked button out of the icon and transfer a&nbsp;user to a website of your choice.&nbsp;This effect is often used for example to link the company logo to its website. You can set a&nbsp;link to: <ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">None (default)&nbsp;- nothing happens after clicking an image.</li><li value="2" class="PlaygroundEditorTheme__listItem">Webpage&nbsp;-&nbsp;opens your website's subpage</li><li value="3" class="PlaygroundEditorTheme__listItem">Go to newspage&nbsp;-&nbsp;opens a&nbsp;certain article.</li><li value="4" class="PlaygroundEditorTheme__listItem">Go to object on page&nbsp;-&nbsp;website will be dynamically scrolled down to a certain element on the subpage.&nbsp;</li><li value="5" class="PlaygroundEditorTheme__listItem">Website address&nbsp;- opens a&nbsp;website with a certain site address.</li><li value="6" class="PlaygroundEditorTheme__listItem">Perform interaction&nbsp;- show or hide elements.</li><li value="7" class="PlaygroundEditorTheme__listItem">More:</li><li value="8" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Open URL address&nbsp;-&nbsp;opens a&nbsp;website with a&nbsp;certain URL address.</li><li value="2" class="PlaygroundEditorTheme__listItem">Call phone number&nbsp;- runs default calling&nbsp;application like Skype on the user's computer or telephone dial on a&nbsp;mobile phone&nbsp;and automatically dials the&nbsp;number of your choice.</li><li value="3" class="PlaygroundEditorTheme__listItem">Send e-mail&nbsp;- opens default mailbox application like Mailbox (Windows 10) on the user's computer or Gmail on users mobile phone and automatically puts e-mail address of your choice.</li><li value="4" class="PlaygroundEditorTheme__listItem">Open a file from media library&nbsp;- opens a file form media library.</li></ul></li></ul><h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;"> Change icon</h2>To change the icon, click on the element and select cogwheel icon "More actions"&nbsp;and "Edit content" or enter the Settings Panel and click on "Edit content". Pick a new icon and confirm your choice with a green button Select.&nbsp;&nbsp;<h2 class="PlaygroundEditorTheme__h2" style="text-align: start;">&nbsp;</h2><ul class="PlaygroundEditorTheme__ul"></ul><h2 class="PlaygroundEditorTheme__h2" dir="ltr" style="text-align: start;">Image description and SEO</h2>In image description you can set:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Image title for SEO&nbsp;- set a title which is&nbsp;displayed when a&nbsp;mouse cursor is on the image.&nbsp;</li><li value="2" class="PlaygroundEditorTheme__listItem">SEO&nbsp;image description (ALT)&nbsp;- set a text which will appear when an&nbsp;image can't be displayed. ALT is important in website positioning.&nbsp;</li></ul>&nbsp;More about positioning read&nbsp;<a href="https://help.webwave.me/positioning" class="PlaygroundEditorTheme__link">here</a>.

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

Was this article helpful?