Full Width Resizing Heading Widget

Resize Heading

Full Width Resizing HTML Heading

Resizing Text With jQuery

This widget uses a jQuery plugin to resize the heading text as the browser width is increased/decreased.
The amount by which the heading is resized is controlled by the maximum width setting in combination with the compression slider. A little experimentation may be required to create the desired effect.
The example on this page is an h2 heading since it states the page name.
The color for the first word is set in the widget settings panel and for the second word by wrapping it in a span with an inline style to change the color.

<span style="color:#FFFF00">Heading</span>

Widget Settings

Check the "Full Width" box in the Metrics inspector, choose the heading type, enter the text and set the maximum width.
Set the required amount of compression which will determine the font size at various browser widths
Enter the font family name, check the box if it is Google hosted and set a suitable web safe fallback font.
Set the font color, line height, text transform and letter spacing if required.
To add a text shadow, Set the value for X and check the box for a negative value if the shadow is to be positioned left.
Set the value for Y and check the box for a negative value if the shadow is to be positioned up.
Set the shadow color and spread radius.
To add a container, set the background color and its opacity and adjust the height using the value for TB padding.
Set the border width and color and/or the box shadow radius and color if required.

This widget is included in the Full Width Addons widget pack.

EverWeb Widgets | Full Width