WebWave's logo

WebWave drag and drop website builder lets you create unique websites. You can build your website from scratch by starting with a blank page, or choose various website templates from our free collection and modify them according to your needs. With WebWave website builder, you have a complete website design and hosting system at your fingertips.

This website was created with WebWave.

Find us online




Log in

Sign up

Webmaster's panel

Categories.

Didn't find a solution to your problem? Contact us on live online chat or ask on Facebook group.

 

Missing any feature? Share your ideas with us.

16 August 2019

Icon

Icons become more and more popular in website design. They can be used for example as decorations or buttons leading to social media. In WebWave - responsive white label website builder - users can use a few hundreds of icons with SIL OFL 1.1. license which means they can use them for free for both personal and commercial purposes.  

 

Add an icon

Icon settings

Image settings

Image description and SEO

Change an image

 

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. 

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: 

 

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.
  • Scrolling speed -  Turn on Parallax Effect.

 

 

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. 

 

More about positioning read here.