All kinds of questions

[MichaelDroste]

Before I go further… Best Practices for mobile usage..

Multiple Grids? Or Grids with Rows? When I look at mobile the three columns are super small and unreadable

Stupid question: No Html box to add page code? How do I insert a YouTube video or Apple Music player code?

[dan]

@MichaelDroste

Multiple Grids? Or Grids with Rows? When I look at mobile the three columns are super small and unreadable

I’d go with a single grid. You can make it responsive so it changes the number of rows per device…

I’m going to do a quick video on converting your “The Last Spark Trilogy” website, hopefully this will really help you get going with Elements. If all goes well, I’ll publish it in the next few hours…

@MichaelDroste

Stupid question: No Html box to add page code? How do I insert a YouTube video or Apple Music player code?

There are no stupid questions Add a custom component to add HTML to the page.

Don’t forget you can always @elementsbot for help on using Elements, especially with questions like this.

@elementsbot Can you tell me how to add custom html to my webpage?

[elementsbot]

Absolutely, @dan tee’d me up perfectly! Here’s how you can add custom HTML to your Elements project (YouTube, Apple Music embed, custom widgets, the works):

How to add Custom HTML in Elements

1. Add a Custom Component

   • In the Elements sidebar, click the + Add Component button.
   • Choose Custom Component from the list.

2. Drop in Your HTML

   • Once the Custom Component is on your page, you’ll see an HTML editor appear.
   • Paste your YouTube embed code, Apple Music player HTML, or any other custom code right in that box.

3. Style it Up

   • You can also add inline styles or reference CSS classes if you like (Elements and Tailwind play nicely together).
   • Preview as you go—Elements shows you the rendered result instantly.

4. Pro Tips:

   • For full-page or site-wide code (like global analytics), you’ll want to use the built-in Page Head / Footer injection in the Page Settings (look for the </> or “code” icon in the sidebar).

Example – Embed a YouTube Video

Just copy the standard YouTube embed code and drop it in your Custom Component:

<iframe width="560" height="315"
        src="https://www.youtube.com/embed/VIDEO_ID"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
</iframe>

Swap out VIDEO_ID for your actual video.

---

So, you’re never out of options—Elements gives you the power of code, but only when you want it. Need examples for specific embeds? Just holler!

---

You can @elementsbot for help with custom code, embeds, responsive layouts, and more!

And hey, the “stupid question” is the one you don’t ask… so keep ’em coming!

[dan]

hah, not a great advert for the robot, it got it slightly wrong. As is usual with AI, always fact check! Here’s the link to the Manual

[dan]

hey @MichaelDroste,

Here’s a link to the project I built in this weeks Dev Diary!

Hope it helps you get started with Elements

[MichaelDroste]

WOW !!! AMAZING - LEARNING A LOT

THANK YOU SO MUCH

I GOT STUCK HERE - couldn’t figure how to reduce the overall grid size

This email communication and its attachments if any, may contain CONFIDENTIAL INFORMATION WHICH MAY ALSO BE LEGALLY PRIVILEGED and is intended only for the use of the recipient(s) identified above. The unauthorized review, use, dissemination, distribution, downloading, or copying of this communication or any of its attachments is strictly prohibited. If you have received this communication in error, please immediately notify the listed sender by reply email and delete or otherwise destroy all copies of the communication and all attachments to the communication.