How to add an image to a page
In this article, you will learn the step-by-step process for adding image elements to your pages within the SystemeScale builder and how to upload and manage your image files.
To get started, you will need:
- A standard SystemeScale account.
- A published page in edit mode.
General Process for Adding an Image
1
Drag and Drop the Element
Log into your SystemeScale workspace and open your page editor. In the left-hand panel, navigate to the Media section, locate the Image element, and drag it onto the canvas wherever you want it to appear.
2
Access Image Settings
Click directly on the empty image element you just placed to select it. In the sidebar that appears on the left, click the Settings icon to display the configuration panel.
🖼️
2
Annotation 1: Left Blocks Panel. Annotation 2: Gear icon displayed when the image element is selected in the canvas.
Uploading and Managing Images
Once you have the settings panel open, you must upload or select an image file to display.
3
Open File Popup
In the left sidebar settings panel, locate the Image file property. Click the Upload (cloud) icon next to the file input to open the specialized management popup window.
4
Choose the Upload Method
Within the popup modal, you have two options:
- Upload Tab: Select this tab to browse and add a completely new image file directly from your computer.
- Your Images Tab: Select this tab to choose from a grid of files that have been previously uploaded to your account library.
Annotation 3: Library upload icon. Annotation 4: Upload tab selection. Annotation 5: Global images tab selection. Annotation 6: Optimization tool. Annotation 7: Insert button.
⚙️
Page Performance Optimization
In the library popup window, you can check the box to Optimize uploaded images (6). When active, SystemeScale automatically compresses your incoming files to drastically reduce their technical footprint. This optimization loop is critical for improving page loading speeds across all device types, with no noticeable loss in global visual quality.
5
Execute Insertion Loop
Once you have successfully uploaded a new file or highlighted an existing image inside the library tab, complete the loop by clicking the Insert button (7) located at the bottom right.
Making the Image Clickable
A common operational requirement is to turn your static image into a dynamic, clickable asset that routes traffic to an external URL or distinct funnel step.
6
Define the Click Action
Click directly on the image inside your canvas to display its settings panel on the left. Locate the Action when image clicked property dropdown menu. Open the functional dropdown and select Open URL (8).
7
Input the Target Address
A new input field labeled Link will appear immediately below the dropdown. Paste your target destination address into this Link field (9).
Annotation 8: Action dropdown loop in settings. Annotation 9: Standard input box for the target URL.
Was this article helpful?