Summary

  • Overview
  • Video Lesson
  • Add Image
  • Drag Images From Desktop
  • Paste From Clipboard
  • Expand To Background
  • Change Image
  • Image Resize
  • Image Fit
  • Image Zoom
  • Image Context Toolbar
  • Image Properties
  • Responsive Modes

Overview

You can use the Image Element to illustrate data on your website.

image-element.png

Video Lesson

See Also

More video lessons

Add Image

Add the Image Element from the Add Panel of the Quick Access Pane. You can insert the Image Element by pressing the Alt+I hotkey.

add-image.png

Image Shape Presets

You can use the Rounded and Circle Presets to inset the Image Element of the needed shape.

image-shape-presets.png

Drag Images From Desktop

You can drag images from the desktop to the Editor. After dropping, you see a dialog offering variants to convert to a Gallery, Grid Repeater, or insert separate Images.

drag-images-desktop.gif

Paste the Image From Clipboard

You can copy and paste Images from the Clipboard. The following illustrates the pasting of the copied Image from Microsoft Paint.

copy-paste-clipboard.gif

You can paste Images from the Clipboard to the Change Image dialog as previously implemented for the Logo Element.

clipboar-change-image.gif

NOTE: This feature is supported only for the Desktop Application.

Expand To Background

You can expand the inserted Image to convert it to the Image Background. You can collapse the Image Background, making it a separate Image.

expand-to-background.gif

You can also expand the Image to the Background by clicking the button in the Property Panel.

Change Image

You can change the Image by clicking on the icon on the Image's top center or the Image button on the Context Toolbar.

change-image.png

You can also change the Image by clicking the button in the Property Panel.

Search Image

Search for the required images by entering the topic keyword or phrase in the field. You can also search Google Images and parse website URLs in the Social & Web section below.

Upload Image

You can upload your images by clicking the Upload button or dropping files in the dashed Drop Files area.

Add Image By URL

Click on the Address link to enter the Image URL from the Internet.

My Images

The My Images section contains images you have already used in the project.

Stock Images

Pixabay is a free library with millions of stock images for your websites. The From Nicepage section provides exclusive stock photos, including the cut-outs on the transparent Background.

Image Resize

You can resize the Image Element in the Editor by dragging the markers. You can resize proportionally by holding the SHIFT and ALT keys to fix the current position.

resize-image.gif

Image Fit

You can enable the Fit Image option in the Property Panel to crop the selected Image Element, making it the best for your web design.

image-fit.png

Auto-Fit Image Objects

If you add an Image Object on the transparent or white Background, it fits automatically as Contain by default.

contain-images-white-bg.gif

Adding Images with the Cover Fit will have a cut-off look after the placing.

auto-fit-image-object-comparison.png

Image Zoom

You can use the Zoom operation while fitting the Image in the Background of the Box and Grid Cell. You can also modify this option in the Property Panel.

IMPORTANT: The Zoom operation is supported only for the Image Background of the Box and Grid Cell.

image-zoom.png

After you finish zooming, you can apply the change by clicking on the icon. You can reset the Zoom by clicking on the Reset icon on the Toolbar or the Round Blue icon on the Image.

Image Context Toolbar

Using the Context Toolbar, you can quickly change the Image and add a Hyperlink.

image-context-toolbar.png

Image Context Options

Click the Options icons to open the list of all available operations for the Image. The same list is available in the Right-Click Context Menu.

The list includes the Bring Forward, Send Backward, Bring To Front, and Send To Back operations for the Image Element, both in the Toolbar Options and Right-Click Menu.

image-options.png

Reset Image Proportions

You can use the Reset Proportions of the Image by clicking on the icon on the Context Toolbar.

reset-image-proportions.gif

You can also reset the Image Background for Boxes and Grid Cells.

reset-image-background-proportions.gif

Image Hyperlink

You can link the Image to a Page, Block, File, Phone, Email, Modal Popup, or Post by clicking the Hyperlink icon on the Context Toolbar.

image-hyperlink.png

Image Properties

Edit all supported Image Properties in the Property Panel.

image-properties.png

Rotate Image

You can use the Rotate property for the Image and Shape Elements allowing you to spin them by a custom angle.

rotate-icon-value.png

Image Width and Height

Enter the Width and Height values for the Image Element in the Property Panel.

image-size-margins.png

Lock Image Proportions

You can lock the Image Proportions by clicking on the Lock Icon in the Dimensions section of the Property Panel.

Image Margins

Modify the Image Element's Top, Bottom, Left, and Right Margins by entering values in the Property Panel.

Image Fit Options

You can select Fit To Background and Cover Background options for the Image Element. Additionally, you can Tile the Background of the Box Element and Grid Cell.

image-fit-options.png

NOTE: You can set the Image Fit by clicking the icons or selecting it from the drop-down list in the Property Panel.

Image Border

You can enable the Border for the Image Element by clicking on the icons in the Property Panel -> Border: No Border, Border, and choose the Custom Border sides.

Edit the Width, and pick the Theme, Additional, or add a new Color for the Image Border.

image-border.png

Image Shadow

Enable the Shadow for the Image Element by clicking on the checkbox. You can use the Shadow Presets or customize the Shadow in the Settings Tab, modifying the Positions, Blur, Spread, Transparency, and Color parameters.

image-shadow.png

Image Shade

You can colonize the Image by changing the Shade property. You can also apply the Gradient Shade and switch between the Options.

gradient-shade.png

If you expand a Shape over the Image Background, you will see the best practice dialog offering you to apply the Shade instead.

recolor-image-dialog.png

Image Shape

Edit the Image Shape making it Rounded, Circle, or Square.

image-shape.png

Image Radius

You can modify the Radius parameter for the Rounded corners of the Image Element.

image-radius.png

Image Flip And Rotate

You can flip and rotate the Image Element by clicking the corresponding icons in the Property Panel.

image-flip-rotate.gif

Image Transparency

Adjust the Image Transparency in the Property Panel, making it more or less visible. It creates a natural hover effect in web page design.

image-transparency.png

Image Hyperlink

Add the Hyperlink to the Image Element in the Property Panel to transfer visitors to a Page, Block, File, Phone, Email, Modal Popup, or Post.

image-link-property.png

Image SEO Alt

Apply SEO Alt Description to your Image to improve search results for your web page.

image-seo-alt.png

Responsive Modes

You can modify the Image Element Size, Fit, and Zoom in all supported Responsive Modes to show it best on each mobile device screen for your web design requirements.

## Summary - Overview - Video Lesson - Add Image - Drag Images From Desktop - Paste From Clipboard - Expand To Background - Change Image - Image Resize - Image Fit - Image Zoom - Image Context Toolbar - Image Properties - Responsive Modes ## Overview You can use the Image Element to illustrate data on your website. !image-element.png! ## Video Lesson ## <iframe width="600" height="320" src="https://www.youtube.com/embed/PsGki-RKy-8" title="Video Lesson: Image Element" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ### See Also [More video lessons](page:1318) ## Add Image Add the Image Element from the Add Panel of the Quick Access Pane. You can insert the Image Element by pressing the **Alt+I** hotkey. !add-image.png! ### Image Shape Presets You can use the Rounded and Circle Presets to inset the Image Element of the needed shape. !image-shape-presets.png! ### Drag Images From Desktop You can drag images from the desktop to the Editor. After dropping, you see a dialog offering variants to convert to a Gallery, Grid Repeater, or insert separate Images. !drag-images-desktop.gif! ### Paste the Image From Clipboard You can copy and paste Images from the Clipboard. The following illustrates the pasting of the copied Image from Microsoft Paint. !copy-paste-clipboard.gif! You can paste Images from the Clipboard to the Change Image dialog as previously implemented for the Logo Element. !clipboar-change-image.gif! **NOTE:** This feature is supported only for the Desktop Application. ## Expand To Background You can expand the inserted Image to convert it to the Image Background. You can collapse the Image Background, making it a separate Image. !expand-to-background.gif! You can also expand the Image to the Background by clicking the button in the Property Panel. ## Change Image You can change the Image by clicking on the icon on the Image's top center or the Image button on the Context Toolbar. !change-image.png! You can also change the Image by clicking the button in the Property Panel. ### Search Image Search for the required images by entering the topic keyword or phrase in the field. You can also search Google Images and parse website URLs in the Social & Web section below. ### Upload Image You can upload your images by clicking the Upload button or dropping files in the dashed Drop Files area. ### Add Image By URL Click on the Address link to enter the Image URL from the Internet. ### My Images The My Images section contains images you have already used in the project. ### Stock Images Pixabay is a free library with millions of stock images for your websites. The From Nicepage section provides exclusive stock photos, including the cut-outs on the transparent Background. ## Image Resize You can resize the Image Element in the Editor by dragging the markers. You can resize proportionally by holding the SHIFT and ALT keys to fix the current position. !resize-image.gif! ## Image Fit You can enable the Fit Image option in the Property Panel to crop the selected Image Element, making it the best for your web design. !image-fit.png! ### Auto-Fit Image Objects If you add an Image Object on the transparent or white Background, it fits automatically as Contain by default. !contain-images-white-bg.gif! Adding Images with the Cover Fit will have a cut-off look after the placing. !auto-fit-image-object-comparison.png! ## Image Zoom You can use the Zoom operation while fitting the Image in the Background of the Box and Grid Cell. You can also modify this option in the Property Panel. IMPORTANT: The Zoom operation is supported only for the **Image Background** of the Box and Grid Cell. !image-zoom.png! After you finish zooming, you can apply the change by clicking on the icon. You can reset the Zoom by clicking on the Reset icon on the Toolbar or the Round Blue icon on the Image. ## Image Context Toolbar Using the Context Toolbar, you can quickly change the Image and add a Hyperlink. !image-context-toolbar.png! ### Image Context Options Click the Options icons to open the list of all available operations for the Image. The same list is available in the Right-Click Context Menu. The list includes the **Bring Forward**, **Send Backward**, **Bring To Front**, and **Send To Back** operations for the Image Element, both in the Toolbar Options and Right-Click Menu. !image-options.png! ### Reset Image Proportions You can use the Reset Proportions of the Image by clicking on the icon on the Context Toolbar. !reset-image-proportions.gif! You can also reset the Image Background for Boxes and Grid Cells. !reset-image-background-proportions.gif! ### Image Hyperlink You can link the Image to a Page, Block, File, Phone, Email, Modal Popup, or Post by clicking the Hyperlink icon on the Context Toolbar. !image-hyperlink.png! ## Image Properties Edit all supported Image Properties in the Property Panel. !image-properties.png! ### Rotate Image You can use the Rotate property for the Image and Shape Elements allowing you to spin them by a custom angle. !rotate-icon-value.png! ### Image Width and Height Enter the Width and Height values for the Image Element in the Property Panel. !image-size-margins.png! ### Lock Image Proportions You can lock the Image Proportions by clicking on the Lock Icon in the Dimensions section of the Property Panel. ### Image Margins Modify the Image Element's Top, Bottom, Left, and Right Margins by entering values in the Property Panel. ### Image Fit Options You can select Fit To Background and Cover Background options for the Image Element. Additionally, you can Tile the Background of the Box Element and Grid Cell. !image-fit-options.png! NOTE: You can set the Image Fit by clicking the icons or selecting it from the drop-down list in the Property Panel. ### Image Border You can enable the Border for the Image Element by clicking on the icons in the Property Panel -> Border: No Border, Border, and choose the Custom Border sides. Edit the Width, and pick the Theme, Additional, or add a new Color for the Image Border. !image-border.png! ### Image Shadow Enable the Shadow for the Image Element by clicking on the checkbox. You can use the Shadow Presets or customize the Shadow in the Settings Tab, modifying the Positions, Blur, Spread, Transparency, and Color parameters. !image-shadow.png! ### Image Shade You can colonize the Image by changing the **Shade** property. You can also apply the **Gradient Shade** and switch between the Options. !gradient-shade.png! If you expand a Shape over the Image Background, you will see the best practice dialog offering you to apply the Shade instead. !recolor-image-dialog.png! ### Image Shape Edit the Image Shape making it Rounded, Circle, or Square. !image-shape.png! ### Image Radius You can modify the Radius parameter for the Rounded corners of the Image Element. !image-radius.png! ### Image Flip And Rotate You can flip and rotate the Image Element by clicking the corresponding icons in the Property Panel. !image-flip-rotate.gif! ### Image Transparency Adjust the Image Transparency in the Property Panel, making it more or less visible. It creates a natural hover effect in web page design. !image-transparency.png! ### Image Hyperlink Add the Hyperlink to the Image Element in the Property Panel to transfer visitors to a Page, Block, File, Phone, Email, Modal Popup, or Post. !image-link-property.png! ### Image SEO Alt Apply SEO Alt Description to your Image to improve search results for your web page. !image-seo-alt.png! ## Responsive Modes You can modify the Image Element Size, Fit, and Zoom in all supported Responsive Modes to show it best on each mobile device screen for your web design requirements. ##