{"id":37145,"date":"2023-08-01T14:33:30","date_gmt":"2023-08-01T11:33:30","guid":{"rendered":"https:\/\/help-center-reorg.site.strattic.io\/?p=37145"},"modified":"2025-10-08T13:03:50","modified_gmt":"2025-10-08T10:03:50","slug":"explore-the-elementor-editor","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/explore-the-elementor-editor\/","title":{"rendered":"Explore the Elementor Editor"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Whether you\u2019re <\/span>building your site from scratch<\/span><\/a> or using one of our <\/span>website kits<\/span><\/a>, you\u2019ll need to learn how to use the Elementor Editor. We\u2019ll start by going over the basic layout of the editor.\u00a0\u00a0<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Elementor Editor layout<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The Editor consists of three main areas: the top bar, the panel, and the canvas.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Top Bar<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

This is where you\u2019ll find the tools and settings you need to build and customize your page. For more details about the options available from the top bar, see, <\/span>Elementor Top Bar<\/span><\/a>.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Panel<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The panel is where you\u2019ll find the design elements, such as containers, and widgets, such as the Heading widget, used to build your page. For more details about moving elements from the panel to the canvas, see <\/span>Add elements to a page<\/span><\/a>.\u00a0<\/span><\/p>

The panel is also where you adjust the settings for elements, pages and the site.\u00a0<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Canvas<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The canvas is also known as the Content Area. This is where you\u2019ll create your page\/post\/site part.<\/span><\/p>

If you want to increase canvas width, click the Hide Panel arrow to add more space.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

There are different views you can use when working on pages. For more details about these different views, see <\/span>Change canvas views<\/span><\/a>.<\/span><\/p>

If the page header and footer appear on your canvas, their color changes when you hover over them.\u00a0<\/span><\/p>

Click inside either the header or footer, to switch from editing the page to editing that site part.\u00a0<\/span><\/p>

Click the page area to return to editing that page. You are\u00a0 prompted to save before switching.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t
A canvas with the Header and Footer highlighted.<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Creating a container<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
    \n
  1. On the canvas, click the + icon.
    \"\"
    <\/span><\/span>\n

    You can now select a container layout.
    \"\"
    <\/span><\/p>\n<\/li>\n

  2. Choose the first container layout. This will create one container with a vertical layout.
    \"\"
    <\/span><\/li>\n
  3. On the top bar, click the plus icon<\/span>.
    \"\"
    <\/span><\/li>\n
  4. From the panel, drag the Heading widget to the new containers.
    \"\"<\/span><\/li>\n
  5. In the panel, in the title field, add the text; <\/span>My first container<\/b>.<\/span><\/li>\n<\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    Edit containers and widgets<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    To edit a container<\/b>:
    \"\"<\/span><\/p>

    • Click the settings icon \"\"\u00a0<\/span> in the container tab.
      \"\"<\/span><\/li><\/ul>

      The container settings menu opens in the panel with three tabs: <\/span>Layout<\/b>, <\/span>Style <\/b>and <\/span>Advanced<\/b>.<\/span><\/p>

      To edit a widget<\/b>:
      \"\"<\/span><\/p>

      • Click the widget handle.
        \"\"<\/span><\/p><\/li><\/ul>

        The widget settings menu opens in the panel with three tabs: <\/span>Content<\/b>, <\/span>Style <\/b>and <\/span>Advanced<\/b>.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

        \n\t\t\t\t
        \n\t\t\t\t\t\t\t
        \n\t\t\t
        <\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65b0f2140b2dfd31ca0adea2"],"footnotes":""},"categories":[1435],"tags":[1331],"class_list":["post-37145","post","type-post","status-publish","format-standard","hentry","category-getting-around-the-elementor-editor","tag-version-3-14"],"acf":[],"yoast_head":"\nExplore the Elementor Editor | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Explore the Elementor Editor in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/explore-the-elementor-editor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Explore the Elementor Editor | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Explore the Elementor Editor in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/explore-the-elementor-editor\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-01T11:33:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-08T10:03:50+00:00\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/explore-the-elementor-editor\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/explore-the-elementor-editor\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"Explore the Elementor Editor\",\"datePublished\":\"2023-08-01T11:33:30+00:00\",\"dateModified\":\"2025-10-08T10:03:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/explore-the-elementor-editor\/\"},\"wordCount\":10,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"keywords\":[\"Version 3.14\"],\"articleSection\":[\"Getting around the Elementor Editor\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/explore-the-elementor-editor\/\",\"url\":\"https:\/\/elementor.com\/help\/explore-the-elementor-editor\/\",\"name\":\"Explore the Elementor Editor | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"datePublished\":\"2023-08-01T11:33:30+00:00\",\"dateModified\":\"2025-10-08T10:03:50+00:00\",\"description\":\"Learn everything about Explore the Elementor Editor in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/explore-the-elementor-editor\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/explore-the-elementor-editor\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/explore-the-elementor-editor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Getting around the Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/getting-around-the-elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Explore the Elementor Editor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Explore the Elementor Editor | Elementor","description":"Learn everything about Explore the Elementor Editor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/explore-the-elementor-editor\/","og_locale":"en_US","og_type":"article","og_title":"Explore the Elementor Editor | Elementor","og_description":"Learn everything about Explore the Elementor Editor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/explore-the-elementor-editor\/","og_site_name":"Help","article_published_time":"2023-08-01T11:33:30+00:00","article_modified_time":"2025-10-08T10:03:50+00:00","author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/explore-the-elementor-editor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/explore-the-elementor-editor\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"Explore the Elementor Editor","datePublished":"2023-08-01T11:33:30+00:00","dateModified":"2025-10-08T10:03:50+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/explore-the-elementor-editor\/"},"wordCount":10,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"keywords":["Version 3.14"],"articleSection":["Getting around the Elementor Editor"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/explore-the-elementor-editor\/","url":"https:\/\/elementor.com\/help\/explore-the-elementor-editor\/","name":"Explore the Elementor Editor | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"datePublished":"2023-08-01T11:33:30+00:00","dateModified":"2025-10-08T10:03:50+00:00","description":"Learn everything about Explore the Elementor Editor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/explore-the-elementor-editor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/explore-the-elementor-editor\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/explore-the-elementor-editor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Getting around the Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/getting-around-the-elementor-editor\/"},{"@type":"ListItem","position":4,"name":"Explore the Elementor Editor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/37145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=37145"}],"version-history":[{"count":25,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/37145\/revisions"}],"predecessor-version":[{"id":154357,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/37145\/revisions\/154357"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=37145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=37145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=37145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}