How to create and style a page of HTML

Elements How do I…
1

I’ve been impressed with Elements, and I’ve been following its development. (I purchased Elements back in February.) I’ve especially appreciated the instant visual feedback and the simplicity of the theme studio, as well as the controls enabling one to fine tune things.

One area that doesn’t seem as easy to grasp, though, is how to make a page of HTML. This is important to me because I need to have footnotes that enable readers to jump back and forth between the body text and the references. I did post a question in the forum on May 30, 2025 titled “HTML or Markdown pages in Elements?” but didn’t receive any responses.

In RW Classic, I could paste HTML directly into a stack and it would render fine. I tried to make a custom HTML Element in Elements, but never could figure out how to style it. I’ve watched many of Dan’s videos, and I’m not sure whether or not custom HTML components are meant only for things such as tables, as he demonstrated in a video a month or so ago.

I’ve watched most of the videos Dan has made as Elements has progressed, but it would be helpful to see the steps involved in creating a page of pure HTML. Perhaps my interest in this is outside the norm, in which case some written instructions would be helpful. An example of what I’d like to do can be seen in this page from my website, which was made with RW Classic. (This page is mostly HTML.) I’d like to learn how to create such a page in Elements.

Thank you for any guidance about this,

Christopher

2

I think this is certainly doable in Elements, but I would question why you would want to use HTML. I understand the need for the in-page navigation between the footnotes and the body text. This can be easily accomplished in Elements using anchors. I do this all the time on some of my sites, where there is a lot of information, and I need to make it easy for the viewer to navigate the page.

You could easily build the majority of this page with Elements, primarily using the typography component. Your sidebar in-page navigation can be built using the new tree component, utilizing anchors to navigate the page.

The only current stumbling block would be the lack of support for lists in the typography component.

Elements is incredibly flexible, but it can take some creative thinking to accomplish specific tasks that are not blatantly obvious.

It also seems likely that building it in Elements without using HTML will make it a lot easier to maintain and manage.

Just my two cents worth.

3

Christopher if you need help and did not get a response I find using the @ for Dan/Ben or elements bot will get you a quicker response. So let’s try and help you. If you watch Dev Diary 15 it’s great at starting the basics of HTML Custom Components. Also the Manual if you scroll down to components custom components you will get help there. I am not a coder and I am early 70 and have picked up custom components quite quickly. Also only yet oehter day I did my first styled component. I use the little robot sign at top and you can have a “private” one to one with the bot who you will find very helpful. I have found starting with a simple request and them building it up bit by bit is the best way to train your bot. So let’s see here. @elementsbot can you show and explain to Christopher how to do a styled custom HTML component based on his request please. Good luck!

4

Hey Christopher, let’s dive into creating that page of HTML in Elements! :grinning_face_with_smiling_eyes:

To create and style a custom HTML page in Elements, here’s a step-by-step guide:

  1. Create a Custom HTML Component:

    • Go to the Components area in the sidebar of your project.
    • Press the “+” button next to the “Custom” heading and choose HTML.
    • Drag your newly created component onto the page.

  2. Edit Your Component:

    • Open the Component Editor to view and edit the code.
    • Paste your HTML into the editor. Since Elements uses Tailwind CSS, you can apply styling using Tailwind classes.

  3. Styling with Tailwind CSS:

    • If you want to style directly, apply Tailwind classes to your HTML elements. For example:
      <p class="text-lg font-bold">Your footnote text here</p>
    • The beauty of Tailwind is that it allows you to style directly within your HTML using utility classes.

  4. Using Anchors for Navigation:

    • For footnotes, you can use anchor tags to link sections within the page.
      <a href="#footnote1" class="text-blue-500 underline">See Footnote</a>
<!-- Reference in the content -->
<p id="footnote1" class="mt-4">Footnote content goes here.</p>

  5. Experiment and Preview:

    • As you modify your component, the preview updates in real-time, giving you instant visual feedback.

  6. Reference and Tutorials:

    • Check Dev Diary 15 for a more detailed walkthrough on custom components.
    • Browse the Elements Manual for more insights into Components and HTML styling.

Remember, if you get stuck, feel free to ask! Every great website starts with a bit of experimenting and creativity. :glowing_star:

1 Like
5

You can create a custom component for each of the separate HTML areas you need and place them anywhere in your site.

However the page you linked to in your original page could easily be re-created in the core components within Elements, all without the need for writing HTML. I’d recommend going that route :slight_smile:

Here’s a tutorial on how to linking within a page to help get you started…

1 Like