How to layout 2 column, header and footer

Beginners
#1

Hello
I am needing help just to become a beginner.
I have tried using Pinegrow but cannot even begin. Need initial layout help.
How to layout 2 column, header and footer? No bootstrap, just the divs. I then can start using the controls to add the details but I cannot figure out how to even start : )

David

1 Like
#2

Welcome to PG @David!

If you are using plain HTML, you could use CSS Grid to define the layout.

grid
grid2204×1574 215 KB

Here is a code example, open code edit and paste it in to replace existing HTML code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>New page</title>
        <link href="css/style.css" rel="stylesheet">
    </head>
    <body style="display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;grid-gap:20px;">
        <header style="grid-area: 1 / 1 / 2 / 3; background-color: #ebebeb;">
            <h2>
            Header </h2>
        </header>
        <section style="min-height: 400px; background-color: #ebebeb;">
            <h1>
           Section 1</h1>
        </section>
        <sectio style="min-height: 400px; background-color: #ebebeb;">
            <h1>Section 2</h1>
        </sectio>
        <footer style="grid-area: 3 / 1 / 4 / 3; background-color: #cdcdcd; min-height: 40px;">Footer</footer>
    </body>
</html>
#3

the first part of my quick start guide walks you thru the process of creating your first page.

2 Likes
#4

@davidhelp Hello there, why don’t you begin by watching some tutorial.
I would totally use CSS grid to create layouts.
Here is a 3 video series to get you started.

…And then this series here. The dummy site is the same but in this series, you have a much more in-depth explanation of some CSS grid topics.

This will get you up and running.
Here is a series of videos that will show you the basics of PG. These videos were recorded on an old version of PG and thanks god the interface has evolved! but the core functionalities remain the same. Just need to find your way through the new graphic interface.

And then understand how media queries work.

@droidgoo nice little guide. Thanks

Cheers

1 Like
#5

Thanks for the how to’s help.
I am reading up on CSS grid. It is new to me. I see some css grid generators but am still looking at how to style the layout such as positioning various columns and rows.

This site https://css-tricks.com/snippets/css/complete-guide-grid/ explains how to’s on positioning. Bit confusing to me still.

Grid by Example

1 Like
#6

You don’t need any external CSS grid generations as Pinegrow has it’s own grid visual tools. Very easy to use. Did you get to see any video tut?

#7

Hey @davidhelp,
If you have specific questions, just reach out and I’ll try to help some more! I have to admit that I only adopted Grid recently, but it is really fun and can be easy, once you get your head around the basics. Way easier than some of the alternatives!
Maybe it is easiest to start sizing by percentage, px, and vh.

  1. To start building a very simple grid, open a new blank page by clicking the “New page or project” button.
    image
    image816×548 62 KB
  2. Select any of the frameworks, and then pick a blank template (Grid will work with any of the frameworks and templates-just keeping it simple).
    image
    image1818×1158 136 KB
  3. From the Tree panel on the right, select the Body element.
    image
    image734×354 26.6 KB
  4. To add a grid to the page you have two alternatives. On Mac or Linux type CMD + G, on Windows type CTRL + G, or you can right-click the selected Body and pick “Edit CSS Grid…” from the bottom of the context menu.
    image
    image726×1254 75.6 KB
  5. From the pop-up click the “Create CSS Grid” button.
  6. So, you want two columns, a header and a footer. That means a grid with two columns and three rows.
    Each column would be 50%. Delete the last column by clicking on the trash can. Resize the two remaining columns by typing 50% in their input boxes. This means they will be 50% of the browser width.
    image
    image1208×622 24.1 KB
  7. The top row will be the height of your header, say 60px. Each px is about the size of a period at the end of a sentence. The size of the letters you are looking at now are probably 16px. The header at the top of this page is 60px. Change the existing 100px to 60px.
  8. The next row will be for your two columns. The height would depend on the content. Normally, I would set the height to auto, but to make things clearer for you, we will set it to ‘90vh’. The ‘vh’ means viewport height and the number is a percentage. So 90vh means 90% of the total browser height. Click on the plus sign that appears below the header size input on hover and then change the row height to 90vh by typing in the input box.
  9. Finally, the last row is for your footer. Maybe you want more content than your header, so 120px. Again, click on the plus sign below your content row and type 120px into the size box.

Final Grid

image
image1212×982 35.7 KB

Now let’s name each area, this is optional but I think it will let you see the layout easier.

  1. Click in the top-left area name and type “header”. Double-click the top-right area name and select “header” from the context menu.
    image
    image1212×946 39.1 KB

    Since each column is 50%, this means your header area will be 100% of the width of the screen.
  2. Name the middle-left area “col1”, and the middle-right area “col2”.
  3. Name the bottom-left area “footer” then double-click the bottom-right and select “footer” from the menu.
    image
    image1208×956 38.1 KB
  4. Close the Grid Editor.

Okay, our areas are named!
Next we will add div elements to each. We will do it the slow way for now.

  1. Go to the Library panel and search for a ‘div’.
    image
    image780×752 39.3 KB
  2. Drag the ‘div’ box from the library to the page view with the CMD or CTRL key held down. Place it in the upper-left grid area. It will look odd because it has a special class on it so that it has some height until it has content.
    image
    image2302×644 39.5 KB
  3. Click on the “Style attribute” button at the top left. If you don’t see this button it is likely you have the visual helpers turned off.
    image
    image1148×92 9.67 KB

    That is the green box icon next to the fit section - if it is gray, click it to make it turn green.
  4. From the context menu select “Set named area…” and then type “header”. Your area will now stretch across the whole Page View, but won’t really have any height. We can add content by draggin any element to the Tree or page view, making sure it is placed inside the div. In the Tree it will be indented under the div.
    image
    image772×440 26.5 KB
  5. Add div elements to the columns and footers the same way.

image
image1786×1976 153 KB

That is it!
Reach out if you want more pointers,
Bob

2 Likes
#8

Thanks for the walkthru’s. I could not easily locate: “Set named area…” That grid area comes and goes and mostly hidden. I have not been able to bring it back. How do you have it show up in the upper left corner to click on so I see “Set named area…”?
Very frustrating.

I figured it out that each time you must click on the “Toggle Visual Helpers” button.
The initial layout should be made a lot easier then it is. Maybe after doing this for awhile I will understand. If it wasn’t for the help provided here I would never have even been able to start.

#9

The Page View sometimes gets a little confused if you have a multi-column area like the header or footer. It will select items within the area, rather than the whole area. You shouldn’t need to toggle the visual helpers. Just go the the Tree panel and select the element that you are placing in the Grid. For example, in the case of the header, it is the topmost div.

image
image760×574 28.7 KB

That should then make the style attribute button reappear.
You can also use the Visual Editor. Make sure the element you want to place is selected on the Tree or Page View.
Then click the paintbrush icon.
Click the Grid icon in the Visual Editor or scroll down to the Grid Item section
Enter the named area in the input box
image
image776×1630 105 KB

Hope this helps! The learning curve is a little steep, but after awhile things will begin to flow
Bob

2 Likes