Single Image

The Single Image component allows you to showcase an image that spans the full width of the content area on your page.

Overview

The Single Image component allows you to display an image that spans the full width of the content area on your page. This is ideal for showcasing high-quality visuals that enhance your content.

Specifications and Usage

When to Use:

  • To feature a prominent image that complements your content.

  • To add visual interest and break up text-heavy sections.

  • To display images that require full-width presentation for impact.

  • Note: Unlike an Inline Image, text will not wrap around a Single Image.

Specifications:

  • Image Dimensions:

    • With Sidebar: 709 pixels wide.

    • Without Sidebar: At least 640 pixels wide.

  • Resolution: 72 dpi.

  • File Size: Should not exceed 1MB.

  • File Format: JPG, PNG, or GIF.

  • Accessibility: Include descriptive alternative text for screen readers.

How to create a Single Image

Insert the Single Image Component:

  • Navigate to the page where you want to add the image.

  • Within the editor, select Add Single Image from the available content options.

Add Single Image

Upload or Select an Image:

  • Click on Choose File to open the file browser.

  • Browse to the image you wish to upload and select it.

  • If the image is already uploaded, select it from the file browser.

Crop the Image (If Needed):

  • After selecting the image, it will appear in the cropping interface.

  • Use the blue handles to adjust the visible area of the image.

  • Note: Cropping is non-destructive and can be adjusted later.

Add Alternative Text:

[Optional] Add a Link:

  • If you want the image to link to another page or external site, enter the URL in the Image Link field.

Save Changes

Best Practices

  • Image Quality: Ensure the image is clear and not pixelated. Use high-resolution images within the specified dimensions.

  • Consistency: Maintain a consistent style and size for images across your site for a cohesive look.

  • Accessibility: Always include alternative text to make your site more accessible to users with disabilities.

  • Optimization: Compress images to reduce file size without compromising quality to improve page load times.