Media elements are essential for enhancing the visual appeal and engagement of your web pages. These elements allow you to add images, videos, and image galleries to your design. Below, we'll explain each media element, its purpose, and how to utilize it effectively.

1. Adding Media to Your Page

• To add a media element, simply drag and drop it into a column (which must be within a section).
• Once added, click on the media element to open the right-side settings bar, where customization options appear.

2. Media Types and Customization Options

Image

• Purpose: Images are crucial for communicating ideas, branding, and visual storytelling.

Customization Options:

• • Image URL: Add the source URL of your image.
  • Align Image: Center, left, or right alignment for precise positioning.
  • Alt Text: Add SEO-friendly text to improve search engine rankings.
  • Width/Height: Adjust dimensions to fit your design.
  • Link URL: Make your image clickable by adding a hyperlink.
  • Open Link In: Decide whether the link opens in the same window or a new tab.

Video

• Purpose: Videos are great for product demonstrations, testimonials, or engaging content.

Customization Options:

• • Provider: Choose from YouTube, Vimeo, Wistia, or a direct URL.
  • Video ID: Add the unique identifier for videos hosted on platforms like YouTube or Vimeo.
  • Background: Set a background color or image for your video section.
  • Border Options: Adjust the width, color, and radius of the border for styling.

Image Gallery

• Purpose: Use an image gallery to showcase multiple visuals, such as portfolios or product collections.
• Customization Options:
  • Add Images: Upload or link multiple images to create a gallery.
  • Rearrange or Remove Images: Easily reorder or delete images as needed.
  • Gallery Style: Customize how the gallery is displayed using layout options.

3. Common Customization Options for Media Elements

Border Options

• Add a border to any media element:
  • Style: Solid, dashed, or none.
  • Width: Adjust the thickness of the border.
  • Color: Select a border color using RGB or HEX values.
  • Radius: Add rounded corners for a softer look.

Spacing

• Control padding and margin for precise placement of media elements:
  • Padding: Adjust the space inside the border.
  • Margin: Modify the distance between the media element and its surroundings.
  • Make Negative: Enable overlapping by using negative spacing values.

4. Device-Specific Preview

• Always check how your media elements look on different devices (desktop, tablet, mobile) using the responsive preview options in the editor. Adjust margins, padding, and dimensions to ensure a seamless experience across all screen sizes.

By leveraging these media elements effectively, you can create visually compelling pages that enhance user engagement and improve conversions.