Template Setup

Drag and Drop Control

Overview

Template setup is probably the most important part of your site’s design and you’ll probably have to experiment with some of the options before you find the look you want.

This interface allows you to control the total look and feel of your sites templates, e.g. your post pages, page templates, etc… Not only that, it allows you to do this using drag & drop AND best web development practices! How about that?

That said, this is really easy, but you need to understand a couple key concepts first. Namely:

  1. Template & Page Types – i.e. your blog (posts) page, or the templates you select when creating pages
  2. Template Areas – The different areas in each template, i.e. the header area, or the content area…
  3. Drag and Drop Sections – Pieces of web design you can place in your template areas.

Ready to get into it?

Video Tutorial

Templates and Page Types

Templates and page types consist of the different types of pages that are recognized by WordPress. These include:

  1. Page Templates – These are created by the theme, and selected when you create new pages inside of WordPress
  2. Page Types – WordPress is designed to support a number of different page types. Some examples of these include your blog page, your single post page, 404 pages, etc…

Template Areas

Each of the page templates, and page types consist of several template areas. Please look over this doc on how template areas work.

Template areas behave differently depending on which one you’re using. Here is a summary:

  • Header, Footer, Morefoot, Sidebar1, Sidebar2, Sidebar Wrap are Global Template Areas. They are present on all pages of your site. Only place sections here that you want on all or most pages.
  • Page Templates – These are the templates that will show up (between you header and footer elements) depending on which page template you choose. Or if a user is viewing a blog post or your posts pages.
  • Text Content Area – This is the area where your WordPress text is placed, inside the main column of your content section. Platform currently allows you to set up three configs for this on: pages, single posts, and on posts pages.

FYI – Just to the right of the ‘template area’ title is a graphic with a blue stripe across the top of it. The blue stripe shows what part of the template page you’re working on. It changes when you edit a different area.

What Are Sections?

The first step in using this interface is to select a template area. Each template area can have its own set of ‘sections’.

Sections are drag and drop pieces of web design that can be moved around your site. They are a lot like widgets, only they handle more complex tasks like Javascript, CSS loading, options, etc…

Your theme comes pre-installed with tons of sections, you can also add your own using the child theme.

Setting Up Templates

Once you understand what sections and template areas are, the rest is pretty easy.

Just follow these steps:

  1. Visit the ‘settings’ panel in the admin and navigate to ‘template editor’
  2. Select the template area you want to configure (using select input)
  3. Drag sections or move sections as desired (configure sections through global & meta options)
  4. (Your new layout should be saved through AJAX)
  5. View the page templates by selecting that template when creating a new page.
  6. View the new config for single posts pages, and your blog pages simply by visiting them.
  7. For additional page by page control, use ‘section control’ to selectively hide or show sections

More on Section Control

Section Control is a tool for hiding and showing individual sections on a page to page basis.

This allows you to show and hide individual widget areas on each page, giving you complete control of sections and where they are viewed.

The video below shows a quick demonstration of how to use it: