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 สื่อมวลชน, find the Image Element-
3. Click, hold, and drag it to the desired location on your page.
4. เอ 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 อัพโหลด 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:ไปที่ การตั้งค่า and set the Width and Height to specific values.
• Choose between percentage (%) for responsive scaling or pixels (px) for fixed sizes.

เคล็ดลับ:

• 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 หรือ 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-

เอฟเฟกต์โฮเวอร์

• 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.).
• อัพโหลด custom PNG or SVG masks for unique effects.

5. Making Images Clickable

• ใช้ 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

• ไปที่ Tablet Mode หรือ 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-