Stacks Image 532762

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.

Stacks Image 332372

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.

Stacks Image 524299

Font Control & Loading

Support for default theme fonts, Google fonts or Web Fonts. This is the first header stack enabled for Font Vaults.

Stacks Image 524332

Responsive Size Control

Simple (2 way) and advanced (4 way) responsive size control means that your typography is always optimally displayed.

Stacks Image 524357

Type Setting Control

Easily adjust character and word spacing to correct for font display inadequacies. Adjust line-heights to correct for font baseline errors.

Stacks Image 524389

Impact Compatible

Header Pro is the ONLY stack that will autoscale text in the Impact Stack and can also animate text on slide load

Stacks Image 524417

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.

Stacks Image 524445

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.

Stacks Image 524477

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.

Stacks Image 524505

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.

Stacks Image 524533

Shadows

Text shadowing effects designed to enhance your headers, particularly on difficult backgrounds like images. Tasteful and stylish, not retro and garish.

Stacks Image 524565

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.

Stacks Image 524593

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.

Stacks Image 524621

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 LoadAltText

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.


SegmentsNewBadge

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


BadgesNewBadge

BadgerBadges 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 ImpactAltText

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 ControlNewBadge

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.

Stacks Image 525565

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.

Stacks Image 525584

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.