ACF iFrame Embed Fix with a Shortcode

In this tutorial, we’ll explore the ACF iFrame Embed Fix using a simple shortcode method in Elementor. This approach ensures your iFrames, like Google Maps, display correctly on your WordPress site.

Prerequisites

Please make sure you have the following installed and activated:

• Advanced Custom Fields (ACF)
• Elementor

What are iFrames and Shortcodes?

Understanding the basics of iFrames and shortcodes in WordPress is beneficial. iFrames are used to display content from another source within a webpage. Shortcodes in WordPress are small code snippets that allow you to perform specific functions easily. Combining these two effectively can enhance the functionality of your WordPress site.

ACF iFrame Embed Fix Instructions

1. Copy your ACF field name (e.g., ‘Google Maps’). This is usually found in your ACF field settings.
   
2. Navigate to the WordPress admin area and open the page or post where you want to embed the iFrame.
3. Drag and drop the Shortcode widget, in this case from Elementor.
   
4. Paste the ACF field name into the shortcode widget in the format: [acf field="your_field_name"].
   
5. Adjust the iFrame’s height by adding custom CSS. For example, selector iframe { height: 50vh; } for a 50% viewport height.
   
6. Click ‘Update’ to save your changes and preview the page to ensure the iFrame displays correctly.
   

Official Documentation

• Elementor Documentation
• ACF Documentation

ACF iFrame Embed Fix – Conclusion

This method provides a reliable way to embed iFrames using ACF and Elementor. It’s a straightforward approach that ensures your iFrames, such as Google Maps, are displayed correctly on your WordPress site.