Repeaters & Relationships Connector with ACF for Elementor vs 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. Shortcodes for displaying galleries and custom fields. Divi Integration: Gallery component with grid or slider styles. Loop component for posts or pages, dynamically filtered by ACF or SCF fields. Dynamic Fields: Seamless connection between ACF/SCF fields and visual components. Shortcode Support: Flexible shortcodes for Gutenberg and other editors. 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. Short Description A plugin that connects ACF (Advanced Custom Fields) or SCF (Secure Custom Fields) with Elementor and Divi, enabling dynamic fields, gallery components, and loop functionality. Usage Instructions After the installation process, locate the LKNSCF Settings option in the WordPress admin bar and select the plugin(s) you want to work with. Create the fields in SCF and define them on the Gutenberg editing page. After filling in the fields, proceed to the Plugin editing page (Elementor or Divi). In the Elementor editor: On the Elementor page, use the plugin’s own components and insert the created fields through dynamic tags. In the Divi theme editor, there are 2 components: Performs the Loop and filters the posts inserted in it through the SCR Object component. Creates a gallery in grid or slide style, allowing the user to customize the set of images coming from SCR. 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”]. 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.

This plugin allows you to use ACF Repeater and ACF Relationship fields as data sources for Elementor’s Loop Grid widget. Key Features: New Data Sources: Adds “ACF Repeater” and “ACF Relationship” to the Source dropdown in the Loop Grid’s Query tab. Use Repeater Data: Select any ACF Repeater field from the current post/page to power your Loop Grid. Use Relationship Data: Select any ACF Relationship field to create a grid of related posts in your Loop Grid. Repeater Sub-Field Tag: A dedicated dynamic tag to easily pull and display data (text, images, etc.) from any sub-field within your repeater. Relationship Sub-Field Tag: A dynamic tag to display data from the related posts, such as the post title, content, featured image, and permalink. Taxonomy Archive Support: Use ACF Repeater and Relationship fields on category, tag, and custom taxonomy archive templates. Author Archive Support: Use ACF Repeater and Relationship fields on author archive templates. Requirements Elementor Elementor Pro Advanced Custom Fields Pro (The Repeater and Relationship fields are ACF Pro features) Usage 1. Configure the Loop Grid Add an Elementor Loop Grid widget to your page. In the widget settings, go to the Query tab. From the Source dropdown, select “ACF Repeater” or “ACF Relationship”. A new dropdown will appear below the Source. Select the specific ACF field you wish to use as the data source for the grid. Create or select a template for your loop item. 2. Displaying Data in Your Loop Template (ACF Repeater) Edit the Elementor template you are using for your loop item. Add any standard widget, such as a Heading, Text Editor, or Image widget. Click the Dynamic Tags icon next to a field. Scroll to the “ACF Connector” group and select the ACF Repeater Sub Field tag. Click on the tag name again to open its settings. In the Sub Field dropdown, select the specific sub-field you want to display. The fields are grouped by repeater name for clarity. Note that the preview within the template will not display the sub-field data. This is expected behavior because no applicable preview data can be set in Elementor. 3. Displaying Data in Your Loop Template (ACF Relationship) Edit the Elementor template you are using for your loop item. Your template will be supplied with a standard WordPress Post object, so just create your template as you normally would.