User Guide: Avatar Block

Created on 12 February, 2025 • User guide • 35 views • 3 minutes read

User Guide: Avatar Block in Microweb.me

The Avatar block in Microweb.me allows you to add a personalized profile image to your Microweb. It is useful for displaying a brand identity, a professional photo, a community avatar, or any representative graphic element.

In this guide, we will explain each option available in the Avatar block settings and how to use it properly.

📌 What is the Avatar Block for?

The Avatar block is designed to display a representative image of a person, company, or community on a Microweb. It can be used to:

Personalize a Microweb with a profile image.
Add a logo or visual identity.
Create an attractive visual element on a page.
Link an image to an external URL.

🖼️ Initial Screen of the Avatar Block

When the user clicks on the Avatar button, a screen appears with the following options:

Image: Allows you to select and upload an image from your device.
Supported Formats: .jpg, .jpeg, .png, .svg, .gif, .webp.
Maximum Size: 5 MB.
Size: Allows you to choose the avatar size (Example: 75x75px).
Border Radius: Defines the avatar's shape. It can be square, round, or rounded. See recommendations at the end of the article.
Save: Button to confirm the changes and apply the configuration.

This screen is the first step in configuring and personalizing the avatar image in Microweb. After adding the block, you can edit all button settings and customize it extensively.

⚙️ Avatar Block Settings

1. Image

Allows you to upload an image to use as an avatar.
Supported formats: .jpg, .jpeg, .png, .svg, .gif, .webp.
Maximum size: 5 MB.

2. Delete File

Option to remove the current image and upload a new one.

3. Alt Text

Text that describes the image for accessibility and SEO.
Recommended to improve search engine indexing and accessibility for visually impaired users.

4. Size

Allows selecting the image size in pixels.
Default options: 125x125px and other adjustable sizes.

5. Fit

Cover: The image is adjusted to fill the available space.
Content: The image is displayed in its original size within the container.
Fill: The image completely fits the container, even if distorted.

6. Destination URL

Allows you to add a link to the image.
When a user clicks on the avatar, they will be redirected to the configured URL.

7. Open in a New Tab

If enabled, the destination URL will open in a new browser tab.

8. Border Settings

Border Width: Defines the thickness of the image border.
Border Color: Allows you to select the border color.
Border Radius:Square: Keeps the corners at right angles.Round: Turns the image into a circle or curved edges.Rounded Edges: Softens the image corners.
Square: Keeps the corners at right angles.
Round: Turns the image into a circle or curved edges.
Rounded Edges: Softens the image corners. Clicking on the border color will bring up the color and transparency palette. You can also use the HEX code to choose a specific color from your brand manual.

9. Shadow Settings

X/Y Offset: Moves the shadow horizontally or vertically.
Blur: Adjusts the intensity of the shadow blur.
Spread: Controls the shadow spread.
Shadow Color: Allows selecting the shadow color applied to the avatar. Clicking on the shadow color will bring up the color and transparency palette. You can also use the HEX code to choose a specific color from your brand manual.

10. Display Rules

Allows defining who can see the avatar based on:Date and Time: Schedule when it should be displayed.Location: Filter by continent, country, or city.Devices: Display only on desktop, tablet, or mobile.Operating System: Filter by iOS, Android, Windows, etc.Browser: Restrict to Chrome, Firefox, Safari, Edge, etc.Browser Language: Display the avatar only to users with a specific language.
Date and Time: Schedule when it should be displayed.
Location: Filter by continent, country, or city.
Devices: Display only on desktop, tablet, or mobile.
Operating System: Filter by iOS, Android, Windows, etc.
Browser: Restrict to Chrome, Firefox, Safari, Edge, etc.
Browser Language: Display the avatar only to users with a specific language.

✅ Conclusion

The Avatar block is an excellent tool for personalizing and enhancing the visual identity of a Microweb. With its multiple configurations, you can adapt it to different needs and optimize the visitor experience.

If you want to learn more about customization on Microweb.me, explore other blocks and their advanced settings. 🚀

🔹 Recommendations

Use images with a 1:1 aspect ratio, such as 500x500 pixels.
Ensure that images do not exceed 1 MB in size to improve the loading speed of the Microweb.
Use tools like Canva or Compressor.io to reduce file size without losing quality.

0 of 0 ratings