TTG Page Layout Areas

When first using any of the TTG Web Module plug-ins, it can be a little confusing as to what part of the page the various parts of the plug-ins control.

You're confronted with terms like the Block and the Grid, Page, Page Container, Footer, and more. Some of these will make sense, others won't until you start playing with the plug-ins.

All TTG Web Module plugins, with the exception of Theme for WordPress, have the exact same page layout options. Theme for WordPress is nearly identical, only missing the page settings for the Grid, as this part of the page doesn't appear in a WordPress page or post.

A great way to get familiar with all the different page areas is to go through the Site Info, Color Palette, and Appearance control panes and set all the background-color settings that you can find to different colors. Then look at the page and start matching colors to areas.

Which is exactly what I've done below. The areas follow the order presented in the TTG plug-ins, starting with the Site Info control pane and followed by Color Palette and Appearance. You can download the template for this TTG page layout here.

Except for some added top and bottom margin in some areas, this is a default page set up. Keep in mind that you can move a lot of these pieces around so your set up may differ.

ttg page layout
TTG page layout. Click on image to see full size.

Page Body background-color
Page Body background-color

1: Page Body

This the bottom most layer of the page. If you've set anything other than Auto for Page Container (below) you'll see the Page Body background-color on either side of your content.

Page Container background-color setting
Page Container background-color

2: Page Container

The Page Container is the next layer. It contains all the page content. The rest of the sections will be within the Page Content. There are two exceptions to this: if you check the "Orphan" option on either or both the Masthead and the Navigation areas. If you do, they will no longer be inside the Page Container. This is useful if you wish to have full width header and/or navigation but want to contain the page content itself to a certain maximum width.

Note that the turquoise Page Container color occasionally appears within the page from top to bottom. This because I've added Margin to some of the rest of the page areas. When you do this, the background color of the Page Container will show through.

ttg page masthead area
The Masthead

3: Masthead

The Masthead is where you can place a logo, a text based graphic identity plate, or use a Heading and/or Sub-heading.

Notice the "Orphan" check box. This will eject the masthead from the Page Container. More on that in the TTG documentation here.

ttg navigation background color control
Navigation background-color setting

4: Navigation

The Navigation section. This can also be orphaned. See the TTG documentation here for more information.

For a full explanation of the various background color settings you see (for the mobile menu), see this TTG documentation page.

TTG Footer background-color control
Footer background-color setting

5: Footer

Here I've set 24px of top and bottom margin. You can see that Page Container background-color above and below the Footer.

Notice the "Wear Concrete Shoes" check box. Checking this box will push the footer to the bottom of the browser window for pages with little content.

 

TTG Social Media Profiles background-color control
Social Media Profiles background-color control

6: Social Media Profiles

Here I've place the Social Media Profiles above the Footer. There are several placement options including in the Footer, above the Block, in the Masthead and more.

TTG page block area background-color control
The Block background-color control

7: The Block

The Block is where you can place any descriptive text. Notice that I've set the background-color to white and the opacity slider at around 50%. This lets some of the Page Content background-color show through, making the Block background-color a light blue.

I've also placed the Block above the Grid.

 

TTG page grid area background control
The Grid (Gallery/Media Area) background-color control

8: The Grid

In CE4 Gallery, the Grid area contains your gallery thumbnails. In CE4 Autoindex it contains the index. In CE4 Stage it contains whatever you've chosen to present: a Galleria slide show, a video, a still image, etc.

Here I've chosen a dark grey background color with opacity at around 50% This lets some of the Page Container background-color show through, making for a sort of darker bluish-grey background.

The Grid also has some top and bottom margin, which shows the Page Container background-color above and below the grid.

In CE4 Gallery, don't confuse the Gallery/Media area background-color control, which is near the bottom of the Appearance control pane, with the Thumbnail Grid's Cell Background-color found near the top of the control pane.

Try it yourself

I encourage you to try this experiment yourself. To make it a little easier, I've created a template of this TTG page layout for you to try yourself. This is a CE4 Gallery template so you'll need to own CE4 Gallery to use the template.

Download the template here: CE4-gallery-page-areas

2 thoughts on “TTG Page Layout Areas”

  1. Be sure to try moving sections around too. Like placing the Masthead below the navigation, trying out the “orphan” features of Masthead and Navigation, etc.

    And play with where the Social Media Profiles show up. If you place them in the Masthead, either top or bottom, or the Footer, the background color disappears.
    And in the Masthead, if you’re using any top or bottom margin you’ll see the icons start dropping above or below the masthead, depending on where you positioned them. So you’ll need to set 0 Margin for the masthead. Unless you like the affect.
    And the “Navigation Column” area requires that you use Column Navigation.

Leave a Reply

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

About this site

This site is: a repository of time-savers and best practices from a user's perspective, picked up from several years of using TTG plugins.
This site is not: a support site.
Read more here.

Tip Jar

If this site has saved you some time, kept your hair attached, or otherwise prevented you from tossing the mouse through the monitor, feel free to donate.

Categories


Highly recommended. This is my go-to Lightroom book. Click on the book image. (affiliate link)

Affiliate link!

Current TTG versions

Backlight Versions

Backlight 1.2.3
Pages module 1.2.3
Cart Add-on 4.1.5
Client Response Add-on 7.1.2
Theater Add-on 1.2.5
WordPress Add-on 1.2.5
Publisher 3.2.3

CE4 Versions

note: CE4 is no longer being developed or sold. See this post.

TTG-BE: 2.0.5a
Autoindex: 7.0.8
Cart: 3.1.4a
CRG: 6.1.3a
Gallery: 6.1.10
Pages: 7.0.15
Publisher: 2.3.3
Stage: 6.1.6
Theme for WordPress: 3.1.2

Subscribe to new posts