How to add an image to a custom page?

To add an image to a custom page on your Springly website, open the page in edit mode from Website > Menus and pages, drop an Image block onto the editing grid, choose the file from your computer, then save. The image appears immediately on the public version of your site.

Prerequisite: you must have already created the custom page on which you want to add the image (see the article "Create a custom page").

This article covers the following topics:

• How do I access the custom page editor?
• How do I add an image block to the custom page?
• How do I customize the image block on the custom page?
• How do I optimize your images before adding them to the custom page?

How do I access the custom page editor?

Go to the page you want to work on from the Website app.

To do so, follow these steps:

1. Go to the Website > Menus and pages app;
2. on the custom page (recognizable by the icon) you want to edit, hover over the three horizontal dots ;
3. then click Edit page.

You are now on the page, in edit mode.

If you are logged in as an administrator and are viewing your site in preview mode, click the Edit page button at the top of any page to go directly to the edit menu.

How do I add an image block to the custom page?

To add an image to your page, take the Image block and drop it onto the editing grid. To learn how to drop a block, see the article Add a block to a custom page.

Once the block is placed on the grid, a file selection window opens. Choose the image you want to add, already saved on your computer.

The image then loads into the block.

After the image loads, you can perform several actions:

• reduce or increase the height and/or width of your block;
• or adjust the area of the image visible to the user. To do this, click the block once, then double-click the image inside the frame and drag it while holding down the mouse button.

How do I customize the image block on a custom page?

Editing options appear at the top of the left-hand menu (if they don't appear, make sure the block is selected — click it if not):

• Delete the block;
• Choose a background - You can select the background color;
• Choose a border - You can add a border and adjust its thickness using the slider that appears. You can also change the border color;
• Round the corners of the block containing the image;
• Zoom in or out on the image by moving the slider that appears when you click Zoom;
• Add a link to the image that will open either on the current page or in a new tab. See the article Add a link to an image;
• Adjust the outer margins of your block.

After each change, click Save at the top left of the editing page. Changes are immediately visible on the public version of your website.

How do I optimize images before adding them to a custom page?

• compress your images before uploading them to speed up page loading;
• use good-quality but lightweight images (around 200–300 KB);
• add alt text or a clear caption for accessibility.

Going further:

• Add or edit a photo gallery
• Add an image to an article
• Add a background to a custom page