Skip to main content

Image Element

The Image element displays images in your popup. Use it for product photos, graphics, illustrations, and visual content.

Overview​

PropertyValue
Element Typeimage
Can Contain ChildrenNo
Supports LinksYes

Use Cases​

  • Product images
  • Hero graphics
  • Illustrations and icons
  • Promotional banners
  • Logo display
  • Background accents

Content Settings​

Image Source​

Set the image URL or upload an image:

MethodDescription
URLExternal image URL
UploadUpload from your computer
Media LibrarySelect from uploaded images

Supported formats:

  • JPEG / JPG
  • PNG
  • GIF
  • WebP
  • SVG

Alt Text​

Alternative text for accessibility and SEO:

Product photo showing the XBuilder interface
Accessibility

Always provide meaningful alt text. If the image is decorative, use empty alt text (alt="").

Make the image clickable:

PropertyDescription
URLLink destination
TargetSame window or new window

Size Settings​

Width​

Control image width:

OptionDescription
AutoNatural image width
Full100% container width
FixedSpecific pixel value
PercentagePercentage of container

Height​

Control image height:

OptionDescription
AutoMaintain aspect ratio
FixedSpecific pixel value

Max Width​

Set maximum width to prevent oversizing:

Max Width: 400px

Object Fit​

How the image fits its container:

OptionDescription
ContainFit within container, maintain ratio
CoverFill container, may crop
FillStretch to fill (may distort)
NoneNatural size

Object Position​

Position when using cover/contain:

OptionDescription
CenterCenter the image
TopAlign to top
BottomAlign to bottom
LeftAlign to left
RightAlign to right

Style Settings​

Border Radius​

Round the image corners:

ValueResult
0pxSquare corners
8pxRounded corners
50%Circular (for square images)
9999pxMaximum rounding

Border​

Add a border around the image:

PropertyDescription
WidthBorder thickness
ColorBorder color
StyleSolid, dashed, dotted

Shadow​

Add depth with box shadow:

X: 0px
Y: 4px
Blur: 12px
Color: rgba(0,0,0,0.15)

Opacity​

Control image transparency:

  • 1 — Fully visible
  • 0.5 — 50% transparent
  • 0 — Invisible

CSS Filters​

Apply visual filters:

FilterDescription
BlurBlur the image
BrightnessAdjust brightness
ContrastAdjust contrast
GrayscaleConvert to grayscale
SaturateAdjust saturation
SepiaApply sepia tone

Layout Settings​

Alignment​

Position the image horizontally:

OptionDescription
LeftAlign to left
CenterCenter horizontally
RightAlign to right

Margin​

Space around the image.

Padding​

Space inside the image container (if using background).

Responsive Settings​

Device-Specific Images​

Show different images per device:

DeviceUse Case
DesktopHigh-resolution image
TabletMedium-resolution image
MobileSmaller, optimized image

Hide on Device​

Hide the image on specific devices using visibility settings.

Responsive Sizing​

Set different sizes per device:

Desktop: 400px width
Tablet: 300px width
Mobile: 100% width

Advanced Settings​

HTML ID​

Custom ID for CSS targeting.

CSS Classes​

Add custom classes.

Loading​

Control image loading behavior:

OptionDescription
LazyLoad when visible
EagerLoad immediately

Examples​

Hero Image​

Settings:

  • Width: 100%
  • Max Width: 500px
  • Border Radius: 12px
  • Alignment: Center
  • Shadow: 0 4px 20px rgba(0,0,0,0.1)

Product Thumbnail​

Settings:

  • Width: 150px
  • Height: 150px
  • Object Fit: Cover
  • Border Radius: 8px
  • Border: 1px solid #e2e8f0

Circular Avatar​

Settings:

  • Width: 80px
  • Height: 80px
  • Border Radius: 50%
  • Object Fit: Cover
  • Border: 3px solid #ffffff
  • Shadow: 0 2px 8px rgba(0,0,0,0.1)

Full-Width Banner​

Settings:

  • Width: 100%
  • Height: 200px
  • Object Fit: Cover
  • Object Position: Center
  • Border Radius: 0px

Best Practices​

  1. Optimize images — Use compressed images for faster loading
  2. Use WebP — Modern format with better compression
  3. Provide alt text — For accessibility and SEO
  4. Responsive sizing — Adjust for different screens
  5. Appropriate quality — Balance quality and file size
  6. Lazy loading — For images below the fold

Image Optimization Tips​

FormatBest For
WebPGeneral use, best compression
JPEGPhotographs
PNGGraphics with transparency
SVGIcons, logos, illustrations
  • Icon — For simple iconography
  • Video — For video content
  • Button — CTAs over images