To Show Google Sheets Data in Elementor without relying on APIs or complex integrations is now easier than ever. This approach lets you connect Google Sheets directly to any multi-source widget and display live, dynamic content on your website. Any changes made in the sheet, such as reordering rows, updating values, or removing entries, are reflected instantly on the front end. It is a simple and efficient solution for content management, especially for teams and clients who prefer working inside Google Sheets rather than the WordPress dashboard.
Step #1: Install and activate Unlimited Elements
Before getting started, you will need to purchase Unlimited Elements Pro from the link below.
Then follow these steps:
Step #2: Create a Google Sheet
First, create a Google Sheet and organize your data into columns based on what you want to display on your website. Each column will be used to output specific data, so make sure to give them clear and descriptive names for easier identification. For example, in this demo, we are using an IKEA sample sheet, where a column named “Item” is used to display the title, and a column named “Pic” is used to output the image, along with other relevant fields.
Publish the Google Sheet to Web
Once the data has been added to the sheet, the next step is to publish it to the web. Click on File, navigate to the Share option, and then select Publish to web. A new window will appear. Select the current sheet, then choose Comma-separated values (CSV) from the format dropdown. Click the Publish button and copy the generated link, which we will use later inside the Elementor widget.
Step #3: Show Google Sheets Data in Elementor Widget
You can use any multi-source widget to display Google Sheets data in Elementor. In this example, we will use the Content Grid widget. Simply drag and drop the widget onto the desired section of your page where you want the data to appear.
Source Settings
Fields Mapping
Now, map the required fields from the Google Sheet columns. To map a field, click the plus (+) icon and select the Item Field Name option from the dropdown. Then, enter the corresponding Google Sheet column name into the item field name.
Title Source
Enter the column name from the Google Sheet in the Title Item Field Name field.
Content Source
Enter the column name from the Google Sheet in the Content Item Field Name field.
Image Source
Enter the column name from the Google Sheet in the Image Item Field Name field.
Link Source
Enter the column name from the Google Sheet in the Link Item Field Name field.
Content Grid Widget Settings
Once all fields are mapped and the data is displaying correctly in Elementor, you can adjust the widget’s layout and other settings to match your design requirements.
Wrapping it Up!
Using Google Sheets as a live data source opens up a faster and more flexible way to manage content in Elementor. Since it works with all multi-source widgets and requires no API configuration, it significantly reduces setup time while keeping content always up to date. Whether you are collaborating with a team or handing content management to clients, this approach simplifies workflows and removes unnecessary technical barriers, making ongoing updates effortless and reliable.