Learn With Us

Create a Website
with Elementor

The Goal

Build your own custom website.

Description

Learn how to create your website with this step-by-step guide.

What's inside

Step by step guide to edit a kit into your own website: 12 units, 47 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
with an installed kit.

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.

Edit Your Pages

With your homepage editing complete, you are now ready to edit the rest of the pages in your kit. This unit contains guidance on how to accomplish that effectively.

Your Goal

Edit all your website’s pages.

Process

  1. When you’ve completed editing your homepage’s content, header, and footer, edit the other pages of your kit. To maintain order, edit them one by one.
  2. To add a new page or delete an existing page, go to WP dashboard → pages.
    [simple_note] In kits with a blog or online store, some pages will display posts or products.
    To learn about Posts and Products go to the Elementor academy homepage and choose a learning path explaining Blog or Store [/simple_note]
  3. There are multiple approaches to editing a page. Here are some basic guidelines to keep your work effective:
  4. Top-down:
    Starting at the top of the page, edit each parent container until it’s perfected.
    Click each element to open its settings. 
  5. Start with fundamentals:
    When editing an element, start by editing the basics.
    Examples:
    – When editing the layout, start with the parent container settings, then edit the child container settings.
    – If you want to change a widget’s location, go to the container’s layout settings to check if you can do it from there.
    – When editing a widget, first edit its content and then its style.
  6. Pre-made:
    Reusing saves time-
    Examples:
    – Use the Global color and font settings.
    – If you want to add content, go to the Template library and choose a block.
    – Use the quick actions menu to duplicate elements or to copy/paste style. 
  7. Ask for help:
    If you fail at a specific action like setting a background color to a container, adding an Email to a form, or changing a text’s size, search the internet.
    You’ll find others who’ve asked and answered your questions.

Forms

  1. Forms are an essential tool that allow you to collect data from your users.
  2. One of your kit’s pages contains a form. In the Editor, the form is created with the Form widget. Click the form to open its settings.
  1. Edit the form’s fields according to the data you want your users to send.
  2. You can also style the form, add steps, and set which actions are taken (automatically) after the user sends the form.
  3. Next, connect an email to the form. All responses are sent to this email.
  4. You can also view the form submissions in WP. Go to Elementor → Submissions.

Page settings

  1. The cog icon located in the middle of the top bar provides access to the Page Settings, which contain settings specifically related to the page.
  2. Under the Settings tab, you can set your page’s title, status, featured image, and where its layout is inherited from.

    [simple_note] Read more about these settings before changing them.e [/simple_note]
  3. Under the Style tab, you can change your page’s background, margins, and paddings.
Summary

You’ll work with both WordPress and Elementor- some actions will be done through WordPress but most of the time you’ll use Elementor. * Your Cloud Website account includes a pre-installed WordPress account and the Elementor Plugins, so you don’t need to install anything, you can get straight to work!

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