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 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 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.