Build Your Own Business Website header image

What’s New in Thesis 2.1 for the Web Design Professional?

Thesis 2.1 comes with some very powerful tools for the professional web designer.  It gives you complete control over the appearance and layout of every page through it’s drag and drop template editor.  It also provides you with a brand new CSS code editor right in your dashboard.  It removes every barrier you typically face in realizing your designs in WordPress.  In my opinion, Thesis 2.1 was really designed to free the professional web designer from the mundane hand coding tasks typically required when creating a unique site.  Thesis 2.1 was designed just for you.

The videos below follow up on two other series of videos.  First in the series are the Thesis 2.1 Launch Party videos which introduced the new design and content options.  This series is aimed at helping beginners get started with customizing the appearance of Thesis 2.1.  The second series is “What’s new in Thesis 2.1 for the DIY website builder“.  In this series I introduce the new Thesis 2.1 Skin Editor.  Here, folks willing to learn to take their site to the next level learn the basics of using the skin editor.  If you haven’t watched either of those series you might start with them first.

What’s New in 2.1 for Design Professionals?

The New Thesis Classic is Responsive Skin

First, Thesis Classic is now responsive. Or more specifically the new default skin is the Thesis Classic Responsive skin. You can now tell your clients that their site will be responsive and you won’t need to use a different skin to achieve that. On top of that it is fairly easy to add custom layout elements to your version of Thesis Classic Responsive that won’t break its responsiveness. We’ll be demonstrating that a couple of times in the videos below.

New CSS Code Editor

Thesis 2.1 sports a fancy new CSS code editor that includes syntax highlighting and a whole bunch of time saving keyboard shortcuts. Things like automatic indentation and smart search and replace will make writing your CSS a breeze. Do you have some poorly formatted CSS that you want to paste into the editor? Just let it automatically reformat it for readability once you’ve pasted it. You’ll be amazed!  Plus the syntax highlighting also does some rudimentary error checking, which will help you catch typos and simple errors.

New Dynamic CSS Variables

CSS variables were introduced in Thesis 2.0. Now, however, they can be dynamically controlled by design option settings.  They are also very easy to insert directly into your code. It’s a simple drag and drop inside the Skin CSS editor or point and click in the Custom CSS editor. There are lots of potential uses for these variables when you want shortcuts for inserting repeating code. Plus, when you change the variable, it changes all instances of the variable.  Pretty sweet!

New box options display

Box options have now been moved out of the Skin Editor and into the Skin Content Options. This means that if your end users want to change the menu or change the content of a text box, they can do so without having to open up the Template Editor an figure out where the box is located. This will make supporting your customers much easier and make their experience much more pleasant.

New Thesis DevTools Box

The crown jewel in this release is the Developer Tools Box. It contains handy time saving tools for you while you are customizing and developing a skin. It also makes creating new skins from old ones a snap! If you’ve been around here a while you know I created a Thesis 2 Skin Copier plugin several months ago. Well, the new Dev Tools box blows that poor thing out of the water. Needless to say I will be retiring that plugin. You can also export parts of one skin and import them into another. This is really going to streamline the process of skin creation for the professional web designer.

Thesis 2.1 File Structure

Using the Thesis 2.1 Code Editor

Creating and Using Variables in Thesis 2.1

Leveraging Thesis 2.0 Packages in Your Workflow

Understanding the Thesis Classic Responsive Media Queries

Create Responsive a 2 Column Responsive Header in Thesis 2.1

Change the Responsive Header Behavior for Tablet Devices

Style the Desktop Menu While Retaining the Responsiveness

Create 2 Equal Sized Responsive Columns in Thesis Classic Responsive

Thesis 2.1 Developer Tools Box


Comments on this entry are closed.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options

Related Posts

Comments on this entry are closed.