Visual Markup Guide

The Visual Markup Guide contains diagrams showing how Trellis Core templates render pages in a WordPress site.

Use this guide to see how major block elements are arranged and where class attributes are applied.

Helpful Information

  • Semantic elements such as <header>, <main>, <article>, <aside>, and <footer> have colors applied.
  • Top-level elements such as <html>, <head>, and <body> are not shown. All of the markup in the diagrams are contained within the <body> element.

Diagrams

Click on a link to view the diagram.

What’s Next?