Heading Widget
Heading Widget
Lee Prazner
Updated 1 year ago
Follow
The Heading Widget lets you add headings to your website pages and edit the design of the heading. Watch the video below for a quick overview of how to use the Heading Widget, and read below for more detailed instructions and for information on settings.
To add a Heading Widget to your website:
1. Click on the WIDGETS button in the Website Editor Toolbar.
2. Browse the Widgets tab to locate the Heading Widget in the BASICS section.
3. Click and drag the Heading Widget into a container on your website page.
Allowable areas the widget can be inserted into include:
• Within rows
• Within columns
• Above or below existing rows
• Above or below existing widgets
• Between existing widgets
Placeholder text will appear for you to edit.
4. Edit the text.
5. You can specify a link for the heading by opening the Heading Properties popup.
a. Click on the down arrow beside the Heading Widget icon.
b. Choose the Heading Settings item from the drop-down menu.
The Heading Widget Settings popup will be displayed.
c. Click on Add Link to specify a link for the Heading.
The link options popup will be displayed.
• No link: select this option if you do not want to set a link for the heading.
• Existing Page: lets you select a link to an existing page on your website.
If you select "Decorated Products" or "Products", a dropdown field will be displayed allowing you to select a product category to link to.
• Website URL: lets you specify a URL to link to an external website.
• Email Address: lets you specify an email address to create a mailto link. This will activate the default mail client on the computer for sending an email to the specified address.
6. Click OK to save the changes.
7. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.
To edit the Design settings for the Heading Widget:
1. Mouse over the widget.
The widget's controls will be displayed.
2. Click on the down arrow beside the Heading Widget icon.
3. Choose the Heading Settings item from the drop-down menu.
The widget Settings popup will be displayed.
4. Select from one of the pre-configured Heading Layout options.
5. Select the font family from the dropdown list.
6. Click on the Color spot to edit the heading color using the Color popup. Click here for instructions.
7. Configure the rest of the Design settings as required.
• Size: sets the size of the font in pixels.
• Line Height: sets the line height of the text as a factor of the current font size.
• Weight: sets how thin or thick the characters of the text should be displayed at.
• Italics: displays the font in italics if the checkbox is ticked.
• Small Caps: sets all letters to lower-case if the checkbox is ticked.
• Spacing: sets the letter spacing of the font as a factor of the current font size.
• Decoration: sets the appearance of the decorative line, if any, added to the text.
o none: no line is added.
o underline: adds a 1-pixel line across the baseline of the text.
o overline: adds a 1-pixel line across the top of the text.
o line-through: adds a 1-pixel line across the middle of the text.
• Transform: sets the capitalization style of the text.
o none: leaves the text exactly as it was entered.
o capitalize: capitalizes the first letter of each word.
o uppercase: makes all letters uppercase.
o lowercase: makes all letters lowercase.
For the Size, Line Height and Spacing properties, you can use the slider to configure the setting.
The slider will appear when you hover your mouse anywhere along the line between the label and the input field of the property.
8. Click OK, once you have finished configuring the settings.
9. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.