How to add links and images

Assuming you have read the introduction to pages, let's jump straight into it.

Add link

Select some text or an image, and click the link button (marked with number 4 in the image below).

/guide/PageEditorToolbarButtons.png

The link dialog opens. Use the Link List menu to create a link to another page, or manually enter a URL address in the Link URL field to link to a custom address.
A link can optionally be turned into an action button using the Class option. Use the Designer to style your Action buttons afterwards.
 
/guide/PageEditorLinkDialog.png
 

Insert image

Inserting an image is similar to adding a link. However, before you proceed, you will need to upload your image(s) first. Next, place the text cursor where you want the image to appear and click the image button (marked with number 5 in the first image at the top of this page). This will open the image dialog shown below.
 
/guide/PageEditorImageDialog.png

Select the image you want from the Image List menu. A preview is displayed in the Preview area at the bottom of the dialog.


Dimensions and responsive images

Before inserting the image, click the Appearance tab at the top of the dialog - the dialog will then switch to the view below, from where you can change the size of the image.

/guide/PageEditorImageDialog2.png

To make the image responsive, which is obviously important on mobile devices to make the image scale to the size of the screen, remove the fixed width and height from the Dimensions section. If the image is a bit too large, you may set a width to reduce the size - but leave the height empty. Sitemagic CMS will then treat the width as a "maximum width". The height will automatically adjust, meaning the image will keep its aspect ratio.
Get Sitemagic CMS