Introducing Headway 3.4


We’ve got another update out for Headway, with the addition of block titles, block subtitles and two new blocks (to replace the now deprecated media block) and a few other notable changes to the Visual Editor, including the ability to export block settings, visible cues for padding and margins in Design Mode, a new UI for choosing / changing the block type and for managing corners, padding, etc in Design Mode- and SKINS! We’ve also completely ditched Manage Mode and merged the few settings and options previously found there into Grid or Design Mode to keep the Visual Editor streamlined and uncluttered. Most of you didn’t use Manage Mode anyway!

Our official documentation is in the process of being updated with all these new features, so here’s a walk-through of what’s changed.

Block Titles & Subtitles

The Config tab of the Block Options has expanded to include a couple of new options, including the option to add a block title and a block subtitle.

 

Just enter your block title/subtitle into the input field – you can even add HTML here to create links, headings, or add custom classes to style later with CSS in the Live CSS Editor.

Block titles have some default styling, and you can further refine or completely change that styling in Design Mode.

The Slider & Embed Blocks (Goodbye, Media Block!)

The Media block found in previous versions worked well, but there were features we wanted to add. Turns out, it just works better as two separate blocks, so we’ve split these features up. You have a Slider Block now for adding images and slideshows of images, and an Embed block for embedding videos. Your Media Blocks will continue to work though – so you don’t have to panic when you upgrade.

The Embed block is incredibly simple; just drop in a URL supported by the oEmbed service, save and go!

 

The link will automatically embed (i.e. a video will show the video player, a Twitter link will show the tweet – etc.)

The Slider block has a few more options.  Here’s exciting news for many of you – you can now link images, add a caption, open the link in a new window and optionally resize/crop images automatically. Images are sourced from the WordPress Media Library per usual.

Add additional images by clicking the plus sign on the far right, and re-order images by clicking the dotted area on the left and dragging the items to reorder. Images with captions will display a semi-transparent bar along the bottom with your chosen caption, and images will animate based on the settings chosen under the Animation tab.

The User Interface tab allows you to show/hide the navigation items like navigation arrows and pager navigation.

 

Exporting and Importing Block Settings

All blocks now have a tab underneath Config called Import/Export. Here you can export a blocks settings, and import those settings to another block – on another site, or on the same site. Yes, we know – it’s practically magic.

The settings export even includes images – so if you export the block settings on a Slider block, all the images go with it!

To export block settings, go to the block you want to export, go to the Import/Export tab and click Download Export file. To import block settings, simply go to the Import/Export tab for the block you want to import to and upload the file you just downloaded.

Choosing / Changing a Block Type

We’ve slightly changed the menu to choose and change the block type; instead of a pop-up menu, you’ll now find the choose/change block type dialogue in the Options Panel.

Design Mode Updates

Margins

Margins are now supported in Design Mode! This is great news for folks who were previously using custom CSS (or “excessive” nudging” to get blocks exactly where they wanted. Now, if you want all of the blocks below your slider block to be moved down 20 pixels to get a little more white space, you can edit the margins! Margins are only for top and bottom margins – margins for left/right should be controlled by moving blocks in grid mode to the left or right.

When the margins box is highlighted in green, the link icon is highlighted as well. This link icon means that the top and bottom margins are linked – changing one changes the other. Click again to “unlink”, so your top margin can be different than your bottom margin.

You’ll see a nice, clear visual representation of the margins in Design Mode as well in a light orange color. That color doesn’t stay – it’s just for you to see how the margins are being implemented.  This highlighting disappears when you focus on another block.

Padding and Border Controls

Similar UI controls to the margins control you see are now implemented in place of old controls for borders and padding. Padding will display visually similarly to margins in Design Mode, in a light purple to demonstrate where the padding is applied.

Skins

Skins are the most exciting thing we’ve introduced in Headway 3.4. Skins allow you, designers, and developers to easily export parts of your amazing Headway site and share it with other Headway users or add it to another of your Headway sites. In Design Mode, you can export your Headway design as a Skin and optionally include layout templates you’ve created. This provides the most flexibility; users importing your skin will get the great colors, Headway global settings, etc – and can optionally choose layouts you’ve provided as well if you include them, while still maintaining the ability to set up their pages the way they want from scratch, or without overwriting layout work they’ve already done.

Upon uploading a skin, you’ll see a preview of any changes in the Design Mode main window, and a notification (or two) will pop up on the left. One will let you know the skin was successfully imported, and that you’ll need to click Save to apply it. The second that may appear is that there are templates available (only applicable if the skin includes templates and you chose to import them) and that you’ll need to save, and refresh your browser, to see them.

 

Spread the word!

44 Responses

  1. BlogTechGuy says:

    Awesome updates, particularly excited about skins to replicate layouts. Thanks for the detailed update.

  2. DerekPlant says:

    I really like ability to have even more control over the layout. This is all good news and the reason Headway keeps staying ahead of the pack with intuitive innovation.

  3. jhonny1 says:

    This changes are just awesome, the ability to actually export skins will just save tons of time. I really love to work with headway because it just lets me create client site much faster than with anything i used…. and it just keeps getting better and better. :)

    • GrantGriffiths says:

      @jhonny1 Thank you and we are glad what we do makes it easier to do what you do.  
       
      We were excited to push out all of the great new features with 3.4.  Especially the Skins and the new Skin API.  If you thought Headway saved you time before, this new version will do more.

    • claygriffiths says:

      @jhonny1 Rock on!  We’re incredibly excited about Headway 3.4 :-)

  4. This is awesome, thank you!

  5. StockGuruDotCom says:

    We have been converting over a number of our sites over the past six months. I have had Headway for a good 18 months, but once I tried it back in June again I saw that you made massive changes that make it so much better. These changes are nearly as dramatically positive.  
     
    One question: Do you anticipate WordPress Multisite support? There are those of us out here that would pay more if that was available. I have tested it some, and have found some work-arounds to sort of make it work. However, any update would invalidate that work.  My team is more a design team and definitely not programmers. 
     
    Thanks for all of this!

  6. AhmedHamdi says:

    some pretty good features been added thank you.
    Just wanted to ask when will the ability to make any block fluid, I read somewhere that it will be available on this release if i wasn’t mistaken.

  7. davidmedina says:

    Amazing update! Thanks.

  8. Robin Lumley Savile says:

    Nice work Headway – just gets better and better!!

  9. Giorgio Voulioti says:

    Nice work Headway team! Thumbs up! Headway is becoming more solid and powerful than ever before! I have one question though… With the skins option now, does that mean that child themes are no longer needed? Because I just saw that “Themes” section from Headway extend is removed? Did I missed something? You see…, I ‘ve been busy the last month designing a Headway based website for one client! :))

    • claygriffiths says:

      @Giorgio Voulioti Hey Giorgio,
      Headway will always support child themes.  However, we’re shifting away from them with Headway Extend.
      We feel that child themes are fantastic for building sites for clients but they’re not ideal for distribution since you lose flexibility.
      Skins are easier to build, they’re COMPLETELY customizable, and can even contain Live CSS and Layout Templates :-)

      • Giorgio Voulioti says:

        @claygriffiths If you say so Clay then I cant agree with u! I will try the new approach and (most probably) stick with it! Keep up the good work!

  10. Hi, there! Headway got great improvements AGAIN! Big thanks for all of them, as they already are promising much easier workflow in our design studio.
    We have a question though. 
    Till now, we were using Manage mode to add possibilities our clients to have limited control over the design of their website as for example to change background picture, color of the headings, text and some other styling options. For most of our projects, we get such basic requests from our clients. They wish that they are able to control to some extend the look of their website without the constant need to contact us. We chose to add client controlled options in Manage mode because in Grid mode they could delete blocks and brake the whole website and in Design mode all options are available and we do not want that they have control over their website in such an extend and again mess up the things. Just before to deliver the website we forbid Grid and Design mode to be visible, so when the client accesses the Visual Editor can only see available website options to change added by us in Manage mode.
     
    So, after Manage mode is gone in the last Headway, how should we deal this and how should we handle these requests from our clients? We really do not need to be contacted every time a client wants to change a background picture or to twist a bit the color of the main headings.
     
    One more time: Thumbs up for all last changes in Headway!
    Milena and Gerrit

    • Just an idea…
       
      What if there is a new mode in Headway, let’s say ‘Client Mode’,  where we can define such options by hand via the API or in ‘click on/off’ way via some Headway control. May be it could be a complete ‘copy’ of the Design Mode options but with the ability to choose which ones to be changeable by the client.
      Then, the last thing we need to setup about the Client Mode would be from which user role this mode is accessible, where we can choose for example ‘Editor’, or even to choose from available users, thus ensuring that not everybody who is and ‘Editor’ from our client’s company can mess up the design of their website.
       
      Hopefully, we explained our question and concern above in a good way.
       
      Cheers,
      Milena and Gerrit

      • claygriffiths says:

        @I_DESIGN_STUDIO Hey guys,
         
        Now that the Manage mode is gone, any panels that were previously registered to go into the Manage mode are automatically switched to the Design mode.
         
        I really like the idea of some sort of client mode or advanced permissions manager.  We’ve been doing some thinking about it quite a bit.  We already interface with Justin Tadlock’s Members plugin for certain permissions controls, but I can see us improving that and making it even more granular.
         
        We really appreciate the kind words! :-)

  11. LeonardBruno says:

    I love the update.  I was wondering if there is a way to export all blocks in 1 file.  For instance, if you want to copy a website to another url without rebuilding the blocks.  Is there an easy way to do this?

    • claygriffiths says:

      @LeonardBruno Hey Leonard,
      Glad to hear you’re enjoying the update!
      You can’t transfer every single block on a website, but you can transfer an entire layout and this will include all of the blocks and their settings.  To do this, go into the Grid mode in the Visual Editor and then open up the Grid Wizard in the top right under the Tools menu.  From there, you can export the layout.

  12. craigwharris says:

    I liked the sound of the new skins feature in 3.4.2 and tried it.  The css part could be exported/imported successfully ( great!) but after creating templates, the template selector box in design->skins->export would not allow me to select the templates ( so they couldn’t be included ).  I posted the issue in the forums many days ago “Does the new ‘skin’ export/import feature in 3.4.2 really handle layout? and have not gotten a response.  Perhaps because it’s xmas.  Is the problem I describe a bug?
    I also tried the new import/export blocks command.  It seemed to work, and I think that’s going to be very helpful. In order to save and reuse layout, should the “skins->export->layout template” be used? or the “export/import block settings”? It seems like they do slightly different things.

    • claygriffiths says:

      @craigwharris 
      Hey Craig,
       
      Are you trying to select multiple templates?  If so, hold Control (Windows) or Command (Mac) and you can select multiple templates.  If you’re unable to select any at all, then that’s not normal and we’ll get you taken care of.
       
      If you’re simply moving around block settings, I recommend using the import/export of just block settings.  The reason why we allow skins to include templates is so you can design a skin and a layout template that goes along with it.  Skins are built to be distributed—not so much of a backup system.
       
      If you’re wanting to export an entire layout and its blocks and their settings, you may do so by going to Tools » Grid Wizard » Import/Export in the top-right of the Visual Editor in the Grid mode.
       
      Please let us know if you have any other questions :-)

      • craigwharris says:

        @claygriffiths Thanks Clay….the perspective helps a lot!
         
        I was not able to select any templates at all. ( I had tried both multi-select and single).  Perhaps when I get my site live, I’ll revisit the template export issue, and in the meantime leverage the export/import block settings.
         
        My main goal is to reuse my previous layouts, settings and stylings in new websites ( so I don’t have to re-implement everything). But I’d also like to back up certain development points in case I mess things up badly.(Maybe BackupBuddy will cover this – not sure).  So I’m trying to learn more precisely what the various HW export/import features do and then figure out how to utilize them to do both tasks.
        Thanks Again!

        • claygriffiths says:

          @craigwharris No problem!  Please e-mail me at clay@headwaythemes.com and I’d be glad to take a look into the template selecting issue.
           
          As far as re-using settings, I totally understand.  BackupBuddy would be a great solution for carbon-copying an entire site, but at the same time it may be overkill for certain scenarios.  Skins and exporting individual layouts via Grid Wizard should work well for most situations.

        • craigwharris says:

          @claygriffiths Thanks Clay! when I revisit the skins templates issue, I’ll ping you if it doesn’t work.
           
          Thus far I can use the grid wizard to export/import block settings for one layout at a time, and the skins export/import for the Live CSS. So the combination allows me to save key development points. Great! That’s very helpful.

        • claygriffiths says:

          @craigwharris Awesome, very glad to hear!
           
          Have a Happy New Year!

  13. MirtonZ says:

    Is there a possibility to transfer whole design with layouts, skins, images and everything? When I try to export and import skin it breaks images (i think it’s a bug), so you have add all the images again and some margins, footer fonts and few other things as well. I’m designing theme for someone who has already his own setup and all the content so cloning with BackupBuddy is out of consideration. Is there “full export” of headway settings with all the used images or something like that?

  14. claygriffiths Hi Clay, we just would like to follow the question about the Client Mode. Did you already had chance to work on this in HT team and do you have any vision of including such feature? 
    We are very concerned with the topic as even we sometimes get caught into the hierarchy of the different elements when we want some design changes, and we would like to give our clients to change stuff, but not everything because very often till now it ended up in a small disaster. By having complete freedom and clicking everywhere changing styling of elements, they managed to change their designs in the way they didn’t actually wanted.
    Anybody else interested into this? 
    We can also post it in the Future Requests in the Support Forum but in there we don’t get always replies to our questions.
    Thanks!

Leave a reply

Current ye@r *

Headway Newsletter

Get the latest updates from our blog directly in your inbox! Are you ready to learn the latest from Headway Themes?

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