Header Pro
Header Pro is compatible with all RapidWeaver themes and requires the Stacks 3 plugin from YourHead software.
Like all Big White Duck stacks, Paragraph Pro is entirely free.
Big White Duck Stacks
We support all our stacks, just as though you had paid for them.
Header Pro
Professional headers, made easy
Header Pro gives you all the features you need for great headings of any size in any situation..
This page demonstrates Header Pro and Paragraph Pro used in the Demo Version of Flood Theme. Click the menu at the top for more information.
Font Control & Loading
Support for default theme fonts, Google fonts or Web Fonts. This is the first header stack enabled for Font Vaults.
Responsive Size Control
Simple (2 way) and advanced (4 way) responsive size control means that your typography is always optimally displayed.
Type Setting Control
Easily adjust character and word spacing to correct for font display inadequacies. Adjust line-heights to correct for font baseline errors.
Impact Compatible
Header Pro is the ONLY stack that will autoscale text in the Impact Stack and can also animate text on slide load
AutoScale
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
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.
Segments
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.
Badges
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.
Shadows
Text shadowing effects designed to enhance your headers, particularly on difficult backgrounds like images. Tasteful and stylish, not retro and garish.
Contained Backgrounds
Apply background colors, borders and radii to just the text are and not the full width of the stack. Ideal for transparency backgrounds over images to improve readability.
Vertical Rhythm
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.
Super Lightweight
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.
Examples
Below is just a small taster of what you can do with Header Pro.
Animate Text
Header Pro can animate header text with a variety of effects. The animation can be started by three different events.
Impact Slide Load
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.
When In View
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.
On Page Load
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.
Segments
Bring Headings To Life
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.
HeaderPro
Segments can make headers into logos.
BigWhiteDuck
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.
Responsible Font Use
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.
FontSubsets
Badges
Badges can go in front!
Flexible Positioning
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.
Responsive
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.
Warehouse
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.
cmsReady
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.
AutoScale
Works in Impact
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,
Precise Scaling
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.
smartCODE Efficiency
Because autoscale is a totally self contained child stack, containing all of its own Javascript, no code or libraries are added to your page if you don't use it.
HeaderPro
Font Control
Add convenient small image badges before and after headers, just like the one on the title above.
Powerful
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.
Responsible
Header Pro and Paragraph Pro help you to be responsible with your font use to aid page loading speed while not compromising on appearance.
While we do not generally recommend the use of Google fonts due to their poor quality and metrics, they are fully supported. This includes the ability to subset only the characters you need, thus avoiding large downloads.
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.
Edit Mode
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.
About the smartCODEprinciple
Child 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.
If you do not enable a feature, zero code is added to your page. Previously this has been possible for CSS code and certain Javascript.
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.
smartCODE
Activating the Features.
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.