Skip to main content

Header - Basic Component

This component adds a header to add page titles and headings.

Like the text component, the header is also flexible with options to format its text font style. Just drag & drop this component and add text to it as required.

The heading text box has a limit. You can’t press ENTER to start a new line or a paragraph. It's a one-liner text-based component.

Accessing the Header​

To add a header, go to the “Basic” category under the Components panel and drag and drop the "Header" component in the canvas.

DrapCode Builder Adding Header

Formatting & Styling the Inline Text​

As you double click the header, options to change the text font style to Bold, Italics, Underline and Strike-through will appear as shown below. You can also add a hyperlink to the heading if you want.

DrapCode Builder Formatting Header

Header Settings​

Click the settings icon to open the header settings.

DrapCode Builder Formatting Header

  • Header Size Under settings you can adjust the text size of a header.

    DrapCode Builder Formatting Header

  • Header Display Under settings you can also adjust the display size of a header.

    DrapCode Builder Formatting Header

Styling the Header​

The moment you click on the header, its visual Style Manager opens automatically in the right toolbar.

You can also directly manipulate the dimensions of the header without going to the “Dimension” category in the Style Manager.

Additional Tools​

The Header component also comes with a set of additional tools, positioned on the right side of the component. Know more.