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:
- Add a Icon with Text instance to the edited page or post
- Open the Settings for the added element
- Open the "Icon" tab
- Select the desired icon family, under the "Icon library" dropdown
- In the "Icon" field choose the desired icon
- Save changes.
How to choose a title which will be displayed
By default, title will be rendered as a H3 tag.
Steps:
- Add a Icon with Text instance to the edited page or post
- Open the Settings for the added element
- Open the "Title" tab
- In the "Title" field enter the desired text
- Save changes.
How to choose a text which will be displayed
By default, text will be rendered with a body typography styles.
Steps:
- Add a Icon with Text instance to the edited page or post
- Open the Settings for the added element
- Open the "Text" tab
- In the "Text" field enter the desired text
- 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:
- Add a Icon with Text instance to the edited page or post
- Open the Settings for the added element
- Under the "General" tab, locate the "URL (Link)" field
- 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:
- Add a Icon with Text instance to the edited page or post
- Open the Settings for the added element
- Under the "General" tab, locate the "Media Library File URL (Link)" field
- 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.