Screencast Tuesday: Design Editor 3.0, A First Look

This week we finally get another little sneak peak into the world of Headway Themes 3.0! We’re looking at the Design Editor in its roughness. We’re looking at Admin options, and we’re getting our first look at how the Headway Marketplace is integrated into the WordPress Dashboard.

Let us know what you think about the design editor. What’s your most anticipated feature?

Spread the word!

29 Responses

  1. Looks really great guys. I can’t wait to try that out. I’ll be buying a developer license in a few days. Keep up the awesome work!

  2. Hi HT!

    Dev license owner here, from way back with version 1.0 — early adopter, but non-user since then. HT 3.0 has me excited once again though. But a point from this graphic designer of 20+ years:

    From what I can see so far, the per-element UI for the CSS options takes up ALOT of space, but it might be enough for many beginners. But alas, this then means that you (HT) has to decide what CSS attributes to present, which is really frustrating, as there is never parity (H1 gets font, style, decoration, border, background color and the nav ul li gets only font, background color and a few more, but that’s it). Invariably, something is left out and one has t run to the custom CSS tool.

    I humbly suggest something more robust (as an option) for more CSS-savvy dev’s: replace the various sliders with a CSS editor area that supports auto-suggest and auto-complete. One click’s on an element in the layout, and the class/div selector is identified (as HT 2.0.x does now), and one writes some CSS for it. The cool part is that the CSS editor only shows the CSS per selector, not a long, scrolling page of 2,000 lines of code for every selector in the site. Or something along those lines.

    The main point here is (and I cannot figure out why no framework dos this yet), a CSS editor filled with all of one’s CSS declarations is OK for a dev adept at such an approach, but designers on the other hand think per-item, or per-master item (it’s a carryover from using Adobe InDesign and QuakXpress master pages and drawing elements on the screen and a contextual dialog box shows the attributes that can be changed for that element). It would be great to know that, when I click on an element in the Design Mode, I can “see” what CSS is attached to that element (#div’s mostly). Master elements would behave similarly, but their CSS would be mostly .classes. Why sugest this? Because this designer HATES scolling through a mile-long CSS file of code, trying to figure out what CSS code bits apply to “that” bit on the screen. Sure, commenting will always help, but that’s really hard core dev, and most designers don’t think that way (as I mentioned earlier). Worse, when stacked selectors are used in code for efficiency (because the same CSS is being applied to them), it’s nearly impossible to find all of the CSS associated with one element. It might be scattered in multiple places — I think the technical term here is “computed style,” no? as is listed in Firebug, et. al.

    I’m not a dev (if you haven’t figured it out yet), so my thinking on all of this might be (probably is) off or illy constructed. I just see HT 3.0 turning a major corner in WordPress development, and I want to see it really become a power tool for those who have the skills to rev it that high. The key though, IMHO, is to capture the designers out there, not necessarily the coders. To do that, there needs to be a better way to “attach” CSS to an element, and then if desired, to “connect” that CSS snippet to other elements (thus, making the CSS snippet a master bit of code, that, if changed, propagates to all elements where it is used).

    Clear as mud?

    Oh, and for that “Recommended Plugins” page, please make sure Pods 2.0, Wishlist Member, Gravity Forms, BuddyPress and ?? Custom Post Type plugin work with HT 3.0 straight out of the gate. WordPress is almost a grown up CMS… almost. With HT 3.0 and these premium plugins activated, it’ll be well on is way to competing against Drupal, and making headway into the enterprise space (of course, the pun was intended!).

    Cheers,
    Matt

    • The bottom panel in the visual editor does get out of the way with a click of your mouse.

      While I appreciate your feature suggestion, we are very aware of adding bloat to the core of Headway that is not needed by the majority of our users.

      As for Wishlist Member, Gravity Forms, BuddyPress, they are all compatible with Headway.

      • Grant…ever noticed that your customers seem to have a kinder and more appreciative tone than you do? Not just in this example, but most of your replies.

    • Actually Matt, I thought I showed you could hide the “gutter” as I’m calling it. Also, I’m recording in a small area (720p) resolution so it looks worse than it is. It’s actually much easier to use with a larger resolution.

      As far as the CSS elements go, it was not working quite right when I demoed this. They are suppose to move over to the left (more on that later.).

      Headway Themes is designed for the non-coders. We’ve had a lot of requests for extra elements that they can create different looking sites. 🙂 Of course Headway still has developer/designer type features, including a CSS editor, a custom CSS file that you can work with, so you don’t have to use the Visual Editor at all.

      A big thing we’re doing is making sure that Headway not only is small in file size, but runs in the crappiest of circumstances (really small memory footprint).

      Wishlist Member, Gravity Forms, BuddyPress (with leaf) and Custom Post Type UI all work well with Headway now. Pods is a separate thing, and 2.0 isn’t even out yet (though they are working on it).

      • @Grant and @AJ:

        Thanks for your replies. We’re having some misunderstandings of points, but rather than quibble, I’ll reserve further judgement and comment for the actual beta.

        You’re breaking new ground here, and as such, deserve the chance to strut your stuff at the appropriate release point. …Looking forward to the first beta. Best going forward.

  3. I’ve seen that you use fields into visual editor to insert the value of various css elements.

    I would like to see also sliders near this fields. The sliders are very easy to use. See examples:
    css3.mikeplate.com
    css3maker.com
    colorzilla.com/gradient-editor
    westciv.com/tools/text-properties/index.html
    http://www.css3.me/

    I hope you will implement all the CSS3 features in the headway 3.0

    Please see also themeframe.com.
    It is a new visual wordpress framework (in realease candidate) that has implemented the css configuration in a perfect way is http://themeframe.com.

    When you double-click any css element you get a pop-up window where you can change all the proprieties of any css element in a visual easy way. I haven’t seen a better aproach. I hope you will implement a similar feature in Headway 3.0

    Another new wordpress framework with a “Front-end drag & drop editor” is http://presswork.me/.
    Presswork let’s you style any theme in a live preview environment with drag & drop (like headway).

    Thank you very much and I hope that you have inspiration from this examples and will implement a better way for visual editor.

  4. I’ve seen also that you have implemented child themes into Headway 3.0.

    I would like to know what type of license will have this child themes ? If I buy one of them, can I use it to build a template that I will resell ?

  5. Any expected release date for beta release ?
    I am looking forward to it.

    Also, I am hoping that the child themes are not gonna cost like $30-$35.. coz, then it wouldn’t make any sense for even using HT. People would rather go for out of the box themes from sites like theme forest for that price rather than buying Headway, and then buying child themes. Just talking in pure New customer perspective.

    Also, how will it work with developers licence.. WIll I be able to use the same child themes for more than one site ?

    • We do not have a date certain as of today.

      I can assure you child themes will cost more than $30-35 and I have to disagree with it not making sense to even use Headway Themes.

      Headway child themes have something no other theme or child theme has and that is Headway and the new visual editor and layout/grid system. Picture trying to move Blocks or changing the column setup with another theme or child theme without using CSS.

      With Headway child themes, the ones we build at least, will work with the new layout/grid system. You will be able to move things around or add Blocks to the site as you want. And that is without the need to crack into code at all. But at the same time, maintain the design and style of the child theme.

      • Hi Grant,

        a couple of questions — could you point me towards a blog post or a sub-page that talks about the Headway Marketplace and how a third-party developer can create child themes for you and what costs a developer needs to take into account when developing for HT?

        Also, is there a page that highlights how a plugin could be made compatible with HT 3.0 etc?

        • Hey Robert,

          We haven’t released any specifics on the marketplace or on the APIs at this point.

          All of this information will be available for sure when the final version is released and we hope to have most of it available even during beta.

          -Clay

      • One more question:

        I read on wpbeginner.net that you are looking into a new pricing structure and that people that buy the developer version right now will get a significant discount vis-a-vis the price that the final version of HT 3.0 will have.

        Is that accurate or simply marketing speak, also could you tell whether the price will rise after HT 3.0 is finally released or after the beta is released?

        I am looking into buying HT because of HT 3.0 so I want to get it as cheap as possible. However, I do not think I need the lower versions.

        Hope you understand what I am aiming at.

  6. Really excited by this. Dying to purchase and use child themes in conjunction with Headway. Someone else’s design eye with the easiest of adjustments using Headway = customized perfection!

  7. Hi Grant,

    Please be so kind and answer at my previous question.

    I would like to know the right that will have if we buy a child theme or a leaf ?

    Can use them to create themes and site for resell on sites like themeforest ?

    Thank you

  8. Looking forward to the 3.0 Beta… Will then seriously consider getting a developer’s license.

    Keep up the amazing work guys!

  9. Looks awesome and those child themes look fantastic. As for the price – it’s not an issue,een if they cost $100. You’re paying for the framework speed. Take a good look at Themeforest – great designs but utterly infexible without pulling an all-nighter to lick one into shape – and all those varying admin panels. I also own a Business Catalyst licence and themes can cost up to $1500! HW3 is a no-brainer and I can’t wait to give HW3 a spin.

    The editor at the footer reminds me of the old Quantel Paintbox design used for TV graphics years ago – still cool and your version looks pretty awesome guys.

    HW3 aside, I find a major drawback of WP is the 2Mb file upload limit which is too limiting. Hey does anyone have a solution for that?

    Ken 🙂

    • Ken,
      You can contact your host and and have it changed. It takes a few minutes to submit a support ticket. I have mine set at 64mb and can have it changed anytime.

  10. Hello Headway Themes

    As a new customer at Headway Themes (bought Developer Option mid-August), this is my first post in this great Forum, where it seems that I’m not the only one who are eagerly awaiting HT3.0 and almost cannot wait to see more of – and test a hopefully soon upcoming Beta of HT3.0…

    In the meantime HT has been kind to “unveil” the new Grid System and you have mentioned, in one of your Screencasts; (http://headwaythemes.com/headway/screencast-tuesdays-headway-3-0-grid-system-first-look) that it is closely related to 960 Grid System (www.960.gs)… This is just awesome and 960GS is even a lot acclaimed. The new Layout Editor System in HT3.0, which you have shown so far, looks very promising.

    So because of HT3.0, this moreover, according to Mr. Grant also is based on an entirely new API, and all the other exciting new things which seem to come, when you read this forum, watching and listening to your screencasts – especially around the new Grid- and Layout Systems – have I decided not to spend more of my time on the current HT2.0… not to offend anyone, I’m just happy to be “on board” and I’m looking forward to the HT3.0.

    Regarding CSS – it shows that your talented team is working very hard on the CSS editing part of HT3.0. Also I’ve noticed the posts from both Matt and Alphabyte, which I think in general, has some good points and ideas… Alphabyte mention some inspiring links to some websites that show some good ways to “manage” a selection of CSS (and CSS3) functions. Alphabyte has also written about some “Frameworks” (www.themeframe.com and http://www.presswork.me), which looks quite interesting – thanks Alphabyte.

    I know that Headway Themes most are intended for non-coders… So HT3.0 will hopefully, to fit perfectly for my needs because I work mostly with Web designs. For this very reason, I have a couple of years used a totally different dedicated CSS tool, which is also primarily developed for Web designers, who do not necessarily need to be “experts” in CSS coding. This tool – which might also inspire you? (HT, maybe you already are familiar with this tool?) Matt, Alphabyte and others in here – is Stylizer (developed by http://www.skybound.ca). It’s very easy and fast to work with; not least when one comes to the fine tuning and testing phase of an “almost finished” CSS code in different browsers (it has built-in 8 versions of the most used browsers, for both real-time previews and design correction).

    I feel confident that Headway Themes 3.0 will be the best and most dynamic WordPress Theme Framework on the market, for designing new WP Themes and Child Themes, especially for non-coders. Despite this I still think that I will continue to use Stylizer as an extension of my Web design work, especially for CSS (and CSS3) refinement and Browser test work.

    PS. This should absolutely not be misunderstood, as being a “hidden” advertising of a different design tool. I mention this only, because I often use it and as a possible source of inspiration for you and others in this great Forum…

    Thank you Headway Themes to show you’re amazing – “and hopefully” – a very soon release of version 3.0 Beta…

    Kind regards
    Carsten

  11. @Matt,

    I started out in graphic design back in 1977 when press type letters made headlines (Letraset, Format, etc) and cut and paste was still king. I’ve watched all the DTP programs grow up. From Ready-Set-Go to PageMaker to InDesign (never liked Quark). I say all of this to let you know I understand exactly what you are saying from a print graphic designer who migrated to online web design. Unfortunately most web designers don’t have print design experience so they may not appreciate your excellent points, most of which I agree on (not all). Point is I hate CSS and never wanted to learn it so anything that makes this more like using Adobe InDesign with point and click simplicity would be AWESOME! I would actually be motivated to learn it (CSS)! I know enough CSS to do what’s necessary for the client.

    Good thing about this community is the various points of views and insights. HW3 will be ground breaking and I can’t wait to use it. An early demo I conducted with AJ to the Chicago WordPress Meetup Group members left them totally awestruck anything on WP like this could be possible. There were several traditional print designers in attendance and they cheered this on, realizing how streamlined design for web will be using HW3. The big topic though after AJ’s excellent presentation was CSS and how that will play out in the interface, etc.

    I hope as HW3 matures some of what Matt has departed will be considered (with respect to bloat, etc). It would really capture that “Designer” and “Agency” (ad agency) market base that Quark stole from InDesign in the Service Bureau wars back in the day (if anyone recalls that turning point in the desktop applications page layout era). We are pretty much at this very same turning point in WordPress. HW is in the best position to capitalize on this change because of its community and installed base. But others are gaining on HW.

    I’m excited about the future of HW3. Can’t wait for the Beta. Hopefully it will arrive before Christmas.

    Thanks Matt for your comments!

    Dante

  12. Hey guys, nice work. We like your HT and we can´t wait to test the beta version. Maybe we can help you to translate the language to german. We have german clients and would be good have a german language file as well.

    Send us an mail if we can help you.

    Cheers XICSL

Leave a reply

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress