Image
Introduction
Welcome to the Image component documentation! As part of the page builder in App Platform, the Image component allows you to integrate visual content into your web applications. This component is essential for enhancing the visual appeal, conveying information visually, and\or supporting the textual content within your applications.
Why we developed it
The Image component provides a straightforward and effective way to include images in your applications, which can be crucial for branding, user engagement, and instructional purposes. Images help to break up text, make pages more engaging, and can be used to illustrate concepts or guide users more intuitively than text alone.
What it could be used for
Showcasing product features or service details.
Enhancing blog posts or articles with relevant visuals.
Creating a more engaging user interface with graphical elements.
Displaying logos or other branding materials to strengthen identity.
Example \ Use Case
An MSP might use the Image component to enhance a tutorial page on their client portal. By incorporating screenshots and diagrams, they can visually guide clients through the steps to set up a VPN or configure email settings on various devices. This not only makes the instructions clearer and more accessible but also reduces the cognitive load on users, potentially decreasing the number of support calls and increasing client satisfaction with the self-service options provided.
Adding an Image to your page
Access the Canvas: Open the page you're working on in edit mode, in App Platform.
Drag-and-Drop: Locate the 'Image' component in the component library, then drag and drop it onto the canvas.
Configuring the Image component
Select the component: Click on the added 'Image' component to select it.
Properties Panel: On the properties panel, you'll find various configurable options:
Source URL: Specify the URL of the image.
Link: Specify the URL to which the image redirects when clicked.
Open link as new tab: Toggle to open the Link URL in a new tab.
In-line styles: Define custom CSS properties for the component.
Live Preview: The canvas provides a live preview of your configured component(s) once you've made changes.
If you have any questions or need assistance, feel free to reach out to our support team. - Happy designing! 🎨🚀
Last updated
