The Image Element.

The Image Element places an image on the page.

Webydo Support avatar
Written by Webydo Support
Updated over a week ago

Drag and drop the image element from the Elements Panel, on the left. 

Upload

Click the Upload button (located in the Properties Panel) or double-click the element and select the image from the pop-up window.

After uploading an image, the button changes to Change. Use it (or double-click the element) to change the image.

Zoom, Reset

If you want to use just a portion of the image:

1.Click the Zoom button to open a slider.

2.Move the slider to the + side to enlarge the image.

3.To fine-tune the portion that you want to show, press and hold the mouse button inside the zoom frame and drag it to position.

At runtime, only the portion of the image that falls within the frame appears.

Click the Reset button to cancel the change.

Title

The text you type here appears as a tooltip when the mouse pointer hovers above the image at runtime.

Alt(ernative)

The text you type here appears is helpful for the visitors who have turned off the image display function on their browsers, and it makes your site accessible to visitors with disabilities. The text you enter hereappears on the image placeholder at runtime. In addition, it is read out to visitors who use assistive technology to read web pages.

Link To

Links the image to another page.

Select Page to link this image to another page on your site. In the drop-down list that appears below it, select the page. When clicked on the live site, it opens that page.

Select Link to link this image to a page on another site. In the box that opens now,enter the address of the external page.

Link to popup

This will enable you to make the image enlargeable by clicking on it.

1.Upload the image in the full, large size2.Make the image smaller, Use the zoom option to adjust the thumbnail3. Link to "pop-up"4.publish to test and click on the image to see the effect;

Text caption

This enables you to add a textbox and animate it so that it appears when hovering over the image.

1. When selecting the image check the "text caption" checkbox- the text box will appear

2. To edit the animation- click on the text box again and you'll be able to edit the properties on the right

Did this answer your question?