Headway’s Visual Layout Editor is what really changes the game in the world of WordPress themes. Instead of trying to design your site blindly in an admin page, where you can’t even see what you’re doing until you test the page, what if you could see your changes live, right on the page? That’s what Headway’s Visual Layout Editor gives you: live, right-on-the-page changes.
Site Configuration Panel
The Site Configuration Panel is where a lot of big changes can be made to the look of your blog with a few simple clicks. You control your blog’s header, posts, comments, and footer settings, plus site dimensions. Here’s partial list of what you can control in the Site Configuration Panel:
- Easy uploading of your own header image
- Turning on or off the display of elements such as your blog’s tagline or navigation links
- Switching between a fixed-width header vs. a fluid one that spans the width of the browser window
- Rearrange header elements by simply dragging them on the screen
- Finely control post meta options, such as the publication date, author name display, number of comments, and more
- Set the number of featured (full) posts for the blog’s main page compared to excerpts or just headlines
- Choose normal or small excerpts (full-page width vs. a smaller “box”) — or no excerpts at all
- Choose to display comments on pages or not
- Choose to show commenter Gravatars or not, enter a URL for a custom default (blank) Gravatar, and set the avatar display size in your comments
- Set fixed or fluid width footer
- Choose to show or hide various footer elements, such as copyright, go to top link, login link, and more
- Set site page dimensions and page margin
Navigation Panel
The Navigation Panel in the Visual Layout Editor lets you control and fine-tune one of the most important aspects of your blog’s design: the navigation bar. Capabilities include:
- Show or hide subpages (also known as child pages) in your navigation bar
- Hide the Home link, in case you don’t need it because you’re using the blog header only as the home link
- Make any links in your navigation bar inactive so they don’t show (but the pages still exist)
- Drag any link in the navigation bar to any position you want, until you have the link order you desire
Leaf Panel
Aside from the Visual Layout Editor itself, Headway’s Leaf system is revolutionary. Think of leafs like table leafs, not tree leaves (Which, incidentally, is why it’s proper to say “leafs” instead of “leaves.” Seriously. We looked it up). Headway’s Leaf Panel in the Visual Layout Editor gives you unprecedented control over the visual placement and dimensions of page content.
Simply put, each leaf is a content box. You get to decide what goes into the box, where the box goes on the page, and how big the box is. You can add leafs, arrange them, resize them, delete them, and edit their settings. The kind of Leafs you can add to any page layout you want in Headway are:
- Content Leaf: displays posts according to settings you choose, such as including or excluding certain categories and the number of posts to be displayed
- Widget Ready Sidebar: add as many sidebars as you want in your layout—including the ability to have special “sideways sidebars” in the footer (which has, until Headway, always been a weak area in WordPress theme design)
- Text/HTML/PHP Leaf: put custom content of any kind you want into this leaf: regular text, XHTML, PHP, and JavaScript (such as for email opt-in forms, for example), it can take just about anything
- Featured Post Leaf: featured post leafs allow for animated transitions between a series of featured posts on your blog all within the same box—these look great at the top of the blog main page
- RSS/Recent Posts Leaf: grab any RSS feed from any source (including your own, of course) and display a specific number of recent posts from it with this powerful Leaf
- Image Rotator Leaf: create an animated slideshow of images that gently fade one into another with this super-easy Leaf, and put it anywhere on the page you like
- About Leaf: create a highly detailed “about” box on your page with text, an image (you control the size of the picture), and a “more” link
- Photo Gallery Leaf: create amazing photo galleries for your blog with no extra WordPress plugins required—you have total control over every detail of the gallery, from thumbnail settings to slideshow animations
And here’s a more complete list of what’s possible with Headway Leafs:
- Arrange Leafs by drag and drop
- Resize Leafs by dragging borders or by entering precise dimensions in pixels
- Add Leafs
- Leaf Links: to speed of the process of creating layouts, you can tell a page to link to the leafs of another page
- Each leaf can be set to have a fixed or fluid height
- Each leaf can be aliged (floated) to the left side or right side of its container area
- Each leaf has its own panel which can be opened so you can change the settings the way you want
- Each leaf has an ID number you can use to rapidly duplicate content dynamically into other leafs (simply tell it the ID number of another leaf, and presto!)
Headway Visual Design Editor
The Headway Visual Design Editor is where you fine-tune your visual design by changing fonts, margins, and other aspects universally of the leafs, sidebar widgets, and other WordPress blog elements. The way it works is simple: you click on any item in your design, and the Headway Visual Design Editor will show you all the properties about that item you can change.
To that end, the Headway Visual Design Editor panel has three parts: the Inspector, the Element Selector, and the controls for the selected element. The Inspector tells you what you’ve selected on the page, so you know for sure what you’re working on. The Element Selector lets you choose elements to work with, such as the page background or the headlines of your blog posts (not everything can be clicked on to edit it).
Even if you don’t know what a particular element is… or where to even find it in your layout, that’s okay. There’s a button in the Element Selector to “call out” an element, which makes it “light up” for a moment in the layout so you can find it.
Other properties you can control for selected elements include:
- Colors: you can use a visual color picker or enter a hexadecimal color code
- Font/Typeface: choose from a list of nearly universal web fonts (found on all Macs and Windows computers)
- Font Size: set the size of your text in pixels
- Line Height: set how much vertical space is in between each line
- Font Weight: set text as bold or normal
- Text Transform: set text as being normal, uppercase, or lowercase
- Font Variant: choose a “small caps” effect
- Letter Spacing: adjust the amount of gap between the letters of words to wider or more narrow
