Advanced Custom Field widget

Technical Requirements

• This plugin requires the OceanWP theme to work.
• The Elementor Page Builder plugin must be enabled on your site
• Advanced Custom Fields plugin (https://wordpress.org/plugins/advanced-custom- fields/)

Summary

The OceanWP Elementor Widget ‘Advanced Custom Fields’ is used to style the values of Custom Fields.

Labels and icons can be applied and styled independently of the Custom Field values.

The Ocean ACF widget will display Custom Field Values set for the active post or page. Custom Fields set on other posts or pages can be accessed. 

What are Custom Fields?

With the Advanced Custom Fields plug-in installed you can set-up additional data fields which are filled in by the user when a post or page is created.

Ocean ACF Widget fields

Once you have set-up custom fields, use the Ocean ACF widget to style and display the data in your posts or pages.

Drag the Elementor widget on to your page and edit accordingly.

Content

Field Name: Enter the field name set-up in Advanced Custom Fields. As listed under the ‘Name’ column on the ACF plugin screen.

Field Type: "Text" or "Link".
Text: If the data you are going to display is text or numbers then select ‘Text’.
Data: If the data you are going to display or link to is a URL then select ‘Link’.
Typically used with ACF field types: "URL", "Link", can also be used with "image".

Label: Text that will be placed in front of the ACF field value.

Icon Choose an icon to add to the Label. It will be shown before the label.

Alignment: Set the alignment of the label; left, center, right.
The following fields are only shown if Field Type = Link.

Link Text: Type text in here that will be used as an anchor for the URL set in the ACF field.

Link Target: “Self” or “Blank“
Blank: The linked URL will open in a new browser tab
Self: The linked URL will open in the current browser tab

Add Nofollow: If set to 'Yes' then a ''rel=nofollow" tag will be applied to the linked URL
The following fields are only shown if an Icon has been selected.

Icon Position: Set the position of the Icon in relation to the label text; Before, After.

Icon Spacing: Distance in PX between the Icon and the Label Text

Style

Use the style tabs to style each of the components separately.

Field
These settings apply to the value returned by ACF.

Typography: Set all of the typography options with the standard Ocean Elementor Widget controls.

Color: Set the color of the displayed ACF value.

Label
These settings apply to the Label set on the Content tab.

Typography: Set all of the typography options with the standard Ocean Elementor Widget controls.

Color: Set the color of the Label text.

Icon
These settings apply to the Icon set on the Content tab.

Color: Set the color of the displayed ACF value.

Size: Set the size of the Icon.

Usage

This widget is very convenient to apply template styles and auto-populate fields.

Set-up a template, apply and style the ACF widgets then save to the Elementor library or set-up a section using the OceanWP Theme library.

Ocean ACF Widget Example

Our Travel website contains details of different Tours.
Each Tour is a Post.
Each Tour has prices for Adults and Children.
We set up the ACF widget so that we can conveniently enter the prices for each Tour Post.

ACF Widget Set Up

Post Edit for a Tour

Here are the ACF widget fields displayed on the Post Edit screen.

Elementor Widget Styling

Here are the fields added to our layout in Elementor. Each price is added and styled separately with the Ocean ACF Widget.