Image Widget

The Image widget allows you to add an image to the section grid or as a "child" element to a "parent" widget container such as a Carousel, Grid or Flex widget. Allowable file formats are .jpg, .png, .gif, and .webp.


To insert an image, double-click into the Image widget you inserted within the section grid. Doing so will bring up your Image Resource Folder modal within the Site Builder tool. See Fig 1 below.

Fig 1

By default, the Resource Folder will be on "My Images", which will show any images you have uploaded into the Site Builder tool. You may also click the blue "Click to Upload" button, which will allow you to upload a new image. To select an image to insert, click on it once. After a very brief pause, the image will be inserted into your Image widget. If you are on the General menu, you will also see the image appear to the right in the Image editor. See Fig 2 below.

Fig 2

You will note a small box with a left-facing arrow and forward slash to the right of the blue "Click to Upload" button. Clicking this box will bring up your main Images and Files Resource Folder within your Pinpointe account. You will also see a box to the right of the blue "Click to Upload" button: "landing" will take you back to the Site Pages images folder. See Fig 3 below.

Fig 3

To the right of "My Images" is a second option, "Shared Images". This option only pertains to Enterprise customers who have a Shared Image folder. If such is the case, clicking on this option will bring up the Shared folder. See Fig 4 below.

Fig 4

The third image folder option, "Pexels Images", will bring up a gallery of default Pexel images, or you can enter a search word in the input field. Fig 5 below shows the result of inputting the word "cars" into the search bar.

Fig 5

The Image widget has three menus (see Fig 6 below).

Fig 6

General menu

The General menu for the Image widget contains three features (see Fig 7 below).

Fig 7

  • The Image feature (see Fig 8 below), is made up of two parts:

Fig 8

  • The Image editor - clicking on this button will bring up a light-duty image editor that will allow you to do basic image editing. See Fig 9 below.

Fig 9

  • The Alt Text input - This allows you to enter an Alt Text value to increase accessibility to your landing page content.
  • The Show In Lightbox  feature (see Fig 10 below), determines whether the image will be shown in what is known as a lightbox in the browser if the viewer clicks on the image. By default, this option will be checked to "on".

    Fig 11 below shows the browser-rendered image, and Fig 12 below shows the result of the viewer clicking on the picture if the feature is checked to "on".

Fig 10

Fig 11

Fig 12

  • The Link Action  feature (see Fig 13 below). A more detailed description of the feature can be found by clicking this link: Link Action Article.

Fig 13

Style menu

The Style menu for the Image widget basically conforms to the general Style menu as described in this article: Style Menu Article, but also contains additional features as described below.

  • The Crop Image  feature (see Fig 14 below) is used to fill the image container when said container is of a different aspect ratio than the image itself (Toggled to "off" by default). Figs 15, 16 and 17 show, respectively, an image whose container is the same aspect ratio as the image, the container is wider but same general height, the container is both taller and narrower.

Fig 14

Fig 15

Fig 16

Fig 17

  • The Scale feature (see Fig 18 below) allows you to scale the image relative to its container up or down proportionately using a scaling factor from ".5" to "1.5". The actual scaling effects of this feature will depend on the starting size of the image and its container as set by you. Fig 19 below shows the image scaled down to .5 of original size.

Fig 18

Fig 19

Hover menu

The image Hover menu is essentially a clone of the image Style menu's stylistic features, and its purpose is to allow you to create a different style for the image when a page visitor moves their cursor over it in the browser.


The easiest way to illustrate the use of the Hover menu is with an example. Fig 20 below shows the browser-rendered version of an Image widget that has been styled using the Style menu. Figs 21 shows the same browser-rendered Image widget using the Hover menu and hovering the cursor over the image. You can see a radiused red border has been added to the image, as well as a shadow effect. 

Fig 20

Fig 21