Fields ACF & SCF for Elementor and Divi

Fields ACF & SCF for Elementor and Divi bridges the gap between ACF/SCF and popular page builders like Elementor and Divi. It allows users to create dynamic connections between custom fields and visual components, enhancing the flexibility of their WordPress websites.

Key Features:

• Elementor Integration — Dynamic fields powered by ACF or SCF, available in the LKNSCF group of the dynamic tags list (text, image, gallery, color, number, URL, file and date time).
• Divi Integration — Two native modules: Gallery(SCF) with grid or slider styles and Post Loop(SCF) with posts filtered by ACF/SCF fields. Native Divi 5 support, with a compatibility layer for pages built in Divi 4.
• Block Editor Integration — Gallery(SCF) block with grid or slider styles, using the same CSS and JavaScript as the Divi module and linked to an ACF/SCF field of the page itself. It displays only that page’s own content; the editor preview may borrow another page’s content for visualization only.
• Images and Videos — Gallery items accept images and video files (MP4, WebM, MOV and other common formats), with a static first frame and a modal player.
• Dynamic Fields — Seamless connection between ACF/SCF fields and visual components.
• Shortcode Support — Flexible shortcodes ([lknscf_field] and [lknscf_gallery]) that work in the block editor, Elementor or any page builder.
• Guided Settings Page — Tabs for settings, shortcodes and help, plus a check of what is installed on the site.

This plugin is ideal for users who want to extend the functionality of ACF or SCF and integrate it with Elementor and Divi for advanced customization.

Usage Instructions

After the installation process, locate the LKNSCF Settings option in the WordPress admin and select the plugin(s) you want to work with.

Create the fields in SCF/ACF and fill them in on the post being edited. Then display them:

1. Block editor: insert the Gallery(SCF) block and either use the gallery field of the current page or pick a specific field.

2. In the Elementor editor:

   • Use the plugin’s own components and insert the created fields through the dynamic tags.

3. In the Divi builder there are 2 modules:

   • Post Loop(SCF) filters and lists posts through the SCF object component.
   • Gallery(SCF) creates a gallery in grid or slider style from an SCF gallery field, with image and video support.

4. Anywhere else: use the shortcodes [lknscf_field] and [lknscf_gallery].

External Libraries

• Slick-carousel: Library that creates sliders or grids dynamically.

Shortcode: [lknscf_field]

Use this shortcode to display a text field or a checkbox. Minimum required parameter: [lknscf_field name=”SCF Field”].

Parameters for [lknscf_field]:

name: The name of the SCF field to retrieve the field value. This is a required parameter.

type: Optional. The type of field (e.g., “text” or “checkbox”). The default is “text”.

label: Optional. The label to be displayed next to the field (e.g., “Name:”).

tag: Optional. The HTML tag to wrap the field. Can be “h1”, “h2”, “h3”, “p” or “span”. The default is “p”.

font_size: Optional. The font size for the field text. The default is 16px.

color: Optional. The color of the field text. The default is (#000000).

background_color: Optional. The background color for the field. The default is transparent.

border_radius: Optional. The border radius for the field. The default is 0px.

checkbox_size: Optional. The size (height and width) of the checkbox. The default is 16px.

Shortcode: [lknscf_gallery]

Use this shortcode to display a gallery. Minimum required parameter: [lknscf_gallery name=”SCF Field”].

The gallery accepts both images and videos (MP4, WebM, MOV, and other common formats). Videos are shown with a static first frame and play in a modal on click.

Parameters for [lknscf_gallery]:

name: The name of the SCF field to retrieve the gallery items. This is a required parameter.

gallery_style: Optional. The style of the gallery, can be “grid” or “slider”. The default is “grid”.

width: Optional. The width of the images in the gallery. The default is 250px.

height: Optional. The height of the images in the gallery. The default is 250px.

images_count: Optional. The number of images per slider. The default is 1.

dots: Optional. Whether to display navigation dots in the slider. The default is “true”.

autoplay: Optional. Whether to autoplay the slider. The default is “true”.

arrows: Optional. Whether to display navigation arrows in the slider. The default is “true”.

delay: Optional. The delay between slides in autoplay mode, in milliseconds. The default is 7000ms.