Laying out a page with text and images

how would you lay out something like this in a Grav page? I’ve been trying to make it work using markdown tables and that just doesn’t seem to be the correct method. Any suggestions?

All I want is:
on the left: h1 text, h2 text, paragraph text, button
on the right: image

This seems simple but I can’t get a standard page to create this simple layout

There is no standard page, none of default.html.twig are created equal. You’ll need to use CSS for this, and basically any kind of model: float, flex, grid, position. They can all position something in opposition to something else, in all directions.

More concretely, this looks like you want a wrapper around the whole thing - call it the “autumn background” element. Within that, the first child-element is a “text-for-texts-sake” and the second child-element is an “illustration”. They can all be <div>-tags.

This is something to do with Twig-templates and CSS-styling, not directly in Markdown. If you really wanted to, you could write all of it in Markdown, but FrontMatter will be easier. Consider this Page:

title: Community
join_text: Join tomorrow
join_link: ""
image: illustration.png

# A better community

## Make your neighborhood more walkable


In Twig, use {{ page.header.join_link }} for the button and {{[page.header.image].html }} for the illustration.

1 Like