Heading Module

The Heading module inserts a heading into your row that is rendered with a heading tag (H1, H2, etc.) in the HTML output.

COMMON USES

While you can create headings right in the text editor, here are some advantages to using a Heading module:

You can more easily move the heading around in the layout by dissociating it from the following text.
You can easily customize typography, layout, and effects of individual headings (font family, weight, color, size, spacing, horizontal alignment, text shadow, animations, and margins).
The screenshot above shows two headings, with the lower superimposed on the upper. The upper heading has a custom color, font family, color, and a text shadow. Spacing is manipulated with margin settings, and the margin setting is responsive so you could control the spacing at different device sizes.
You have more control over the margins of the heading and so can control where the heading appears in relation to the text that follows.
You can use HTML markup (such as the
tag for a line break) or even shortcodes in the Heading field of the Heading module.

Heading module settings

The GENERAL tab

The General tab contains the following fields. An asterisk (*) indicates the ability to create a field connection.

Heading

Enter text, basic HTML tags (such as a <br> tag), or a shortcode.

HTML tag

Select the heading level (H1, H2, etc.). This automatically inserts the correct heading tags into the rendered page.

Link section

Add a URL if you want the heading to contain a live link. Click Select for assistance in creating the URL to another page on your site or a link to a place further down the page.

The STYLE tab

The Style tab contains the following settings.

Color

Default heading color is usually specified in the theme, but you can choose a custom color here.

Typography Section

Next to the Typography heading there's an icon for responsive settings. Click this icon to add different settings for medium and small devices. If you don't add settings for each device size, the settings for the desktop will apply to all.

The Typography section has the following subsections:

Font Family

Set the font family here: a system font or any of the Google fonts.

Font Weight

If you chose a system font in Family, you can choose Light, Normal, or Bold in the Weight field. If you choose a Google font, the Weight field lists any of the styles included with that font.

Line-Height

Set the amount of space used for lines of text. Specify a number value and a unit of measurement. The dash value in the units list, shown in the screenshot below, means a unitless value, which means the number value is multiplied by the element's font size. In most cases this is the preferred way to set line height, but you can also choose px or em. If this field is empty, the default line height is used.

Align

Select one of the icons to align the text to the left, center or right. The buttons in this setting are toggles. If no button is selected, the default alignment is used.

Spacing

Controls the horizontal spacing between letters, in pixels.

Transform

Allows you to change the case of the text string without retyping. It corresponds to the CSS text-transform property. The choices are, from left to right: Normal (as typed), capitalize the first letter of every word, convert all letters to uppercase, and convert all letters to lowercase.

Decoration

The choices are Default (whatever decoration is already set in the CSS for that element), None (which overrides any default decoration), Underline, Overline, and Line through.

Style

This setting corresponds to the font-style property and is used for italic and oblique settings. The Style field offers the choices of Default (whatever style is inherited), None (font is regular, meaning upright, not italic or oblique), Italic, or Oblique.

Variant

This field offers the choices of Default (whatever style is inherited), None (font is regular, meaning upright, overriding any inherited variant setting), or Small caps. The difference between Small caps and the Transform field's Uppercase is that Small caps uses larger letters for letters that are capitalized in the original text, whereas Uppercase uses capital letters of uniformly equal height. The Small caps effect is shown in the animation below.

Text shadow

A text shadow effect adds a shadow behind the text, letting you control the shadow color, direction of offset ( X is horizontal, Y is vertical), and blur, as shown in the following screenshot, in which the shadow is moved to the right and down with enough blur to preserve the shadow on individual letters but not make the background shape distinct.

The ADVANCED tab

The Advanced tab offers nearly identical settings on all Drag & Drop Editor rows, columns, and modules.

Spacing section

For rows and columns, you can change the default margin and padding values. For modules, you can change the default margin values only.

Visibility section

In the Breakpoint field, you can set the row, column, or module to display or hide based on device size. In the Display field, you can choose to display the row, column, or module always, never, or only to logged-in or logged-out users.

Animation section

You can assign an entrance animation, which activates the first time the page is loaded and the row, column, or module comes into view. The default is None. If you choose an entrance animation, set the delay (how long before the animation starts, in seconds) and a duration (how long the animation lasts, in seconds.).

HTML Element section

You can choose a different HTML container element for the row, column, or module (advanced users only).
For example, for reasons of accessibility you might want to use an HTML container tag that has more semantic value than a <div tag, such as <section>.
Add a CSS ID or class value to the row, column, or module.
ID names must be unique on a page, so assign an ID only when you need to reference that unique ID. For example, a link to an anchor on the page requires a unique anchor so it know exactly where to go. Class names are usually intended for reuse and are often used in CSS rules. For example, you might want to assign a different text size to all HTML headings with an fl-heading class.

To create a link to another element on the same page

Copy and paste the URL to the page into the link box
After the URL type # (hashtag) and type a word (no capitals, spaces or special characters). For example #here
Go to where you want the link to take people
Click on the element and go to the Advanced Tab
Add the the word you used in step 2 as an ID

More Information:

ROW SETTINGS:

Tool Descriptions and links to more information

Click and Drag to move the Row

Edit Row Settings such as...

In the STYLE tab:
Width
Text and link colours
Background options such as video, colour or images
Border and drop shadow settings

Duplicate the Row

Reset the Row width

Delete the Row

COLUMN SETTINGS:

Tool Descriptions and links to more information

Click and Drag to move the Column

Edit Module Settings, if a module is present within the column

Duplicate the Row

Column Settings such as...

STYLE tab:
Width
Minimum Height
Equalize Heights
Text and link colours
Background options such as video, colour or images
Border and drop shadow settings

Delete the Row

SAVE AS USAGE

TEMPLATE USAGE

To Save a Template

Click the arrow in the upper left corner from within the Drag & Drop Editor to access the Tools Menu

Click Save Template

To use a Saved Template

The Templates tab (if available) contains saved layouts that can be used as templates.

Click on a Template to choose it and then choose to Append (add the Template to the page) or Replace the current page with the Template.

PAGE TOOLS & GLOBAL SETTINGS

Publish layout

Publishes the layout without closing the Drag & Drop Editor.

Save Template

This allows you to save the current layout as a template that can be used on other pages or posts.

Duplicate layout

Copies the entire page and all metadata from the back end, including Yoast SEO data. Creates and opens a new page or post with "copy" in the title.

Preview layout

Opens a preview screen, where you can preview as a small, medium, or large device. Click Continue editing to return to the Drag & Drop editing screen.

Responsive editing

Edit your layout directly in a medium or small device view. Click Exit to return to large screen editing.

Revisions

Display the previously published revisions available to revert to. The number of revisions available is displayed in brackets. This menu item uses the core WordPress revision feature but makes it more convenient to view and access revisions. See this article for more information.

Global settings

Drag & Drop Editor settings that apply as defaults. Most of these settings can be overridden on individual pages. There's also a CSS and JavaScript tab to enter CSS and JavaScript that will apply to content layout throughout your site.

Change UI brightness

This option is a toggle that changes the UI skin from light (default) to dark and back.

WordPress admin

Choosing this option opens a submenu with shortcuts to get to popular spots in the WordPress admin by opening a new browser tab.

Posted in Drag & Drop Editor, Instructions

FAQ

Drag & Drop Editor

Heading module settings

To create a link to another element on the same page

More Information: