Icon with Text

Icon with Text custom WPBakery Page Builder element, added by Loyde, provides a way to conveniently redent a group of elements: icon, a title and some text.

How to choose an icon which will be displayed

Steps:

  1. Add a Icon with Text instance to the edited page or post
  2. Open the Settings for the added element
  3. Open the "Icon" tab
  4. Select the desired icon family, under the "Icon library" dropdown
  5. In the "Icon" field choose the desired icon
  6. Save changes.

How to choose a title which will be displayed

By default, title will be rendered as a H3 tag.

Steps:

  1. Add a Icon with Text instance to the edited page or post
  2. Open the Settings for the added element
  3. Open the "Title" tab
  4. In the "Title" field enter the desired text
  5. Save changes.

How to choose a text which will be displayed

By default, text will be rendered with a body typography styles.

Steps:

  1. Add a Icon with Text instance to the edited page or post
  2. Open the Settings for the added element
  3. Open the "Text" tab
  4. In the "Text" field enter the desired text
  5. Save changes.

How to choose a link for the icon with text

By default, icons with text won't have any link attached. In this case, clicking the icon with text won't have any effect. But it's possible to choose a link for the icon with text.

Steps:

  1. Add a Icon with Text instance to the edited page or post
  2. Open the Settings for the added element
  3. Under the "General" tab, locate the "URL (Link)" field
  4. Enter or select the desired URL and save changes.

How to point the icon with text to a file from the Media section

Apart from URLs, icons with text can also point to a Media section file. In this case, clicking the icon with text would download the file (or open it in a new tab, depending on the browser).

Steps:

  1. Add a Icon with Text instance to the edited page or post
  2. Open the Settings for the added element
  3. Under the "General" tab, locate the "Media Library File URL (Link)" field
  4. Select the desired file from the Media section and save changes.

How to apply primary & secondary accent color to the element

See description here.

How to apply a basic styling, which applies to the element as a whole

See description here.