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.

Header and Footer

If your kit includes a header and footer, they will be visible on multiple pages, but they are separate from the page’s actual content.
They are created using the Theme Builder and are part of other site parts. In this unit, you will learn how to access and edit them.
[simple_note] The site menu is usually located in the header. More information on editing the menu will be provided in the next unit. [/simple_note]

Your Goal

Edit your header and footer

Website structure

  1. A website is a combination of several features:
  2. Pages: Display your site’s fixed content (content that isn’t updated regularly), like the Homepage you’ve been editing.
  3. Header and Footer: Appear at the top and bottom of pages. They’re part of the theme, not the page’s content, and will usually appear on more than one page.
  4. Posts/Products: Display content that updates regularly.
    They’re created using a different method than Pages.
    Usually, they’re displayed on a special page. They’re only relevant to kits with Blog (Posts) or Store (Products).

    [simple_note] Posts and products will not be covered in this learning path [/simple_note]
  5. 404 Page: This page displays if your site encounters an issue and informs the user that there’s an issue.
  6. Search Results: The page that shows the results of a search made by a site visitor.
  7. Menu: Used to navigate the different pages of your site.
  8. Popup: A page that appears under certain conditions set by you.
  9. You need to edit all the above features that are part of your kit.
    In this unit, we’ll review Header and Footer.
    Menu will be discussed in the ‘Navigation’ unit.
    404, search results, and popups will be discussed in the ‘Site Parts’ unit.

Site identity

  1. Site Identity includes your site’s logo, favicon, name, and description.
  2. To edit your site identity, go to the Editor → click the site settings icon → Site Settings.
  3. Once set, your site identity is used across your site.
  4. Example: After uploading your logo, you can add a Site Logo widget (in many kits, you’ll find that this widget is already located in the header). The widget automatically displays the logo you upload in the Site Identity settings.
  5. This useful, time-saving method is called Dynamic Content. You set an item once; then, you can ‘pull’ this item from different places across your site.

Edit header and footer

  1. Header and Footer are site parts that can appear on more than one page. Most kits have both but some have only a header and some have neither.
  2. The header usually contains the Site Logo widget and Nav Menu widget. Other elements can also be added.

    [simple_note] When editing the header, you can edit the menu’s appearance, but its content (which pages are displayed) is set in the WP dashboard under ‘Appearance’. [/simple_note]
  3. The footer usually contains information your site’s visitors might find useful, such as your contact details, social icons, and location on a map.
  1. You can edit the header and footer from two places:
  2. The first is through the page itself:
    When hovering on the header or footer, they have a green (or yellow) border and handle. When hovering on the page’s content, it has a pink (or blue) border and handle.
    Click the pink handle to edit the header.

  3. You can also edit them through the Theme Builder. Click the Elementor  icon on the Top-Bar or go to ‘Templates’ on your WP dashboard.
  4. The edits are done using the Editor.
    You can create any layout and add any widget you like.
    Remember to save your edits.
  5. You can set where your header and footer appear by editing their conditions. Click the drop-down icon next to the Update/Publish button.
Summary
The header and footer are important for your site as they help users navigate and provide access to key information, so it’s important to consider their content carefully. Since the header and footer appear on multiple pages, when editing your site’s pages (as explained in the next unit), make sure the design of the header and footer matches the rest of the pages.

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.