We’ll create a simple page structure with header, content, sidebar and footer.
In this experiment, we’ll create a simple page layout with CSS Grid.
Let’s close the Grid Editor.
First we need some content.
Let’s add a header element to the Body element. One way to do that in Pinegrow is to drag the Header element from the Library panel to the page.
Then, we drag a Heading H1 inside the Header.
Double-click on the text to edit it. Press ESC key or Done when we’re done with editing the text.
Next, drop a Main element on the page, after the Header.
We need some content for the Main element.
Let’s add a Paragraph into the Main element.
Select the Paragraph and use the dropdown menu to insert placeholder text.
And let’s duplicate the Paragraph a couple of times.
We also need a sidebar. Another way to add elements is by clicking on the orange insertion line between the Tree panel items.
Here we can use the Insert Code feature to quickly insert a code snippet using the simplified HTML syntax.
Our sidebar will be a DIV with the class Sidebar.
It will contain an Unordered List with three List items.
Make sure to use a space character to indent the lines.
We click on the Insert button to add the element to the page.
Ok, almost done.
The last element will be the Footer.
Let’s drag the Footer element to the Tree panel… and add a Paragraph of text into it. Again, we’re using double-click to edit the text.