How to Use Images on Your Website

Images are essential elements that enhance the visual appeal of your website. They help convey messages, improve engagement, and create a professional look.

1. Adding an Image to Your Page

1. Open the Elements Panel on the left.
2. Under Media, find the Image Element.
3. Click, hold, and drag it to the desired location on your page.
4. A placeholder will appear until you upload an image.

2. Uploading and Resizing Images

Uploading an Image

• Click on the image to open the Options Toolbar.
• Select Upload and choose an image from your files.
• The image will now replace the placeholder.

Resizing Images

• Manual Resize: Drag the handles at the corners to scale the image.
• Cropping Resize: Drag the side handles to crop the image width or height.
• Exact Dimensions:Go to Settings and set the Width and Height to specific values.
• Choose between percentage (%) for responsive scaling or pixels (px) for fixed sizes.

Tip:

• 100% width makes the image fill its container.
• 100% height ensures the entire image is visible.
• Pixel values keep images static, even when resizing columns or containers.

3. Image Display Options

Custom vs. Original Size

• Custom Size: Allows zooming and resizing.
• Original Size: Displays the image at its native resolution.

Focal Point Adjustment

• Click on the Focal Selector (blue dot).
• Drag it to focus on a specific part of the image.
• This ensures the important area remains visible on all screen sizes.

4. Styling & Effects

Adding Overlays & Borders

• Apply a color overlay or gradient to blend the image with your design.
• Adjust opacity to create a semi-transparent effect.
• Add a border or frame using the Border Settings.

Hover Effects

• Set an overlay or color change that appears when users hover over the image.
• This is useful for interactive elements like clickable images.

Image Masks (Shapes & Frames)

• Apply pre-designed shapes (circle, hexagon, etc.).
• Upload custom PNG or SVG masks for unique effects.

5. Making Images Clickable

• Use the Link Option to make an image interactive.
• Link to:
• A URL (external website)
• Another Block (on the same page)
• A Popup (opens a modal window)
• A File Download (PDFs, images, etc.)

6. Responsive Image Optimization

For Tablet & Mobile Views

• Go to Tablet Mode or Mobile Mode.
• Adjust the image size to fit smaller screens.
• Reposition the focal point to ensure the most important part is visible.
• Ensure hover effects and clickable links work properly on touch screens.

Why Use Images?

Enhance visual storytelling – Communicate messages faster than text.

Improve engagement – Attract attention and keep visitors interested.

Optimize responsiveness – Adjust images for different screen sizes.

Boost interactivity – Use images as clickable elements for navigation.

By properly styling and optimizing images, you can create a visually stunning and user-friendly website.