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.

Orientation

We’ll start with listing the platforms you’ll be working with and explaining some basic tools. If you want to get straight to work you can skip to unit 2, but if you’ve never used WordPress or Elementor we recommend that you’ll review this unit sooner rather than later.
[simple_note] If you haven’t downloaded a kit to your site yet, this unit will guide you through the process of doing so. [/simple_note]

Your Goal

Develop a basic understanding of the purpose and functions of each platform, as well as how they rely on and interact with one another.

Before you begin

  1. Most people using this guide aren’t experienced web designers or content writers.
    So creating and styling the content, text, and images on your site can be daunting.
    Elementor’s kits were created by professional designers and the kits offer structure for your content.
  2. A kit lists all the text and images you need to create. The kit guides you on the length, content, and message of your text. It does the same for images, clarifying how many images you’ll need, their dimensions, etc.
  3. You can create your website’s texts and images before you start editing, but finalize them while editing.
    Example: You may write a description of your services beforehand but it might be too short or long when you paste it in your kit. You’ll have to adjust the text length so it will be in compliance with the page’s design.
  4. Your first encounter with a new platform can be overwhelming. This guide will explain basic terminology and concepts.
    By mirroring the processes and where you are in the process, we’ll guide you on what to do.
  5. This guide is divided into units, which contain several steps. Some steps explain concepts and others instruct you on the process.
    Processes are explained with step-by-step points. At the end of each step, you’ll find videos and articles with additional information.
  6. Your skill level and the kit’s complexity will affect how long it takes to complete your site.
    [simple_note] Assuming all the site assets (text and images) are prepared, it will take an experienced web creator 7 hours to edit a kit. [/simple_note]

WordPress and Elementor

  1. WordPress (WP) is an open-source Content Management System (CMS), making it an expandable content-managing system for your website.
  2. WP manages your website’s infrastructure.
  3. Elementor is a WP plugin that expands WP’s capabilities.
  4. Elementor helps you create websites without coding.
  5. You’ll use both WP and Elementor. Some actions are done through WP, but you’ll primarily use Elementor.
  6. Your Elementor Hosted Website account includes a pre-installed WP account and the Elementor plugins. You don’t need to install anything; you can get straight to work!

My Elementor dashboard

  1. The My Elementor dashboard gives you one easy location to access and manage your Elementor sites and subscriptions.
  2. The My Elementor dashboard is your entry point for navigating to the WordPress (WP) dashboard.
  3. It’s also where you’ll manage your backups, domains, and everything related to your Elementor subscription.

  1. To access the My Elementor dashboard, go to elementor.com and log in. Then go to Websites to start working on your site.
  2. Site Lock is activated by default to allow you to edit your site privately. You can change this setting under your website’s settings.


WordPress dashboard

  1. To access the WP dashboard, go to the My Elementor dashboard, hover over your website’s card, then click Open WP dashboard.
  1. For now, take a quick tour of the basic functions; we’ll explain how to use each later.
  2. Under Pages, you can access each page, edit it, and add or delete pages.
  3. Under Media, you can access your media library and upload new media.
  4. Templates offer useful features to create or edit your popups and landing pages. Here you can also access the Theme Builder to edit your site’s Global Parts (Example: the header or footer).
  5. Under Appearance, go to Menus to access and edit your kit’s navigation menus.

The Kit Library

  1. A kit is a great time saver and is extremely useful for non-designers.
  2. You start with a premade website, and then you edit it.
  3. You can easily remove your kit (WP dashboard → Elementor → Tools → Export/Import Kit → Remove).
  4. You can easily upload a new kit (WP dashboard → Templates → Kits Library).
  5. After downloading a kit, you can edit it as you want. You can use it as is or as a basic structure, deleting parts and expanding others.
  6. Understanding what to do after downloading a kit can be challenging.
    Follow this guide to familiarize yourself with the process.

WordPress Themes

  1. WP Themes provide sites with their infrastructure⁠; you can’t build a site without one.
  2. A theme includes the general layout and design for your site.
    Example: A theme can include site parts like header and footer, which appear on more than one page. The theme can also include the layout and style of the page’s content.
  3. The header and footer aren’t part of your page’s content, as they appear on more than one page. They’re part of the theme.

  4. The Hello theme is clean and minimalistic, it contains only a header and a footer.
    The Hello theme is the default theme for Elementor Hosted websites and it is pre-installed in your Elementor Hosted website.

  5. With the Hello theme’s minimalist structure, you have the flexibility to create your own site parts like the Header, Footer, 404 page, and more.
    Site Parts are created in the Theme Builder.
  6. For now, let’s focus on editing your page’s content. We’ll get back to the Theme Builder in units ‘Header and Footer’ and ‘ Site Parts’.
Summary
You’ll be using WordPress and Elementor to create your site. WordPress provides the infrastructure for your site and Elementor is used to create and edit its content. Websites are composed of different parts that can be created and edited in the Theme Builder. Your Elementor Hosted Website account comes with a pre-installed WordPress account and the Elementor plugins and, eliminating the need for any additional installations. You can dive right in and start working without any setup hassle!

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