Now Playing: The Flex Skin for Thesis

by Chris Pearson · 77 comments

After reading about Flex below, be sure to check out everything that’s new in the Flex 1.1 update!

Flex Skin screenshotFor years, we’ve been providing you with the best-performing designs in the business. From SEO to speed, we’ve focused on the details and given you Skins that look just as good on the inside as they do on the outside.

But now that we’ve nailed the fundamentals and can guarantee you the best out-of-the-box performance in the business, we’ve shifted our focus to what you really want—more gorgeous designs!

Today, I’m proud to introduce you to our newest creation, the Flex Skin for Thesis. Matthew Horne (the guy who brought you the Effectus Skin) has been working on it for months, and I know you’re going to love what you see. Let’s take a look!

High-impact Front Page Design

Whether you’re a business or an individual, the typical old WordPress-style home page simply doesn’t cut it anymore. When visitors come to your site, you’ve got a very limited amount of time and space to make a great impression, and Flex is built to help you make the most of this interaction.

With its easily customizable Front Page template, Flex will give your site some serious visual “pop,” regardless of the device your visitors are using.

You can add your own huge cover image with the click of a button, and you can also include a call-to-action to send your visitors where you want them to go. (Oh, and Flex will automatically optimize your image for all devices to ensure your site is as fast as possible for everyone.)

You may also want to use the built-in Content options to pick and choose what displays on your Front Page. Bottom line? With Flex, you can create the precise experience you want for your visitors.

Versatile Templates for Every Type of Page

In addition to the specialized Front Page template, Flex includes a Landing page template and a No Sidebar template.

The Landing template is perfect for a call-to-action or sales pitch, where you want your visitors to take a specific action. Also, the No Sidebar template is ideal for focusing your visitors’ attention on your content while still providing them with navigation and general site branding.

Brilliantly Simple Design Options

Flex Skin quick color schemeLike the Pearsonified Skin, Flex is equipped with an advanced color algorithm that creates an entire color scheme based on a single color selection.

In addition, Flex comes with a quick color selector you can use to implement one of 16 hand-picked color schemes. And if you don’t see a color you like in the quick selector, you can always choose whatever colors you like by clicking on the big color swatches in the Design options.

The bottom line is that Flex gives you infinite color scheme options. No matter what color(s) you choose, Flex will adapt the design accordingly, and you’ll always end up with a finely-tuned color scheme.

Aside from the smart color tools, Flex comes with everything you need for beautiful typography. Dozens of Google Fonts and the Proxima Nova font are included, and because it leverages Thesis’ typography tools, Flex will always adjust your design to pixel-perfection based on the font you pick.

(No other WordPress Theme can do this. We think this is one of the coolest things about Thesis.)

Built for Speed

We know that big header images are one of the most sought-after features in modern design, and Flex includes really BIG images that will make an impact on your visitors.

Unfortunately, these big images come at a pretty high price—a price that is almost never addressed in other WordPress Themes.

That price? Performance. Big images are the number one performance killer on websites (and poorly-handled scripts are number two…more on that in a moment). And it gets worse—mobile visitors are the hardest hit by performance problems associated with your design.

But where other Themes fail, Flex excels. Thanks to an included image algorithm, Flex optimizes your images for all devices, thereby ensuring maximum speed for your visitors without sacrificing anything in the way of design.

Flex also takes this one step further by optimizing all scripts included in your HTML, regardless of whether or not they are included by the Skin or by Plugins that follow sub-standard coding practices.

In other words, Flex is quite literally a performance enhancer for your website!

Enhanced Author Bio Box

Whether you run a multi-author site or just want to make yourself look as good as possible, you’ll benefit from the snazzy author box included at the bottom of the Single template.

You can make author avatars any size you like, and you can even link author names to archive pages for enhanced SEO.

And hey—if author boxes aren’t your thing, there are dozens of other details like this that set Flex apart from the rest.

Customizable Call-to-Action

One of the best ways to get visitors to do what you want is to include a call-to-action on important pages. With customizable call-to-action boxes on the Front Page and Single templates, Flex has the tools you need to tell your audience where to go and what to do!

Check out the call-to-action at the bottom of this demo post, and you’ll see how useful a feature like this can be. It’s ideal for email signups, product sales, or even just linking the most prominent content on your site. Use it however you want!

Go Social!

Flex Skin social linksIt’s no secret—sharing links to your content on social media is one of the best ways to generate traffic for your site.

To help you with this, Flex automatically includes social sharing links to Twitter, Facebook, Google+, Pinterest, email, and even WhatsApp for mobile users!

(You can turn this functionality off if you like, too.)

WYSIWYG Post Editing

Naturally, Flex makes use of the latest Thesis technology, and one of the coolest aspects of this is the WYSIWYG post editing environment. Whether you’re composing a post or a page, your text will look precisely like it does on your site once it’s published.

If you’ve not yet experienced WYSIWYG post editing with WordPress, you’re really going to love this feature. Many people say there’s no going back from it!

Mobile-first Design

The Flex design is geared toward mobile devices, but it looks great on desktop computers, too. With its mobile-first, responsive CSS framework, Flex is easily customizable while still being totally optimized for all your visitors, no matter how they view your site.

Bottom line? Your site never looked so good…or so fast!

How to Buy the Flex Skin

Before you can purchase Flex, you need to have an active Thesis license. Once you’ve got a Thesis license, you’ll be able to get in on this one-time-only deal:

To get the Flex Skin, visit the Get Skins page and click on Flex.

Questions? Comments? Let us know in the comments below!

About the Author: Chris Pearson, Thesis creator and DIYthemes founder, is obsessed with optimizing the web and making sure every last detail receives the attention it requires. You should follow him on Twitter here.

If you enjoyed this article, enter your email below to get free updates!

{ 77 comments }

Mark Gould

Congratulations on your new skin design, I really like it and will be putting it to use soon. How about a Spring Effectus and Flex Skin Promotion? I’d be up for that ASAP.

Thanks for your teams great work.

Chris Pearson

You’re in the middle of one! The $49 introductory deal is $18 cheaper than the eventual price of the Flex Skin.

Jaume Garcia

Extremely fast, congratulations!

Chris Pearson

Thanks, Jaume!

Keith Erskine

Used Thesis years ago. Good theme.

One of the challenges, both with SEM & SEO, is getting a good score as measured by the Google PageSpeed Insights tool for both desktop and mobile.

How does this skin shape up in that area? I like numbers :). People say it’s fast. How fast?

Cheers
Keith

Kevin Rape

I’m not sure about the Flex skin, but there are a number of ways to increase your Google PageSpeed. I use the Social Triggers skin, and consistently have around 95% and higher.

a3 Lazy Load
Autoptimize
WP Fastest Cache (not Pro)
WP Smush (not Pro)
WP-Optimize
and Cloudflare CDN/Caching.

My page speed loads in about 1-1.5 seconds without cache, and as fast as 0.25 seconds with cached pages.

Pierre

Hi

Matthew, for full-width (browser) images, what would you say is the best width rez in pixels and image format (.png or .jpg).

Is WP 4.5 still down-sample (.jpg) to 90% quality ?

Great job on this Skin and thanks for your input.

Pierre

Matthew Horne

Hi Pierre,

It depends on the desktops that you are tailoring for. If its the largest, then maybe 2200 wide could be a good balancing point.

The smaller sized images will be auto generated for you.

Pierre

Hi Matthew.

My second question is related to this :

WordPress 4.5 increases the amount of compression applied to intermediate sizes by changing the default quality in WP_Image_Editor from 90 to 82. As noted in the proposal for this change, this results in a noticeable reduction in file sizes with little change in visual quality. Developers can override the default image quality value using the wp_editor_set_quality filter.

As a reminder, this setting only applies to the intermediate sizes that WordPress creates, and not the original files uploaded by users. For any users who need to maintain a higher image quality for intermediate sizes, the default quality can still be changed with the wp_editor_set_quality filter.

I use that filter, since I already optimise my images.

Pierre (postrophe)

paulin

Very good hack. I just implemented this filter in my wordpress site. Thanks for sharing the tips.

Stalyn

Wow, it look pretty nice. Congrats.

Heidi Go

I had to give up on Effectus and just stick with Classic Responsive because I require non-collapsible menus for my websites. Unfortunately, a lot of people don’t know what that menu button is for.

1) Is it possible for Flex skin to have non-collapsible menu?

2) In percentage, by how much is Flex faster, compared to Classic Responsive and Effectus?

When it comes to speed and mobile-responsive, I’m at the point wherein I’m seriously considering just making facebook my main website.

Matthew Horne

Hi Heidi,

1) I will look into this and experiment with adding this as an option.

2) In terms of performance, it would depend on the sites in question. No two sites are the same, but the skin is as optimized as can be out of the box, all you really need to add is a caching plugin.

Tim

Having the option to not use the collapsible menu is essential from a usability standpoint IMO. Like Heidi says, not everyone knows that the multiple horizontal lines means that a menu is available. Not everyone is a web designer and most users aren’t psychic. Plus the current set-up means that an extra click is required just to see the menu.

Will the option for a non-collapsible menu definitely be added and if so, by when will it be implemented?

Chris Pearson

Tim, are you referring only to the desktop version of the design, or are you speaking about the mobile version as well?

I ask because displaying the entire menu on mobile devices is certainly not standard at this point—nearly every mobile design I can think of has tap-to-reveal behavior on the menu.

Tim

Yes – I’m referring to desktop users. Not many of them expect to click on the menu symbol to see the full menu displayed. If there’s room there on the desktop then the main navigation items should be displayed by default. These are not currently shown on Flex on my desktop.

Mobile users are used to having to click on the menu symbol to see the full navigation menu, desktop users are not. Unless I’m missing something a tweak is required.

Pierre

Hi

A simple solution could be to append some wording to the icon. (a UI field or CSS)
In Custom CSS add :
.fficons-nav-menu:before {
content: “menu”;
margin-right: 10px;
}

Pierre

Aaron

Cool stuff. A little video demo on it’s awesomeness would be, well, awesome.

Dinsan

Nice job Chris and Matthew! I loved the skin and came back to thesis after a short break.

However.

It is a shame that you do not include built-in breadcrumbs or even an official box. Isn’t this one of the first things you should do when focusing on SEO?

Dinsan

Also, the category archive does not show the description of the category. I do not see an option to add this from the editor as well.

Chris Pearson

In 2005, breadcrumbs were considered a standard.

However, knowing that breadcrumbs often do not reflect true navigation paths, Google began to de-emphasize these around 2006 or 2007.

Breadcrumbs likely will not affect your SEO either positively or negatively, but they can be helpful for users. But because they don’t always reflect navigation paths, breadcrumbs can also be confusing.

This is a decision that should be made on a site-by-site basis; most sites are simple enough that breadcrumbs are neither necessary nor particularly helpful.

Dinsan

Thank you Chris!
What about the category archive introduction?

Rick Lomas

I loved Matthew’s Effectus skin, so I’m going to grab this straightaway.
I’m lliking how the social stuff is done 🙂

Chris Pearson

Excellent, Rick! We know you’re gonna love Flex.

Alex

I like this skin, good job! I have two questions though;

1. What is the font used? Would I be able to use that font on my main site on the classic responsive skin?

2. I like the menu styling on the mobile version of this skin… would I be able to replace my classic responsive mobile menu for this one, while keeping the classic responsive skin?? thank you!!

Matthew Horne

Hi Alex,

Main font that comes with the Skin is Proxima Nova.

I don’t think it will be quite so simple to replace the menu on Classic Responsive because this menu was made specifically for Flex and leverages its own JS, CSS and HTML classes.

Andre Chaperon

This skin is a great step forward.

**FEATURE REQUEST**

The ability to have full-width images within the post/page body, like this.

Medium does this even better.

The New York Times has a lot of long-form stories featuring fill-width images.

Been waiting for this for ages. Pretty please build in this feature.

Andre

Chris Pearson

Thanks for stopping by, Andre.

I’ve wanted the full-width image feature in a Skin for some time, but the major roadblock has been requiring the user to add a special class to the images to make them display across the width of the design.

(If we make full-width behavior automatic, then images that aren’t intended to be full-width will require special classes—aka manual input from the user—to display properly. It’s a catch-22.)

Now that we’ve gained some experience with adding functionality to the WordPress editor, we may be able to take a different approach to this problem.

For example, let’s say a new Skin supports full-width images; these images would have to be added with a special button in the editor to avoid the need for the user to do any hand-editing.

There are some future-forward compatibility concerns here, but suffice it to say we’re closer to a solution than we were a year ago 😀

Andre Chaperon

Chris – that’s great news.

And for the record, I don’t mind manually adding a special class tag to images I want full-width (I don’t use the WYSIWYG editor anyway). Does that work now (special image class)?

Andre

Chris Pearson

The special image class does not work now, but since Matthew is currently working on an update to Effectus (and probably Flex as well), we can take a look at adding the necessary CSS.

Geoffrey Allan Plauché

The social share buttons look great. Do you have any plans to add more options? Such as Instagram and Slack?

Does the skin have similar buttons for social follow links in the sidebar and elsewhere?

Does it also have Mailchimp/Aweber email list sign up forms built-in the usual places?

Geoffrey Allan Plauché

Nevermind on that last question. The email signups would be the call-to-action box. I’m curious how customizable they are, however. The demo is just some text and a link. How would it work for email signups? Is an email form field added? Or does clicking the link produce a popup with the email signup fields?

Matthew Horne

No buttons for the sidebar, but I am thinking about adding a widget which people can add to the sidebar which mimics what is in the footer.

If there are buttons people really need then I can add them as options, Instagram is already available though. You should be able to see the available social links on the demo now.

Geoffrey Allan Plauché

Ah yes, thank you. The social links weren’t visible in the footer last night. An option to add them to the sidebar as well would be nice.

Matthew Horne

Noted Geoffrey.

Inger Gill

I am using Thesis for my websites since long.

Question: Is it possible to easily exchange the existing Thesis theme to FLEX,
or do I have to rebuild the sites?

/Inger

Chris Pearson

Switching Skins is literally a 1-click process and does not require rebuilding or any other loathsome activities.

Keep in mind that when you switch Skins, you are effectively changing the design. Your content will remain the same, but your design will be different.

Suriya

Sounds like great skin! We have used Thesis for years and cannot wait to try out this skin. However, we do our main marketing through LinkenIn, is it also included in here, or it has to be done manually?

Chris Pearson

You can add LinkedIn or other services manually. If you need help with this, you can always submit a support request or ask the question in our community forums.

Brian Robben

I’m liking this! Pretty sure I’m going to use it for client’s websites I set up. Keep coming out with good products.

Andrew Stark

It does look like it has lots of awesome features, will add this to my ever growing list of things I want / need to do with my online stuff.

Andrew

James

Great skin with excellent options, Looking forward to test it on my new blog.

Geoffrey Allan Plauché

Can you add Creative Commons options in the Copyright and Attribution box?

Matthew Horne

Yes I will add this in an update.

Nancy

Love the new skin. Next update can you add LinkedIn to social links?
Thank you.

Matthew Horne

Yes I will add this in the next update.

Maryna Smuts

I’m a web designer and am looking for a Thesis Skin that will give me a good foundation for creating almost any look for my clients. Let me add that I’m not a highly technical web designer though I keep learning new tricks and I do know my way around basic HTML and CSS and I rely on adding CSS styling to create the unique effects my clients want.

I do have a custom Designer Base Skin that I’ve been using to build new client websites, but am concerned about issues with that Skin not being compatible with new versions of Thesis and since my styling to create custom skins for clients is in Thesis Skin CSS rather than in Custom CSS, I don’t know how that would affect upgrading versions.

So my question: would this be a good Designer Skin for me?

Thanks!
Maryna

Matthew Horne

Hi Maryna,

Flex is intended to be simplistic in design but also visually appealing.

Under the hood the code is very clean and commented up mostly so its easy to understand what is doing what.

The only recommendation I would make for using a skin to use as a base design skin is that you always used custom CSS and custom.php to ensure your editing doesn’t conflict with the ability to update the skin in the future and of course to ensure you factor in licensing of each skin.

Regards

Kesvel

Great looking skin and super fast on Google PageSpeed tests, well done guys. A few questions:

– Any chance of adding a multimedia box so Video Embed, Forms etc. can be added to Pages similar to the Call To Action available on each page

– Would be nice to be able to move the call to action position for each page either to top or bottom

– What shortcodes are available for the Flex skin ? It would be good to have a botton class that I can add to post/pages. Love the Call to Action button, very clean

Thanks

Matthew Horne

Hi Kesvel, all noted and some great feedback.

marty

Do you provide your themes for wordpress bolgs.

Chris Pearson

Are you inquiring about WordPress.com sites?

marty

Yes, as far as I know themes are working for wordpress.com same as wordpress.org template. Do you provide any free themes.

Chris Pearson

Unless something drastic has changed, this is not true. Automattic has to approve any Themes allowed for use on WordPress.com.

Given that Automattic have violated the GPL by modifying two of my existing Themes, changing their names, and removing my attribution (Cutline → Coraline, PressRow → Pilcrow), it seems very unlikely that they would accept any Themes from DIYthemes.

Finally, we do not offer any free Themes at this time.

Matt

I have to say that I like this! I’m going to have to use this on a client’s site. Keep up the good work.

Gowtham V

Hai chris, congrats on the new skin.

This skin is awesome, looks modern, loads fast and has many options. Its also so cool to have an image optimization algorithm built into the skin itself. Will be using this skin for upcoming client’s thesis site.

Thanks!

Jan

Hi, I’m running Pearsonified Skin, but I am considering a switch to this one.

What would happen to my custom templates in skin editor?

I do have to migrate custom.php, right? Thanks

Chris Pearson

Templates belong to Skins, so when you switch Skins, all your templates will change, too.

For example, any posts or pages you’ve assigned to the Pearsonified Landing Page template will render under the default Single or Page template when you switch to Flex.

Like Pearsonified, Flex has its own custom templates, though, so after switching Skins, you’ll be able to assign one of these templates (or any custom template you make) to these posts and pages.

One reason why the “Preview in Development Mode” feature exists is to give you a way to set up a new Skin before going live with it. Among other things, this will allow you to set up your custom templates and assign them to the appropriate posts and pages.

Jan

Hey, thanx!

Is it possible to copy skin content and templates from one skin to another?

custom.php I just c&p into the new skin folder, right?

Chris Pearson

Theoretically, you could copy one Skin’s custom.php content to another, but there is no guarantee that both Skins will have the same available hooks and filters.

In other words, you will always need to do a “sanity check” when moving custom code from Skin to another.

Ishtiak

I have searched a simple stylish theme in google a lot of time. No theme could me make me pleased, so I installed genesis framework in my blog. But now, I think I got the theme I was looking for.
It is just what I need! Although I am not familiar with Thesis, but I need it now.

Wendel

I am a bit confused by the documentation for Flex. It refers to version 1.1 but I only seem to have a download for version 1. In particular the option to use a Desktop menu does not appear for me. Is this in the future or have I missed something?

Matthew Horne

Flex 1.1 is coming soon, I am writing up the release post and once that post is release, 1.1 will be released too. It is a significant update, so I want to make sure I cover everything you need to know as well as inform users that they need to reset the skin to activate everything.

Wendel

OK, thanks.

dennis

Matthew, love the shin. Any chance you can let me know when update to flex 1.1 will be available? I greatly appreciate it. Thanks.

Chris Pearson

Dennis, we’ll send you an email update when Flex 1.1 is available.

John

Do you have a projected timeframe for the release of Flex 1.1?

Susan

Can Flex support videos and podcasts?

Thanks.

Mike

I really like the skin one thing I would like to change I am not sure how difficult or if there is an option, for desktop sites I would like to have a menu bar similar to Effectus. Is this something easily accomplished with the skin?

Jeebon

Skin is really beautiful and I like the skin. Congrats Chris and Matthew!

Tauseef Alam

I must say the skins are really beautiful. Keep the good work up Chris & Matthew.

Louis Lh.

Love the Thesis, Where can I find all the child themes? Thank you.

Chris Pearson

Check out our demo site to see the official Skins from DIYthemes. Third-party Skins are available from other sites, too.

Natasha

so beautiful and smooth skin, before this i use classic responsive. so fast load and index on google search

karma

Hi there I thought all the images used with the flex skin would be automatically responsive but i’m using my own background image for the menu area and it is static not responsive. Did I misunderstand? I bought the flex skin because I did not want to lose time digging around with code to make images respinsive.
Thanks.

Sofie Massør

Awesome product!

Fast and intuitive to understand and use. However, some small videos would have made it even easier.

Bill

how do I get a copy of flex skin?