Flex 1.1 Brings You Enhanced Video Support, a New Nav Menu, and Much More!

by Matthew Horne · 54 comments

First time learning about Flex? Be sure to read the original launch post, too.

After we launched the new Flex Skin, you guys had lots of good ideas about how we could enhance the Skin and make it even better. Thanks to your feedback, Flex 1.1 now includes optimized video support, an optional desktop navigation menu, and a more customizable call-to-action area.

Today, we’re going to take a closer look at these new features, and if you’re an existing Flex user, we’re also going to walk you through the process of incorporating these features into your existing site. (If you’re a new Flex user, you can just install the Skin and start winning immediately.)

Let’s dig in!

Enhanced and Optimized Video Support

You asked, and we delivered—Flex now includes an option to include video in the Featured Image area on the home page.

But we didn’t stop there.

Videos are one of the biggest performance killers on the web. If they are simply embedded in a page (which is the most common implementation), they can have a massively negative impact on page load times. Unacceptable.

Instead of loading your video directly, Flex will only load the video when a user clicks on a “play” button the video area. This yields the most desirable result—users see there’s a video they can watch, and your site doesn’t suffer the performance hit of loading a video that likely won’t be viewed by everyone. Quite literally, everybody wins.

In addition, we’ve added a new video button to the WordPress post editor that allows you to place optimized videos in your posts or pages (in the large Featured Image area).

Note: If you’re an existing Flex user, you’ll need to update your Skin’s data to take advantage of this new feature. We will walk you through this process below.

New Desktop Menu

In addition to the hamburger-style mobile menu that shipped with the first version of Flex, we’ve added an optional desktop menu that will display in its entirety if the user’s display is large enough to accommodate it:

flex-desktop-menu

Simple. Useful. Boom.

Expanded Call-to-Action Options

In Flex 1.1, you can customize where the call-to-action will display. Each template that includes the call-to-action now has an option to move it from the bottom of the page to the top, where it is more visible.

call-to-action-display-location-options

If you want, you can also suppress the call-to-action on a given post or page by ticking a box in the WordPress post editor. Easy!

Also, for output versatility, HTML is now allowed in the call-to-action title. For more information about this, check out the updated documentation on the Flex call-to-action area.

3 Selectable Button Styles

Buttons are important—after all, they are specific elements where users take action on your site. Because of this, it’s nice to have a few button styles to choose from when you go through the process of perfecting your design.

With this in mind, we’ve introduced 3 different, selectable button styles in Flex 1.1. This bit of goodness is located on the Design options page:

flex-button-styles

Copyright & Attribution: Creative Commons Now Supported!

This one is simple enough—the Copyright & Attribution area now has an option to replace the copyright symbol with the creative commons symbol.

Customizable Notes, Tips, and Alerts

Notes, tips, and alerts are great ways to highlight certain content, and now Flex 1.1 allows you to customize the colors used in these design elements.

content-block-color-options

In addition, you can customize the associated fonts by selecting the appropriate option from the drop down menu called Layout Settings, Fine-tune Fonts, and More on the Design options page.

Front Page Featured Image Width Control

Based on your feedback, we learned that some of you wanted control over the width of the Featured Image on the Front Page template. As a result, Flex 1.1 includes an option to limit the width of the Featured Image:

limit-front-page-options

A use-case for this option would be when you have an image that isn’t intended to stretch the full width of the page; for example, a fixed-width image that would look weird if stretched to fill the entire width of the screen.

flex-with-limited-image

Note: The actual width of the image in fixed-width mode is determined by the total width of the your content.

Social Follow Links

The original Flex release included options to add your own social follow links, but you couldn’t control where these links displayed. Now, you can choose to display these links in the sidebar, footer, or both:

social-follow-links

“No Sidebar” Templates for Posts and Pages

To give you more precise control over your pages, we’ve split the No Sidebar template into two separate templates—one for posts, and the other for pages.

For a complete list of changes, check out the updated Flex changelog.

Instructions for Existing Flex Users

In order to acquire some of the new features in Flex 1.1 (video support, the new desktop menu, expanded call-to-action options, and updated templates), you’ll need to perform a partial data reset.

You need to know: Performing the following partial data reset will overwrite any changes you’ve made to your Flex templates in the Skin Editor. Before resetting Skin data, be sure to create a backup of your Skin in the Data Manager portion of the Skin Editor. This way, you can always recover your work in case things don’t go as planned.

To finish the Flex 1.1 update, you will need to reset your Boxes, Templates, CSS Variables, Skin CSS, and Editor CSS data, as shown in the following image:

Flex Skin 1.1 options reset

To avoid potential confusion, we are providing you with this information before sending out the Flex 1.1 update. We want to make sure you are prepared and understand what you need to do to acquire all the new functionality.

When Can You Get the Flex 1.1 Update?

Flex 1.1 is available now via automatic updates. Look for the update notification in your WordPress dashboard.

If You’re a New Flex User…

All you have to do is download and install Flex 1.1 and enjoy the great features, enhanced performance, and meticulous optimizations included in this brilliantly powerful Skin!

To get the Flex Skin, simply log into your DIYthemes account and visit the Get Skins page.

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

{ 54 comments }

Shaun O'Reilly

I’m loving Flex 1.0 so far, and the changes you’ve made to Flex 1.1 make it even better.

Delighted to hear that you’ve added a desktop menu that displays automatically. That’s a much better option for desktop users who are not as familiar with how to use a hamburger menu as virtually all mobile users are. Great job!

Glad to hear that you’ve added a video option for the Featured Image section in Flex 1.1. I can see the sense in not auto-playing the video at the outset from a performance perspective for most applications. However, will there be the option of having an auto-play video in future updates of Flex for people who want that and are OK with the performance hit?

Can’t wait for Flex 1.1 to be released so I can tweak things further.

tam

I’m really pleased with the results too

Geoffrey Allan Plauché

Wow! Excellent responsiveness to customer feedback and some big improvements to an already great skin.

Meditation Guides

I agree with Geoffery and tam – it’s a really relaxed feel with the responsive improvements and the theme is just simpler to use than many others. Sure it will remain popular.

The A-TEAM

Can’t wait! Great news is now we can split the No Sidebar template into two separate templates—one for posts, and the other for pages.

Heidi Go

Requesting demo of Flex with desktop menu please.

Bla Farm

It does not seem that this new feature supports self-hosted videos — as opposed to videos hosted on YouTube or Vimeo. Is that correct?

Matthew Horne

If the self hosted video has an iframe source, it will work.

Kerry

The call-to-action button works perfectly, I will consider buying this new version for my blog.

David

Where can I see a demo please?

kertaspaper

Hi can I see a demo ?

Matthew Horne

I will update the demo this weekend.

Gowtham V

Nice additions to the skin. I have used flex for few of my Thesis 2 Web Design clients. Waiting for the demo of flex v1.1.

Thanks,
Gowtham V

Pierre

Hi

In my book the introductory price should be extended for a month.
Version 1 was kinda beta to me, version 1.1 look better but still need some ironing too. Matthew, when adding Design Options, make sure there is enough options in the option.

Pierre

Matthew Horne

What options do you have in mind?

Dinsan

I updated today. I was looking forward to the desktop menu, but it is currently broken for me. I am hoping that it is some CSS cache!.

Matthew Horne

Did you reset your skin as per the instructions?

Tauseef Alam

So finally the much-awaited version of flex is out. Thanks for the announcement.

Rick Van Ness

I don’t notice anything that makes footnotes easier to manage, without reverting to html coding. But let me know if I’m wrong. Thanks. I’m looking forward to a demo site.

Wendel White

Saw the update today and rushed to click the update button before reading the material on the update process. Then, removed theme, since it was all badly formatted, and reinstalled Flex 1 from my download file. All is good now, I have read the instructions but there is no longer an option to upgrade. What did I do? How can I fix it. Sorry…

Aniruddh

Thesis is a good framework, there is no doubt in that. But only problem is the new features available on new skins. Old skins gets updates very late. To have have latest features need to buy new skins. This is unacceptable. Each skin has some features and misses some. Why can’t you provide the features such as social media profile icon links via boxes,tabbed posts box for other skins, Social follow links to other skin. If you want, make available for certain price. Each skin has its own advantages. It is not just paying money to buy new skin, after customising is the pain. Hope thesis works on this rather than releasing new skins with new features. Add features your current skin.

Chris Pearson

Aniruddh, please show me ANY other Theme provider who adds ALL features to ALL their Themes.

Companies don’t do this because it just doesn’t make sense.

The Classic Responsive Skin, for example, doesn’t have an area that’s comparable to the Featured Image/Video area found on Flex. And that’s ok—not everyone needs or wants a big featured area.

The same goes for things like tabbed posts or other non-essential components of that nature.

With that said, certain aspects of what you said are absolutely valid. Any performance-related features such as image and video optimizations, script reductions, and enhanced script handling should be applied to all Skins.

In addition, we have already begun the process of updating the codebase of our older Skins to match the Thesis 2.2 specifications (which are leaner and more powerful than previous versions).

The Classic Responsive Skin was updated when we released Thesis 2.2; the Pearsonified Skin received an update in February; and Effectus and Promo will receive similar updates soon.

Ultimately, it’s inaccurate for you to say that we don’t update our Skins. It seems to me that some of our Skins simply don’t include features that you like (such as a tabbed posts box).

If you like, we can help you develop your own Boxes like this, and then you can add these Boxes to any of your Skins. It’s easy!

Aniruddh

Hi Chris,

Thanks for your detailed answer. I agree that, all skins will not have all features. But for example, I have effectus skin. I really appreciate the way it is designed and its features. But I miss Tabbed post boxes and social sharing boxes in this skin.

I am not a developer. So I don’t know coding. Still I will try to do. Please share me the updated guide link which demonstrates on how to create these boxes for Tabbed post and social media box. Also, you have implemented new schema and you made it easy to implement. But not able to find resource which explains me on how to create new schema in Thesis 2.2.
I hope you can understand the frustration which I felt.

Brian McVay

I purchased Thesis many years ago, I had let my blog domain lapse. I recently restarted my blog and would like to know if I am still eligible to download Thesis and use it.
I unfortunately don’t remember what email address I used when I purchased before. It could be brian@brianmcvay.com or possibly caretaker1091a@hotmail.com , I am not sure.
Please let me know if I can still get Thesis to use on my blog.
Thank You for your time.

Chris Pearson

Brian, your account (with the first email address you mentioned) is still active, and as such, you are eligible to download and use Thesis.

Wendel White

Just got back to trying the upgrade again. Still having trouble with the new menu feature. When I activate the “Desktop” menu, all of the the menu items appear in a single vertical column centered at the top of the page instead of a horizontal row across the top of the page. Any suggestions? I assume I am missing something simple. Thanks.

Wendel White

BTW, I did follow the instructions this time and disabled plugins during the update.

Chris Pearson

Wendel, it sounds like you still need to update your Skin CSS.

Wendel White

Hi Chris, I see there is a new version, will try.

Wendel White

Everything seems to be working now! Thanks for adding this feature (menus).

Kris

It’s always a relief when someone with obvious expsrtiee answers. Thanks!

Brandon Cordoba

Just bought flex a couple of days ago; y’all did an amazing job with it thank you, again!

Feature Request: An html box for you can edit from eac “edit post” & “edit page” that would do inside the “Featured Image”. This would allow me to add a specific headline & texts for each post & page. Without having a lot of “Skin Content > text boxes”.

If this is the wrong place for a feature request I apologize. You guys implemented so many feature request from the last blog post I was hoping to get 1 by posting here as well.

Martin

I am very interested in Thesis but have questions and can’t find any way to contact your company other than to post a comment here. Can somebody contact me? Making a decision today. Thanks.

Miguel Wickert

Hey Chris and Matthew,

updated my flex skin accordingly but still cannot change that terrible purple color on hover, links and call to action at the bottom of the home page. What’s up with this? I tried using the quick color scheme and it does not change the color but it will still change the button layout. Thanks,

Miguel

Bican Valeriu

Thesis was and still is the theme that i love the most. I will make a skin soon after i read the documentation because my older skins dont work after the update. I want to integrate with Foundation Flexbox css.

Tauseef

Just updated the theme for one of my clients. He is happy to see the responsive customer feedback & desktop menu.

Wendel White

Video question: Am I correct to assume that the video feature does not work with Vimeo? Maybe I am not using it correctly. Should I remove other video plugins?

Wendel White

Sorry, I was using the wrong url. Vimeo does not use the word “embed” in the url so it was a bit confusion. It’s all good.

Jacky

Hey Admin , I own Thesis but i don’t own the Effectus skin, I can’t figure out how to buy the skin, Can you please guide though the necessary steps.

Abhilash PS

Yeah Video feature will enhance the Skin. Thank You for the article. I like to start a new financial blog, Would you prefer a good WordPress theme for me, currently Using Blogspot. I hope you’ll answer.

dana

This would allow me to add a specific headline & texts for each post & page. Without having a lot of “Skin Content > text boxes”.

Anika

I updated theme on my blog. I feel happy to see the responsive customer feedback. Thanks for the update.

Diana Jeff

Since I have installed Flex 1.0, I have been loving it so much. I must say the new features, specially the Enhanced video support made it even better. Now it has become one of the top theme out there on the Internet.

Wendel White

Does anyone know why I am seeing this error in my log files?

“24-Aug-2016 00:08:11 UTC] PHP Notice: Undefined property: stdClass::$comment_status in …/public_html/wp-content/thesis/skins/flex/skin.php on line 204”

Invlo

Yet to try Flex. Will try my hands on this weekend.

Bren Murphy

Chris,
Great suggestions and some really helpful advice here – I love the desktop menu that displays automagically – very nice touch!
Thanks
Bren

Jasmeen

Why don’t you also add Google AMP feature with it ?

Essential Oils Australia

It is definitely up there with my fave theme – and I have been trying so many with different websites. Like the simple open styling and way that the navigation is so responsive. – Quite brilliant actually!

RJ Tayaban

Flex Skin is looking great. It sure loads very fast too. And as always, the typography is spot on. Way to go Chris!

Sumon

I see there is a new version. Thanks for the announcement

Amadou

Hi,
No related posts ? If we want to have specifics customizations, how does it run ? Thanks

Chirag

I am soon gona try my hands on Flex

Mart

Have to try it. Thanks

Tim

Interested in Flex. On the demo, front page, how difficult would it be to replicate the ‘Latest Posts’ and pull from different categories? For example, have different sections for latest posts, updates, podcasts, etc.? Best done in the skin or better in the skin editor? Have a magazine-style blog, trying to determine if flex is my best option. Thanks.