Skip to main content

Media Elements

Media elements add visual, audio, proof, and embed content to Atomicat pages. They include native components such as Audio, Chart, Comment, FunFact, Image Comparison, Icon List, Social Icon, Selling Point, Google Maps, IFrame, HTML, and related visual blocks.

How It Works In Atomicat​

In Atomicat 3.0 media behavior is spread across several dynamic drawers. Some elements use the shared MediaType control, some use SelectImageBox or IconBox, and some render with external libraries such as Chart.js. Media elements often depend on uploaded assets, responsive sizing, and parent Container layout. Treat the media element and its container as one design unit.

When To Use It​

  • Add proof with comments, selling points, fun facts, audio notes, or image comparisons.
  • Embed location or third-party content with Google Maps, IFrame, or HTML.
  • Use charts for simple numeric proof and icon lists for scannable benefits.
  • Support conversion sections with media that validates the offer.

Configure The Element​

  • Choose the simplest native element that matches the media type before using custom HTML.
  • Upload optimized images and MP3 files to reduce page weight.
  • Set alt text or visible labels where the element supports it, and add nearby text when it does not.
  • Control size and spacing from the parent container plus the element style drawer.
  • Use consistent icon, image, and proof styles across a page.

Testing Notes​

  • Preview media-heavy sections on mobile and slower connections.
  • Check third-party embeds on the published domain.
  • Verify that proof media is accurate, permitted, and relevant to the claim.

Limitations And Tips​

  • Too many media widgets can slow a landing page and reduce focus.
  • External embeds may be blocked by provider security settings.
  • Important information should not exist only inside an image, chart, or audio clip.

FAQ​

Should I use HTML for media embeds?

Use a native element first when available. Use HTML only for trusted custom snippets.

How do I keep media responsive?

Place media in a well-sized Container and review desktop, tablet, and mobile settings.

What media files should I optimize?

Images and MP3 audio are the most common page-weight contributors.