Header Pro gives you all the features you need for great headings of any size in any situation..
Simple (2 way) and advanced (4 way) responsive size control means that your typography is always optimally displayed.
Easily adjust character and word spacing to correct for font display inadequacies. Adjust line-heights to correct for font baseline errors.
Easily apply page wide adjustments for vertical rhythm page wide using a single Header Pro stack. Combined with the same feature in Paragraph pro, any page can now be perfectly set.
Header Pro is the ONLY stack that will autoscale text in the Impact Stack and can also animate text on slide load
Headers can be autoscaled proportionally right up to the full width of their container. Minimum and maximum font sizes can be specified to ensure that text is always readable and controlled.
Animate text by character, word or all at once. Animate on page load, when in view or on impact slide load. Choose from 38 animation effects and looping options.
Headers can be split in to 3 separate segments. Each can have its own styling and even font. Design great responsive logos without graphics files.
Image badges can be added to HeaderPro. These may be used to draw attention to features, show new additions or for simple styling or embellishment.
Text shadowing effects designed to enhance your headers, particularly on difficult backgrounds like images. Tasteful and stylish, not retro and garish.
Apply background colors, borders and radii to just the text area and not the full width of the stack. Ideal for transparency backgrounds over images to improve readability.
Support for default theme fonts, Google fonts or Web Fonts. This is the first header stack enabled for Font Vaults.
Lots of features does not need to make a code hungry stack. Read about how the smartCODE stacks work to see how Header Pro is the single most efficient solution.
CLICK TO LEARN MORE
Below is just a small taster of what you can do with ParagraphPro.
Header Pro can animate header text with a variety of effects. The animation can be started by three different events.
Header Pro is the ONLY animated text stack that integrates seamlessly with Impact to allow text animations that are triggered only when a slide comes in to view. Using Header Pro's animation timings, you can perfectly adjust the synchronisation of the animation with the slide fade in transition.
The title of this section animates when the Heading comes into view on the page. This only happens once per page so that the effect is not overwhelming but draws attention to an important title. You can use this setting with looped animations though, to start a continuous animation.
Animations can also be triggered on page load. This is most useful for animations that are set to loop continuously to ensure that they are always running. Use this setting sparingly, pages with too much text animation look over complicated and can easily become unattractive.
There are 38 different effects to choose from. You can see them all listed in the settings docs.
You can specify a different "in" and "out" effect when continuous loop is enabled.
Adjustments for letter by letter delays, overall speed and loop delays give you a huge choice of the finished appearance.
All of the animation effects can be used in conjunction with the AutoScale feature.
Segments in headers are a very simple concept that allows you to split the header in to up to three areas of text, each with different styling.
This may just be a color contrast, a change in font size, a different font subset or all these things together.
Segments can make headers into logos.
Segments can often avoid the need to resort to image files.
Images as headings are not SEO friendly, do not respond as text does within certain breakpoint ranges and can slow your page loading.
Because segments can use different fonts, you can make some really quite spectacular heading that are true HTML headers.
Segments also work with text autoscaling. This is simply an h3 heading, no graphics and only the 12 letters used are loaded from google fonts.
Header Pro segments use Font Subsetting.
You only download the letters that you require and not the whole font.
This process is automated for Google Fonts. If you are using WebFonts in your headers, it is your responsibility to create sub-sets using a site such as Font Squirrel.
Add convenient small image badges before and after headers, just like the one on the title above.
Badge images can be placed before, after or both. If the header link facility is enabled the images are included, they are actually within the header. Alignment and per pixel positioning options are available.
Images are defined by their height, while the width will scale proportionally to the image dimension. Separate sizes for small screens are defined to match the reduced text height.
The option to warehouse the image is available. This is particularly useful as you are likely to have several instances of the same image on the page that will thus benefit from browser caching.
Use a warehoused image or SVG icon as your page and you can turn it on or off via CMS. Great for "Latest", "New" or "Featured" content on your page.
Header Pro can proportionally autoscale text.
A great new addition to Header Pro is the ability to autoscale when in an Impact foreground container.
Header Pro is the only stack that can do this,
Header Pro will precisely scale text over a range of display widths specified by you.
Limits can be applied to ensure that text never goes above or below certain font sizes.
Header Pro and Paragraph Pro can use a wide variety of fonts with ease for professional typographic in your pages. Both are ready for Google Fonts and Web Fonts with super simple setup and reusability.
Further more, Header Pro and Paragraph Pro are Font-Vault and Type-Vault enabled for one click selection of fonts. More details will follow on these super powerful features.
High quality web fonts are also supported in the 6 major format including the newest compressed WOFF2 types.
Header Pro and Paragraph Pro help you to be responsible with your font use to aid page loading speed while not compromising on appearance.
Web fonts and Google fonts are fully supported. For Google fonts, his includes the ability to subset only the characters you need, thus avoiding large downloads.
For all font types, a font loaded into one stack can be shared by all other Header Pro stacks on the page by simply assigning it an identifying name of your choice. This saves time in setup and prevents lots of unnecessary external requests.
Header Pro and Paragraph pro are capable of displaying fonts in edit mode but it is disabled by default. This is as per best practice recommended by YourHead Software and is in place to prevent page jumps as the external files are loaded repeatedly.
We suggest you only enable the "Show Fonts in Edit Mode" briefly to check size, appearance and successful loading and then turn it back off again. Do not under any circumstances report page jumps as a bug to BWD or Yourhead with fonts enabled. This is expected behavior.
Big White Duck provides free stacks for RapidWeaver.
Your generous donations support running costs and are always gently appreciated.
(C) 2016 Big White Duck Stacks.
Many of you will now be familiar with Stacks 3 Child stacks. Header Pro uses these to achieve a wide feature set with extreme efficiency in code output.
What is, however, normally added to the page are the shared libraries that all instances of a stack use. Now Header Pro and other BWD smartCODE stacks even removed them when they are not in use by enclosing them in child stacks.
For the first time, you can have a single stack with lots of features and power on demand but without the overhead for things you may not enable.
This means that with none of the features enabled, Header Pro actually adds no code at all to your page and will use your theme settings. All of the settings in the main stack are CSS only and only added to your page when enabled.
Because you don't want a lot of big blue "add child" plus buttons amongst your text stacks, Header Pro hides them by default.
To activate the effects and alter their settings, simply enable them with the button controls at the top of the stack settings.
If you have child feature stacks active and hidden, you will get an unobtrusive small blue bar at the bottom of the stack in edit mode.