Elementor Kit Installation and Configuration

This article will walk you through the steps to install and configure a Prodigy Elementor Kit starting from a fresh WordPress install with no existing custom content or design. 

Install and activate the Prodigy plugin

First, you will need to install and activate the Prodigy Commerce WordPress plugin. From the WordPress Admin, navigate to Plugins -> Add New Plugin. In the search bar at the top right of the screen, type in "Prodigy" and you should see the plugin.

Click the Install Now button to install the plugin:

elkit-prodigy-install.png

Then click the Activate button to activate the plugin:

elkit-prodigy-activate.png

For more detailed instructions, refer to our article Installing the Prodigy WordPress Plugin.

After you click the Activate button, you will be automatically directed into the plugin's setup wizard. Click the Connect button on the first step of the wizard to connect a Prodigy store to the plugin.

elkit-prodigy-connect.png

Please refer to our Setup Wizard articles for more detailed information.

Install and activate the Elementor and Elementor Pro plugins

The Prodigy Elementor Kit requires that both the Elementor and Elementor Pro plugins be installed and activated.

The Elementor plugin can be installed and activated in the same way that you installed the Prodigy plugin in the previous step. After searching for the plugin, click the Install Now and then the Activate buttons.

elkit-elementor-plugin.png

The Elementor Pro plugin requires a license that must be purchased through the Elementor website. After purchasing the license, you will be able to download the archive (.zip) file from your Elementor account. To install the plugin, navigate to Plugins -> Add New Plugin and then click on the Upload Plugin button at the top of the page and then the Choose File button to select and upload the plugin archive.
 

elkit-elementor-pro-plugin.png

After activating the Elementor Pro plugin, you will see a Connect & Activate link on the Plugins page. Click that link and follow the instructions to activate your license.

elkit-pro-activate-license.png

Activate the required Elementor features

The Prodigy Elementor Kit requires a couple of beta features that must be enabled before you install the kit. To install these features, navigate to Elementor -> Settings.

elkit-elementor-settings.png

Then on the top tabs select Features.

elkit-elementor-settings-features.png

In the Ongoing Experiments section, there are three features that need to be activated: Editor Top Bar, Nested Elements, and Menu. Change the dropdown on each of these to Active.

elkit-editor-top-bar.png

elkit-nested-elements.png

elekit-menu.png

In the Stable Features section, double-check that the following features are already enabled: Flexbox Container and Hello Theme Header & Footer.

elkit-flexbox-container.png

elkit-hello-header-footer.png

Then scroll all the way to the bottom of the page and click the Save Changes button.

elkit-features-save.png

Install and activate the Hello Elementor theme

The Prodigy Elementor Kit is designed to work with Hello Elementor as the base theme. To install the theme, navigate to Appearance -> Themes.

elkit-themes-menu.png

Then click on the Add New Theme button at the top of the page.

elkit-theme-add-new.png

Then in the search bar at the top right of the page, enter "Hello Elementor" to find the theme. Similar to the plugin steps above, you will then click the Install and Activate buttons.

elkit-hello-activate.png

Delete the existing Cart and Thank You pages

Before we install the Elementor Kit, we need to delete the existing Cart and Thank You pages because the kit installation will create new Elementor versions of these pages. To do this, navigate to Pages -> All Pages.

If you hover your cursor over the Cart page, you will see a Trash link that you can click to move the page to the trash.

elkit-cart-page-trash.png

Then do the same for the Thank You page.

elkit-thank-trash.png

Then click on the Trash link above the pages table.

elkit-pages-trash-link.png

Then click the Empty Trash button.

elkit-pages-empty-trash.png

Import the Elementor Kit

The next step is to import the Elementor Kit that was provided to you by your Prodigy account manager. If you do not have a Prodigy Elementor Kit, please reach out to us at support@prodigycommerce.com and we will get in touch with you to discuss your needs.

If you already have your Elementor Kit archive file, you can  navigate to Elementor -> Tools.

elkit-elementor-tools-menu.png

Then click on the Import / Export Kit tab at the top right of the page and then click the Start Import button.

elkit-import-kit.png

Then click on the Select File button and find the Prodigy Elementor Kit archive file on your computer to upload.

elkit-import-kit-select-file.png

You can then follow the prompts and accept all of the default values to complete the kit import process.

Assign the Elementor Cart and Thank You pages

Because we deleted the original Cart and Thank You pages, we now need to reassign the new Elementor Cart and Thank You pages in the Prodigy plugin settings. To do this, navigate to Prodigy -> Settings.

elkit-prodigy-settings-menu.png

Then select the Pages tab at the top of the page.

elkit-prodigy-page-settings.png

If you then click into the Cart page field, you can start typing "Cart" to find the new Cart page.

elkit-prodigy-page-selection.png

Repeat this process to assign the new Thank You page and then click Save Changes at the bottom of the form.

Add the store logo to the header template

To set the site's logo in the header template, navigate to Appearance -> Customize in the WordPress Admin.

elkit-customize-menu.png

Then on the left menu, select Site Identity.

elkit-site-identity.png

You can then click on the Select logo button to upload the site's logo.

elkit-select-logo.png

The logo will then automatically appear in the Elementor Header template. You can edit the size and position of the logo by navigating to Templates -> Theme Builder and editing the template named Elementor Header Kit.

Configure the mega menu

To configure the menu, navigate to Templates -> Theme Builder.

elkit-templates-theme-builder.png

Then select the Elementor Header Kit template and click the Edit link.

elkit-header-template.png

You will see that the header template menu has five placeholder menu items. Click on the Menu Widget to open the editing options.

elkit-menu-widget.png

In the left panel, you will now see the Edit Menu options where you can edit the existing placeholders or add additional menu items if needed. If you don't need all five menu items, you can delete the excess items by clicking the X in the right column.

elkit-edit-menu-widget.png

If you click on an individual menu item, you can then edit the details of that item. If the item is going to be a link to a single page, you would edit the Title, Link, and turn off the Dropdown Content switch. If the item is going to be a dropdown to a sub-category menu, you would edit the Title, leave the Link blank, and make sure the Dropdown Content switch is on.

elkit-edit-menu-item.png

If the item is going to be a dropdown to a sub-category menu, you will then need to click on the menu item in the header template and you will see a WordPress Menu widget appear as shown below.

elkit-menu-dropdown.png

If you then click on the WordPress Menu widget, you will see in the left panel the settings where you can assign the menu.

elkit-edit-wordpress-menu.png

The menu that you are assigning is a standard WordPress menu, so before you can do this you must create the menus that you want to use by navigating to Appearance -> Menus.

Adjust the global styles

You can access the global styles of the Prodigy Elementor Kit from any Elementor template by clicking on the hamburger menu at the top of the left panel.

elkit-global-styles-1.png

Then select Site Settings to access the global styles of the Elementor Kit such as colors and fonts.

elkit-global-styles-2.png

 

Build WordPress stores with modern technology

Sign up to use the Prodigy platform, a powerful alternative to WooCommerce. Prodigy is free at ANY scale.

Create an Account