Written by on

Introducing Air, A New Foundation Child Theme for Builder

Introducing Builder Child Air, a new foundational or starter child theme for iThemes Builder. Whether you’re using the Builder Style Manager or writing your own CSS, we hope Air will be a great new place to start when creating your custom responsive-ready Builder child themes.

Builder-Child-Air

Check out the demo

Divider

Theme Features

Builder child Air includes several convenient built-in features to help lay the groundwork for custom child theme creation.

Built-in Mobile-Ready Menu Style

Air includes a sleek new built-in mobile navigation menu style. To activate this feature, simply select the Mobile Navigation style when modifying the navigation module settings of your Builder layout.

mobile-nav

This will activate the mobile menu when your layout is viewed from devices with screens at 500px or below, while still maintaining the default style of the navigation menu for larger screens and desktops.

Check out this preview of Air’s (expanded) mobile menu:

Mobile-nav-demo

Fully Optimized for Style Manager

Air’s CSS has been simplified, making it easy to tweak your styles with Builder Style Manager. Change up your site’s font, colors and backgrounds (just check out the next section for more info on using the Inset Module Style for this purpose) and more.

Style-Manager

New Inset Module Styles

Air includes new Inset Module styles for all seven Builder modules (the header, navigation, content, widget bar,image, HTML and footer).

inset-module-style

To see the usefulness of Inset Module Styles, check out the Inset Modules layout from the demo site.

Why Inset Module Styles? By default, Builder Child Air includes modules that are full-width. So, this means if you use Style Manager to change the background color of a module, you’ll end up with a background that touches the edge of the text.

To circumvent this issue, we created the new “Inset” Module Style to add appropriate padding to the selected module. See the difference?

default-vs-inset

Full Window Image Style

Now you can utilize images that are full window (or full-width) when adding an image module to your Builder layouts. This module will display your image at the full width of the browser window, no matter how wide or narrow.

To see how this image module displays, check out the Image Module layout. The image at the top of the page uses the “Full Window” Image Module Style.

full-window

To use the Full Window Image Module Style, select “Full Window” from the Image Module options dropdown, at the bottom of the image module settings.

full-window-image-module

As you can see from the screenshot above, Air also includes additional Image Modules Styles, including Inset (padded) and No Spacing.

Post Formats

Air features styles for several different post formats, too, including the standard blog post, image, quote, status and video. These post formats offer a way to share these different types of posts in a unique way. You’ll find the different post formats available from the post editor page.

post-format

Just select your type of post format, apply it to the post and publish. To see the different post format styles for Builder Child Air, check out the posts on the demo site.

Extension Styles

Last, but not least, Builder child Air includes theme-matching styles for Builder’s built-in Extensions. Again, Builder Extensions are like mini-themes that can be applied to either Layouts or Views. They extend or override the structure or style of the Child Theme by providing additional code that changes the way content renders.

extensions1

To see Air’s Extension styles, check out these pages on the demo:

Resources for Creating Your Own Custom Child Theme

If you’re ready to get started creating your own custom child theme, check out these video tutorial and WebDesign.com webinar resources:

Download & Purchase Info

All current Builder Foundation Pack, Builder Developer Pack, All Access Theme Pass and Toolkit members will find Builder child Air available now for immediate download from the iThemes Member Panel

Air is available for purchase as part of the Builder Foundation Pack, Builder Developer Pack, All Access Theme Pass and WordPress Web Designer’s Toolkit.

3 Days Only! Save 30% off the Builder Developer Pack with coupon code AIR30WP through midnight CDT April 7, 2013.

Get Air Now

Comments

  1. Awesome. Any chance this slick new Built-in Mobile-Ready Menu Style will make its way on other responsive builder child themes…like “Avail” and the “Expansion” series?

    Also, any idea how that menu functions if say you have two separate nav menus on a single page? For instance an main nav menu at the top of the page and another nav menu at the bottom of the page (just above the footer module)

    Thanks for the great work!

    • Hi Ronester –

      If both navigation styles for those modules are set to “Mobile Navigation,” they should both output that style. We did include separate Default and Inset Styles in case you want to change up the way the navigation renders.

      I’ll definitely pass along the request to add the Mobile navigation style to other child themes. This theme was the first to implement it.

  2. Hey guys –
    YES PLEASE add this mobile nav option for the other responsive sites! That is the ONE thing keeping me from building responsive sites for clients (although I went ahead and did it with my own site) – the responsive menus totally turn them off.

    SO EXCITED at the release of this new theme!
    I’ll hopefully be using it to show off some beginner-level WP customizations at WordCamp Nashville (http://2013.nashville.wordcamp.org/)… just need to dig into it to see what the possibilities are.

    Thanks so much, you guys!

Respond

×

Ends Today! Save 35% off BackupBuddy with coupon code BACKUPWP35