Heading Widget

The Heading Widget in DecoNetwork's Website Builder is a versatile tool designed to enhance the visual appeal and organization of your website pages. This widget enables you to easily incorporate headings that not only structure content but also contribute to the overall design aesthetic of your site. Whether you're creating a bold title for a homepage section or categorizing information with subheadings, the Heading Widget allows for effortless customization of font styles, sizes, colors, and alignments to suit your branding and layout preferences.

To get started, you can watch the instructional video below for a quick overview of how to integrate and customize headings using the Heading Widget. Additionally, detailed instructions and comprehensive information on various settings will be provided in the following section, ensuring you have the knowledge and tools to effectively utilize this widget across your website.

In this article...

• To add a Heading Widget to your website
• To edit the Design settings for the Heading Widget

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.
   1. Click on the down arrow beside the Heading Widget icon.
   2. Choose the Heading Settings item from the drop-down menu.
      

      The Heading Widget Settings popup will be displayed.

      

      Heading widgets will not be rendered in mobile menus unless configured as links.

      If you add the Heading Widget to a custom dropdown menu, the Show as Link(s) in Mobile Menu option will be available. When this option is enabled and a link is specified, the heading will be rendered as a link in the style of normal link text in mobile menus.

      

   3. 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 the thickness of the text characters.
   • Italics: displays the font in italics if the checkbox is ticked.
   • Small Caps: sets all letters to lowercase 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.
     • none: no line is added.
     • underline: adds a 1-pixel line across the baseline of the text.
     • overline: adds a 1-pixel line across the top of the text.
     • line-through: adds a 1-pixel line across the middle of the text.
   • Transform: sets the capitalization style of the text.
     • none: leaves the text exactly as it was entered.
     • capitalize: capitalizes the first letter of each word.
     • uppercase: makes all letters uppercase.
     • 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.