{"id":6814,"date":"2023-11-17T11:00:17","date_gmt":"2023-11-17T10:00:17","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=6814"},"modified":"2023-11-17T11:24:01","modified_gmt":"2023-11-17T10:24:01","slug":"elementor-tutorial-for-beginners","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/elementor-tutorial-for-beginners\/","title":{"rendered":"A Comprehensive Elementor Tutorial for Beginners"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]It\u2019s safe to say that the space between coming up with an idea for a website and creating that website has never been smaller. These days, we can do a lot with very few resources and basic coding knowledge because big site builders such as WordPress make it easy for us. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]WordPress isn\u2019t doing it all on its own. It is trying, though, as we\u2019ve seen from the <a href=\"https:\/\/qodeinteractive.com\/magazine\/introduction-to-wordpress-gutenberg-block-editor\/\">release of the Gutenberg editor<\/a>. But what makes WordPress such an easy system to use for creating a website are page builders.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The Elementor plugin has quickly become one of the most widely used WordPress page builders in the world. And today we\u2019ll find out just what makes it so special and show you how you can use it to create stunning WordPress pages. In our beginners Elementor tutorial, we\u2019ll cover the following topics:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-elementor\">What is the Elementor Page Builder<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#install-and-set-up\">How to Install and Set Up Elementor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#editor-anatomy\">The Anatomy of the Elementor Page Editor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#navigate-the-elementor-panel\">How to Navigate the Elementor Panel<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#editing-screen\">What is the Elementor Editing Screen<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#customize-elements\">How to Customize Elements in Elementor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#make-a-page\">How to Make a Page with Elementor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;70px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-elementor\"><\/a>What is the Elementor Page Builder<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-min.jpg\" class=\"attachment-full size-full\" alt=\"Elementor WordPress page builders\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-min.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-min-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-min-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The role of a page builder comes down to two things: to help you make the most out of what your content management system offers and to do it in the most convenient way possible. Because WordPress is a content-oriented website builder, you\u2019d expect a good page builder to allow you to easily add all kinds of content to a page or a post. And Elementor certainly does it. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Elementor is what is called a drag-and-drop builder, which means that <strong>you perform a lot of the tasks in it simply by dragging certain elements to where you want them to be<\/strong>. It\u2019s also a front-end page builder, which means that <strong>you\u2019re building it by manipulating the same page elements your website\u2019s visitors will see<\/strong>. And it\u2019s a live builder, so <strong>you\u2019ll see all the changes as you\u2019re making them<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But that\u2019s just Elementor as a page builder. As a WordPress plugin, it\u2019s one of the most popular ones, counting over four million installations as of April 2020, and a five-star rating based on around five thousand user reviews. <strong>Its core functionalities are free to use, but you can also shell out for the Pro version and get some useful options such as additional widgets, <a href=\"https:\/\/www.fixrunner.com\/14-elementor-tips-you-should-know-about\/\" target=\"_blank\" rel=\"noopener\">predesigned templates<\/a>, a popup builder, and more<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Elementor is also becoming more frequently included in bundles with premium themes. We\u2019ve <a href=\"https:\/\/qodeinteractive.com\/magazine\/bridge-theme-elementor-integration\/\">integrated Elementor with Bridge<\/a>, our flagship theme, so our customers can choose between it and WPBakery, a veteran page builder. But that\u2019s not all. We\u2019ve also started shipping more <a href=\"https:\/\/qodeinteractive.com\/theme-plugin\/elementor-wordpress-themes\/\">WordPress themes with Elementor<\/a>, where it\u2019s the main page builder plugin.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"install-and-set-up\"><\/a>How to Install and Set Up Elementor<\/h2>\n<p>[\/vc_column_text][vc_column_text]If all of this sounds exciting to you, great. It should. Especially if you\u2019re in the market for a versatile page builder that will allow you to build stunning pages without having to write a line of code! <strong>So, let\u2019s look at how you can install and set up Elementor on your WordPress website<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You start by going through the same <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">plugin installation steps<\/a> you would for any other plugin. <strong>Find Elementor in the plugin finder, click the \u201cInstall\u201d button, and then click \u201cActivate.\u201d<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/2-Install-Elementor-plugin.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/2-Install-Elementor-plugin.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/2-Install-Elementor-plugin-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/2-Install-Elementor-plugin-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After you\u2019ve activated the plugin, you can adjust Elementor\u2019s setting. You don\u2019t have to, however, because it comes set up well out of the box. Still, let\u2019s go through the options you\u2019ll be able to access right from the dashboard.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Settings<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"442\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Settings-300x137.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Settings-768x350.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Settings-620x283.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the General tab of the Elementor settings, you\u2019ll be able to select the post types you plan to use, as well as <strong>disable default colors and fonts \u2014 something you should do if you want your website to have the colors of the theme you\u2019re using<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Under the Style tab, you\u2019ll find options that include setting default generic fonts, tablet and mobile breakpoints, as well as a checkbox to enable image Lightbox. <strong>You\u2019ll be able to access some of these options later, from within the editor<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The Advanced Tab is filled with things only advanced users should be concerned with. This is where you set the CSS print method, switch the loader method when troubleshooting server issues, and enable SVG support. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Under Features, which is a relatively new addition to the Elementor settings interface, you will find a range of new and \u201cexperimental\u201d features, some of which have already become permanent. Here you can toggle on or off features and \u201cexperiments\u201d such as Grid Container or Editor Top Bar, as well as stable features, in our case Optimized DOM Output, Improved CSS Loading, and the Flexbox Container.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Role Manager<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/4-Elementor-role-manager.png\" class=\"attachment-full size-full\" alt=\"Elementor role manager\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/4-Elementor-role-manager.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/4-Elementor-role-manager-300x160.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/4-Elementor-role-manager-620x331.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Different types of users can have different levels of access to your website, depending on their role. <strong>Elementor gives you some rudimentary role managing options, allowing you to exclude users from having access to the editor<\/strong>. If you have the Pro version, you can also limit the users\u2019 access only to content.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Tools<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/5-Elementor-tool.jpg\" class=\"attachment-full size-full\" alt=\"Elementor tool\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/5-Elementor-tool.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/5-Elementor-tool-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/5-Elementor-tool-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The general tools will let you regenerate the CSS on your website and sync your Elementor library manually If you need to. <strong>This is where you enable the safe mode and the debug bar, both of which come in handy when troubleshooting your website<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The Replace URL tab is a place where you can, as the name says, replace the URLs if you changed the site address. In the Version Control tab, you can roll back to a previous version of Elementor and become an Elementor beta tester. <strong>Neither of these things is something you should do without a clear reason<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the Maintenance Mode tab, you get all the controls over the website\u2019s maintenance mode you\u2019ll ever need. Besides enabling maintenance mode, <strong>you can set who can access your website while it\u2019s enabled and select or create a template for the maintenance mode page<\/strong>. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The remaining settings are either informative or accessible only by Pro users. <strong>Under System Info, you\u2019ll see the information about the server environment, the WordPress version, the theme you\u2019re using, the plugins you have installed, and more<\/strong>. Getting Started is an Elementor tutorial section with a button that leads you straight to creating a new page. Finally, Custom Fonts and Custom Icons are two sections you can use if you have the Pro version of Elementor to add custom fonts and icons.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]How much you decide to dig into these settings is up to you. For some, such as the ones you find under the General settings, getting to them early would be a good idea. Others, such as the ones you find under the Tools settings, are only there for certain occasions. [\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"editor-anatomy\"><\/a>The Anatomy of the Elementor Page Editor<\/h2>\n<p>[\/vc_column_text][vc_column_text]When you\u2019re comfortable with the options you\u2019ve chosen for your Elementor installation, head over to <strong>Page &gt; Add New<\/strong>. We\u2019ll create a new page and then edit it with Elementor to show you how you can navigate around the page builder. <strong>So once you\u2019ve given your page a name, press the blue \u201cEdit with Elementor\u201d button<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Edit-With-Elementor.jpg\" class=\"attachment-full size-full\" alt=\"Edit With Elementor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Edit-With-Elementor.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Edit-With-Elementor-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Edit-With-Elementor-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Edit-With-Elementor-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Right away, you\u2019ll notice that the page is separated into different parts: the Elementor panel on the left, and the Elementor editing screen on the right. [\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"476\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Panel.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Panel\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Panel.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Panel-300x147.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Panel-768x377.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Panel-620x305.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The editing screen is usually bigger than the panel, even though you can drag the rightmost edge of the panel further to the right to make them of roughly equal size. Let\u2019s see all the great things you can find in the panel first.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"navigate-the-elementor-panel\"><\/a>Navigating the Elementor Panel<\/h2>\n<p>[\/vc_column_text][vc_column_text]Right off the bat, you\u2019ll notice that the panel is dominated by square icons. <strong>These are the Elementor widgets, and we\u2019ll get to them in a second<\/strong>. First, however, we want you to look up to the very top of the panel, at that red stripe that says \u201cElementor.\u201d[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">The Topmost Menu<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Topmost-Menu.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Topmost Menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Topmost-Menu.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Topmost-Menu-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Topmost-Menu-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Topmost-Menu-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The square on the right will always bring the panel back to the view you see now, with all the widgets listed. The menu button on the left, however, will give you access to certain options. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Site Settings<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Site-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Site Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Site-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Site-Settings-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Site-Settings-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Site-Settings-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Under Site Settings, that you\u2019ll reach by clicking on the hamburger icon in the left corner of the menu, you\u2019ll find a range of options that apply globally, from colors and fonts to theme settings like typography, images, etc.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Elementor allows you to pick a color palette for your website if you choose not to use your theme\u2019s default one. <strong>You\u2019ll have a choice of premade palettes, and you\u2019ll also be able to pick a primary, secondary, text, and accent color of your liking.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the Global Fonts options, you\u2019ll be able to choose the fonts for the primary and secondary headlines, as well as the body text and the accent text. <strong>You can choose the font family and the weight of the characters.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The Theme Style options only work if you\u2019ve disabled Default Colors and Fonts on the Settings Page.<\/strong> In these options, you\u2019ll be able to adjust anything from typography to form fields. It\u2019s also the place where you can use Custom CSS to change the way your website looks if you have the Pro version of the builder[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Particularly important are the options under Settings, where you will set your global layout options, lightboxes, page transition, etc.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The Theme Builder section is reserved for the Pro users, and it\u2019s where they get to set site-wide options for every part of the site, from header to footer, like they\u2019re building their own theme.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, under User Preferences, you can set some of the things that will make your Elementor experience more tailored to your needs, like the UI theme (light or dark or autodetect), responsive preview and so on.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Under these Settings, there\u2019s the Navigate from Page section, which is rather self-explanatory. You get options to search available apps, use the Finder to find anything in Elementor, and the View Page button that will shift you to a preview of the page you\u2019re editing. The Notes are a Pro feature.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">The Widgets<\/h3>\n<p>[\/vc_column_text][vc_column_text]Right under the Search Widget bar, you\u2019ll find Widgets \u2014 elements that work like units of content. <strong>You\u2019ll see a Widget for the header, images, video, button, even dividers \u2014 these are the most minute building blocks of your page in Elementor<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"660\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Widgets.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Widgets\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Widgets.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Widgets-300x204.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Widgets-768x523.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Widgets-620x422.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You won\u2019t have access to the full range of widgets in the free version. <strong>However, between the basic widgets, the general widgets, and the ones provided by the theme you\u2019re using, you\u2019ll have more than enough to populate a page with content<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">The Bottom Stripe Menu<\/h3>\n<p>[\/vc_column_text][vc_column_text]Finally, on the bottom of the panel, you have another bar with very useful options and functionalities. [\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Bottom-Menu.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Bottom Menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Bottom-Menu.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Bottom-Menu-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Bottom-Menu-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Bottom-Menu-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Settings<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"561\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-General-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Elementor General Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-General-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-General-Settings-300x174.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-General-Settings-768x445.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-General-Settings-620x359.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Settings are the place where you make changes that affect the whole page. <strong>General Setting will, for example, allow you to change the title of the page and its status<\/strong>. This is where you can add an excerpt and the featured image to your page, but also hide the title and select the page layout.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The Style settings are limited to the Body Style, <strong>where you can choose the type of background and the padding<\/strong>. As for the Advanced Settings, that\u2019s where you can add custom CSS if you\u2019re using the Pro version of the page builder.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The Navigator<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Navigator.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Navigator\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Navigator.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Navigator-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Navigator-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Navigator-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Hands down one of the most useful tools of Elementor, the Navigator is indispensable when you\u2019re creating big, complex pages with lots and lots of elements<\/strong>. As you\u2019re adding content to a page, it will also appear in the navigator window in the hierarchical order of Elementor elements. <strong>It will allow you to easily navigate through every section, column, and widget you add to your page<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>History<\/strong>[\/vc_column_text][vc_column_text]Elementor will keep an eye on all the actions you perform while creating a page or a post. When you want to see what you did, all you need to do is press the History icon and have a look at the Actions tab. <strong>And if you\u2019ve saved previous versions of a page or a post, you\u2019ll be able to find them under the Revisions tab<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Responsive Mode<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"448\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Responsive-Mode.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Responsive Mode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Responsive-Mode.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Responsive-Mode-300x139.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Responsive-Mode-768x355.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Responsive-Mode-620x287.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Clicking this icon will bring up a top menu where you can choose between different types of devices. Picking one will give you a preview of how your page looks on that type of device. <strong>You\u2019ll be able to pick between a desktop computer, a tablet, and a mobile phone<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Preview Changes<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When you click this icon, a preview of the page will open in a separate browser tab.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The Elementor panel is also where the options for all the widgets and elements you place in the editing screen will appear<\/strong>. But before we see that in action, let\u2019s have a closer look at the editing screen itself and the elements that make up a page in Elementor.[\/vc_column_text][vc_empty_space height=&#8221;81px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"editing-screen\"><\/a>The Editing Screen and the Elements<\/h2>\n<p>[\/vc_column_text][vc_column_text]Initially, you won\u2019t see much in the editing screen apart from the header and footer that come with your theme. You won\u2019t be able to edit them through Elementor unless you have the Pro version. But don\u2019t worry, you can put a lot of content between the two for free.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>See the rectangle with the words \u201cDrag widget here\u201d and two buttons in the middle of the page \u2014 that\u2019s called a section and it\u2019s where all the fun happens. <\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The section is one of the elements you use in Elementor to create a page<\/strong>. On its own, it doesn\u2019t do much. But you can look at it as a small part of the page where you can set certain rules that are different from the rest of the page.<strong> To create a section, you only need to drag a widget to it or press that plus button<\/strong>. You\u2019ll get the option to choose the structure of the section. We\u2019ll pick the one with the section split in two halves. The Elementor has introduced a feature called Container, which provides a new, more flexible way to edit page content. You can add as many of the containers as you like, and you can add containers within containers. These elements define the layout of a section &#8211; the number of columns, the direction of the content, and so on. Adding a container should be the first thing you do when you start editing, and you can add one by clicking on the plus sign in your editor.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Containers.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Containers\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Containers.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Containers-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Containers-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Containers-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]At this point, you can choose a layout for the container, which means the way the content will be distributed, and in how many columns. [\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"541\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Structure.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Structure\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Structure.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Structure-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Structure-768x429.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Structure-620x346.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>We can place lots of widgets in any one of these columns<\/strong>. You simply need to drag a widget from the panel and into the column, and you can easily stuff six widgets into two columns like this.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"615\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Widget-Added.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Widget Added\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Widget-Added.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Widget-Added-300x190.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Widget-Added-768x487.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Widget-Added-620x393.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Thanks to these containers, you can just stuff your columns with the widgets of your choice, and you can add containers within containers. Each container can be adjusted by dragging its border left or right, which is an easier way to create a ratio between the columns. You can create a Russian doll out of your sections, or you can stack container below container &#8211; it\u2019s up to you.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To add a new container, either within an existing one or below it, simply click on the plus sign.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"customize-elements\"><\/a>How to Customize Elements in Elementor Page Builder<\/h2>\n<p>[\/vc_column_text][vc_column_text]Each of the elements (the sections, the columns, and the widgets) in Elementor has settings of its own. <strong>They will appear in the panel on the left as you add a new element, and you can edit them then and there<\/strong>. If you don\u2019t want to do it that way, don\u2019t worry \u2014 you can access all of them later.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There are a couple of ways you can edit elements when you decide to do it. Simply clicking on a widget will be enough to bring up the editing options in the panel. [\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"501\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Edit-Options.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Edit Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Edit-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Edit-Options-300x155.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Edit-Options-768x397.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Edit-Options-620x321.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To bring up the options for an element in the container, click on the little pen in the upper right corner. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Similarly, if you hover anywhere within a container, you\u2019ll see three buttons appear in the middle of the top border of the section. <strong>The left one (the plus sign) serves to create another container, the right one (the \u201cX\u201d) lets you delete the existing one, and the middle one (the six dots) serves to bring up the options<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>If you don\u2019t want to chase those buttons around, a more organized way to access all your elements and their respective options is using the Navigator<\/strong>. Bring it up by clicking the second icon from the left in the bottom stripe menu of the Elementor panel. Click on any element you find within it, and you will bring up its options in the panel.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Bottom-Panel.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Bottom Panel\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Bottom-Panel.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Bottom-Panel-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Bottom-Panel-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Bottom-Panel-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Show-Navigator.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Show Navigator\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Show-Navigator.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Show-Navigator-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Show-Navigator-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Show-Navigator-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Finally, you can right-click on any of the containers in the editing screen to bring up a menu that includes options ranging from editing the container and duplicating it, to saving it as a template or deleting it. <\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"592\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Navigator-Options.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Navigator Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Navigator-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Navigator-Options-300x183.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Navigator-Options-768x469.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Navigator-Options-620x379.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As for the editing options you can access, they will vary from one element to the other. For both the sections and the columns, the options are separated into several groups.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Layout<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Layout-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Layout Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Layout-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Layout-Tab-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Layout-Tab-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Layout-Tab-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This section contains the options that pertain to the physical appearance of the content that\u2019s within the element, as well as its structure in the case of sections. <strong>There is a difference between the layout options you\u2019ll get when editing a column and a section \u2014 the section will always have more extensive editing options<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Widgets will have their content-specific options instead of the layout in the first group of options<\/strong>. If you\u2019re working with a text widget, for example, you\u2019ll see different options than those you see when you\u2019re editing a spacer widget.[\/vc_column_text][vc_column_text]<strong>Style <\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Style-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Style Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Style-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Style-Tab-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Style-Tab-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Style-Tab-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Background, border, and typography are the options that sections and columns have in common in the style group<\/strong>. If you\u2019re styling a section, you\u2019ll also be able to set up shape dividers and the background overlay.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>As for the widgets, their styling options will again vary depending on their contents<\/strong>. If you\u2019re working with video, you\u2019ll be able to set the aspect ratio here. For buttons, you\u2019ll get a lot of options that include typography, padding, and border settings.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Advanced<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Advanced-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Advanced Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Advanced-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Advanced-Tab-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Advanced-Tab-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/Elementor-Advanced-Tab-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Advanced group of options gives you the most extensive customization choices. Starting from setting the margins and paddings \u2014 something you\u2019ll be doing a lot when building your pages \u2014 and moving to motion effects, background and border settings, and even responsiveness settings, this is the group of options you\u2019ll want to pay attention to.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]It\u2019s also the group where you\u2019ll see the most similarities between the options you get for sections, columns, and widgets. <strong>You\u2019ll be able to add attributes and custom CSS, too, both of which are a Pro feature<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"make-a-page\"><\/a>Elementor in Action: How to Make a Page<\/h2>\n<p>[\/vc_column_text][vc_column_text]So there you have it: you\u2019ve installed Elementor, you\u2019re familiar with the editor, the basic elements and their options, and you have a blank page waiting for you to give it life. First, however, you have to figure out what kind of page you want to build. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you <a href=\"https:\/\/qodeinteractive.com\/magazine\/what-is-landing-page\/\">understand landing pages<\/a>, you probably know that there are certain things a landing page needs to efficiently do its job. It\u2019s a completely different thing, however, to <a href=\"https:\/\/qodeinteractive.com\/magazine\/write-compelling-about-page\/\">create an \u201cAbout\u201d page<\/a>, because that page will require an entirely different set of elements.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So the bottom line here is that, <strong>before firing up Elementor, you first need to figure out every piece of content you\u2019ll want to have on the website<\/strong>. Next, you need to figure out how to best spread that content across different sections. Then, you can use one of three different ways to create a page.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">1. Do It From the Grounds Up<\/h3>\n<p>[\/vc_column_text][vc_column_text]With this method, you\u2019re relying on what you\u2019ve learned in this Elementor tutorial to get you through creating your first page. Don\u2019t worry \u2014 it\u2019s easy and can be lots of fun. <strong>Just remember to approach the content of your page one element at a time<\/strong>. Let\u2019s see how to create a \u201cteam member\u201d section for your \u201cAbout Us\u201d page, for example.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/27-Team-member-section.jpg\" class=\"attachment-full size-full\" alt=\"Team member section\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/27-Team-member-section.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/27-Team-member-section-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/27-Team-member-section-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>As you can see from the Navigator, we\u2019ve used three sections here<\/strong>. The topmost contains one column and a spacer widget to separate this area of the page from the rest of it. The second section contains one column and a heading widget, while the third section contains three columns, each equipped with an image box widget.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>We\u2019ve slightly changed the bottom margin of the second section to make more room between the heading and the image boxes, and that\u2019s it<\/strong>. If you have the time and curiosity, you can experiment all you want with your website. Elementor makes it very easy. One section after another, and you\u2019ll have yourself an awesome page.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">2. Use Pre-Made Blocks<\/h3>\n<p>[\/vc_column_text][vc_column_text]If you don\u2019t want to spend too much time on building sections for your website, you can always rely on a premade block to, at the very least, light a fire under the heels of your imagination. <strong>So instead of pressing the \u201cplus\u201d button in the section-to-be, you can press the \u201cfolder\u201d button and go to the Elementor library<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/28-Use-Pre-Made-Blocks.jpg\" class=\"attachment-full size-full\" alt=\"Use Pre Made Blocks\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/28-Use-Pre-Made-Blocks.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/28-Use-Pre-Made-Blocks-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/28-Use-Pre-Made-Blocks-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the library, you\u2019ll find whole pre-made blocks you can download to your page and then further customize to your liking. It\u2019s a great way to get your creative juices flowing, although it\u2019s just as likely to stifle your creativity and get you to settle for something that wasn\u2019t custom-made for your website. <strong>You will need an Elementor account to access blocks, and some of them are only accessible by Pro users<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">3. Use Premade Pages<\/h3>\n<p>[\/vc_column_text][vc_column_text]If you want to spend even less time on building your website, you don\u2019t even have to arrange the blocks on your page. <strong>You can simply go to the Elementor library and pick a whole premade page for your website<\/strong>. Some pages are available only to Pro users, and all of them require you to create an account for free.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/29-Use-Premade-Pages.jpg\" class=\"attachment-full size-full\" alt=\"Use Premade Pages\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/29-Use-Premade-Pages.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/29-Use-Premade-Pages-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/04\/29-Use-Premade-Pages-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For someone who is in a hurry, or who doesn\u2019t see the intrinsic value in having custom-made pages for their website, or who simply saw a layout they liked, pre-made pages are a great option. <strong>They are hands down the easiest way to populate your website with all the pages it will ever need<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let\u2019s Wrap it Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]Most of us wouldn\u2019t get too far in the digital world if it weren\u2019t for entities such as WordPress that actively try to make it easier for everyone to participate. But even WordPress has its blind spots, which is why we have such a lively and vibrant plugin scene. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Page builders are among the more important members of that scene because, without them, it would be prohibitively difficult for most people to create a WordPress website. But if there\u2019s a page builder involved, and if it just so happens the builder in question is Elementor, you can rest assured that the website will be up and running quickly and smoothly. And if you need some help along the way, you can always come back to this Elementor tutorial to get it.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Looking for a great Elementor tutorial to help you get your website started? Come on it and we&#8217;ll help you get acquainted with the popular page builder.  <\/p>\n","protected":false},"author":9295,"featured_media":43844,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-6814","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/6814","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=6814"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/6814\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/43844"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=6814"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=6814"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=6814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}