Displaying the post custom fields on your website will no longer be a challenge with the plugin. Feel free to create unlimited post metadata and get additional information without any specific technical knowledge. The Fielder supports the popular Advanced Custom Fields plugin which makes working with metadata easy and fast.
For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Element editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content tab
On the Content tab of the post custom fields widget, you can add new items and manage basic fields settings.
General
To add a new element, click “Add Item” and fill all the necessary fields to show a specific custom field.
- Show Elements – select one of the custom fields added for the current post.
- Field type – select a field type according to the display element: Text, Object, Array, Table, Image
- Show icon – the toggle to enable/disable the icon for the current item. If the option is enabled, it allows you to select an icon from the Font Awesome library and specify the icon position: Before, After, Top left, Top center, Top right, Bottom left, Bottom center,Bottom right.
- Text align – manage the text alignment (left, center, right).
- Use field as slug link – the toggle to apply the slug link.
- Enable custom link – the toggle to enable a custom link with the text field for URL. The setting is available if the Use field as slug link option is disabled.
- Prefix – a field to enter the text that will be displayed before the metadata.
- Suffix – a field to enter the text that will be displayed after the metadata.
Style tab
On the Custom fields widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, borders, and more.
Field
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Icon size – specify the icon size of the item via slider for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The field style settings for different states.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Icon Color – specify the icon color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Prefix/Suffix
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The Prefix/Suffix style settings for different states.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Advanced Tab
The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
