- \n
- Go to the Elementor Site Planner page<\/a>.
There are two ways to prepare your brief:![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/AI-planner-opening-screen.png\")
\n- \n
- AI chat<\/strong><\/a>: The AI will walk you through the process of creating the brief.<\/li>\n\n\n\n
- AI Notetaker<\/a><\/strong>: Record a Google Meet meeting with your client or team. Notetaker will analyze the conversation and create a brief based on that meeting.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
Start with AI Chat<\/h2>\n\n\n\n
- \n
- Click Start with AI Chat<\/strong>.
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/Click-start-with-AI-chat.png\")
This begins the design process.<\/li>\n\n\n\n- In the panel, name your site.
![\"Use](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-15.png\")
<\/li>\n\n\n\n- Click the submit icon.
![\"The](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-16.png\")
[callout type=”note”]Throughout the process, if you have difficulty answering any questions, click What should I write? <\/strong>to ask the AI for help. The AI will guide you, helping you create the perfect prompt.![\"Click](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-17.png\")
[\/callout]<\/li>\n\n\n\n- Enter your type of business. The AI will offer you a few options for business types, but if they are not relevant, you can enter whatever text you want.
[callout type=”note”]Throughout the site planning process, Site Planner offers suggested answers but you are always free to enter your own text.[\/callout]![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-18.png\")
<\/li>\n\n\n\n- Click the submit icon.<\/li>\n\n\n\n
- Now, enter what your business does. Remember, everything you list here will be given equal weight, so only list things you want to emphasize.
![\"The](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-19.png\")
[callout type=”note”]Again, the AI will offer several suggestions which you can choose to use or not. Note that some suggestions have a plus sign before them. That indicates you can use as many of these suggestions as you want. Suggestions without a plus sign will take you to the next step.[\/callout]![\"The](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-21.png\")
<\/li>\n\n\n\n- Click the submit icon.<\/li>\n\n\n\n
- Enter the services or products offered by the business.
![\"Enter](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/services-and-products-scaled.png\")
<\/li>\n\n\n\n- Click the submit icon.<\/li>\n\n\n\n
- Enter your website\u2019s primary goal(s). For example, do you want to increase online sales, build brand awareness, sell premium subscriptions, or a combination of any of these?
![\"Enter](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-22.png\")
<\/li>\n\n\n\n- Click the submit icon.
![\"The](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-23.png\")
<\/li>\n\n\n\n- Enter your secondary goal(s).<\/li>\n\n\n\n
- Click the submit icon.<\/li>\n\n\n\n
- Enter the website’s primary language.
![\"The](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/Enter-the-language-scaled.png\")
<\/li>\n\n\n\n- Add the most important things your website should do, such as receiving online orders, gathering subscribers, directing visitors to your social media pages.
![\"The](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-24.png\")
<\/li>\n\n\n\n- Click the submit icon.<\/li>\n\n\n\n
- Decide what tone you want for your website, such as Professional and Authoritative<\/strong>.\u00a0
You\u2019re ready to structure your website.![\"Enter](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-25.png\")
<\/li>\n\n\n\n- Enter the pages you want on your site. Some of these pages may include:\n
- \n
- Home<\/li>\n\n\n\n
- About Us<\/li>\n\n\n\n
- Contact Us<\/li>\n\n\n\n
- Blog<\/li>\n\n\n\n
- Our Store<\/li>\n\n\n\n
- Our Team
As with all suggestions, feel free to add anything relevant for your site.![\"The](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-26.png\")
<\/li>\n<\/ul>\n<\/li>\n\n\n\n - Click the submit icon.\u00a0
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-27.png\")
<\/li>\n\n\n\n - At this point, you can click Use this brief,<\/strong> and Site Planner will create a sitemap and wireframe layout for your site. However, you also have the option to add more details for Elementor AI to work with. <\/li>\n\n\n\n
- Answer the questions Site Planner asks you.
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-28.png\")
<\/li>\n\n\n\n- When Site Planner has enough information, click Yes I\u2019m ready<\/strong>.
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-29.png\")
Site Planner drafts a sitemap and wireframe layout for you. You can now edit the site as detailed below.<\/li>\n<\/ol>\n\n\n\nWork with your draft layout<\/h2>\n\n\n\n
Site Planner drafts a sitemap and wireframe for your site which you can then customize to your needs.<\/p>\n\n\n\n
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-30-1024x602.png\")
<\/figure>\n\n\n\nSite Planner presents the sitemap one page at a time, listing the different sections of the page. <\/p>\n\n\n\n
- \n
- Click a page name to see the map of that page.<\/li>\n<\/ul>\n\n\n\n
You can customize the site layout using either the sitemap or wireframe, although some features are only available from either the sitemap or the wireframe. <\/p>\n\n\n\n
Use the Sitemap<\/strong> and Wireframe<\/strong> buttons to switch between the two views.
<\/p>\n\n\n\n![\"The](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-31-1024x227.png\")
<\/figure>\n\n\n\nYou can examine and edit the layout using the following features:<\/p>\n\n\n\n
Zoom in on a page<\/h3>\n\n\n\n
Use the View dropdown menu to zoom in and out.
![\"The](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/Zoom.png\")
<\/p>\n\n\n\nAdd a page<\/h3>\n\n\n\n
Adding a page can only be done from the sitemap.<\/p>\n\n\n\n
If there\u2019s a page missing from the layout, you can add it from the sitemap.<\/p>\n\n\n\n
To add a page<\/strong>:<\/p>\n\n\n\n
- \n
- Hover your mouse over the space between two pages.
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-34.png\")
<\/li>\n\n\n\n - Click the plus symbol.
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-35.png\")
<\/li>\n\n\n\n - (Optional) Add a page name.
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-36.png\")
<\/li>\n\n\n\n - Click Generate page.<\/strong><\/li>\n<\/ol>\n\n\n\n
Site Planner will generate a new page using the page name and the other information you provided in your brief. For instance, a page titled \u201cOur Products\u201d will yield different results than a page titled \u201cMeet our staff\u201d. <\/p>\n\n\n\n
Regenerate a page or section<\/h3>\n\n\n\n
If you don\u2019t like the layout of a page or page section, you can have Site Planner regenerate it until you get a result you like. <\/p>\n\n\n\n
To regenerate a page (Site Map only)<\/strong>:<\/p>\n\n\n\n
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-37-1024x370.png\")
<\/figure>\n\n\n\nHover over the top of the page and click the regenerate icon.<\/p>\n\n\n\n
To regenerate a section<\/strong>:<\/p>\n\n\n\n
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-38-1024x522.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-39.png\")
<\/figure>\n\n\n\nHover over the top of the section and click the regenerate icon.<\/p>\n\n\n\n
Delete a page or section<\/h3>\n\n\n\n
If you decide a page is unnecessary, you can delete it, if your page is too long, you can delete a section.<\/p>\n\n\n\n
To delete a page (Sitemap only)<\/strong>:<\/p>\n\n\n\n
- \n
- At the top of the page click the ellipses.
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-40.png\")
This page menu appears.![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-41.png\")
<\/li>\n\n\n\n - Select Delete<\/strong>.
[callout type=”note”]You cannot delete the Home page.[\/callout]<\/li>\n<\/ol>\n\n\n\nTo delete a section<\/strong>:<\/p>\n\n\n\n
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-42-860x1024.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/image-43-1024x650.png\")
<\/figure>\n\n\n\nHover over the section and click the delete icon.<\/p>\n\n\n\n
Layout responsive views <\/h3>\n\n\n\n
Responsive views are only available from the wireframe.<\/p>\n\n\n\n
You can see how your site will look on different devices by using responsive views.<\/p>\n\n\n\n
To see responsive views (Wireframe only):<\/p>\n\n\n\n
- \n
- Click the responsive device dropdown menu to see how the site will look on a desktop, tablet or mobile.
![\"The](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/The-device-dropdown-menu-scaled.png\")
<\/li>\n<\/ul>\n\n\n\nSet your site style<\/h3>\n\n\n\n
The style section directs site builder to create your site using your brand colors and fonts and logo.<\/p>\n\n\n\n
To set your brand colors, fonts and logo (Wireframe only):<\/p>\n\n\n\n
- \n
- Click the style icon.
![\"The](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/Click-the-style-icon-scaled.png\")
<\/li>\n\n\n\n - Click one of the chevrons to select:
![\"The](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/The-chevrons.png\")
\n- \n
- Site colors<\/li>\n\n\n\n
- Site fonts<\/li>\n\n\n\n
- Site logo<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
Share your design<\/h2>\n\n\n\n
You can share your design by using a dropdown menu to create a shareable brief describing your site or a link that will allow others to see your design.<\/p>\n\n\n\n
Share your design brief<\/h3>\n\n\n\n
To share your design brief:<\/p>\n\n\n\n
- \n
- Click the chevron on the right corner of the top bar.
![\"The](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/click-the-chevron-on-the-top-bar-scaled.png\")
<\/li>\n\n\n\n - Select Preview site plan<\/strong> from the dropdown menu.
![\"Preview](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/Click-Preview-site-plan-1-scaled.png\")
This opens a copy of the website brief which you can download or copy.![\"The](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/copy-or-download-scaled.png\")
<\/li>\n<\/ol>\n\n\n\nCreate your site<\/h2>\n\n\n\n
To create your site you need to click Create Website and either launch the site with Elementor Host or create a downloadable website kit.<\/p>\n\n\n\n
After reviewing the wireframe, you\u2019re ready to generate your website. To do this you\u2019ll be able to create a temporary Elementor Host site using the design or export the site to another host. <\/p>\n\n\n\n
To create a temporary Elementor Host site:<\/p>\n\n\n\n
- \n
- Click Create Website<\/strong> in the upper right.
![\"The](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/Click-Create-website-scaled.png\")
<\/li>\n\n\n\n- In the popup window, select Launch a fully hosted website<\/strong> and click Continue<\/strong>.
[callout type=”note”]If you already have an Elementor Host subscription, you can use that by clicking Use an existing subscription<\/strong>.[\/callout]![\"The](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/Click-launch-a-site-and-continue.png\")
Elementor Host uses your design to create a site. This site will exist for 14 days. <\/li>\n<\/ol>\n\n\n\nTo export your site to a different host:<\/p>\n\n\n\n
- \n
- Click Create Website<\/strong> in the upper right.<\/li>\n\n\n\n
- In the popup window, select Import your kit to a site<\/strong> and click Continue<\/strong>.
![\"The](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/import-your-kit-to-a-site.png\")
<\/li>\n\n\n\n- Fill in your domain address and click Continue<\/strong>.
![\"The](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/Enter-domain-name-and-run-check.png\")
Site planner checks the destination to make sure it has the features needed for the site. If the domain is set up properly, your site is built using your domain.
<\/li>\n<\/ol>\n\n\n\nTo create your site, you’ll need some basic infrastructure:<\/p>\n\n\n\n
- \n
- A website host with a WordPress website. For background information about WordPress, see What is WordPress?<\/a> For details about website hosting, see What is website hosting<\/a>?<\/li>\n\n\n\n
- The Hello Theme. For details, see What is the Elementor Hello theme<\/a>?
[callout type=”tip”]In most cases, you\u2019ll want to choose the disable page titles option in the theme settings. To find out how, see Edit the Hello Theme settings<\/a>.[\/callout]<\/li>\n\n\n\n- The Elementor plugin. For details, see Install & activate Elementor Core<\/a>.<\/li>\n\n\n\n
- (Optional) Elementor Pro. We recommend Elementor Pro, as it ensures compatibility with Pro elements and simplifies the process of creating your website. Without it, you may need to replace some theme parts and Pro features.<\/li>\n\n\n\n
- For details about purchasing Elementor Pro, see Purchase an Elementor Pro plan<\/a>. For details about installing Elementor Pro, see Install and activate Elementor Pro<\/a>.
[callout type=”tip”]To learn more about Elementor Host sites, see Purchase and create an Elementor Host site<\/a>.[\/callout]<\/li>\n<\/ul>\n\n\n\nOnce your website is set up, you\u2019ll need to import the zip file to create your site. To learn how to import your website, see Export and Import Elementor sites<\/a>.<\/p>\n\n\n\n
After importing your site, you need to edit the site using the Elementor Editor. For information about the Editor see:<\/p>\n\n\n\n
- \n
- Explore the My Elementor dashboard<\/a><\/li>\n\n\n\n
- Access WP Admin<\/a><\/li>\n\n\n\n
- Understanding WP Admin<\/a><\/li>\n\n\n\n
- Create or open a page<\/a><\/li>\n\n\n\n
- Explore the Elementor Editor<\/a><\/li>\n\n\n\n
- Use containers to build your first page<\/a><\/li>\n<\/ul>\n\n\n\n
Start with AI Notetaker<\/h2>\n\n\n\n
[callout type=”note”]To use AI Notetaker, you must first set up a Google Meeting with your client, team or whoever you’re collaborating with.[\/callout]<\/p>\n\n\n\n
- Access WP Admin<\/a><\/li>\n\n\n\n
- The Hello Theme. For details, see What is the Elementor Hello theme<\/a>?
- In the popup window, select Import your kit to a site<\/strong> and click Continue<\/strong>.
- In the popup window, select Launch a fully hosted website<\/strong> and click Continue<\/strong>.
- Click Create Website<\/strong> in the upper right.
- Click the chevron on the right corner of the top bar.
- Click the style icon.
- Click the responsive device dropdown menu to see how the site will look on a desktop, tablet or mobile.
- At the top of the page click the ellipses.
- Hover your mouse over the space between two pages.
- Answer the questions Site Planner asks you.
- In the panel, name your site.
- AI Notetaker<\/a><\/strong>: Record a Google Meet meeting with your client or team. Notetaker will analyze the conversation and create a brief based on that meeting.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
- AI chat<\/strong><\/a>: The AI will walk you through the process of creating the brief.<\/li>\n\n\n\n
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/Click-AI-Notetaker.png\")
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/Invite-AI-notetaker.png\")
<\/li>\n\n\n\n![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/Admit-Notetaker-1.png\")
<\/li>\n\n\n\n![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/Click-Continue-to-your-brief.png\")
<\/li>\n\n\n\n![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/Click-use-this-brief.png\")
<\/li>\n\n\n\n![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/12\/Enter-more-information.png\")
<\/li>\n\n\n\n