This section takes you through adding and editing avatars within Appeggio. The avatar part is typically used to display circular user profile pictures, but can also display icons and text.
The avatar part is often used to display circular user profile pictures. For example:
Adding an avatar
To add an avatar, select the part where you’d like to add your avatar and press ‘+’ on the toolbar. You can either scroll down the list and find ‘avatar’, or key in ‘avatar’ within the filter as shown:
You will see that a blank avatar has been added as follows:
Adding an image to your avatar
To add your desired image, click on ‘+’ in the avatar toolbar:
A default random image will be placed within the avatar.
To change the image to one of your choosing, click on the image toolbar to select or modify the image. If the image has been uploaded into the Appeggio assets file, then choose ‘select’. If you need to upload the image from your device, select ‘modify’, and then select ‘upload’:
Select the image you want from your device.
You’ll now see your image in the avatar space.
Sizing the avatar
To size the avatar, go to the avatar toolbar (not the image toolbar). Here you can choose the height and the width of the avatar. In this case, I will give the avatar a height of 100, and a width of 100:
Keep resizing until you achieve the desired size.
You can also use the ‘size’ option within the avatar dropdown menu to specify the size. In this instance, choosing a size of 100 has the same effect as setting both the height and the width to 100.
If you want the avatar to be square rather than round, select the ‘tile’ option in the avatar dropdown menu.
If you want the tile-style avatar to be rounded on the edges rather than square, to the avatar menu and select ‘rounded’ for the different options.
A 'tile' avatar with a rounding of large will produce a result like this:
And a 'tile' avatar with X-large rounding applied will produce a result like this:
Using an icon or text in the avatar
An avatar doesn’t always have to be an image - it could be an icon or text. To achieve this, once you have added the avatar part, instead of adding an image to it, add either an icon or card text using the add function on the avatar toolbar.
Here’s an example of adding an icon. On the avatar menu, select an icon. Go to the icon menu and select your chosen icon, then size it. Now, go back to the avatar menu:
You will notice that you’ll only see an icon. There is no circle around it. That is because the circle background is currently transparent. Click on the color icon within the avatar toolbar to choose the color.
You can either choose a template color, or mix your own color.
If you want to then change the color of the icon itself, go to the icon toolbar, and select the color:
Some examples of what your avatars can look like:
Please note that you cannot hyperlink an avatar or an icon, only a button.