Headline

The Headline Widget shows a headline, an optional sub headline and an optional divider line. You can style each part, change their order and set separate alignments for small screens. Use it for section titles and page intros.

Requirements

To use this widget, go to PluginsSiteOrigin Widgets, find Headline and click Activate.

You can use the Headline Widget in these places:

Page Builder: Add the widget in Page Builder by SiteOrigin, in the Classic Editor or in the Page Builder Layout Block in the Block Editor.
Block Editor: Add the SiteOrigin Headline block. You find it in the SiteOrigin block category.
Theme and Plugin Widget Areas: Add the widget to any theme or plugin widget area.

Quick Setup

This video adds a Headline Widget in Page Builder, sets a headline and sub headline, styles the divider and shows the result on the front end.

A headline, divider and sub headline on the front end

Settings

The Headline widget form with the Headline section open

Headline

Text
The headline text.

Destination URL
An optional link for the headline. Click Select Content to find a page or post on your site, or enter any URL.

Open in a new window
Opens the link in a new tab or window. Default: off.

HTML Tag
The tag for the headline: H1 to H6 or Paragraph. Default: H2.

Color
The headline color. If you leave it empty, the headline uses your theme’s color.

Hover Color
The color of a linked headline on hover. It has an effect only when the headline has a Destination URL.

Font
The font family. You can choose a web safe font or a Google Font. Default: Use theme font.

Font Size
The text size, with a unit. If you leave it empty, the headline uses your theme’s size for the tag.

Alignment
Center, Left, Right or Justify. Default: Center.

Mobile alignment
The alignment at and below the Responsive Breakpoint in the global settings: Center, Left, Right or Justify. Default: Center. In a widget saved before this setting existed, each Mobile alignment starts with the value of its Alignment.

Line Height
The line height, with a unit. If you leave it empty, the widget uses 1.4em.

Top and Bottom Margin
The space above and below the headline. If you leave it empty, the headline uses your theme’s margin. The widget always removes the top margin of the first item and the bottom margin of the last item.

Sub headline

The Sub headline section has the same settings as the Headline section: Text, Destination URL, Open in a new window, HTML Tag, Color, Hover Color, Font, Font Size, Alignment, Mobile alignment, Line Height and Top and Bottom Margin. The only different default is HTML Tag: H3.

Divider

The divider is a horizontal line. By default, it shows between the headline and the sub headline.

Style
None, Solid, Dotted, Dashed, Double, Groove, Ridge, Inset or Outset. Default: Solid. Choose None to hide the divider.

Color
The line color. Default: #eee (light gray).

Thickness
The line thickness in pixels, from 0 to 20. Default: 1.

Alignment
Center, Left or Right. Default: Center.

Mobile alignment
The alignment at and below the Responsive Breakpoint: Center, Left or Right. Default: Center.

Divider Width
The maximum width of the line. Default: 80%.

Top and Bottom Margin
The space above and below the divider. If you leave it empty, the widget uses 20px.

Element Order

Drag the Headline, Divider and Sub Headline items to change the order on the page. Default: Headline, Divider, Sub Headline. For example, put the Sub Headline first to show a short label above the headline.

The Element Order control in the Headline widget

FitText

Use FitText
Makes the text smaller on narrow screens so that it fits its container. Default: off. FitText works on H1 to H6 tags, not on Paragraph. It never makes the text larger than its font size, and never smaller than 12px.

FitText Compressor Strength
How much FitText scales the text down. A higher value makes the text smaller. Values above 1 are allowed. Default: 0.85. This setting shows only when Use FitText is on.

Global Settings

Global settings apply to all Headline Widgets on your site. Go to PluginsSiteOrigin Widgets, find Headline and click Settings.

Responsive Breakpoint
The screen width at and below which the widget uses the Mobile alignment settings. Default: 780px.