Icon Module

The Icon Module lets you insert icons from Font Awesome, Foundation, or WordPress into your layouts.

The Icon module comes with a text editor, where you can enter and format text that will appear to the right of the icon. You can add a link, which applies to both the icon and the text. If you add a background color, it appears as a circle around the icon, as in the following screenshot.

There's also a Screen reader text field, where you can enter text intended to appear in the HTML output only to assist screen readers for accessibility.

Click and drag the Icon Module onto the page...

The GENERAL tab

The STYLE tab

Size:

You can specify the size.

Alignment:

You can specify the alignment of the photo within the column: left, center, or right. If you display a caption, both the photo and the caption will be aligned according to this selection.

Icon and Text Colour:

General Settings

Style:

Colour:

Choose a colour or preset colour.

Width:

Choose a width for the border, clicking the link will lock the widths.

Radius and Shadow

Radius:

The Radius setting rounds the corners of the border box area to round the corners of either the border line, if you set one, or the edges of a row, column, or module background.

When you click any of the Radius value fields, a slider appears to quickly adjust the value. You can make all four corners the same value by clicking the Link icon.

Box Shadow:

The Box shadow effect also works with sliders. Moving the X slider to the left adds a background shadow to the left, and moving it to the right adds a shadow to the right. You can also add blur to make it more shadow-like, and increase the spread to change the size of the shadow.

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.

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

In the ADVANCED tab:
Margins
Padding
Visibility
Animation
HTML

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

ADVANCED tab:
Margins
Padding
Visibility
Animation
HTML

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

Icon Module

Select Icon:

Link:

Text:

Size:

Alignment:

Icon and Text Colour:

General Settings

Style:

Colour:

Width:

Radius and Shadow

Radius:

Box Shadow:

Spacing section

Visibility section

Animation section

HTML Element section

More Information:

Tool Descriptions and links to more information

Tool Descriptions and links to more information

Save, Save as... and cancel

Save

Save as...

Cancel

To Save a Template

To use a Saved Template

Page Tools

Publish layout

Save Template

Duplicate layout

Preview layout

Responsive editing

Revisions

Global settings

Change UI brightness

WordPress admin