Customizing Templates in Agility 3.2

Introduction

• What are we doing today?
  • Review the tools in Agility 3.2 for customizing templates in the skin editor
  • Agility 3.2 has 23 custom boxes designed to simplify or add additional functionality
• Who is this for?
  • Designers & committed DIYer
  • Assumption – you have reviewed The Beginner’s Guide to the Thesis 2.1 Skin Editor
  • You are comfortable with the concepts

Understanding Templates in Thesis 2.2 & Agility 3.2

1. 2 types of templates
   1. core templates – automatically applied
   2. custom templates – must be selected
2. Core templates – Mimics WordPress Template System
   1. Home
   2. Page
      1. Front page
      2. 404 page
   3. Single
   4. Archives
      1. Post type archives
      2. Taxonomy archives
      3. Date archives
      4. Author archives
3. Parent/child relationships in templates
4. Agility Default templates
   1. Core templates
   2. Custom templates
      1. No Sidebars
      2. Page without social media
      3. Fluid Grid – full width – archive type page
      4. Fluid Grid – 2 column – archive type page

Understanding the Agility 3.2 Page Layout System

• All Agility 3.2 templates are made up of 3 types of boxes
  • Agility Easy Header
  • Agility Content Grid Section
  • Agility Easy Responsive Columns Section
  • They are all structured the same
• Structural Layout
  • Area wrapper
    • Overlay – optional
      • Page wrapper
        • Column wrapper
          • Column
            • Content
• Options

Template Options

• Body class
• Javascript
• Wp loop
• Embed width
• Match height

How to Make the Front Page 2 Columns

• Drag over Typical 2 Column Content
• Drag WP Loop
• Drag Main Sidebar Widget Area

How to Create a 2 Column Video Optin Call to Action

• Make the feature box 2 columns
• Column 1 widget
• Column 2 empty
• Place page specific widget
• Place video
• Place Email box helper
• Place Email box

How to Add 4 Columns of Category Posts to the Front Page

• Make 4 columns in Attention Area
• All columns empty
• Use Enhanced Query Box

How to Create a Custom Template for a Landing Page

• Create a custom template
• Add a custom body class
• Create a 1 column section
  • Give it a class – custom-1
• Remove the column
• Place the Page Post Box
• Add custom max_width for page_wrapper
• Add column classes
  • Columns_2
  • half
• Add video
  • Set the video width
• Add a link
  • .call-to-action

How add a Fluid Grid of Posts to a Page

• Create a custom template
• Add a responsive columns section
• Add a Fluid Grid Wrapper
• Add an enhanced query box
• Add classes
  • fluid_grid
  • item
  • Three_columns

Help! My 2nd Column has Disappeared!

How add a 3 column section to a page

• Create a custom template
• Add a responsive columns section
• Add a feat

Survey of Agility 3.2 Custom Boxes

• Agility Call to Action
• Agility Content Grid Section
• Agility Copyright Date
• Agility DIY Themes Email Box Helper
• Agility DIY Themes Social Media Box Extender
• Agility Easy Header
• Agility Easy Responsive Columns Section
• Agility Enhanced Query Box
• Agility Featured Content Box
• Agility Featured Image
• Agility Fluid Grid Post Box
• Agility Fluid Grid Wrapper
• Agility Home/Archive Post Box
• Agility Hook
• Agility Icon Content Box
• Agility Phone Link
• Agility Read More
• Agility Related Posts
• Agility Related Posts Thumbnails
• Agility Responsive Header Images
• Agility Social Profile Links
• Agility Social Sharing Links
• Agility Subcolumns Section