Learn With Us

Create a Store
with Elementor

The Goal

Create a website with an online store to present and sell your products.

Description

Learn how to create your online store with this visual step-by-step guide.

What's inside

Step by step guide to edit a kit into your own store:
13 units, 53 steps

Requirements

This guide is for editing an Elementor Hosted kit; an installed kit on an Elementor Hosted website is required.

How to use
this guide

Prerequisites:
An Elementor Hosted website
equipped with a pre-installed kit
featuring an online store.

 

Instructions:

  • Follow the learning path unit by unit and step by step.
  • Each step in the learning path will guide you through the process of editing a kit and creating your own custom website.
  • Steps may explain concepts, demonstrate tasks, or both. When a step shows you how to do something, apply the instructions to your site.
  • After completing each step, refer to the additional resources provided to enhance your understanding before implementing the instructions.

Tools and Tips

In this unit, you will be introduced to a set of valuable tools that can significantly improve your editing process.

These tools are designed to save you time and effort, allowing you to work more efficiently on your site.

Your Goal

Improve your workflow by learning how to use these tools effectively.

Navigator

  1. The Navigator helps you access elements and change their location.
  2. To open the Navigator, click its icon at the Top-Bar.
  3. You can move and resize the Navigator window.
  4. Click an element in the Navigator to open its menu in the panel.
  5. Right-click an element to open the quick actions menu.
  6. You can drag and drop elements in the Navigator to change their location on the canvas.


Finder

  1. Elementor Finder allows you to navigate directly to different locations in your site, to access site settings and tools, and to add content or templates directly from the editor.
  2. To open the Finder, click either CMD + E (Mac) OR CTRL + E (Windows).

Hot Keys

  1. Hotkeys are keyboard shortcuts used for common actions in Elementor.
  2. To open the Hotkeys list click on the Elementor icon in the Top-Bar or type
    Cmd/Ctrl + ? 

Preview page

  1. When editing, your view doesn’t match your site’s live version. The panel takes up space so the editor’s width is different to your site’s live view version.
  2. You should go back and forth between the two views. You can do that in two ways:
  1. Click the arrow at the border of the panel and the canvas. This minimizes the panel, allowing the canvas to expand.
  2. To go to a live version of your site, click the eye icon.

History

  1. The process of creating your first website is not always straightforward. There may be instances where you make mistakes and wish you could undo the changes. The good news is, you have the option to undo every action you take!
  2. To access the history feature, simply click on the Elementor icon located in the Top-Bar and navigate to the History section.
  3. Within History you will find two tabs: Actions and Revisions.
    The Actions tab enables you to undo specific actions you have performed, while the Revisions tab allows you to revert to previously saved versions.
    [simple_note] You don’t have to worry about experimenting because everything you do in the Editor can be easily undone. [/simple_note]

Change kit

  1. At this point, you might find  that your kit’s structure or components don’t suit your needs.
  2. In this case, replace your kit with one that fits your needs.
  3. You can download more than one kit to your site, but multiple kits may complicate your work.
    [simple_note] Remove the current kit before downloading another kit. [/simple_note]

  1. To remove your kit, go to WP dashboard → Elementor → Tools → Import / Export Kit.
  2. After removing your kit, visit the Kits Library to choose a new kit.
    Go to: WP dashboard → Templates → Kit Library and select a new kit
Summary
Using these tools will improve your workflow and assist in enhancing your efficiency. Give them a try while editing the different parts and pages of your kit’s site.

How helpful was this unit?

Do you have any feedback or suggestions to improve this page?

Do you have any feedback or suggestions to improve this page?

Do you have any feedback or suggestions to improve this page?

Do you have any feedback or suggestions to improve this page?

Do you have any feedback or suggestions to improve this page?

Thanks for your feedback!

Up Next

Master Elementor with Hands-On Lesson!

With our personalized, hands-on training sessions, you’ll get expert guidance tailored specifically to your skill level.