We are excited to announce that we are resuming the development of commercial themes for ThemeForest after nearly four years, with Elementor as our primary page builder.
Elementor stands out for its impressive features, allowing theme authors to create custom designs without the need for extensive coding. One particularly notable feature is the “Site Settings,” which enables the inclusion of custom colors, fonts, button styles, and more that apply universally across the website, even on pages not built with Elementor. This functionality simplifies the design process significantly!
To apply these settings on a new site, you can easily export the kit from your previous site and import it into the new environment in just a few minutes.
For adding predefined content and theme settings efficiently, we utilize the One Click Demo Import (OCDI) plugin. This tool enhances usability for our customers, making navigation straightforward. However, we have encountered a limitation: the Elementor Global options do not transfer when using the One Click Demo Import plugin.
How to fix the import issue?
To resolve this, I’ve looked into the Elementor plugin code to understand how their import feature operates. We can leverage that functionality by triggering the import process using the ocdi/after_import hook provided by OCDI.
The process is simple:
1. Navigate to Elementor > Tools > Import/Export Kit.
2. Ensure to select only the Site Settings option from the export screen.
3. Once completed, a zip file containing json files will download to your device.
Next, you will need to place the kit.zip file into your theme folder to facilitate its application via the OCDI hook.
You need to use the code below to add site settings during the theme demo import.
/**
* Function to perform setup after importing data.
* This function assigns the front page and the posts page (blog page) based on the imported demo.
* @param array $selected_import The selected import data.
*/
function cdx_after_import_setup( $selected_import ) {
// Import Elementor kit data.
$cdx_kit_zip = get_parent_theme_file_path() . '/demo-content/elementor-kit.zip';
$import_export_module = \Elementor\Plugin::$instance->app->get_component( 'import-export' );
$import_settings['referrer'] = 'remote';
$import_export_module->import_kit( $cdx_kit_zip, $import_settings );
}
add_action( 'ocdi/after_import', 'cdx_after_import_setup' );
By following these steps, you can ensure that Elementor’s global options are correctly imported into your new site.
