etchdeveloperDemoGet the component
Demo

Comments

A sample blog post with a native WordPress discussion: threaded replies, a quote, a list, code and the comment form. Use the switches to try each theme, the density, the avatars, the Website field and custom wording.

One ED Comments instance, as on a real post, with its default settings. Comments you post here wait for moderation, so only you see them. Names and copy are placeholders.

Try the settings

One instance on this page; the switches change it in your browser only. In Etch you set them in the Properties panel.

Theme
Page background
Density
Avatars
Website field
Translations

Studio journal

Write the headings before you open the builder

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Our last three websites started the same way: a page outline in a plain document, real headings, rough copy and a list of the sections we would reuse. Only then did anyone open the builder.

Content first, layout second

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. When the words exist, the layout has something to serve. Donec ullamcorper nulla non metus auctor fringilla, and nobody argues about a hero image that has no headline yet.

Content first, layout second, polish last.

Sections become components

Maecenas faucibus mollis interdum. Every section that shows up twice in the outline becomes a component. Cras mattis consectetur purus sit amet fermentum. How does your team plan a site? Tell us below.

House rules. Be kind and stay on topic. On this demo every new comment waits for moderation, so only you see what you post. Try the form as much as you like.

9 responses

  1. Maya Lindqvist Avatar
    Maya Lindqvist

    This matches what we learned the hard way. Our last redesign started in the builder, and we rebuilt the homepage three times. Writing the headings first would have saved us a week.

    1. Nora Ellis Avatar
      Nora Ellis

      Three rebuilds sounds familiar. The first outline doesn’t have to be good, it just has to exist.

      1. Maya Lindqvist Avatar
        Maya Lindqvist

        Noted. That sentence is going on a sticky note above my monitor.

  2. Daniel Okafor Avatar
    Daniel Okafor

    Content first, layout second, polish last.

    I agree with the order. For landing pages we still sketch one hero early, because clients want to see something on day one. Do you show them wireframes, or only the outline?

    1. Nora Ellis Avatar
      Nora Ellis

      Only the outline and one real section, fully styled. Clients react to real words much better than to grey boxes.

  3. Priya Raman Avatar
    Priya Raman

    Our checklist before anyone opens the builder:

    1. Every page has a goal in one sentence.
    2. Real headings, even if the copy is rough.
    3. A list of sections that repeat, so they become components.

    The third one is where the time savings come from.

    1. Jonas Becker Avatar

      Same here. We also fix the type scale before the first layout, so no heading ever needs a one-off size:

      h2 { font-size: var(--h2); }
      h3 { font-size: var(--h3); }
      1. Priya Raman Avatar
        Priya Raman

        Yes! A shared scale ends the make it a bit bigger emails.

  4. Alex Morgan Avatar
    Alex Morgan

    Short and useful. Could you share the outline template you mentioned? A plain .md file would be perfect.

Leave a Reply

Your email address will not be published. Required fields are marked *

Also built in

Empty and closed posts

Without approved comments the discussion shows Empty Heading and Empty Message. When comments are closed, Closed Message appears. Both messages are your own words, and each can be hidden.

Long discussions

Turn on Break comments into pages in Settings → Discussion. The Older and Newer links get the same styling and can be renamed.

In the Etch builder

Etch shows a native discussion only as a placeholder, so the component adds a sample discussion to the canvas. Every setting shows there before you save.

Without JavaScript

Posting, replies and validation are WordPress’s own and work without JavaScript. Only custom wording and the hidden Website field need it.

End of the demo. Get the Comments component