{"id":5595,"date":"2021-07-29T08:17:15","date_gmt":"2021-07-29T08:17:15","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=5595"},"modified":"2023-05-04T12:52:26","modified_gmt":"2023-05-04T12:52:26","slug":"getting-started-with-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/getting-started-with-elementor\/","title":{"rendered":"Getting Started with Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"5595\" class=\"elementor elementor-5595\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d9c571f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d9c571f\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1185662c\" data-id=\"1185662c\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-72a4e67b elementor-layout-start e-tabs-view-vertical elementor-widget elementor-widget-video-playlist\" data-id=\"72a4e67b\" data-element_type=\"widget\" data-settings=\"{&quot;playlist_title&quot;:&quot;Getting-Started With Elementor&quot;,&quot;tabs&quot;:[{&quot;title&quot;:&quot;Getting Started with Elementor&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=icTcREd1tAg&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=1&quot;,&quot;duration&quot;:&quot;2:03&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;_id&quot;:&quot;08f9296&quot;,&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;Welcome to our Getting Started With Elementor course. This course was created especially for Elementor beginners, to teach the fundamentals of using Elementor to create your very first website, and at the same time have fun building it. In this course, we&#039;ll create a three page website for Simaya, a vegan restaurant, that offers a mouthwatering plant-based menu. Feel free to use the same layout and techniques and apply them to any type of industry.&lt;\\\/p&gt;&lt;p&gt;This course with cover:&lt;\\\/p&gt;&lt;p&gt;\\u2713 Installing and Activating the Hello theme&lt;\\\/p&gt;&lt;p&gt;\\u2713 Creating web pages and a navigation menu in WordPress&lt;\\\/p&gt;&lt;p&gt;\\u2713 Setting up your design system and website structure for your Elementor website&lt;\\\/p&gt;&lt;p&gt;\\u2713 Creating a header and footer using Elementor\\u2019s, Hello theme.&lt;\\\/p&gt;&lt;p&gt;\\u2713 Using the Elementor Editor to build and fully style your entire website&lt;\\\/p&gt;&lt;p&gt;\\u2713 Website optimization methods&lt;\\\/p&gt;&lt;p&gt;\\u2713 Responsive editing&lt;\\\/p&gt;&lt;p&gt;\\u2713 Tips and tricks, best practices, and workflow&lt;\\\/p&gt;&lt;p&gt;Prerequisites:&lt;\\\/p&gt;&lt;p&gt;\\u25cb A WordPress website&lt;\\\/p&gt;&lt;p&gt;\\u25cb Elementor Website Builder plugin&lt;\\\/p&gt;&lt;p&gt;\\u25cb Clean installation of WordPress (recommended)&lt;\\\/p&gt;&quot;,&quot;inner_tab_content_2&quot;:&quot;&lt;p&gt;Hi everyone, I\\u2019m Aviva, a designer and educator at Elementor. I\\u2019d like to welcome you to this course, How to Build Your First Website with Elementor. We here at Elementor, have created this course especially for beginner Elementor users, to teach you the fundamentals of using Elementor to create your very first website, and at the same time have fun building it.&lt;\\\/p&gt;&lt;p&gt;In this course, we&#039;ll create this striking three page website for Simaya, a vegan restaurant, that offers a mouthwatering plant-based menu, but of course you can use the same layout and techniques and apply them to any type of industry.&lt;\\\/p&gt;&lt;p&gt;This course with cover:&lt;\\\/p&gt;&lt;ul&gt;&lt;li&gt;Installing and Activating the Hello theme&lt;\\\/li&gt;&lt;li&gt;Creating web pages and a navigation menu in WordPress&lt;\\\/li&gt;&lt;li&gt;Setting up your design system and website structure for your Elementor website&lt;\\\/li&gt;&lt;li&gt;Creating a header and footer using Elementor\\u2019s, Hello theme.&lt;\\\/li&gt;&lt;li&gt;Using the Elementor Editor to build and fully style your entire website&lt;\\\/li&gt;&lt;li&gt;Responsive editing&lt;\\\/li&gt;&lt;li&gt;Website optimization methods&lt;\\\/li&gt;&lt;li&gt;And lots of other tips and tricks along the way, including best practices and ways to streamline your workflow&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;p&gt;&lt;span&gt;All you\\u2019ll need to get started is:&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;ul&gt;&lt;li&gt;A WordPress website&lt;\\\/li&gt;&lt;li&gt;And the free version of the Elementor Website Builder plugin.&lt;\\\/li&gt;&lt;li&gt;&lt;span&gt;I also suggest using a clean installation of WordPress.&lt;\\\/span&gt;&lt;\\\/li&gt;&lt;\\\/ul&gt;&lt;p&gt;If you don\\u2019t yet have a WordPress website, or the Elementor plugin installed, see the links in the description to get set up for this course.&lt;\\\/p&gt;&lt;p&gt;You can follow along, and apply your own style, content, and images for your personal or client\\u2019s needs.&lt;\\\/p&gt;&lt;p&gt;Last but not least, I highly recommend watching each video all the way through, and in the correct order, as skipping steps may end in some unexpected results!&lt;\\\/p&gt;&lt;p&gt;Be sure to bookmark the course, so you can come back to it at any time.&lt;\\\/p&gt;&lt;p&gt;Keep watching, to get started with our first lesson, where we\\u2018ll install our theme, set up our pages, and add a navigation menu. See you there!&lt;\\\/p&gt;&quot;,&quot;vimeo_url&quot;:null,&quot;type&quot;:&quot;youtube&quot;,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;},{&quot;title&quot;:&quot;Installing Hello and Setting Up&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=WAEhISns8NA&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=2&quot;,&quot;duration&quot;:&quot;5:07&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;_id&quot;:&quot;040e7e7&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;In this lesson, we will learn how to install and activate the lightweight and free Hello theme, create the pages for our website, and add a WordPress navigation menu.&lt;\\\/p&gt;&lt;p&gt;This lesson will cover:&lt;br \\\/&gt;\\u2714\\ufe0e Installing and Activating the Hello Theme&lt;br \\\/&gt;\\u2714\\ufe0e Enabling Headers and Footers in Experiments&lt;br \\\/&gt;\\u2714\\ufe0e Creating Website Pages&lt;br \\\/&gt;\\u2714\\ufe0e Adding a Navigation Menu&lt;br \\\/&gt;\\u2714\\ufe0e And much more!&lt;\\\/p&gt;&lt;p&gt;\\u00a0&lt;\\\/p&gt;&quot;,&quot;inner_tab_content_2&quot;:&quot;&lt;p&gt;Hey there, it\\u2019s Aviva from Elementor. In this lesson we\\u2019ll learn how to Install Elementor\\u2019s lightweight theme, Hello, create the pages for our website, and add a navigation menu.&lt;br \\\/&gt;As you may know, every WordPress website requires a theme. WordPress comes with its own theme preinstalled, and there are many other themes you can choose from, as well.&lt;\\\/p&gt;&lt;p&gt;The Hello theme, by Elementor, was developed to be fully compatible with the Elementor Website Builder. It is free to use, fast loading, and always kept up to date, so it is ideal for any website that uses Elementor, including this one.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s install it!&lt;\\\/p&gt;&lt;p&gt;From the WordPress dashboard, go to Appearance &gt; Themes, and Click \\u201cAdd New\\u201d.. In the search bar, Type in \\u201cHello\\u201d. Click install...and activate it to change the theme to Hello.&lt;br \\\/&gt;The Hello Theme comes with a free header and footer, when used together with the Elementor plugin. That\\u2019s right, free!&lt;\\\/p&gt;&lt;p&gt;To make sure the header and footer option in Hello is enabled, go to Elementor &gt; Settings &gt; Experiments, scroll down a bit, and verify that Active is selected for Hello Theme Header and Footer. Great! We\\u2019ll get back to the Header and Footer a little later in the course.&lt;br \\\/&gt;&lt;br \\\/&gt;Now let\\u2019s create the pages for our website. We\\u2019ll need three pages for this site, a Home page, Contact Us page, and an Our Menu page.&lt;\\\/p&gt;&lt;p&gt;Hover your cursor over the Pages tab and select Add New.&lt;\\\/p&gt;&lt;p&gt;If it\\u2019s your first time adding a page on this site, you may see a WordPress welcome popup. Click anywhere outside the popup to dismiss it.&lt;\\\/p&gt;&lt;p&gt;Add a title by typing in \\u201cHome.\\u201d Click Publish...you may need to click Publish again...and that\\u2019s it. You\\u2019ve created your first page!&lt;\\\/p&gt;&lt;p&gt;Next we\\u2019ll add the Our Menu page for the restaurant.&lt;\\\/p&gt;&lt;p&gt;Click here to go back to Pages, and click Add New. Type in \\u201cOur Menu\\u201d for the title, and Publish it.&lt;\\\/p&gt;&lt;p&gt;And now for the last page. Add it; call this one \\u201cContact Us,\\u201d and Publish it.&lt;br \\\/&gt;Great! Now go back to Pages. This is where you\\u2019ll find a list of all the pages on your website. You can see the three we just created here, as well as these two. Wait, how\\u2019d THEY get here? Well, every new installation of WordPress comes preinstalled with a Privacy Policy page and a Sample page.&lt;\\\/p&gt;&lt;p&gt;If you hover over any page, you\\u2019ll see several page editing options, such as Trash, and Edit with Elementor. Click Trash to delete the Sample Page. I\\u2019ll also go ahead and delete the Privacy Policy. However, it\\u2019s always a good idea to have a Privacy Policy in place, so it\\u2019s up to you to decide if you would like to keep it, and update it with your own policy, or remove it altogether.&lt;\\\/p&gt;&lt;p&gt;Fantastic! Things are really moving along, and now that we\\u2019ve created our pages, we can create the website navigation menu, which we\\u2019ll be using in the Header, so that visitors can effortlessly find their way around the website.&lt;\\\/p&gt;&lt;p&gt;To get to the Menu setup, go to Appearance &gt; Menus. Give your menu a name, ...and click Create Menu.&lt;\\\/p&gt;&lt;p&gt;You should see links to the three pages we just created, as well as an extra default custom link.&lt;\\\/p&gt;&lt;p&gt;In the event you don\\u2019t see the links here, select the pages from the left side, and click Add to Menu. Delete any unwanted pages by expanding the link and clicking Remove.&lt;br \\\/&gt;Then click and drag the links into their proper order.&lt;\\\/p&gt;&lt;p&gt;Click Save Menu, and just like that, we\\u2019re done creating our navigation menu.&lt;\\\/p&gt;&lt;p&gt;Ok, we\\u2019ve installed the Hello theme, added the website\\u2019s pages, and created the navigation menu. Things are moving along!&lt;\\\/p&gt;&lt;p&gt;In our next lesson, we\\u2019ll learn the basics of using Elementor\\u2019s drag and drop editor to build your website, so be sure to keep watching.&lt;\\\/p&gt;&quot;,&quot;vimeo_url&quot;:null,&quot;type&quot;:&quot;youtube&quot;,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;},{&quot;_id&quot;:&quot;2c635a4&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=4G3YjWnQE-o&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=4&quot;,&quot;title&quot;:&quot;Elementor Editor Basics&quot;,&quot;duration&quot;:&quot;6:09&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;In this lesson, we will dive into the Elementor Editor and learn how to structure web pages by using sections, columns, and widgets, and learn the basics of working with them.&lt;\\\/p&gt;&lt;p&gt;This lesson will cover:&lt;br \\\/&gt;\\u2714\\ufe0e The Elementor Editor layout and structure&lt;br \\\/&gt;\\u2714\\ufe0e Adding &amp; working with widgets&lt;br \\\/&gt;\\u2714\\ufe0e Basic custom settings for widgets&lt;br \\\/&gt;\\u2714\\ufe0e And much more!&lt;\\\/p&gt;&quot;,&quot;inner_tab_content_2&quot;:&quot;&lt;p&gt;Hey there. It\\u2019s Aviva from Elementor. Welcome back to How to Build a Website in Elementor.&lt;\\\/p&gt;&lt;p&gt;In the previous lesson, we installed the Hello theme, created the pages for the website, and added a navigation menu. In this lesson, I\\u2019ll introduce you to the Elementor Editor, and show you the basics of working with it, which will be the building blocks for creating our amazing site!&lt;\\\/p&gt;&lt;p&gt;Ready? Let\\u2019s jump right in. From the WordPress dashboard, go to the Pages section, and click the Home page we created in the previous lesson. Click \\u201cEdit with Elementor\\u201d.&lt;br \\\/&gt;&lt;br \\\/&gt;Welcome to the Elementor editor! Let\\u2019s get familiar with the interface.&lt;\\\/p&gt;&lt;p&gt;On the right side, is the content area of the page. This is where you can add and edit elements that form the layout and design of your page.&lt;br \\\/&gt;&lt;br \\\/&gt;On the left side is the Elementor panel. Here are creative tools, called widgets. Widgets are used to add elements to your page - like headings, text editors, images, videos, and more.&lt;\\\/p&gt;&lt;p&gt;You can always access this area by clicking the widgets icon, here on the top right, in the Panel Header.&lt;\\\/p&gt;&lt;p&gt;On the left of the Panel header, you have a hamburger menu button with several settings and navigation options.&lt;\\\/p&gt;&lt;p&gt;Site Settings, as it sounds, allows you to globally define your site\\u2019s settings.. all from one place. We\\u2019ll get back to them a little later in the course.&lt;\\\/p&gt;&lt;p&gt;Theme Builder, a Pro feature, allows you to manage all your site parts from one location. We will not be covering it in this course, but if you would like to find out more about it, you can check out our Pro course \\\/ our video on Theme Builder.&lt;\\\/p&gt;&lt;p&gt;User Preferences, allow you to customize the Elementor interface, such as switching to dark mode.&lt;\\\/p&gt;&lt;p&gt;Below is the finder, which you can also launch by using the keyboard shortcut Command or Control E. The finder is a search bar that gives you quick access across your site. We\\u2019ll see it in action, later.&lt;\\\/p&gt;&lt;p&gt;Click \\u2018view page\\u2019 to see your live website or \\u2018exit to dashboard\\u2019 to go back to your WordPress dashboard.&lt;br \\\/&gt;Bottom Panel&lt;br \\\/&gt;At the bottom, is the Panel Toolbar with a few more important tools.&lt;\\\/p&gt;&lt;p&gt;In page settings, you can edit the page name and layout.&lt;\\\/p&gt;&lt;p&gt;Here we\\u2019ll toggle Hide Title to Yes, to hide the title that displays at the top of the page. We\\u2019ll see how to add our own titles in a moment.&lt;\\\/p&gt;&lt;p&gt;Click here for the navigator, or use the keyboard shortcut Command or Control I. The navigator displays an organized view of your page elements. Currently, it\\u2019s empty because we haven&#039;t added any content yet. We\\u2019ll use it later.&lt;\\\/p&gt;&lt;p&gt;Click here to see your edit history, and view recent changes or revert back to previous revisions.&lt;\\\/p&gt;&lt;p&gt;And next to it is the responsive mode icon, for switching between screen sizes and making responsive edits.&lt;\\\/p&gt;&lt;p&gt;We can preview our changes, and when ready to take them live, just hit this update button . There are other save options as well, which I\\u2019ll talk about in a later video.&lt;br \\\/&gt;&lt;br \\\/&gt;Okay great, now let\\u2019s take a closer look at how pages are built.&lt;\\\/p&gt;&lt;p&gt;There are two ways you can start. You can either design your pages from scratch, or use a template from the Library.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s begin with the library. Here you can preview Elementor\\u2019s pre-made blocks and pages, as well as your own templates,.. and insert them into your page.&lt;\\\/p&gt;&lt;p&gt;Filter the blocks by choosing a category or use the search bar on the right. You can also add blocks and templates to your favorites for easy access.&lt;\\\/p&gt;&lt;p&gt;I\\u2019ll go ahead and insert this block so you can see how it works.&lt;\\\/p&gt;&lt;p&gt;If this is your first time accessing the Elementor Template Library, you\\u2019ll need to connect to it with your Elementor account. You can either use an existing account, or create a new free account.&lt;\\\/p&gt;&lt;p&gt;Great!&lt;\\\/p&gt;&lt;p&gt;Now that we added our first block, let\\u2019s get to know the Elementor Edit structure. Elementor uses three main building blocks: Sections, Columns, and Widgets.&lt;\\\/p&gt;&lt;p&gt;Sections are the largest and can be identified by their blue border, like you see here.&lt;\\\/p&gt;&lt;p&gt;Inside them are Columns, in this case there&#039;s one. You can identify them by the black dashed border. These columns house widgets, such as the texts and buttons you see here&lt;\\\/p&gt;&lt;p&gt;You control the Section, Column, and Widgets with their handle.&lt;br \\\/&gt;To edit the Section, Column, or Widget, simply Right Click their handle.&lt;\\\/p&gt;&lt;p&gt;Where you can edit, duplicate, delete, and more.&lt;\\\/p&gt;&lt;p&gt;You can move sections, columns and widgets around by simply dragging and dropping them. The blue line indicates where it will be positioned when you let go.&lt;\\\/p&gt;&lt;p&gt;Another way to add sections is by clicking the plus icon over here, then simply choose one of these pre-set structures, which we can tweak to our liking, as we go, or simply delete them.&lt;\\\/p&gt;&lt;p&gt;Sections, Columns and Widgets have 3 tabs in the panel on the left. Sections and Columns have: Layout, Style and Advanced tabs.&lt;\\\/p&gt;&lt;p&gt;Whereas Widgets have Content, Style and Advanced tabs. Soon we\\u2019ll see how these settings are used to design our page.&lt;\\\/p&gt;&lt;p&gt;We don\\u2019t need this section for our website design, so I\\u2019ll go ahead and delete it as well.&lt;\\\/p&gt;&lt;p&gt;And that wraps up the Elementor Editor overview.&lt;\\\/p&gt;&lt;p&gt;In the next lesson, we\\u2019ll set up our design system to streamline the building process and ensure consistent styling throughout the website. So watch on!&lt;\\\/p&gt;&quot;,&quot;vimeo_url&quot;:null,&quot;type&quot;:&quot;youtube&quot;,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;},{&quot;_id&quot;:&quot;57788f3&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=i7d9Pn1yZFs&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=5&quot;,&quot;title&quot;:&quot;Building the Design System&quot;,&quot;duration&quot;:&quot;5:07&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;In this lesson we will build our design system for our website, to simplify the building process and guide us in styling our website&#039;s elements.&lt;\\\/p&gt;&lt;p&gt;This lesson will cover:&lt;br \\\/&gt;\\u2714\\ufe0e Configuring Site Settings&lt;br \\\/&gt;\\u2714\\ufe0e Setting up Global Colors&lt;br \\\/&gt;\\u2714\\ufe0e How to set up and create Global Fonts&lt;br \\\/&gt;\\u2714\\ufe0e And much more!&lt;\\\/p&gt;&quot;,&quot;inner_tab_content_2&quot;:&quot;&lt;p&gt;Hey there, it\\u2019s Aviva from Elementor. Welcome back to how to Build a Website in Elementor. In the previous lesson, we learned the basics of using the Elementor Editor to structure our web pages.&lt;\\\/p&gt;&lt;p&gt;In this lesson, we\\u2019re going to build our design system, which will help simplify the building process and guide us in styling the elements of our website.&lt;br \\\/&gt;So what is a design system and why should you use one?&lt;br \\\/&gt;In order for a website to be effective, it needs to have clear and consistent messaging. This messaging is expressed through both the website\\u2019s content and design.&lt;\\\/p&gt;&lt;p&gt;By establishing a clear set of guidelines, you\\u2019ll create a more efficient building process, which will both save you time, and allow you to maintain consistency throughout your site.&lt;\\\/p&gt;&lt;p&gt;This is where a Design System comes in handy. A design system is a collection of pre-set, ready to use styles, that will help structure your website, and give it that clean and polished look.&lt;\\\/p&gt;&lt;p&gt;I\\u2019ve already created a file for my website, which contains the design, as well as all the elements I\\u2019ll need to build my website. I created this file in Adobe XD, but you should feel free to create it using whichever tools you\\u2019re comfortable with.&lt;\\\/p&gt;&lt;p&gt;Design systems can range from simple to complex, depending on the branding and website requirements, but most design systems include a visual listing of the main colors, and typographic styles of the website. So let\\u2019s see how we can implement these elements into Elementor for a streamlined building experience.&lt;\\\/p&gt;&lt;p&gt;As we learned in our last lesson, we can add a widget by dragging it in, and customizing it with the style tab. Using this method, I\\u2019ve already placed four headings here to demonstrate how a Design System can benefit your site.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s start by selecting the first heading, and going to the style tab. Widgets placed in the Editor already come in with preset default styles.&lt;\\\/p&gt;&lt;p&gt;The global icon here, indicates that there is a Global style setting available for either a color or font. When the icon is blue, it means that a Global style is currently applied to this setting.&lt;\\\/p&gt;&lt;p&gt;For example, this heading\\u2019s color is already set to a global primary color, and its typography is set to a global primary font. Note that choosing a custom color, will turn the icon grey, indicating it no longer has the global style applied.&lt;\\\/p&gt;&lt;p&gt;Using global styles, as opposed to setting custom colors and fonts individually, is considered best practice. Not only does it speed up your work process, it requires less CSS to load, and allows your website to load faster.&lt;\\\/p&gt;&lt;p&gt;I\\u2019ll go ahead and apply a different global style to each heading on the page. Now that we have global styles applied to every heading, let\\u2019s edit them to match the Design System of our site.&lt;\\\/p&gt;&lt;p&gt;Open the menu and select Site Settings. Notice that the panel header color changes to light blue, indicating that you are now editing globally, across your site. These settings can be accessed from any Elementor page.&lt;\\\/p&gt;&lt;p&gt;Click global colors and adjust each color to match the color palette from your design. You can also rename a color by simply clicking on it, and typing a new name. 5&lt;\\\/p&gt;&lt;p&gt;As you make adjustments, any widget with a global style selected, will update with the modified style.&lt;\\\/p&gt;&lt;p&gt;Now that we\\u2019re done setting up the website colors, we\\u2019ll go back and set up the global fonts.&lt;\\\/p&gt;&lt;p&gt;Since the global color we\\u2019ve applied to this heading is white, it\\u2019s not showing on the white background, but it will be visible when we use it on a dark background.&lt;\\\/p&gt;&lt;p&gt;You can add more global color or font styles by clicking \\u201cAdd Style\\u201d and customizing its settings.&lt;\\\/p&gt;&lt;p&gt;Global fonts also allow you to customize different settings for responsive viewing. We\\u2019ll set these up in a later lesson, to give you the opportunity to preview them directly in your designs.&lt;\\\/p&gt;&lt;p&gt;And there you have it! We&#039;ve now created our very own design system, which will help us streamline the design process considerably .&lt;\\\/p&gt;&lt;p&gt;In our next lesson, we\\u2019ll continue setting up our site using the Site Settings, and create the header and footer for our website, so be sure to keep watching.&lt;\\\/p&gt;&quot;,&quot;vimeo_url&quot;:null,&quot;type&quot;:&quot;youtube&quot;,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;},{&quot;_id&quot;:&quot;d6eca68&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=KKnFuAWtvk0&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=6&quot;,&quot;title&quot;:&quot;Website Essentials: Layout, Header &amp; Footer&quot;,&quot;duration&quot;:&quot;9:35&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;In this lesson we will define our website settings and structure using the free Hello theme, including the site identity, header, footer, and site layout.&lt;\\\/p&gt;&lt;p&gt;This lesson will cover:&lt;br \\\/&gt;\\u2714\\ufe0e How to set up your Site ID, including site name, site logo, and favicon&lt;br \\\/&gt;\\u2714\\ufe0e How to create and style a Header&lt;br \\\/&gt;\\u2714\\ufe0e How to create and style a Footer&lt;br \\\/&gt;\\u2714\\ufe0e How to edit your website layout settings&lt;br \\\/&gt;\\u2714\\ufe0e And much more!&lt;\\\/p&gt;&quot;,&quot;inner_tab_content_2&quot;:&quot;&lt;p&gt;Hey there, it\\u2019s Aviva from Elementor. Welcome back to How to Build a Website in Elementor.&lt;br \\\/&gt;&lt;br \\\/&gt;In the previous lesson, we set up our design system, and in this lesson, we&#039;ll build on that to define the website settings and structure, which include elements such as site identity, the header and footer, and the site layout.&lt;\\\/p&gt;&lt;p&gt;If you\\u2019re like me, you probably can\\u2019t wait to get started on designing your homepage.&lt;\\\/p&gt;&lt;p&gt;And we\\u2019re ALMOST there! But setting up the site structure is integral to creating a website, so I highly recommend completing this step before you get started building.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll begin with the Site Identity, here. This section is where you define your website\\u2019s site name, description, logo, and favicon. These details will be called upon repeatedly for reuse in a variety of locations throughout your site, as well as externally, such as in web search results.&lt;\\\/p&gt;&lt;p&gt;Enter your Site Name...and your Site Description, which is also known as the tagline. This information will display in search results, so it should be accurate and contain relevant keywords.&lt;\\\/p&gt;&lt;p&gt;Next, we\\u2019ll add the website logo. You can choose from many different image file types, but for beginners, I recommend starting with a JPG or PNG file. PNGs are great for logos because they display text and iconic graphics in better quality, and they allow for transparent backgrounds, so this is what I\\u2019ll use.&lt;\\\/p&gt;&lt;p&gt;Click the plus icon to upload your logo. Then Upload Files, select your logo, and Insert Media.&lt;\\\/p&gt;&lt;p&gt;Last is the Site Favicon. Your favicon appears in your site\\u2019s browser tab for quick and easy identification of your site, among other browser tabs. Ideally it should be a minimalistic graphic without too much detail, since it displays at a very small size.&lt;\\\/p&gt;&lt;p&gt;Click Update, and Refresh the page to preview these changes. Refreshing the page, brings us back to the Editor, so click the Hamburger menu and Site Settings to go back to the main site settings menu.&lt;br \\\/&gt;&lt;br \\\/&gt;Next we\\u2019ll create and style the Header and navigation menu. The header appears at the top of each page, and helps guide visitors as they navigate the site.&lt;\\\/p&gt;&lt;p&gt;Before we begin, let\\u2019s consult the design, so we can quickly apply all the right settings. We have a logo in the upper left corner, and on the right, we have a menu with all the links to the pages on the site.&lt;\\\/p&gt;&lt;p&gt;Great, so now we can go ahead and carry out this design via the Header settings.&lt;\\\/p&gt;&lt;p&gt;Note that the Header and Footer options you see here, will only display if you have the Hello theme installed.&lt;br \\\/&gt;Click to enter the Header settings.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll go through each option, and configure the elements we\\u2019d like to appear in the header, along with their layout, and styling.&lt;\\\/p&gt;&lt;p&gt;As per the design, the logo should display, so leave the site logo on the default of SHOW. Next toggle the Tagline to HIDE as it\\u2019s not used in the design, and keep the menu on SHOW.&lt;\\\/p&gt;&lt;p&gt;Even though the menu is set to show, nothing is displayed because we haven\\u2019t yet selected a menu.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s skip ahead in the settings to set that up, so we can see what we\\u2019re working with.&lt;br \\\/&gt;&lt;br \\\/&gt;Click Menu, here at the bottom...and select the menu we created earlier in the course. To display the selected menu, we\\u2019ll need to Update...and refresh. Perfect.&lt;br \\\/&gt;Let\\u2019s continue where we left off in the Header settings and check out the different available layouts. The default layout is a perfect match for our design.&lt;\\\/p&gt;&lt;p&gt;Now we\\u2019ll take a look at the width options. Full width will bring the outer elements of the header content to the edge of the screen, and Boxed keeps the content confined to a container of a specific size. Set it back to Boxed.&lt;\\\/p&gt;&lt;p&gt;In the Content With, you\\u2019ll notice the percent sign and PX for Pixels. This indicates that you can choose the unit of measure for this setting. In this case, PX is the default. You can use the slider to set the width, but in the XD document, we saw that the website was designed to span 1,500 pixels, so you can type in 1,500 to be precise.&lt;\\\/p&gt;&lt;p&gt;Now set the gap to 20px to allow for the white space that we saw around each section of the design.&lt;\\\/p&gt;&lt;p&gt;Below that is the background type. You can use it to set a background style, such as a color or gradient. Go ahead and have fun playing around with it, as these are options you\\u2019ll see again in the figure when you build the rest of your site.&lt;\\\/p&gt;&lt;p&gt;When you\\u2019re done, click the square color swatch and clear the color by clicking this icon, to leave it on the default of white.&lt;br \\\/&gt;Click Site Logo. Switch it from Title to Logo. Whoa, that\\u2019s a bit large. Type in 125 for the width.&lt;\\\/p&gt;&lt;p&gt;Now we just need to style the menu and we\\u2019ll be done with the header!&lt;\\\/p&gt;&lt;p&gt;We already selected the Menu to display, so we can move straight to Menu Layout. Switching to Dropdown will set the menu as a hamburger icon for all sizes. We\\u2019ll leave it on Horizontal\\u2026and use the breakpoint to set the size, at which the toggle, or hamburger, icon displays.&lt;\\\/p&gt;&lt;p&gt;Since we only have three pages on this site, they\\u2019ll still fit nicely at Tablet size, and we won\\u2019t need the breakpoint... to kick in until the display hits Mobile size.&lt;\\\/p&gt;&lt;p&gt;Next to color, click the global icon and select the \\u201cgrape\\u201d global color we created earlier in the course, to set the navigation menu links\\u2019 color.&lt;\\\/p&gt;&lt;p&gt;Do the same, for Toggle color. We can&#039;t see it yet, but we will in just a moment, when we preview the header in mobile view.&lt;\\\/p&gt;&lt;p&gt;And last, for Typography, click the global icon to choose the Global font style we created for the Navigation Menu Links.&lt;br \\\/&gt;&lt;br \\\/&gt;Ok it\\u2019s time to preview the design for Responsive. Click the responsive icon, here on the bottom panel.&lt;\\\/p&gt;&lt;p&gt;Perfect, everything looks good on mobile. The hamburger menu appears, and we can click it to see the menu. Switch to tablet, by clicking the tablet icon at the top of the editor. Tablet looks great too, so we don\\u2019t need to make any responsive changes here. But don\\u2019t worry, we\\u2019ll cover how to make device specific changes in detail, later in the course.&lt;\\\/p&gt;&lt;p&gt;And with that the Header is ready. Time to take care of the Footer. Exit Responsive mode, click back, and click Footer.&lt;br \\\/&gt;&lt;br \\\/&gt;Referencing the site design, we can see the Footer consists of a colored background and copyright text in the center. Back in the Editor, the first thing you\\u2019ll notice is that the footer settings are pretty similar to the Header\\u2019s. So let\\u2019s run through them quickly.&lt;\\\/p&gt;&lt;p&gt;Go ahead and hide the Site Logo, Tagline, and Menu, as we don\\u2019t need these elements. Set the Layout to Centered, and the content width to Boxed, 1,500 pixels as we did in the Header.&lt;\\\/p&gt;&lt;p&gt;For the background, click the paintbrush icon for Classic, and select Grape.&lt;\\\/p&gt;&lt;p&gt;Expand the copyright section and type in your text. Select a global color for the text, and a global font one for the Typography.&lt;\\\/p&gt;&lt;p&gt;Click to preview for responsive. Everything looks great!&lt;\\\/p&gt;&lt;p&gt;The header and footer will automatically repeat on every page on the website, unless they are disabled from the Page settings. This will allow your visitors to easily navigate throughout the site to find what they are looking for.&lt;\\\/p&gt;&lt;p&gt;Click to return to Desktop, and go back to the Site Settings.&lt;br \\\/&gt;&lt;br \\\/&gt;Click to enter the Layout settings. Recall that the width of the website content is 1,500 pixels. Rather than set this on each individual page, we can set it once and apply it to all the pages, by doing it here in Site Settings.&lt;\\\/p&gt;&lt;p&gt;For the content width, type in 1,500. Set the Default Page Layout to Elementor Full Width, to hide the title and display the Header and Footer on every page. Great, let\\u2019s Update to save the site settings, and go back to the Editor.&lt;\\\/p&gt;&lt;p&gt;I\\u2019ll go ahead and remove the examples from the page by right clicking here and selecting Delete All Content.&lt;br \\\/&gt;Now with the website layout and structure ready, and a fresh clean page, it\\u2019s time to start building the page content! So keep watching, and join us in the next lesson, where we\\u2019ll build our homepage.&lt;\\\/p&gt;&quot;,&quot;vimeo_url&quot;:null,&quot;type&quot;:&quot;youtube&quot;,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;},{&quot;_id&quot;:&quot;48b648d&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=LjQptEShDJo&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=7&quot;,&quot;title&quot;:&quot;Building the Homepage in Elementor&quot;,&quot;duration&quot;:&quot;29:59&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;In this lesson we will use the Elementor widgets to structure and build our for a restaurant website homepage. We will introduce Elementor\\u2019s essential widgets and learn to customize them.&lt;\\\/p&gt;&lt;p&gt;This lesson will cover:&lt;br \\\/&gt;\\u2714\\ufe0e How to structure your page&lt;br \\\/&gt;\\u2714\\ufe0e The basic Elementor widgets&lt;br \\\/&gt;\\u2714\\ufe0e How to customize and style your page elements&lt;br \\\/&gt;\\u2714\\ufe0e Image file best practices&lt;br \\\/&gt;\\u2714\\ufe0e Workflow enhancements&lt;br \\\/&gt;\\u2714\\ufe0e And much more!&lt;\\\/p&gt;&quot;,&quot;inner_tab_content_2&quot;:&quot;&lt;p&gt;Hey there it\\u2019s Aviva from Elementor. Welcome back to How to Build a Website in Elementor.&lt;\\\/p&gt;&lt;p&gt;In the previous lesson, we customized the settings and structured the layout of our website. And now for the fun: We\\u2019re ready to start building our homepage with Elementor!&lt;\\\/p&gt;&lt;p&gt;Referring back to our design, the first section we\\u2019ll build is the hero section. This section consists of several elements, both stacked, and arranged side-by-side, and here, you\\u2019ll learn how to completely customize and style sections, columns, and widgets.&lt;\\\/p&gt;&lt;p&gt;The following four sections are very similar to each other in structure and content, so we\\u2019ll use that to our advantage, with workflow shortcuts, such as duplicating, and copying and pasting elements.&lt;\\\/p&gt;&lt;p&gt;The last section has a simpler structure, so we\\u2019ll continue building on the skills we\\u2019ve learned from the previous sections and introduce more workflow tips.&lt;\\\/p&gt;&lt;p&gt;There is generally more than one way to achieve any layout, and since we have designed this course for beginners, to build SImaya, we\\u2019ve opted to teach using more straightforward structuring methods.&lt;\\\/p&gt;&lt;p&gt;Ok, let\\u2019s start building! We\\u2019ll start by setting up a container, which will hold the hero content.&lt;\\\/p&gt;&lt;p&gt;Back in the Editor, click the plus icon to create a new section., and select one column for its structure. Next, we\\u2019ll add an inner section, which is a secondary section, that can be nested within a main section (to help structure other elements). Click the widget menu to display all the available widgets, and drag and drop an inner section widget inside your column.&lt;br \\\/&gt;Upon placing any widget in the Editor, it is automatically selected and all available settings are displayed in the left Panel. Should a widget become deselected, just click on it, to get back to its settings.&lt;\\\/p&gt;&lt;p&gt;By default, a section acquires the height of the widgets placed within it. But you also have an option to specify a section\\u2019s minimum height, which means that the section will always take up at least the specified amount, regardless of its content.&lt;\\\/p&gt;&lt;p&gt;To do this, in Layout, for the height option, select Min Height, and set it to 700 pixels&lt;\\\/p&gt;&lt;p&gt;Elementor allows you to add a background color or image to any section, column or widget.&lt;\\\/p&gt;&lt;p&gt;So let\\u2019s go ahead and add a background color to the column. You can find most of the style settings in the Style tab, so click Style, and for background type, select Classic.&lt;\\\/p&gt;&lt;p&gt;For the color, click the Global icon, and select the Global color \\u201cGrape,\\u201d which we created earlier, when we set up our design system.&lt;\\\/p&gt;&lt;p&gt;Nice! Now that the container is ready, let\\u2019s start adding the widgets.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll start with the first heading. Click the widgets menu, and drag and drop the heading widget in the first column of the inner section.&lt;\\\/p&gt;&lt;p&gt;Type your text and\\u2026oops... where did it go!?&lt;\\\/p&gt;&lt;p&gt;When you add a widget, by default it automatically picks up a Global color; in this case, it has the same color as our background.&lt;\\\/p&gt;&lt;p&gt;To make the Heading visible, head to the Style tab, and select the global color, Almond.\\u00a0Much better!&lt;\\\/p&gt;&lt;p&gt;In typography, we\\u2019ll change the default font a bit to match our design, by clicking the pencil icon, and customizing its style. We didn\\u2019t create a global font for this Heading, since we\\u2019re only using this particular style once on our website.&lt;\\\/p&gt;&lt;p&gt;Now back in the content tab, align the text to the center.&lt;br \\\/&gt;To save some time, we\\u2019ll duplicate this heading to create a subheading, by right clicking the heading and selecting duplicate, or by using the keyboard shortcut, &lt;strong&gt;Command or Control D&lt;\\\/strong&gt;.&lt;\\\/p&gt;&lt;p&gt;Now select this heading. And type in the subheading text.&lt;\\\/p&gt;&lt;p&gt;Next we\\u2019ll update the HTML tag. Every time you add a heading widget, a default HTML tag of H2 is applied. Heading tags establish text hierarchy within the page. The smaller the H number, the more important a heading is, and it is best practice to set them accordingly. Since this is a subheading, switch it to H3.&lt;\\\/p&gt;&lt;p&gt;Now let\\u2019s change the font style. For this one, we\\u2019ll select the global font, \\u201cSecondary.\\u201d Great!&lt;\\\/p&gt;&lt;p&gt;Now we\\u2019ll add a button. From the widgets menu, drag and drop the button widget under the heading. Update the text,\\u00a0 and align it to the center.&lt;\\\/p&gt;&lt;p&gt;We need this button to take visitors to the Our Menu page, so the first thing we\\u2019ll do is link it up. By typing its name here, one or more suggestions will pop up. Simply select the correct page, and voila, it\\u2019s linked!&lt;\\\/p&gt;&lt;p&gt;Now let\\u2019s Style it. In Typography, select the \\u201cButton text\\u201d Global font.&lt;\\\/p&gt;&lt;p&gt;For the button\\u2019s background, our design calls for a transparent background. To set this, click the color swatch and drag the slider, which controls opacity, all the way to the left, for complete transparency.&lt;\\\/p&gt;&lt;p&gt;Since we\\u2019re going to need transparency again in our design, let\\u2019s save it as a Global style. Rather than go back to Site Settings, as when we were setting up the design system, we can also add global styles directly from the Editor.&lt;\\\/p&gt;&lt;p&gt;Click the plus icon, and type \\u201cTransparent\\u201d to name it; then click Create. As you can see, it\\u2019s now been added to our Global colors.&lt;\\\/p&gt;&lt;p&gt;Below, we\\u2019ll style the button\\u2019s border. In Border Type, select Solid and set its width to 1px.&lt;br \\\/&gt;Set its global color to Almond, and border radius to zero, to remove any default rounded corners.&lt;\\\/p&gt;&lt;p&gt;Now let\\u2019s set the padding. Padding, in short, will add space between the border and content, to give the content some breathing room. The amount of space around the content is controlled by entering values here. By default, the link icon is active, which means that changing any value, will apply the changes to each side.&lt;\\\/p&gt;&lt;p&gt;To deactivate linked values, and enable different values on each side, click the link icon, which will deselect, and unlink the values. We\\u2019ll adjust the button\\u2019s padding according to the design.&lt;\\\/p&gt;&lt;p&gt;Next we\\u2019ll update the hover state of the button, which is how the button displays on mouseover. Click the hover tab, and change the text colour to Grape. Select Classic for the background type, and Almond for the background colour.&lt;\\\/p&gt;&lt;p&gt;Adding a hover animation will give it a playful touch. We\\u2019ll select shrink.&lt;\\\/p&gt;&lt;p&gt;Hover over the button to preview. It looks great!&lt;\\\/p&gt;&lt;p&gt;The next element in the hero is the soup image.&lt;\\\/p&gt;&lt;p&gt;So, in the widgets menu, drag and drop an image widget into the second column.&lt;\\\/p&gt;&lt;p&gt;Then click here, to select your image.&lt;\\\/p&gt;&lt;p&gt;You can upload your image by clicking the \\u201cupload files\\u201d tab and then \\u201cSelect Files,\\u201d or you can simply drag and drop it like this.&lt;\\\/p&gt;&lt;p&gt;For best practice, be sure your image has a descriptive file name. Then add a title, and Alt Text. This makes your website more accessible, and will help boost your website in search results!&lt;\\\/p&gt;&lt;p&gt;Another important thing to keep in mind when uploading images, is the file size. Try to keep image size to 200 kilobytes or smaller, as they may affect the resources and speed of your website.&lt;\\\/p&gt;&lt;p&gt;One of the most commonly asked questions when building websites is: \\u201cWhat are the right dimensions for web images?\\u201d&lt;\\\/p&gt;&lt;p&gt;You can calculate the dimensions of your images, according to the common screen sizes. The most common (desktop) screen size is 1920 x 1080, so ideally an image of 2000px wide will work perfectly for a hero section that takes up the full width of the screen.&lt;\\\/p&gt;&lt;p&gt;In our case, the image will be the width of about half the screen, so 1000px wide will be enough. Ok, once you\\u2019ve selected your image, go ahead and click Insert.&lt;\\\/p&gt;&lt;p&gt;To make the image seamlessly blend into the background, I used the same color background as the hero section when I created the image. Another way to achieve this effect is to use an image with a transparent background.&lt;br \\\/&gt;Now let\\u2019s add one more column to the Hero section, where we\\u2019ll place the social icons.&lt;\\\/p&gt;&lt;p&gt;Right click the second column, and select Add new column.&lt;br \\\/&gt;Great.&lt;\\\/p&gt;&lt;p&gt;Now go to the widgets menu, search for social icons, and drag the widget here.&lt;\\\/p&gt;&lt;p&gt;You can select the social icons of your choice. In our case, we\\u2019ll replace Youtube with Instagram.&lt;\\\/p&gt;&lt;p&gt;Click to expand the options; then click the icon. This opens the icon libraries, complete with a wide range of free icons for you to use in Elementor!&lt;\\\/p&gt;&lt;p&gt;Begin typing Instagram in the search bar to quickly find it, and insert the icon by clicking here. Now, add a social link to each icon. In shapes, choose square, to match the site design.&lt;\\\/p&gt;&lt;p&gt;Depending on the number of the social icons used, we can manually select the number of columns they\\u2019ll be divided into, or leave it on auto, to automatically stack the icons. We want our icons to be stacked in one column, so we\\u2019ll select 1.&lt;\\\/p&gt;&lt;p&gt;Ok, let\\u2019s style them. In the Style tab, select Custom for the color. Then for primary color, select the new transparent global we created earlier. For the secondary color, select Almond.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s add more interactivity to the icons by setting the icon hover effect. For primary color, select almond, and for secondary, choose the grape.&lt;\\\/p&gt;&lt;p&gt;And as for even more interactivity, we can also add a hover animation! Click hover animation options and select shrink, like we did with the button.&lt;\\\/p&gt;&lt;p&gt;Wow! Who wouldn\\u2019t want to click those links!?&lt;br \\\/&gt;The column is a bit wide for the social icons, so let\\u2019s change its width. You can click and drag the column from its right edge, to visually adjust the column width... or select the column, and type in a precise value for column width.&lt;\\\/p&gt;&lt;p&gt;The column width is measured in percentage, so typing in the number 5, will set the column to take up five percent of the total section width. This looks great, here.&lt;\\\/p&gt;&lt;p&gt;Now, the only thing left to do for the hero section, is to vertically align the widgets to the middle.&lt;\\\/p&gt;&lt;p&gt;The vertical alignment of widgets can be controlled via the Layout Settings in sections and inner sections.&lt;\\\/p&gt;&lt;p&gt;Select the inner section, and in Vertical Align, select, select middle. Cool!&lt;\\\/p&gt;&lt;p&gt;And with that, the hero section is complete!&lt;\\\/p&gt;&lt;p&gt;Now we\\u2019re ready to create the second section. As we can see in our design, this section will provide some basic information about Simaya with an image and some informational text.&lt;\\\/p&gt;&lt;p&gt;Click here, to add a new section and select the two column structure.&lt;\\\/p&gt;&lt;p&gt;We\\u2019re going to set the minimum height to VH, to create some vertical space. VH stands for Viewport Height. It is a unit equal to your browser\\u2019s window size. So, 100VH is equal to 100 percent of your window\\u2019s height. I\\u2019ll enter 50VH which gives the section half of the window\\u2019s height.&lt;\\\/p&gt;&lt;p&gt;Great! Now set the Column Position within the Section, to Stretch. This will allow the columns inside the section to expand, getting the same height as the section they\\u2019re in!&lt;\\\/p&gt;&lt;p&gt;Next, in structure, you can select one of the predefined structures, to quickly change the width of your columns.&lt;br \\\/&gt;We\\u2019ll select this one, which will provide us with more space for our text in the second column.&lt;\\\/p&gt;&lt;p&gt;Now we\\u2019ll add a background image to the left column. Select it, and in Style, select the classic background, and click here to choose your image.&lt;\\\/p&gt;&lt;p&gt;While we\\u2019re here, let\\u2019s go ahead and upload all the rest of the images we&#039;ll be using on the site. That way, we can skip the upload process in the future. Simply select them from your folder and drop them in here.&lt;\\\/p&gt;&lt;p&gt;Once you upload them, just select the image for this column, and click here to insert it. As you can see, it automatically expands proportionally to take up the whole area of the section.&lt;\\\/p&gt;&lt;p&gt;Setting an image as a background gives us extra control and effects to choose from.&lt;\\\/p&gt;&lt;p&gt;In Attachment, the default option is scroll, which as you can see scrolls along with the page&lt;\\\/p&gt;&lt;p&gt;For our website, we\\u2018ll select Fixed Attachment, which keeps the image fixed in place in the background, giving the illusion of the website scrolling over it.&lt;\\\/p&gt;&lt;p&gt;To further control how the image displays, we\\u2019ll edit its background size. You\\u2019ll see many options, like Cover, which will make the image proportionally fill the width and height of the column, or Contain, where the image will stay always visible horizontally and vertically inside the column.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll select \\u201ccover\\u201d for this design. Since we chose Fixed Attachment earlier, selecting Cover will make the image proportionally fill the width and height of our viewport, instead of just the column.&lt;br \\\/&gt;Now I\\u2019d like to add some white space around the column. To do this, navigate to the Advanced tab, where you&#039;ll see Margin and Padding.&lt;\\\/p&gt;&lt;p&gt;These options will be found in every section, column, and widget, under this tab.&lt;\\\/p&gt;&lt;p&gt;These two options are commonly known to create confusion, since both are used to create space, and users often aren\\u2019t sure which one to choose.&lt;\\\/p&gt;&lt;p&gt;While they both add space, they are used for different reasons, and to achieve different results.&lt;\\\/p&gt;&lt;p&gt;Before demonstrating the differences, let\\u2019s populate the column with a widget. If a column doesn\\u2019t have any widgets inside, some changes, like padding and margin, will not display.&lt;\\\/p&gt;&lt;p&gt;Drag a spacer widget and drop it into the column. Spacers, as the name suggests, create space. Let&#039;s give it some height as well. Now select the column again, and in the Advanced tab let\\u2019s begin with Margin.&lt;\\\/p&gt;&lt;p&gt;Margin is used to create space between an element and the content around it.&lt;br \\\/&gt;For columns like this one, you\\u2019ll see, that setting a value for the margin, will create a space outside its content, making the entire column smaller.&lt;\\\/p&gt;&lt;p&gt;Padding is used to create space within the element itself. Let\\u2019s add a little padding to better understand it.&lt;\\\/p&gt;&lt;p&gt;As you can see, it creates space inside the column itself which makes the spacer smaller.&lt;\\\/p&gt;&lt;p&gt;Since we want to create some space outside the column to match the layout of the page, we\\u2018ll use margin, here . Set it to 10 pixels.&lt;\\\/p&gt;&lt;p&gt;Now let\\u2019s add our content to the second column. From the widgets menu, drag and drop the heading widget here.&lt;br \\\/&gt;Change its text, and set the html tag to H3 since this will be a subheading. In style, set the typography to secondary.&lt;\\\/p&gt;&lt;p&gt;Next, from the widgets menu, drag and drop in another heading. Change its text, and in Style, change its size, and change the letter spacing a bit. We\\u2019ll go ahead and create a new global font style, since we\\u2019ll be using this style again.&lt;\\\/p&gt;&lt;p&gt;Click the plus icon and name it \\u201cSection text,\\u201d then click create. As you can see, it\\u2019s already been added to the list!&lt;\\\/p&gt;&lt;p&gt;Now, back in the widgets menu, find and drag the text editor widget below the heading. This widget is ideal for adding and styling text copy. Type your text, and in style, change the text color to Grape.&lt;\\\/p&gt;&lt;p&gt;Now let\\u2019s tweak the widgets&#039; spacing within the column. Click the column, and set the Vertical alignment to Middle. In the Advanced tab, for the padding, select percent for the unit, and set it to 10. Great. Section two is complete.&lt;br \\\/&gt;Let\\u2019s create our next section. To save some time, right click this section and select \\u201cDuplicate.\\u201d&lt;\\\/p&gt;&lt;p&gt;This section should have three columns, so right click the first column, and click, \\u201cAdd New Column\\u201d to insert another column. Perfect!&lt;\\\/p&gt;&lt;p&gt;As I showed you earlier, Elementor not only allows you to drag and drop widgets from the widget menu into your page, you can also drag widgets, columns, and sections within the Editor to rearrange their order.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s rearrange the position of some of the elements to see it in action. Starting with this column, click and drag it all the way to the left, to place it here. Now, right click, and delete this heading, And drag the remaining heading to this column.&lt;\\\/p&gt;&lt;p&gt;Now that we&#039;ve re-arranged the columns and their elements, we\\u2019ll update the content and style.&lt;\\\/p&gt;&lt;p&gt;Click the text editor widget and replace the text. Now select the column and in the Advanced tab, increase the padding. Great!&lt;\\\/p&gt;&lt;p&gt;Next, select the second column, and in style, replace the background image. Change its position a bit, by setting it to the center.&lt;br \\\/&gt;Now let\\u2019s edit the third column. Select it, and under Vertical alignment, select Middle. This positions all the widgets vertically to the center. In Style, give it a background color. In the Advanced tab, add 10 pixels of margin to match the other columns.&lt;\\\/p&gt;&lt;p&gt;Now click the heading, and in style, select the global color, Almond, to give a strong contrast. Back in the Content tab, type the text, and align it to the center.&lt;\\\/p&gt;&lt;p&gt;And in the Advanced tab, unlink the padding, and set the right and left values to 30 percent.&lt;\\\/p&gt;&lt;p&gt;Next we\\u2019ll need a button. Since we designed one already in our hero section, let\\u2019s save ourselves some work and reuse it. Scroll up. Right click on it, and select \\u201ccopy.\\u201d This will copy the entire widget, including all its settings.&lt;\\\/p&gt;&lt;p&gt;Scrolling back down to the section\\u2026 right click again inside the column, and select paste.&lt;\\\/p&gt;&lt;p&gt;Now type your text, and just like that, the button is done. We\\u2019ll come back to link this button to the end of the page, a bit later, once we\\u2019ve built the last section.&lt;\\\/p&gt;&lt;p&gt;Now, we&#039;ll add an image widget. Select your image, and Insert it.&lt;\\\/p&gt;&lt;p&gt;For this example I used a transparent png image, but you can use any image you\\u2019d like.&lt;\\\/p&gt;&lt;p&gt;Next, in Style, set the width to 20 percent. And...done!&lt;br \\\/&gt;With every new section we add, the length of the page is increased, which can make it more difficult to navigate within the Editor. This is where the Navigator comes in.&lt;\\\/p&gt;&lt;p&gt;You\\u2019ll find the Navigator here, in the Panel Toolbar. Click to open it, or use the keyboard shortcut, &lt;strong&gt;Command or Control I&lt;\\\/strong&gt;. You&#039;ll see that a new window pops up, that displays the page\\u2019s sections, columns and widgets in expandable layer format.&lt;\\\/p&gt;&lt;p&gt;Clicking any item, will navigate you directly to it and enable its settings. You can drag and drop elements to reposition them, like this.&lt;\\\/p&gt;&lt;p&gt;To make it easier to navigate through each section, let\\u2019s rename the ones we\\u2019ve added so far.&lt;\\\/p&gt;&lt;p&gt;Double click the first one, and give it the name, \\u201cHero.\\u201d&lt;br \\\/&gt;Next, double click the second section and give it a memorable name. Repeat this for the third section.&lt;\\\/p&gt;&lt;p&gt;Right click the third section, where you\\u2019ll find even more options, and select \\u201cDuplicate\\u201d to create a copy of it. Double click it, and name this section. Great. Go ahead and close the Navigator for now.&lt;\\\/p&gt;&lt;p&gt;Delete the first column since we won\\u2019t need it here, and reposition the columns by dragging the second column to the left. Change its width to match one third of the column, or 33.33 percent.&lt;\\\/p&gt;&lt;p&gt;And in style, change the background color to Basil.&lt;br \\\/&gt;Now we&#039;ll update the content.&lt;br \\\/&gt;Click the image widget, and replace it with a new image. Click the heading and update the text. Select the button, and replace the text. There&#039;s no need to update the link, since it&#039;s already connected to the Our Menu page.&lt;\\\/p&gt;&lt;p&gt;In style, change the hover color to basil to match the background.&lt;\\\/p&gt;&lt;p&gt;Next, click the column to enter its settings, and in style, replace this image with a new one. And that\\u2019s it! We\\u2019re already done with this section!&lt;\\\/p&gt;&lt;p&gt;Moving right along, let\\u2019s add another section, following the same design style.&lt;\\\/p&gt;&lt;p&gt;Open the navigator, using the shortcut we learned before. Right click this section and select \\u201cDuplicate\\u201d. Give it a name. And Drag it all the way to the bottom. Now drag the second column to the end of the section, and in Style, replace the existing image with the new one. Go ahead and close the navigator.&lt;\\\/p&gt;&lt;p&gt;Select the second column, and in style, change the background color to raspberry. Replace the image, update the Heading content, and the button text. And link it to the Contact Us page&lt;br \\\/&gt;In style, change the hover color option to match the background.&lt;\\\/p&gt;&lt;p&gt;Next, click on the text editor, and replace the text. Great!&lt;\\\/p&gt;&lt;p&gt;The last section, as you can see in the design, features the story of Simaya.&lt;\\\/p&gt;&lt;p&gt;Create a new section with one column. Open the Navigator, and name the section.&lt;\\\/p&gt;&lt;p&gt;Now, remember the Our Story button from the third column?&lt;br \\\/&gt;There\\u2019s a super simple way to create an anchor link to this section, so when the button is clicked, the page will scroll right to it. Let\\u2019s do it!&lt;\\\/p&gt;&lt;p&gt;In the Advanced tab, you\\u2019ll see the option, CSS ID, which is used to provide a unique name that can be given to only one element on a page.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s give it the name \\u201cstory.\\u201d&lt;\\\/p&gt;&lt;p&gt;From the navigator, click the \\u201cSince 1998\\u201d section. And in link, type, hashtag, and the ID name of the section.&lt;\\\/p&gt;&lt;p&gt;The CSS ID is case sensitive, so be sure to use exactly the same word in both the ID and the link.&lt;\\\/p&gt;&lt;p&gt;Ok, let\\u2019s see if it works. Click the button. Fantastic!&lt;br \\\/&gt;Now close the Navigator, using the same shortcut, we used to open it. From the widgets menu, drag and drop the heading widget into the column. Name it Our Story, and align it to the center.&lt;\\\/p&gt;&lt;p&gt;Hold down &lt;strong&gt;Command or Control D&lt;\\\/strong&gt; to duplicate the heading. This will be the subheading. Click it to change the text.. And set it to H3. In style, select a global font for the typography, to match the design.&lt;\\\/p&gt;&lt;p&gt;Back in widgets, drag the text editor under the headings, and update the text..&lt;\\\/p&gt;&lt;p&gt;In Style, align it to the center, and select a Global color.&lt;\\\/p&gt;&lt;p&gt;And in the advanced tab, we\\u2019ll control the width of the text content by adding some padding on the right and left sides.&lt;\\\/p&gt;&lt;p&gt;Perfect!&lt;\\\/p&gt;&lt;p&gt;From the widget menu, let\\u2019s add a spacer widget.&lt;br \\\/&gt;Spacers, as I mentioned before, are used to create space, for example between widgets, or to create line breaks.&lt;\\\/p&gt;&lt;p&gt;Set its height to 300 pixels. In Advanced, add a background image to the spacer. Set the Attachment to Fixed and the size to Cover.&lt;\\\/p&gt;&lt;p&gt;Now, expand the Advanced tab, and add some space above and below, by unlinking, and adding a margin to the top and bottom of the widget.&lt;\\\/p&gt;&lt;p&gt;Now we\\u2019ll add our social media icons. We&#039;ll use the same ones we created previously in the hero section.&lt;\\\/p&gt;&lt;p&gt;Open the Navigator, and select the hero section. Drag the Navigator window over a bit, so we can see the icons in the Editor, and right click to copy the social icons.&lt;\\\/p&gt;&lt;p&gt;Click the last section to take us back to the bottom of the page. Right click the spacer, and select paste.&lt;br \\\/&gt;Hooray for the Navigator!&lt;\\\/p&gt;&lt;p&gt;You can\\u2019t see the icons yet, so go to Style, and change the secondary color here, as well as for the hover state.&lt;\\\/p&gt;&lt;p&gt;Go to Content, and set the Columns to Auto. In the Navigator, click the our Story section, and in Advanced, change the Margin unit to percent. Type in 10 to add ten percent margin to the top and bottom of the section.&lt;\\\/p&gt;&lt;p&gt;Ok, time to preview! Click the first section to jump to the top of the page, and close the Navigator. Click the icon here to hide the panel or use the shortcut &lt;strong&gt;Command or Control P&lt;\\\/strong&gt;.&lt;\\\/p&gt;&lt;p&gt;Everything looks great here in the Desktop view, and we\\u2019ve now completed the desktop version of the homepage. You\\u2019re already becoming a pro at creating and customizing sections, columns, and widgets. Continue to the next lesson, to learn how to optimize your webpages for responsive viewing. See you there!&lt;\\\/p&gt;&quot;,&quot;vimeo_url&quot;:null,&quot;type&quot;:&quot;youtube&quot;,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;},{&quot;_id&quot;:&quot;b706af5&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=sNLlysb87gY&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=8&quot;,&quot;title&quot;:&quot;Responsive Design &amp; Connect the Home Page&quot;,&quot;duration&quot;:&quot;9:08&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;In this lesson we will cover the responsive editing foundations in Elementor, optimize our homepage for responsive viewing. We\\u2019ll also set this page in WordPress to display as the homepage on the website.&lt;\\\/p&gt;&lt;p&gt;This lesson will cover:&lt;br \\\/&gt;\\u2714\\ufe0e Responsive editing foundations in Elementor&lt;br \\\/&gt;\\u2714\\ufe0e Inheritance Principles in Elementor&lt;br \\\/&gt;\\u2714\\ufe0e Optimizing web pages for responsive viewing&lt;br \\\/&gt;\\u2714\\ufe0e Setting a page to display as the homepage on a website&lt;br \\\/&gt;\\u2714\\ufe0e And much more!&lt;\\\/p&gt;&lt;p&gt;See also:\\u00a0&lt;br \\\/&gt;&lt;a href=\\&quot;https:\\\/\\\/elementor.com\\\/academy\\\/elementor-responsive-101-all-you-need-to-know\\\/\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;noopener\\&quot;&gt;Elementor Responsive 101: All You Need to Know&lt;\\\/a&gt;&lt;\\\/p&gt;&quot;,&quot;inner_tab_content_2&quot;:&quot;&lt;p&gt;Hey there, it\\u2019s Aviva from Elementor. Welcome back to How to Build a Website in Elementor.&lt;\\\/p&gt;&lt;p&gt;In the last lesson, we built the homepage for the restaurant website, Simaya, and covered concepts such as, page structuring, margin and padding, and workflow shortcuts.&lt;\\\/p&gt;&lt;p&gt;In this lesson, we\\u2019ll cover the responsive editing foundations in Elementor, optimize the Simaya homepage for responsive viewing, and set this page up, to display as the homepage on the website.&lt;\\\/p&gt;&lt;p&gt;With so many people accessing websites from different devices these days, it\\u2019s more important than ever to optimize your website for different viewports, or screen sizes.&lt;\\\/p&gt;&lt;p&gt;Elementor provides you with tools to preview your website for different devices, and optimize your designs, accordingly.&lt;\\\/p&gt;&lt;p&gt;With just a few tweaks, we\\u2019ll make the homepage display perfectly, on tablet and mobile. So let\\u2019s go!&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s start with a tour of the responsive features in Elementor.\\u00a0&lt;span&gt;First, click here, on the bottom panel, to enter responsive mode.&lt;\\\/span&gt;&lt;\\\/p&gt;&lt;p&gt;At the top of your screen you will see this panel, which shows mobile, tablet, and desktop viewport icons.&lt;\\\/p&gt;&lt;p&gt;Clicking a viewport icon will preview the page at the selected screen size&lt;\\\/p&gt;&lt;p&gt;The presence of a Viewport Icon next to any option, in the settings of a widget, column, or section, indicates that the changes made there will apply specifically to that viewport.&lt;br \\\/&gt;It\\u2019s important to understand that in most cases, responsive edits in Elementor are inherited from the larger viewport down to the smaller viewport. So this means that Desktop responsive settings are applied downward to Tablet, as well as Mobile views, and changes to Tablet settings are applied to Mobile.&lt;\\\/p&gt;&lt;p&gt;Since we\\u2019ve already got everything set up for Desktop view, we\\u2019re ready to optimize the tablet view, and apply these principles to the design.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s take a look at the Hero section. When spread out over three columns in tablet mode, the content gets cut off. Let\\u2019s modify the way they display, to give each element the attention it deserves.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll move the first column to the top, and allow it to take up the full width of the section.&lt;\\\/p&gt;&lt;p&gt;To do this, select the column and for the Column Width Percentage, type in 100.&lt;\\\/p&gt;&lt;p&gt;Ta da! As you see, the column now takes up the full width of the section pushing the other two below, into the next row.&lt;\\\/p&gt;&lt;p&gt;When this happens, the width of these two columns resets, so select the second column and set its width to 90.&lt;\\\/p&gt;&lt;p&gt;Now we just need to add some padding to the top of the inner section, like this .&lt;\\\/p&gt;&lt;p&gt;Scrolling down, we can see that the section below already looks great on tablet. Scrolling further down\\u2026 well...this section could be adjusted a bit.&lt;\\\/p&gt;&lt;p&gt;Select it, and set the Minimum height to 300 pixels.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s use a shortcut to quickly apply this setting to the two sections below. Right click the section and select Copy. Now right click the section below and select Paste Style, or use the keyboard shortcut: Command or Control Shift V. This applies the settings of the copied section, without changing the content.&lt;\\\/p&gt;&lt;p&gt;Right click the next section and Paste Style once more. Neat!&lt;\\\/p&gt;&lt;p&gt;Now select this heading, to adjust its layout. In Advanced, unlink the padding. This resets the padding to zero.&lt;\\\/p&gt;&lt;p&gt;Now Copy, and Paste Style on the next two headings.&lt;\\\/p&gt;&lt;p&gt;Scroll back up, and select the right column. In Advanced, add 5% padding to give the content a little more breathing room. Do the same for the matching columns in the next two sections. We\\u2019re not using Paste Style in this case, because it will paste the column background color as well.&lt;\\\/p&gt;&lt;p&gt;Ok, these sections are good to go. Scroll down to the last section. The heading is a bit large here, so we\\u2019ll need to update its size for tablet.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll be using this heading again on the website, so it\\u2019s a good idea to edit it from the global style, and not have to make this change again, next time we use this style on tablet.&lt;\\\/p&gt;&lt;p&gt;Click the heading, and in Style, Typography, click the global icon. You\\u2019ll notice a gear icon here. Click it, to enter the Global Fonts settings. Now click the pencil icon for the style Primary, and change the size. Since we\\u2019re in tablet mode, this will not affect the desktop font size we set previously.&lt;\\\/p&gt;&lt;p&gt;Great. Be sure to Update, and go back to the editor. Let\\u2019s take a quick look at the heading. Perfect!&lt;\\\/p&gt;&lt;p&gt;Now let\\u2019s take a look at mobile.&lt;br \\\/&gt;The Editor scrolls all the way down upon switching to mobile, so I\\u2019ll just pull up my handy navigator (now I know you know that shortcut!) and zoom back to the first section.&lt;\\\/p&gt;&lt;p&gt;By default, on mobile, each column takes up the full width of the page. So we don\\u2019t need to manually adjust the column sizes one-by-one.&lt;\\\/p&gt;&lt;p&gt;The font-size looked great for desktop and tablet, but it\\u2019s a bit large for mobile devices. Since it\\u2019s a custom style that we\\u2019re only using once on the website, there\\u2019s no need to go into the global settings.&lt;\\\/p&gt;&lt;p&gt;Click this heading, and in style, change the size of the font. And since we\\u2019re in mobile view, this change will not affect tablet or desktop views.&lt;br \\\/&gt;Scroll down, and adjust the social icons, by selecting them, and setting the columns to Auto.&lt;\\\/p&gt;&lt;p&gt;Scroll down a bit more, and you\\u2019ll see that we have two adjacent sections of text. We can actually reverse the display order of columns in responsive views, by going to Advanced, Responsive, and Toggle Reverse Columns (Mobile) to YES.&lt;\\\/p&gt;&lt;p&gt;Ok, let\\u2019s adjust the layout of the solid-colored columns, so they are proportionate to the other columns. Click the first one, and in Advanced, add 15% padding. Do the same for the other two solid color block columns.&lt;\\\/p&gt;&lt;p&gt;Great, almost done. Scroll down to the last section, and in Advanced, unlink and add some margin to the top and bottom.&lt;\\\/p&gt;&lt;p&gt;Then select the text, and add some Padding, which as you can see, adjusts the layout, making it easier to read. Perfect.&lt;\\\/p&gt;&lt;p&gt;Our responsive edits are now complete.&lt;\\\/p&gt;&lt;p&gt;Go to the bottom panel, where the save options are, and click Update to save the changes.&lt;\\\/p&gt;&lt;p&gt;Recall that we already published our page from the WordPress dashboard, but for pages that have not yet been published, the button would display \\u201cPublish\\u201d instead.&lt;\\\/p&gt;&lt;p&gt;Ok, the homepage\\u2019s layout and design is complete. We have one last step, which is to let WordPress know that this page is the homepage for the website, ensuring visitors will always land here, when entering your URL.&lt;\\\/p&gt;&lt;p&gt;Click the top left menu, and then Exit to Dashboard, to go back to WordPress. Here on the left, hover your cursor over the settings, and click \\u201cReading.\\u201d&lt;\\\/p&gt;&lt;p&gt;Make sure a static page is selected and expand the list to see your available pages. Select the home page. Click save, and your homepage is complete!&lt;br \\\/&gt;Ok great, you now know how to use Elementor\\u2019s responsive options to optimize your web pages.&lt;\\\/p&gt;&lt;p&gt;In the next lesson, we\\u2019ll build the Our Menu page, using what you\\u2019ve learned so far, as well as new concepts, including new widgets and layouts! We will also learn how to reuse elements in other ways, and save a page as a template, so keep watching to learn how.&lt;\\\/p&gt;&quot;,&quot;vimeo_url&quot;:null,&quot;type&quot;:&quot;youtube&quot;,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;},{&quot;_id&quot;:&quot;82dce7f&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=9rWCfTTlpOo&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=9&quot;,&quot;title&quot;:&quot;Creating the \\u201cOur Menu\\u201d Page&quot;,&quot;duration&quot;:&quot;17:21&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;In this lesson we will build the \\u201cOur Menu\\u201d page, learn about new widgets, discuss more efficient workflow methods, and go over some basic optimization concepts.&lt;\\\/p&gt;&lt;p&gt;This lesson will cover:&lt;\\\/p&gt;&lt;p&gt;\\u2714\\ufe0e Workflow Methods&lt;br \\\/&gt;\\u2714\\ufe0e New Widgets&lt;br \\\/&gt;\\u2714\\ufe0e New Techniques&lt;br \\\/&gt;\\u2714\\ufe0e Anchor links and CSS ID&lt;br \\\/&gt;\\u2714\\ufe0e And much more!&lt;\\\/p&gt;&quot;,&quot;inner_tab_content_2&quot;:&quot;&lt;p&gt;Hey there, it\\u2019s Aviva from Elementor. Welcome back to How to Build a Website in Elementor.&lt;\\\/p&gt;&lt;p&gt;In the last lesson, we learned about responsive editing in Elementor, optimized the homepage for devices, and designated the homepage in WordPress.&lt;\\\/p&gt;&lt;p&gt;In this lesson, we\\u2019ll create the Our Menu page, learn new widgets, and go over some new techniques to help you become a pro in no time!&lt;\\\/p&gt;&lt;p&gt;If you haven\\u2019t seen the previous lessons in this course, I highly recommend watching them, as we\\u2019ll be building off of what we learned previously.&lt;br \\\/&gt;Ok let\\u2019s get started! We\\u2019ll begin with the hero section, which as you can see from our design includes two headings, a text editor widget and a spacer widget...&lt;\\\/p&gt;&lt;p&gt;Wait a minute! Haven\\u2019t we designed a section similar to this before? We sure have! The last section of the homepage has the same widgets as this one.&lt;\\\/p&gt;&lt;p&gt;When you have sections that are very similar on your website, there\\u2019s no need to start designing again from scratch.&lt;br \\\/&gt;I\\u2019ll share a few workflow methods that will help you save time while building websites in Elementor.&lt;\\\/p&gt;&lt;p&gt;Ok, so in order to reuse that section I mentioned, we\\u2019ll need to reopen the homepage. You can hit the Escape button on your keyboard, and click here, to exit to the dashboard..&lt;\\\/p&gt;&lt;p&gt;Another way to quickly exit the Editor is to type &lt;strong&gt;Command or Control E&lt;\\\/strong&gt;, which opens the finder.&lt;\\\/p&gt;&lt;p&gt;The Finder helps you find your content easily and navigate through WordPress in no time!&lt;\\\/p&gt;&lt;p&gt;Just type the word \\u201chome,\\u201d and the homepage will display. Then hold down the &lt;strong&gt;Command or Control&lt;\\\/strong&gt; key, and click the link, to open it in a new tab.&lt;\\\/p&gt;&lt;p&gt;In the previous lesson, we copied elements and pasted them in different sections throughout the page. Now we\\u2019ll use the same method to copy from this page, and paste into the Our Menu page!&lt;\\\/p&gt;&lt;p&gt;Open the Navigator, right click the Our Story section, and click Copy. Now go back to the Our Menu page. Right click, Paste, or use the keyboard shortcut &lt;strong&gt;Command or Control V&lt;\\\/strong&gt;.&lt;\\\/p&gt;&lt;p&gt;Works like a charm.&lt;br \\\/&gt;Ok, so now let\\u2019s customize it. Click the sub-heading, and update the text. In style, change the color to Basil. Now select the second header.&lt;\\\/p&gt;&lt;p&gt;Add your text, and in style, change the color. Next, drag the text editor widget under the spacer, and type your text. In Style, change the color to basil.&lt;\\\/p&gt;&lt;p&gt;Select the spacer, and in the Advanced tab, select a new background image.&lt;\\\/p&gt;&lt;p&gt;Right click on the social icons, and delete them, as we don\\u2019t need them for this page.&lt;\\\/p&gt;&lt;p&gt;From Widgets, drag and drop the icon widget under the text editor. You can upload your own icon, or as in our case, select one from the Icon Library. Type \\u201cchevron\\u201d in the search, select one of the available chevrons, and insert it. In style, change the color. Change the size to 20.&lt;br \\\/&gt;Now select the section, and in Advanced, add a margin of 5%... Great! The Hero section is ready.&lt;\\\/p&gt;&lt;p&gt;This section, including its widgets and style, will be used over again across the rest of our site, so let\\u2019s make good use of it.&lt;\\\/p&gt;&lt;p&gt;Another way to reuse a section is to save it as a template.&lt;br \\\/&gt;To do this, right click o n the section, and select save as a template. Give it a memorable name, and click save.&lt;\\\/p&gt;&lt;p&gt;To access your templates in the future, you\\u2019ll find them, by clicking the gray folder icon, here. This opens the Templates Library, and in \\u201cMy templates,\\u201d you\\u2019ll find all of your own saved templates. Then just hover over the template, and click Insert, to add it to your page.&lt;\\\/p&gt;&lt;p&gt;As you&#039;ve just seen, copying elements and saving them as templates saves valuable time, and I encourage you to incorporate these processes into your workflow.&lt;br \\\/&gt;Let\\u2019s continue to the next section. Create a new section with one column. As we did before, we\\u2019ll give a name to the sections, so we can navigate quickly throughout the page. Open the Navigator, name the Hero section... as well as the Starters section.&lt;\\\/p&gt;&lt;p&gt;Now close the Navigator, and from the widgets menu, search for the divider widget, and drag it into the section.&lt;\\\/p&gt;&lt;p&gt;The divider widget creates an organized and aesthetic separation between sections, with a customizable line that you can combine with an icon, or even text.&lt;\\\/p&gt;&lt;p&gt;To add text to the divider, click here, and type your text.&lt;br \\\/&gt;We can\\u2019t see it at the moment, because its default color is the same color as the background.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s take care of that, so we can see what we\\u2019re working with. Go to the Style tab and change the divider\\u2019s color..&lt;\\\/p&gt;&lt;p&gt;In text, select basil for the font color.. and set the typography global style...to Section. Great!&lt;\\\/p&gt;&lt;p&gt;From the widget menu, drag and drop an inner section, below the divider. Right click here.. and select add new column.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll continue by creating the first item of our menu offering..&lt;br \\\/&gt;As we did in the previous lesson, begin by adding and styling the widgets for the first column, one by one.&lt;br \\\/&gt;From the widgets menu, drag the image widget, and drop into the first column.&lt;\\\/p&gt;&lt;p&gt;Choose an image, and in Style, adjust the width.&lt;\\\/p&gt;&lt;p&gt;Back in the widget menu, drag a heading widget under the image. Type your text, and change the html tag to H3. Now align it to the center. In Style, change the color to basil, and set the typography to the global style \\u201cMenu Titles\\u201d.&lt;\\\/p&gt;&lt;p&gt;From Widgets, drag in a text editor widget, and type your text.&lt;br \\\/&gt;Now right click on the heading, and select duplicate.&lt;br \\\/&gt;Drag it below the other widgets, and change the text..&lt;br \\\/&gt;Set its HTML tag to H4, And in Style, Typography,&lt;\\\/p&gt;&lt;p&gt;Select the\\u2026 hmm. Nothing here quite works. So let\\u2019s set one more global font style for the price text.&lt;\\\/p&gt;&lt;p&gt;Select the pencil icon to set a custom font style, and change the font size. Set its weight to 600. And in Transform, remove the Uppercase, by setting it back to default. Now click the plus icon, type a name... and save it as a Global font. Perfect!&lt;\\\/p&gt;&lt;p&gt;Select the column, and in the advanced tab, change the unit to percent, unlink the values, and add some padding, to give more space to the widgets. Great!&lt;br \\\/&gt;Now that we understand how easy it is to create each section with different widgets, let\\u2019s talk about more optimal ways to build in Elementor.&lt;\\\/p&gt;&lt;p&gt;As you familiarize yourself with the Elementor Editor, and gain more experience, you\\u2019ll find yourself coming up with ways to simplify and optimize your website building process.&lt;\\\/p&gt;&lt;p&gt;For example, widgets like the icon box... as well as the image box... include an image, a title, and a description, all in one place. Using them in the right way will reduce the amount of widgets, and can even be used to create entire sections from them. Designing this way not only boosts the performance but also reduces the loading time of your page. Win-win!&lt;br \\\/&gt;To see how this works let\\u2019s re-create this menu item, in a more optimal way.&lt;\\\/p&gt;&lt;p&gt;Drag the image box widget to the top of the column.&lt;br \\\/&gt;Add an image\\u2026 Then type the title\\u2026 And finally the text\\u2026&lt;\\\/p&gt;&lt;p&gt;In Style, there are loads of options to design and position each of the elements. Take some time, and go ahead and experiment with all the options!&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s change the image width a bit. And under content, set the title\\u2019s color to basil. For the typography, choose the global style, menu titles. Everything else looks great as is.&lt;\\\/p&gt;&lt;p&gt;Right click, and delete the previous image, title, and description. And leave only the price.&lt;\\\/p&gt;&lt;p&gt;Fantastic! We\\u2019ve achieved the same design, with fewer widgets!&lt;br \\\/&gt;Now we\\u2019ll continue, by duplicating the column twice.. and deleting the extra columns.. Click on the image box, replace the title and text. Click on the price, and change its content as well..&lt;br \\\/&gt;Great!&lt;br \\\/&gt;Repeat this one last time for the third section, and we\\u2019re done!&lt;br \\\/&gt;Sometimes the amount of text present in a widget can lead to varying section heights, creating an imbalance between the position of your widgets, just like this price here.&lt;\\\/p&gt;&lt;p&gt;It\\u2019s not wrong to leave it as is, but if you\\u2019d like all the prices to be in the exact position, there\\u2019s a simple fix for that.&lt;\\\/p&gt;&lt;p&gt;Select the inner section, and under vertical positioning, you\\u2019ll find different options that enable you to control the widgets\\u2018 position inside sections.&lt;\\\/p&gt;&lt;p&gt;Select \\u201cSpace between\\u201d which, just as the name suggests, creates space between elements, positioning the first one at the top of the column and the last one at the bottom. Looking at the prices now, they\\u2019re all at the same height! This is a super simple, but often overlooked way, to be pixel perfect.&lt;br \\\/&gt;Back in widgets, drag in a spacer widget. Set its height to 300 pixels And in the Advanced tab, uncheck the values, and add some margin.&lt;\\\/p&gt;&lt;p&gt;Next, expand the background tab and choose an image.&lt;br \\\/&gt;Set the attachment to Fixed, and the background to Cover, so the image nicely covers the spacer.&lt;\\\/p&gt;&lt;p&gt;Great.&lt;br \\\/&gt;Now, remember the arrow icon we created in our hero section?&lt;br \\\/&gt;Let\\u2019s create an anchor link, to connect the icon to this section, so when someone clicks it, it will scroll straight to the Starters!&lt;\\\/p&gt;&lt;p&gt;Select the section, and in the Advanced tab, enter the ID name \\u201cstart\\u201d.&lt;\\\/p&gt;&lt;p&gt;Now scroll up to find the button, and click on it. Under link, type the pound symbol, or hashtag, and the ID of the section. Again, be sure to type it exactly the same, as the ID name.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s test it. And, voila!&lt;br \\\/&gt;Let\\u2019s continue with the Mains. Right click the section and duplicate.&lt;\\\/p&gt;&lt;p&gt;With the second section selected, head over to the Advanced tab. You\\u2019ll notice the CSS ID is empty. As I mentioned earlier, CSS IDs should appear only once on your page, so duplicated elements do not copy the ID over...&lt;br \\\/&gt;ID names must be unique, so remember to use different names, when creating more than one anchor link!&lt;\\\/p&gt;&lt;p&gt;Now open the navigator, and change the section\\u2019s name to \\u201cMains.\\u201d Great&lt;br \\\/&gt;Select the divider, and change its text. In style, set the divider\\u2019s global color to grape, as well as the text\\u2019s color..&lt;\\\/p&gt;&lt;p&gt;Select the image box, and choose an image for the Mains. Change the title and the description..&lt;br \\\/&gt;Then go to the style tab, and under content, select the global color grape, for both the title and description.&lt;\\\/p&gt;&lt;p&gt;Now select the heading. Change the price, and in style.. Set the color to grape, as well.&lt;br \\\/&gt;We\\u2019ll repeat these steps for the next item\\u2026.&lt;br \\\/&gt;And the following one, as well...&lt;br \\\/&gt;Now select the spacer, and in the Advanced tab, choose a suitable image for the Mains.&lt;br \\\/&gt;Almost there! Just one section to go! Right click the section, and duplicate it.&lt;\\\/p&gt;&lt;p&gt;Time for dessert! Open the navigator and name the section \\u201cDesserts.\\u201d Now, select the divider\\u2026 and update the text. In Style, set both the divider and text global colors to raspberry.&lt;br \\\/&gt;Select the image box, and choose an image for the Desserts.&lt;br \\\/&gt;Change the title and the description. Then go to the Style tab, and under content, set the global color to raspberry, for both the title and description.&lt;\\\/p&gt;&lt;p&gt;Select the heading. Change the price, and in style.. Set the Raspberry color as well.&lt;br \\\/&gt;Repeat these steps for the next column, and the following one.&lt;br \\\/&gt;All that\\u2019s left now, is to change the spacer image. Select it, and in the Advanced tab, under background, use an image of your choice.&lt;\\\/p&gt;&lt;p&gt;Great. Let\\u2019s take a look at the page. Looks good enough to eat! So we\\u2019re done, right!? Well...not quite&lt;br \\\/&gt;The page does look fantastic on Desktop, but it\\u2019s really important to preview each page in responsive mode, to make sure they display correctly in all viewports.&lt;\\\/p&gt;&lt;p&gt;Use the keyboard shortcut &lt;strong&gt;Command Shift M&lt;\\\/strong&gt; to go directly to tablet view in responsive mode. It looks pretty good, but personally, I\\u2019d prefer to reduce the amount of space between columns. Click the first one, and in the advanced tab, set the padding to 10%.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll use the hotkeys we learned earlier, to copy and paste this style quickly to the other columns.&lt;\\\/p&gt;&lt;p&gt;Type &lt;strong&gt;Control or Command C&lt;\\\/strong&gt; to copy the style. Select the next one, and hold down &lt;strong&gt;Control or Command Shift V&lt;\\\/strong&gt; to paste the style. Repeat these steps for the other columns as well.&lt;\\\/p&gt;&lt;p&gt;Easy as well...pie! Now let\\u2019s see how the page looks on mobile.&lt;\\\/p&gt;&lt;p&gt;Scrolling down, the page looks perfect on mobile. Just in time, because designing this mouthwatering page has made me hungry! Click update, and preview the page. Looks great, if I say so myself.&lt;br \\\/&gt;Ok, we\\u2019ve now completed the Our Menu page, learned about new widgets, and added more techniques to our repertoire.&lt;\\\/p&gt;&lt;p&gt;In the next lesson, we\\u2019ll create the Contact Us page, which is the last page of our website. We\\u2019ll delve into the Advanced tab to learn more about optimization and best practices when building websites. So go have some dessert, and then click to keep watching!&lt;\\\/p&gt;&quot;,&quot;vimeo_url&quot;:null,&quot;type&quot;:&quot;youtube&quot;,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;},{&quot;_id&quot;:&quot;0b8cf29&quot;,&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=ksTvSAqjfyM&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=10&quot;,&quot;title&quot;:&quot;Creating the \\u201cContact Us\\u201d Page&quot;,&quot;duration&quot;:&quot;9:29&quot;,&quot;thumbnail&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;inner_tab_is_content_visible&quot;:&quot;show&quot;,&quot;inner_tab_content_1&quot;:&quot;&lt;p&gt;In this lesson we will create the \\u201cContact Us\\u201d page, cover widget positioning and more optimization methods, and conclude the course with a review and suggestions for your next steps.&lt;\\\/p&gt;&lt;p&gt;This lesson will cover:&lt;br \\\/&gt;\\u2714\\ufe0e Reusing and modifying previously saved templates and elements&lt;br \\\/&gt;\\u2714\\ufe0e Optimizing layouts using fewer columns and custom positioning&lt;br \\\/&gt;\\u2714\\ufe0e Course conclusion and review&lt;br \\\/&gt;\\u2714\\ufe0e And much more!&lt;\\\/p&gt;&quot;,&quot;inner_tab_content_2&quot;:&quot;&lt;p&gt;Hey there, it\\u2019s Aviva from Elementor. Welcome back to How to Build a Website in Elementor.&lt;\\\/p&gt;&lt;p&gt;In the previous lesson, we created the Our Menu page, covered new widgets, and sharpened our web building techniques.&lt;\\\/p&gt;&lt;p&gt;In this lesson, we\\u2019ll complete the website, by creating the Contact Us page, go over widget Positioning, and learn new website optimization methods. We\\u2019ll also conclude the course with a review, and suggest the next steps for you to take in your Elementor journey.&lt;\\\/p&gt;&lt;p&gt;Let\\u2019s open the Contact Us page, we created earlier in the course.&lt;br \\\/&gt;Hit &lt;b&gt;Command or Control E&lt;\\\/b&gt; to open the Finder, and type \\u201cContact.\\u201d&lt;\\\/p&gt;&lt;p&gt;Notice that the Contact page isn\\u2019t found. That\\u2019s because in order for it to display, we need to first convert the Contact page to an Elementor page. To do this, click Exit to the Dashboard, go back to pages, find the Contact Us page, and click to open it. Then click the \\u201cEdit with Elementor&#039;&#039; button. From now on, we\\u2019ll be able to find this page using the Elementor Finder.&lt;\\\/p&gt;&lt;p&gt;The first thing we\\u2019ll need to do is to add the template of the hero section we created previously. Click the gray folder icon, and the My Templates tab. Hover over the template, and click insert. Great.&lt;\\\/p&gt;&lt;p&gt;Change the subheading...and the heading text..&lt;br \\\/&gt;Then, select the spacer, and in the Advanced tab, change the background image.&lt;br \\\/&gt;Now go ahead and delete the other elements, as they are not needed in this page.&lt;\\\/p&gt;&lt;p&gt;Next, add an inner section, and right click here, to add one more column. This will be where we\\u2019ll add the contact information, phone number, and location.&lt;\\\/p&gt;&lt;p&gt;From the widget menu, find and drag an image box into the first column. Update the image\\u2026 Add a title, and description.&lt;\\\/p&gt;&lt;p&gt;Next, in the Style tab, change the image width.&lt;br \\\/&gt;Under content, set the title color to basil, and change the typography to button text.&lt;\\\/p&gt;&lt;p&gt;Now, change the description\\u2019s color to basil, and we\\u2019re done with our first column!&lt;\\\/p&gt;&lt;p&gt;From the Advanced tab, we\\u2019ll add some padding. To do this,&lt;br \\\/&gt;Select percent for the unit, uncheck the linked values, and add some padding.&lt;\\\/p&gt;&lt;p&gt;Right click on the column, and duplicate it twice. Now delete the empty columns.&lt;\\\/p&gt;&lt;p&gt;Update the content of the second image box, and apply different colors. Repeat this process for the last one.&lt;\\\/p&gt;&lt;p&gt;And just like that, we\\u2019ve completed this section!&lt;br \\\/&gt;As I mentioned in the previous lesson, using fewer elements, such as columns and sections, auto generates less code on your web pages, allowing them to load faster.&lt;\\\/p&gt;&lt;p&gt;So next we\\u2019ll take a look at how we can optimize this section, and recreate it without using an inner section and three columns. While this step is optional, I encourage you to give it a try, to get a better understanding of these optimization techniques.&lt;\\\/p&gt;&lt;p&gt;So, let\\u2019s do it! Right click on the first image box, and duplicate it. Now, drag it directly under the spacer. By default, every widget takes up 100 percent of the available column\\u2019s width. The blue outline shows the extent of the widget\\u2019s width.&lt;\\\/p&gt;&lt;p&gt;Dragging in the second image box, places it below the first widget, since at 100 percent, the first image box pushes the second image box below it&lt;br \\\/&gt;However, in the Advanced tab, you will have the option to change any widget\\u2019s width. Under positioning, you\\u2019ll see \\u201cWidth\\u201d, where you have a number of options.&lt;\\\/p&gt;&lt;p&gt;Full width, which is the same as the default, Inline, which resizes the widget to the width of its content, and Custom, which gives you the freedom to set the width of your choice.&lt;\\\/p&gt;&lt;p&gt;We\\u2019ll select Custom, so we can set the 3 widgets to have equal space between them, like the original 3 column layout we created before.&lt;br \\\/&gt;Now, we know that a column takes up 100 percent of the available space, so by changing the unit to percent, and typing in 100, the image box widget will continue to take up 100% of the column\\u2019s space.&lt;\\\/p&gt;&lt;p&gt;By changing it to 50, the image box will take up half of the column\\u2019s width. If we change the second second widget\\u2019s width to 50, you can see they now fit side by side in the column.&lt;\\\/p&gt;&lt;p&gt;(I think you can see where I\\u2019m going with this.) Since we have three widgets, we\\u2019ll need each of them to take up one third of the column\\u2019s width, so set the value to 33.3%. Great, now do that same for the second one.&lt;\\\/p&gt;&lt;p&gt;No go ahead and duplicate the third widget, here, and drag it above the inner section. In Advanced, under positioning, give this image box the same value. Perfect!&lt;\\\/p&gt;&lt;p&gt;We\\u2019ve now created the exact same layout for this section, but without the need for the Inner section widget and with two columns fewer.&lt;\\\/p&gt;&lt;p&gt;As you continue to gain experience building websites in Elementor, you\\u2019ll start to find yourself coming up with new approaches to building websites in more optimal ways.&lt;\\\/p&gt;&lt;p&gt;So if you\\u2019d like to give your web pages a boost, go ahead and give optimized layout a shot!&lt;br \\\/&gt;Next let\\u2019s delete the inner section, now that we no longer need it.&lt;\\\/p&gt;&lt;p&gt;The page looks great, so let\\u2019s enter responsive mode to make sure that everything displays correctly. Using the keyboard shortcut &lt;strong&gt;Command Shift M&lt;\\\/strong&gt;, will take you directly into tablet view.&lt;\\\/p&gt;&lt;p&gt;Ok, everything already looks great here so let\\u2019s switch to mobile&lt;\\\/p&gt;&lt;p&gt;The widgets display next to each other here as well, but it\\u2019s a bit tight for this view, so let\\u2019s space them out to make them more visible. Select the first image box, and in Advanced, under positioning, you\\u2019ll notice the mobile viewport icon. As you\\u2019ll recall, this indicates that any changes made to this setting will display only at this viewport size, since it\\u2019s the smallest breakpoint.&lt;\\\/p&gt;&lt;p&gt;Set it to full width. Repeat this step for the second\\u2026 And the third image box. Great, let\\u2019s preview it!&lt;\\\/p&gt;&lt;p&gt;Congratulations! You\\u2019ve now completed building your first website in Elementor. Well Done!&lt;\\\/p&gt;&lt;p&gt;So let\\u2019s recap what we\\u2019ve learned, and take a tour of the site.&lt;\\\/p&gt;&lt;p&gt;We got started by Installing and Activating the Hello theme, creating our website pages, and adding a navigation menu.&lt;\\\/p&gt;&lt;p&gt;With that done, we went on to set up our website\\u2019s design system and structure, including our header and footer.&lt;\\\/p&gt;&lt;p&gt;We then dove full force into the Elementor Editor to build the Homepage, Our Menu Page, and Contact Us Page, complete with responsive edits.&lt;\\\/p&gt;&lt;p&gt;And throughout the course, we covered lots of other tips and tricks, to make your website building process more efficient and effective.&lt;\\\/p&gt;&lt;p&gt;Now you know how to create a professional website from start to finish, without using a single line of code! Great job!&lt;\\\/p&gt;&lt;p&gt;If you\\u2019d like to further advance your skills, you\\u2019ll find links in the description to some of our many resources, including:&lt;br \\\/&gt;a playlist dedicated to the Elementor widgets, a video on responsive editing, optimization lessons, and even a full course on building a website using Elementor Pro features!&lt;br \\\/&gt;Go check them out!&lt;\\\/p&gt;&lt;p&gt;I hope you enjoyed this course and feel confident in using Elementor to design, build, and publish websites for your own business or customers.&lt;\\\/p&gt;&lt;p&gt;As always, Check out the Elementor Academy for more tips and tutorials.\\u00a0&lt;span&gt;Till next time! Thanks for watching.&lt;\\\/span&gt;&lt;\\\/p&gt;&quot;,&quot;vimeo_url&quot;:null,&quot;type&quot;:&quot;youtube&quot;,&quot;is_external_url&quot;:null,&quot;hosted_url&quot;:null,&quot;external_url&quot;:null,&quot;section_html_tag&quot;:null,&quot;video_html_tag&quot;:&quot;h4&quot;}],&quot;inner_tab_title_1&quot;:&quot;Overview&quot;,&quot;inner_tab_title_2&quot;:&quot;Transcript&quot;,&quot;inner_tab_is_content_collapsible&quot;:&quot;collapsible&quot;,&quot;inner_tab_collapsible_height&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;139&quot;,&quot;sizes&quot;:[]},&quot;autoplay_next&quot;:&quot;yes&quot;,&quot;show_watched_indication&quot;:&quot;yes&quot;,&quot;inner_tab_collapsible_height_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;inner_tab_collapsible_height_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"video-playlist.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\t\t<div class=\"e-tabs\" role=\"region\" aria-labelledby=\"e-playlist-72a4e67b\">\n\t\t\t<div class=\"e-tabs-main-area\">\n\t\t\t\t<div class=\"e-tabs-wrapper\">\n\t\t\t\t\t<div class=\"e-tabs-header\">\n\t\t\t\t\t\t<h2 class=\"e-tabs-title\" id=\"e-playlist-72a4e67b\">Getting-Started With Elementor<\/h2>\n\t\t\t\t\t\t<div class=\"e-tabs-header-right-side\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tabs-videos-count\">9 Videos<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-tabs-toggle-videos-display-button rotate-down e-font-icon-svg e-eicon-caret-down\" viewBox=\"0 0 571.4 571.4\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M571 393Q571 407 561 418L311 668Q300 679 286 679T261 668L11 418Q0 407 0 393T11 368 36 357H536Q550 357 561 368T571 393Z\"><\/path><\/svg>\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"e-tabs-items-wrapper\">\n\t\t\t\t\t\t<div class=\"e-tabs-items\" role=\"tablist\">\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<div id=\"e-tab-title-1921\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"e-tab-content-1921\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-tab-thumbnail\">\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<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">Getting Started with Elementor<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">2:03<\/span>\n\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\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 id=\"e-tab-title-1922\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-1922\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-tab-thumbnail\">\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<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">Installing Hello and Setting Up<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">5:07<\/span>\n\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\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 id=\"e-tab-title-1923\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"3\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-1923\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-tab-thumbnail\">\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<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">Elementor Editor Basics<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">6:09<\/span>\n\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\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 id=\"e-tab-title-1924\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"4\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-1924\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-tab-thumbnail\">\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<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">Building the Design System<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">5:07<\/span>\n\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\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 id=\"e-tab-title-1925\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"5\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-1925\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-tab-thumbnail\">\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<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">Website Essentials: Layout, Header &amp; Footer<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">9:35<\/span>\n\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\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 id=\"e-tab-title-1926\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"6\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-1926\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-tab-thumbnail\">\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<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">Building the Homepage in Elementor<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">29:59<\/span>\n\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\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 id=\"e-tab-title-1927\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"7\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-1927\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-tab-thumbnail\">\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<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">Responsive Design &amp; Connect the Home Page<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">9:08<\/span>\n\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\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 id=\"e-tab-title-1928\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"8\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-1928\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-tab-thumbnail\">\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<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">Creating the \u201cOur Menu\u201d Page<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">17:21<\/span>\n\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\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 id=\"e-tab-title-1929\" class=\"e-tab-title e-tab-desktop-title\" aria-selected=\"false\" data-tab=\"9\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-tab-content-1929\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-tab-thumbnail\">\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<span class=\"icon-play\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"icon-watched\"><\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h4 class=\"e-tab-title-text\">\n\t\t\t\t\t\t\t\t\t\t\t<button type=\"button\">Creating the \u201cContact Us\u201d Page<\/button>\n\t\t\t\t\t\t\t\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"e-tab-duration\">9:29<\/span>\n\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\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"shadow shadow-top\" aria-hidden=\"true\"><\/div>\n\t\t\t\t\t\t<div class=\"shadow shadow-bottom\" aria-hidden=\"true\"><\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\t<div class=\"e-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1921\" class=\"e-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1921\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=icTcREd1tAg&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=1\" data-video-type=\"youtube\" data-video-title=\"Getting Started with Elementor\" data-video-duration=\"2:03\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1922\" class=\"e-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1922\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=WAEhISns8NA&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=2\" data-video-type=\"youtube\" data-video-title=\"Installing Hello and Setting Up\" data-video-duration=\"5:07\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1923\" class=\"e-tab-content elementor-clearfix\" data-tab=\"3\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1923\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=4G3YjWnQE-o&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=4\" data-video-type=\"youtube\" data-video-title=\"Elementor Editor Basics\" data-video-duration=\"6:09\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1924\" class=\"e-tab-content elementor-clearfix\" data-tab=\"4\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1924\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=i7d9Pn1yZFs&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=5\" data-video-type=\"youtube\" data-video-title=\"Building the Design System\" data-video-duration=\"5:07\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1925\" class=\"e-tab-content elementor-clearfix\" data-tab=\"5\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1925\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=KKnFuAWtvk0&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=6\" data-video-type=\"youtube\" data-video-title=\"Website Essentials: Layout, Header &amp; Footer\" data-video-duration=\"9:35\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1926\" class=\"e-tab-content elementor-clearfix\" data-tab=\"6\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1926\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=LjQptEShDJo&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=7\" data-video-type=\"youtube\" data-video-title=\"Building the Homepage in Elementor\" data-video-duration=\"29:59\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1927\" class=\"e-tab-content elementor-clearfix\" data-tab=\"7\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1927\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=sNLlysb87gY&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=8\" data-video-type=\"youtube\" data-video-title=\"Responsive Design &amp; Connect the Home Page\" data-video-duration=\"9:08\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1928\" class=\"e-tab-content elementor-clearfix\" data-tab=\"8\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1928\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=9rWCfTTlpOo&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=9\" data-video-type=\"youtube\" data-video-title=\"Creating the \u201cOur Menu\u201d Page\" data-video-duration=\"17:21\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1929\" class=\"e-tab-content elementor-clearfix\" data-tab=\"9\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1929\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=ksTvSAqjfyM&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=10\" data-video-type=\"youtube\" data-video-title=\"Creating the \u201cContact Us\u201d Page\" data-video-duration=\"9:29\" hidden=\"hidden\">\n\t\t\t\t\t\t\t<div><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t\t<div class=\"e-tabs-inner-tabs\" >\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1921\" class=\"e-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1921\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=icTcREd1tAg&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=1\" data-video-type=\"youtube\" data-video-title=\"Getting Started with Elementor\" data-video-duration=\"2:03\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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 class=\"e-inner-tab-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Transcript<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\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<div >\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<p>Welcome to our Getting Started With Elementor course. This course was created especially for Elementor beginners, to teach the fundamentals of using Elementor to create your very first website, and at the same time have fun building it. In this course, we&#8217;ll create a three page website for Simaya, a vegan restaurant, that offers a mouthwatering plant-based menu. Feel free to use the same layout and techniques and apply them to any type of industry.<\/p><p>This course with cover:<\/p><p>\u2713 Installing and Activating the Hello theme<\/p><p>\u2713 Creating web pages and a navigation menu in WordPress<\/p><p>\u2713 Setting up your design system and website structure for your Elementor website<\/p><p>\u2713 Creating a header and footer using Elementor\u2019s, Hello theme.<\/p><p>\u2713 Using the Elementor Editor to build and fully style your entire website<\/p><p>\u2713 Website optimization methods<\/p><p>\u2713 Responsive editing<\/p><p>\u2713 Tips and tricks, best practices, and workflow<\/p><p>Prerequisites:<\/p><p>\u25cb A WordPress website<\/p><p>\u25cb Elementor Website Builder plugin<\/p><p>\u25cb Clean installation of WordPress (recommended)<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\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<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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 class=\"e-inner-tab-title e-tab-mobile-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTranscript\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div hidden class=\"e-inner-tab-content  collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\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<div >\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<p>Hi everyone, I\u2019m Aviva, a designer and educator at Elementor. I\u2019d like to welcome you to this course, How to Build Your First Website with Elementor. We here at Elementor, have created this course especially for beginner Elementor users, to teach you the fundamentals of using Elementor to create your very first website, and at the same time have fun building it.<\/p><p>In this course, we&#8217;ll create this striking three page website for Simaya, a vegan restaurant, that offers a mouthwatering plant-based menu, but of course you can use the same layout and techniques and apply them to any type of industry.<\/p><p>This course with cover:<\/p><ul><li>Installing and Activating the Hello theme<\/li><li>Creating web pages and a navigation menu in WordPress<\/li><li>Setting up your design system and website structure for your Elementor website<\/li><li>Creating a header and footer using Elementor\u2019s, Hello theme.<\/li><li>Using the Elementor Editor to build and fully style your entire website<\/li><li>Responsive editing<\/li><li>Website optimization methods<\/li><li>And lots of other tips and tricks along the way, including best practices and ways to streamline your workflow<\/li><\/ul><p><span>All you\u2019ll need to get started is:<\/span><\/p><ul><li>A WordPress website<\/li><li>And the free version of the Elementor Website Builder plugin.<\/li><li><span>I also suggest using a clean installation of WordPress.<\/span><\/li><\/ul><p>If you don\u2019t yet have a WordPress website, or the Elementor plugin installed, see the links in the description to get set up for this course.<\/p><p>You can follow along, and apply your own style, content, and images for your personal or client\u2019s needs.<\/p><p>Last but not least, I highly recommend watching each video all the way through, and in the correct order, as skipping steps may end in some unexpected results!<\/p><p>Be sure to bookmark the course, so you can come back to it at any time.<\/p><p>Keep watching, to get started with our first lesson, where we\u2018ll install our theme, set up our pages, and add a navigation menu. See you there!<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\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<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1922\" class=\"e-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1922\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=WAEhISns8NA&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=2\" data-video-type=\"youtube\" data-video-title=\"Installing Hello and Setting Up\" data-video-duration=\"5:07\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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 class=\"e-inner-tab-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Transcript<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\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<div >\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<p>In this lesson, we will learn how to install and activate the lightweight and free Hello theme, create the pages for our website, and add a WordPress navigation menu.<\/p><p>This lesson will cover:<br \/>\u2714\ufe0e Installing and Activating the Hello Theme<br \/>\u2714\ufe0e Enabling Headers and Footers in Experiments<br \/>\u2714\ufe0e Creating Website Pages<br \/>\u2714\ufe0e Adding a Navigation Menu<br \/>\u2714\ufe0e And much more!<\/p><p>\u00a0<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\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<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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 class=\"e-inner-tab-title e-tab-mobile-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTranscript\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div hidden class=\"e-inner-tab-content  collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\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<div >\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<p>Hey there, it\u2019s Aviva from Elementor. In this lesson we\u2019ll learn how to Install Elementor\u2019s lightweight theme, Hello, create the pages for our website, and add a navigation menu.<br \/>As you may know, every WordPress website requires a theme. WordPress comes with its own theme preinstalled, and there are many other themes you can choose from, as well.<\/p><p>The Hello theme, by Elementor, was developed to be fully compatible with the Elementor Website Builder. It is free to use, fast loading, and always kept up to date, so it is ideal for any website that uses Elementor, including this one.<\/p><p>Let\u2019s install it!<\/p><p>From the WordPress dashboard, go to Appearance &gt; Themes, and Click \u201cAdd New\u201d.. In the search bar, Type in \u201cHello\u201d. Click install&#8230;and activate it to change the theme to Hello.<br \/>The Hello Theme comes with a free header and footer, when used together with the Elementor plugin. That\u2019s right, free!<\/p><p>To make sure the header and footer option in Hello is enabled, go to Elementor &gt; Settings &gt; Experiments, scroll down a bit, and verify that Active is selected for Hello Theme Header and Footer. Great! We\u2019ll get back to the Header and Footer a little later in the course.<br \/><br \/>Now let\u2019s create the pages for our website. We\u2019ll need three pages for this site, a Home page, Contact Us page, and an Our Menu page.<\/p><p>Hover your cursor over the Pages tab and select Add New.<\/p><p>If it\u2019s your first time adding a page on this site, you may see a WordPress welcome popup. Click anywhere outside the popup to dismiss it.<\/p><p>Add a title by typing in \u201cHome.\u201d Click Publish&#8230;you may need to click Publish again&#8230;and that\u2019s it. You\u2019ve created your first page!<\/p><p>Next we\u2019ll add the Our Menu page for the restaurant.<\/p><p>Click here to go back to Pages, and click Add New. Type in \u201cOur Menu\u201d for the title, and Publish it.<\/p><p>And now for the last page. Add it; call this one \u201cContact Us,\u201d and Publish it.<br \/>Great! Now go back to Pages. This is where you\u2019ll find a list of all the pages on your website. You can see the three we just created here, as well as these two. Wait, how\u2019d THEY get here? Well, every new installation of WordPress comes preinstalled with a Privacy Policy page and a Sample page.<\/p><p>If you hover over any page, you\u2019ll see several page editing options, such as Trash, and Edit with Elementor. Click Trash to delete the Sample Page. I\u2019ll also go ahead and delete the Privacy Policy. However, it\u2019s always a good idea to have a Privacy Policy in place, so it\u2019s up to you to decide if you would like to keep it, and update it with your own policy, or remove it altogether.<\/p><p>Fantastic! Things are really moving along, and now that we\u2019ve created our pages, we can create the website navigation menu, which we\u2019ll be using in the Header, so that visitors can effortlessly find their way around the website.<\/p><p>To get to the Menu setup, go to Appearance &gt; Menus. Give your menu a name, &#8230;and click Create Menu.<\/p><p>You should see links to the three pages we just created, as well as an extra default custom link.<\/p><p>In the event you don\u2019t see the links here, select the pages from the left side, and click Add to Menu. Delete any unwanted pages by expanding the link and clicking Remove.<br \/>Then click and drag the links into their proper order.<\/p><p>Click Save Menu, and just like that, we\u2019re done creating our navigation menu.<\/p><p>Ok, we\u2019ve installed the Hello theme, added the website\u2019s pages, and created the navigation menu. Things are moving along!<\/p><p>In our next lesson, we\u2019ll learn the basics of using Elementor\u2019s drag and drop editor to build your website, so be sure to keep watching.<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\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<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1923\" class=\"e-tab-content elementor-clearfix\" data-tab=\"3\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1923\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=4G3YjWnQE-o&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=4\" data-video-type=\"youtube\" data-video-title=\"Elementor Editor Basics\" data-video-duration=\"6:09\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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 class=\"e-inner-tab-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Transcript<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\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<div >\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<p>In this lesson, we will dive into the Elementor Editor and learn how to structure web pages by using sections, columns, and widgets, and learn the basics of working with them.<\/p><p>This lesson will cover:<br \/>\u2714\ufe0e The Elementor Editor layout and structure<br \/>\u2714\ufe0e Adding &amp; working with widgets<br \/>\u2714\ufe0e Basic custom settings for widgets<br \/>\u2714\ufe0e And much more!<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\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<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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 class=\"e-inner-tab-title e-tab-mobile-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTranscript\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div hidden class=\"e-inner-tab-content  collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\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<div >\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<p>Hey there. It\u2019s Aviva from Elementor. Welcome back to How to Build a Website in Elementor.<\/p><p>In the previous lesson, we installed the Hello theme, created the pages for the website, and added a navigation menu. In this lesson, I\u2019ll introduce you to the Elementor Editor, and show you the basics of working with it, which will be the building blocks for creating our amazing site!<\/p><p>Ready? Let\u2019s jump right in. From the WordPress dashboard, go to the Pages section, and click the Home page we created in the previous lesson. Click \u201cEdit with Elementor\u201d.<br \/><br \/>Welcome to the Elementor editor! Let\u2019s get familiar with the interface.<\/p><p>On the right side, is the content area of the page. This is where you can add and edit elements that form the layout and design of your page.<br \/><br \/>On the left side is the Elementor panel. Here are creative tools, called widgets. Widgets are used to add elements to your page &#8211; like headings, text editors, images, videos, and more.<\/p><p>You can always access this area by clicking the widgets icon, here on the top right, in the Panel Header.<\/p><p>On the left of the Panel header, you have a hamburger menu button with several settings and navigation options.<\/p><p>Site Settings, as it sounds, allows you to globally define your site\u2019s settings.. all from one place. We\u2019ll get back to them a little later in the course.<\/p><p>Theme Builder, a Pro feature, allows you to manage all your site parts from one location. We will not be covering it in this course, but if you would like to find out more about it, you can check out our Pro course \/ our video on Theme Builder.<\/p><p>User Preferences, allow you to customize the Elementor interface, such as switching to dark mode.<\/p><p>Below is the finder, which you can also launch by using the keyboard shortcut Command or Control E. The finder is a search bar that gives you quick access across your site. We\u2019ll see it in action, later.<\/p><p>Click \u2018view page\u2019 to see your live website or \u2018exit to dashboard\u2019 to go back to your WordPress dashboard.<br \/>Bottom Panel<br \/>At the bottom, is the Panel Toolbar with a few more important tools.<\/p><p>In page settings, you can edit the page name and layout.<\/p><p>Here we\u2019ll toggle Hide Title to Yes, to hide the title that displays at the top of the page. We\u2019ll see how to add our own titles in a moment.<\/p><p>Click here for the navigator, or use the keyboard shortcut Command or Control I. The navigator displays an organized view of your page elements. Currently, it\u2019s empty because we haven&#8217;t added any content yet. We\u2019ll use it later.<\/p><p>Click here to see your edit history, and view recent changes or revert back to previous revisions.<\/p><p>And next to it is the responsive mode icon, for switching between screen sizes and making responsive edits.<\/p><p>We can preview our changes, and when ready to take them live, just hit this update button . There are other save options as well, which I\u2019ll talk about in a later video.<br \/><br \/>Okay great, now let\u2019s take a closer look at how pages are built.<\/p><p>There are two ways you can start. You can either design your pages from scratch, or use a template from the Library.<\/p><p>Let\u2019s begin with the library. Here you can preview Elementor\u2019s pre-made blocks and pages, as well as your own templates,.. and insert them into your page.<\/p><p>Filter the blocks by choosing a category or use the search bar on the right. You can also add blocks and templates to your favorites for easy access.<\/p><p>I\u2019ll go ahead and insert this block so you can see how it works.<\/p><p>If this is your first time accessing the Elementor Template Library, you\u2019ll need to connect to it with your Elementor account. You can either use an existing account, or create a new free account.<\/p><p>Great!<\/p><p>Now that we added our first block, let\u2019s get to know the Elementor Edit structure. Elementor uses three main building blocks: Sections, Columns, and Widgets.<\/p><p>Sections are the largest and can be identified by their blue border, like you see here.<\/p><p>Inside them are Columns, in this case there&#8217;s one. You can identify them by the black dashed border. These columns house widgets, such as the texts and buttons you see here<\/p><p>You control the Section, Column, and Widgets with their handle.<br \/>To edit the Section, Column, or Widget, simply Right Click their handle.<\/p><p>Where you can edit, duplicate, delete, and more.<\/p><p>You can move sections, columns and widgets around by simply dragging and dropping them. The blue line indicates where it will be positioned when you let go.<\/p><p>Another way to add sections is by clicking the plus icon over here, then simply choose one of these pre-set structures, which we can tweak to our liking, as we go, or simply delete them.<\/p><p>Sections, Columns and Widgets have 3 tabs in the panel on the left. Sections and Columns have: Layout, Style and Advanced tabs.<\/p><p>Whereas Widgets have Content, Style and Advanced tabs. Soon we\u2019ll see how these settings are used to design our page.<\/p><p>We don\u2019t need this section for our website design, so I\u2019ll go ahead and delete it as well.<\/p><p>And that wraps up the Elementor Editor overview.<\/p><p>In the next lesson, we\u2019ll set up our design system to streamline the building process and ensure consistent styling throughout the website. So watch on!<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\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<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1924\" class=\"e-tab-content elementor-clearfix\" data-tab=\"4\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1924\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=i7d9Pn1yZFs&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=5\" data-video-type=\"youtube\" data-video-title=\"Building the Design System\" data-video-duration=\"5:07\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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 class=\"e-inner-tab-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Transcript<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\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<div >\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<p>In this lesson we will build our design system for our website, to simplify the building process and guide us in styling our website&#8217;s elements.<\/p><p>This lesson will cover:<br \/>\u2714\ufe0e Configuring Site Settings<br \/>\u2714\ufe0e Setting up Global Colors<br \/>\u2714\ufe0e How to set up and create Global Fonts<br \/>\u2714\ufe0e And much more!<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\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<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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 class=\"e-inner-tab-title e-tab-mobile-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTranscript\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div hidden class=\"e-inner-tab-content  collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\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<div >\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<p>Hey there, it\u2019s Aviva from Elementor. Welcome back to how to Build a Website in Elementor. In the previous lesson, we learned the basics of using the Elementor Editor to structure our web pages.<\/p><p>In this lesson, we\u2019re going to build our design system, which will help simplify the building process and guide us in styling the elements of our website.<br \/>So what is a design system and why should you use one?<br \/>In order for a website to be effective, it needs to have clear and consistent messaging. This messaging is expressed through both the website\u2019s content and design.<\/p><p>By establishing a clear set of guidelines, you\u2019ll create a more efficient building process, which will both save you time, and allow you to maintain consistency throughout your site.<\/p><p>This is where a Design System comes in handy. A design system is a collection of pre-set, ready to use styles, that will help structure your website, and give it that clean and polished look.<\/p><p>I\u2019ve already created a file for my website, which contains the design, as well as all the elements I\u2019ll need to build my website. I created this file in Adobe XD, but you should feel free to create it using whichever tools you\u2019re comfortable with.<\/p><p>Design systems can range from simple to complex, depending on the branding and website requirements, but most design systems include a visual listing of the main colors, and typographic styles of the website. So let\u2019s see how we can implement these elements into Elementor for a streamlined building experience.<\/p><p>As we learned in our last lesson, we can add a widget by dragging it in, and customizing it with the style tab. Using this method, I\u2019ve already placed four headings here to demonstrate how a Design System can benefit your site.<\/p><p>Let\u2019s start by selecting the first heading, and going to the style tab. Widgets placed in the Editor already come in with preset default styles.<\/p><p>The global icon here, indicates that there is a Global style setting available for either a color or font. When the icon is blue, it means that a Global style is currently applied to this setting.<\/p><p>For example, this heading\u2019s color is already set to a global primary color, and its typography is set to a global primary font. Note that choosing a custom color, will turn the icon grey, indicating it no longer has the global style applied.<\/p><p>Using global styles, as opposed to setting custom colors and fonts individually, is considered best practice. Not only does it speed up your work process, it requires less CSS to load, and allows your website to load faster.<\/p><p>I\u2019ll go ahead and apply a different global style to each heading on the page. Now that we have global styles applied to every heading, let\u2019s edit them to match the Design System of our site.<\/p><p>Open the menu and select Site Settings. Notice that the panel header color changes to light blue, indicating that you are now editing globally, across your site. These settings can be accessed from any Elementor page.<\/p><p>Click global colors and adjust each color to match the color palette from your design. You can also rename a color by simply clicking on it, and typing a new name. 5<\/p><p>As you make adjustments, any widget with a global style selected, will update with the modified style.<\/p><p>Now that we\u2019re done setting up the website colors, we\u2019ll go back and set up the global fonts.<\/p><p>Since the global color we\u2019ve applied to this heading is white, it\u2019s not showing on the white background, but it will be visible when we use it on a dark background.<\/p><p>You can add more global color or font styles by clicking \u201cAdd Style\u201d and customizing its settings.<\/p><p>Global fonts also allow you to customize different settings for responsive viewing. We\u2019ll set these up in a later lesson, to give you the opportunity to preview them directly in your designs.<\/p><p>And there you have it! We&#8217;ve now created our very own design system, which will help us streamline the design process considerably .<\/p><p>In our next lesson, we\u2019ll continue setting up our site using the Site Settings, and create the header and footer for our website, so be sure to keep watching.<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\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<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1925\" class=\"e-tab-content elementor-clearfix\" data-tab=\"5\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1925\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=KKnFuAWtvk0&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=6\" data-video-type=\"youtube\" data-video-title=\"Website Essentials: Layout, Header &amp; Footer\" data-video-duration=\"9:35\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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 class=\"e-inner-tab-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Transcript<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\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<div >\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<p>In this lesson we will define our website settings and structure using the free Hello theme, including the site identity, header, footer, and site layout.<\/p><p>This lesson will cover:<br \/>\u2714\ufe0e How to set up your Site ID, including site name, site logo, and favicon<br \/>\u2714\ufe0e How to create and style a Header<br \/>\u2714\ufe0e How to create and style a Footer<br \/>\u2714\ufe0e How to edit your website layout settings<br \/>\u2714\ufe0e And much more!<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\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<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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 class=\"e-inner-tab-title e-tab-mobile-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTranscript\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div hidden class=\"e-inner-tab-content  collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\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<div >\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<p>Hey there, it\u2019s Aviva from Elementor. Welcome back to How to Build a Website in Elementor.<br \/><br \/>In the previous lesson, we set up our design system, and in this lesson, we&#8217;ll build on that to define the website settings and structure, which include elements such as site identity, the header and footer, and the site layout.<\/p><p>If you\u2019re like me, you probably can\u2019t wait to get started on designing your homepage.<\/p><p>And we\u2019re ALMOST there! But setting up the site structure is integral to creating a website, so I highly recommend completing this step before you get started building.<\/p><p>We\u2019ll begin with the Site Identity, here. This section is where you define your website\u2019s site name, description, logo, and favicon. These details will be called upon repeatedly for reuse in a variety of locations throughout your site, as well as externally, such as in web search results.<\/p><p>Enter your Site Name&#8230;and your Site Description, which is also known as the tagline. This information will display in search results, so it should be accurate and contain relevant keywords.<\/p><p>Next, we\u2019ll add the website logo. You can choose from many different image file types, but for beginners, I recommend starting with a JPG or PNG file. PNGs are great for logos because they display text and iconic graphics in better quality, and they allow for transparent backgrounds, so this is what I\u2019ll use.<\/p><p>Click the plus icon to upload your logo. Then Upload Files, select your logo, and Insert Media.<\/p><p>Last is the Site Favicon. Your favicon appears in your site\u2019s browser tab for quick and easy identification of your site, among other browser tabs. Ideally it should be a minimalistic graphic without too much detail, since it displays at a very small size.<\/p><p>Click Update, and Refresh the page to preview these changes. Refreshing the page, brings us back to the Editor, so click the Hamburger menu and Site Settings to go back to the main site settings menu.<br \/><br \/>Next we\u2019ll create and style the Header and navigation menu. The header appears at the top of each page, and helps guide visitors as they navigate the site.<\/p><p>Before we begin, let\u2019s consult the design, so we can quickly apply all the right settings. We have a logo in the upper left corner, and on the right, we have a menu with all the links to the pages on the site.<\/p><p>Great, so now we can go ahead and carry out this design via the Header settings.<\/p><p>Note that the Header and Footer options you see here, will only display if you have the Hello theme installed.<br \/>Click to enter the Header settings.<\/p><p>We\u2019ll go through each option, and configure the elements we\u2019d like to appear in the header, along with their layout, and styling.<\/p><p>As per the design, the logo should display, so leave the site logo on the default of SHOW. Next toggle the Tagline to HIDE as it\u2019s not used in the design, and keep the menu on SHOW.<\/p><p>Even though the menu is set to show, nothing is displayed because we haven\u2019t yet selected a menu.<\/p><p>Let\u2019s skip ahead in the settings to set that up, so we can see what we\u2019re working with.<br \/><br \/>Click Menu, here at the bottom&#8230;and select the menu we created earlier in the course. To display the selected menu, we\u2019ll need to Update&#8230;and refresh. Perfect.<br \/>Let\u2019s continue where we left off in the Header settings and check out the different available layouts. The default layout is a perfect match for our design.<\/p><p>Now we\u2019ll take a look at the width options. Full width will bring the outer elements of the header content to the edge of the screen, and Boxed keeps the content confined to a container of a specific size. Set it back to Boxed.<\/p><p>In the Content With, you\u2019ll notice the percent sign and PX for Pixels. This indicates that you can choose the unit of measure for this setting. In this case, PX is the default. You can use the slider to set the width, but in the XD document, we saw that the website was designed to span 1,500 pixels, so you can type in 1,500 to be precise.<\/p><p>Now set the gap to 20px to allow for the white space that we saw around each section of the design.<\/p><p>Below that is the background type. You can use it to set a background style, such as a color or gradient. Go ahead and have fun playing around with it, as these are options you\u2019ll see again in the figure when you build the rest of your site.<\/p><p>When you\u2019re done, click the square color swatch and clear the color by clicking this icon, to leave it on the default of white.<br \/>Click Site Logo. Switch it from Title to Logo. Whoa, that\u2019s a bit large. Type in 125 for the width.<\/p><p>Now we just need to style the menu and we\u2019ll be done with the header!<\/p><p>We already selected the Menu to display, so we can move straight to Menu Layout. Switching to Dropdown will set the menu as a hamburger icon for all sizes. We\u2019ll leave it on Horizontal\u2026and use the breakpoint to set the size, at which the toggle, or hamburger, icon displays.<\/p><p>Since we only have three pages on this site, they\u2019ll still fit nicely at Tablet size, and we won\u2019t need the breakpoint&#8230; to kick in until the display hits Mobile size.<\/p><p>Next to color, click the global icon and select the \u201cgrape\u201d global color we created earlier in the course, to set the navigation menu links\u2019 color.<\/p><p>Do the same, for Toggle color. We can&#8217;t see it yet, but we will in just a moment, when we preview the header in mobile view.<\/p><p>And last, for Typography, click the global icon to choose the Global font style we created for the Navigation Menu Links.<br \/><br \/>Ok it\u2019s time to preview the design for Responsive. Click the responsive icon, here on the bottom panel.<\/p><p>Perfect, everything looks good on mobile. The hamburger menu appears, and we can click it to see the menu. Switch to tablet, by clicking the tablet icon at the top of the editor. Tablet looks great too, so we don\u2019t need to make any responsive changes here. But don\u2019t worry, we\u2019ll cover how to make device specific changes in detail, later in the course.<\/p><p>And with that the Header is ready. Time to take care of the Footer. Exit Responsive mode, click back, and click Footer.<br \/><br \/>Referencing the site design, we can see the Footer consists of a colored background and copyright text in the center. Back in the Editor, the first thing you\u2019ll notice is that the footer settings are pretty similar to the Header\u2019s. So let\u2019s run through them quickly.<\/p><p>Go ahead and hide the Site Logo, Tagline, and Menu, as we don\u2019t need these elements. Set the Layout to Centered, and the content width to Boxed, 1,500 pixels as we did in the Header.<\/p><p>For the background, click the paintbrush icon for Classic, and select Grape.<\/p><p>Expand the copyright section and type in your text. Select a global color for the text, and a global font one for the Typography.<\/p><p>Click to preview for responsive. Everything looks great!<\/p><p>The header and footer will automatically repeat on every page on the website, unless they are disabled from the Page settings. This will allow your visitors to easily navigate throughout the site to find what they are looking for.<\/p><p>Click to return to Desktop, and go back to the Site Settings.<br \/><br \/>Click to enter the Layout settings. Recall that the width of the website content is 1,500 pixels. Rather than set this on each individual page, we can set it once and apply it to all the pages, by doing it here in Site Settings.<\/p><p>For the content width, type in 1,500. Set the Default Page Layout to Elementor Full Width, to hide the title and display the Header and Footer on every page. Great, let\u2019s Update to save the site settings, and go back to the Editor.<\/p><p>I\u2019ll go ahead and remove the examples from the page by right clicking here and selecting Delete All Content.<br \/>Now with the website layout and structure ready, and a fresh clean page, it\u2019s time to start building the page content! So keep watching, and join us in the next lesson, where we\u2019ll build our homepage.<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\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<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1926\" class=\"e-tab-content elementor-clearfix\" data-tab=\"6\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1926\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=LjQptEShDJo&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=7\" data-video-type=\"youtube\" data-video-title=\"Building the Homepage in Elementor\" data-video-duration=\"29:59\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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 class=\"e-inner-tab-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Transcript<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\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<div >\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<p>In this lesson we will use the Elementor widgets to structure and build our for a restaurant website homepage. We will introduce Elementor\u2019s essential widgets and learn to customize them.<\/p><p>This lesson will cover:<br \/>\u2714\ufe0e How to structure your page<br \/>\u2714\ufe0e The basic Elementor widgets<br \/>\u2714\ufe0e How to customize and style your page elements<br \/>\u2714\ufe0e Image file best practices<br \/>\u2714\ufe0e Workflow enhancements<br \/>\u2714\ufe0e And much more!<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\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<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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 class=\"e-inner-tab-title e-tab-mobile-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTranscript\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div hidden class=\"e-inner-tab-content  collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\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<div >\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<p>Hey there it\u2019s Aviva from Elementor. Welcome back to How to Build a Website in Elementor.<\/p><p>In the previous lesson, we customized the settings and structured the layout of our website. And now for the fun: We\u2019re ready to start building our homepage with Elementor!<\/p><p>Referring back to our design, the first section we\u2019ll build is the hero section. This section consists of several elements, both stacked, and arranged side-by-side, and here, you\u2019ll learn how to completely customize and style sections, columns, and widgets.<\/p><p>The following four sections are very similar to each other in structure and content, so we\u2019ll use that to our advantage, with workflow shortcuts, such as duplicating, and copying and pasting elements.<\/p><p>The last section has a simpler structure, so we\u2019ll continue building on the skills we\u2019ve learned from the previous sections and introduce more workflow tips.<\/p><p>There is generally more than one way to achieve any layout, and since we have designed this course for beginners, to build SImaya, we\u2019ve opted to teach using more straightforward structuring methods.<\/p><p>Ok, let\u2019s start building! We\u2019ll start by setting up a container, which will hold the hero content.<\/p><p>Back in the Editor, click the plus icon to create a new section., and select one column for its structure. Next, we\u2019ll add an inner section, which is a secondary section, that can be nested within a main section (to help structure other elements). Click the widget menu to display all the available widgets, and drag and drop an inner section widget inside your column.<br \/>Upon placing any widget in the Editor, it is automatically selected and all available settings are displayed in the left Panel. Should a widget become deselected, just click on it, to get back to its settings.<\/p><p>By default, a section acquires the height of the widgets placed within it. But you also have an option to specify a section\u2019s minimum height, which means that the section will always take up at least the specified amount, regardless of its content.<\/p><p>To do this, in Layout, for the height option, select Min Height, and set it to 700 pixels<\/p><p>Elementor allows you to add a background color or image to any section, column or widget.<\/p><p>So let\u2019s go ahead and add a background color to the column. You can find most of the style settings in the Style tab, so click Style, and for background type, select Classic.<\/p><p>For the color, click the Global icon, and select the Global color \u201cGrape,\u201d which we created earlier, when we set up our design system.<\/p><p>Nice! Now that the container is ready, let\u2019s start adding the widgets.<\/p><p>We\u2019ll start with the first heading. Click the widgets menu, and drag and drop the heading widget in the first column of the inner section.<\/p><p>Type your text and\u2026oops&#8230; where did it go!?<\/p><p>When you add a widget, by default it automatically picks up a Global color; in this case, it has the same color as our background.<\/p><p>To make the Heading visible, head to the Style tab, and select the global color, Almond.\u00a0Much better!<\/p><p>In typography, we\u2019ll change the default font a bit to match our design, by clicking the pencil icon, and customizing its style. We didn\u2019t create a global font for this Heading, since we\u2019re only using this particular style once on our website.<\/p><p>Now back in the content tab, align the text to the center.<br \/>To save some time, we\u2019ll duplicate this heading to create a subheading, by right clicking the heading and selecting duplicate, or by using the keyboard shortcut, <strong>Command or Control D<\/strong>.<\/p><p>Now select this heading. And type in the subheading text.<\/p><p>Next we\u2019ll update the HTML tag. Every time you add a heading widget, a default HTML tag of H2 is applied. Heading tags establish text hierarchy within the page. The smaller the H number, the more important a heading is, and it is best practice to set them accordingly. Since this is a subheading, switch it to H3.<\/p><p>Now let\u2019s change the font style. For this one, we\u2019ll select the global font, \u201cSecondary.\u201d Great!<\/p><p>Now we\u2019ll add a button. From the widgets menu, drag and drop the button widget under the heading. Update the text,\u00a0 and align it to the center.<\/p><p>We need this button to take visitors to the Our Menu page, so the first thing we\u2019ll do is link it up. By typing its name here, one or more suggestions will pop up. Simply select the correct page, and voila, it\u2019s linked!<\/p><p>Now let\u2019s Style it. In Typography, select the \u201cButton text\u201d Global font.<\/p><p>For the button\u2019s background, our design calls for a transparent background. To set this, click the color swatch and drag the slider, which controls opacity, all the way to the left, for complete transparency.<\/p><p>Since we\u2019re going to need transparency again in our design, let\u2019s save it as a Global style. Rather than go back to Site Settings, as when we were setting up the design system, we can also add global styles directly from the Editor.<\/p><p>Click the plus icon, and type \u201cTransparent\u201d to name it; then click Create. As you can see, it\u2019s now been added to our Global colors.<\/p><p>Below, we\u2019ll style the button\u2019s border. In Border Type, select Solid and set its width to 1px.<br \/>Set its global color to Almond, and border radius to zero, to remove any default rounded corners.<\/p><p>Now let\u2019s set the padding. Padding, in short, will add space between the border and content, to give the content some breathing room. The amount of space around the content is controlled by entering values here. By default, the link icon is active, which means that changing any value, will apply the changes to each side.<\/p><p>To deactivate linked values, and enable different values on each side, click the link icon, which will deselect, and unlink the values. We\u2019ll adjust the button\u2019s padding according to the design.<\/p><p>Next we\u2019ll update the hover state of the button, which is how the button displays on mouseover. Click the hover tab, and change the text colour to Grape. Select Classic for the background type, and Almond for the background colour.<\/p><p>Adding a hover animation will give it a playful touch. We\u2019ll select shrink.<\/p><p>Hover over the button to preview. It looks great!<\/p><p>The next element in the hero is the soup image.<\/p><p>So, in the widgets menu, drag and drop an image widget into the second column.<\/p><p>Then click here, to select your image.<\/p><p>You can upload your image by clicking the \u201cupload files\u201d tab and then \u201cSelect Files,\u201d or you can simply drag and drop it like this.<\/p><p>For best practice, be sure your image has a descriptive file name. Then add a title, and Alt Text. This makes your website more accessible, and will help boost your website in search results!<\/p><p>Another important thing to keep in mind when uploading images, is the file size. Try to keep image size to 200 kilobytes or smaller, as they may affect the resources and speed of your website.<\/p><p>One of the most commonly asked questions when building websites is: \u201cWhat are the right dimensions for web images?\u201d<\/p><p>You can calculate the dimensions of your images, according to the common screen sizes. The most common (desktop) screen size is 1920 x 1080, so ideally an image of 2000px wide will work perfectly for a hero section that takes up the full width of the screen.<\/p><p>In our case, the image will be the width of about half the screen, so 1000px wide will be enough. Ok, once you\u2019ve selected your image, go ahead and click Insert.<\/p><p>To make the image seamlessly blend into the background, I used the same color background as the hero section when I created the image. Another way to achieve this effect is to use an image with a transparent background.<br \/>Now let\u2019s add one more column to the Hero section, where we\u2019ll place the social icons.<\/p><p>Right click the second column, and select Add new column.<br \/>Great.<\/p><p>Now go to the widgets menu, search for social icons, and drag the widget here.<\/p><p>You can select the social icons of your choice. In our case, we\u2019ll replace Youtube with Instagram.<\/p><p>Click to expand the options; then click the icon. This opens the icon libraries, complete with a wide range of free icons for you to use in Elementor!<\/p><p>Begin typing Instagram in the search bar to quickly find it, and insert the icon by clicking here. Now, add a social link to each icon. In shapes, choose square, to match the site design.<\/p><p>Depending on the number of the social icons used, we can manually select the number of columns they\u2019ll be divided into, or leave it on auto, to automatically stack the icons. We want our icons to be stacked in one column, so we\u2019ll select 1.<\/p><p>Ok, let\u2019s style them. In the Style tab, select Custom for the color. Then for primary color, select the new transparent global we created earlier. For the secondary color, select Almond.<\/p><p>Let\u2019s add more interactivity to the icons by setting the icon hover effect. For primary color, select almond, and for secondary, choose the grape.<\/p><p>And as for even more interactivity, we can also add a hover animation! Click hover animation options and select shrink, like we did with the button.<\/p><p>Wow! Who wouldn\u2019t want to click those links!?<br \/>The column is a bit wide for the social icons, so let\u2019s change its width. You can click and drag the column from its right edge, to visually adjust the column width&#8230; or select the column, and type in a precise value for column width.<\/p><p>The column width is measured in percentage, so typing in the number 5, will set the column to take up five percent of the total section width. This looks great, here.<\/p><p>Now, the only thing left to do for the hero section, is to vertically align the widgets to the middle.<\/p><p>The vertical alignment of widgets can be controlled via the Layout Settings in sections and inner sections.<\/p><p>Select the inner section, and in Vertical Align, select, select middle. Cool!<\/p><p>And with that, the hero section is complete!<\/p><p>Now we\u2019re ready to create the second section. As we can see in our design, this section will provide some basic information about Simaya with an image and some informational text.<\/p><p>Click here, to add a new section and select the two column structure.<\/p><p>We\u2019re going to set the minimum height to VH, to create some vertical space. VH stands for Viewport Height. It is a unit equal to your browser\u2019s window size. So, 100VH is equal to 100 percent of your window\u2019s height. I\u2019ll enter 50VH which gives the section half of the window\u2019s height.<\/p><p>Great! Now set the Column Position within the Section, to Stretch. This will allow the columns inside the section to expand, getting the same height as the section they\u2019re in!<\/p><p>Next, in structure, you can select one of the predefined structures, to quickly change the width of your columns.<br \/>We\u2019ll select this one, which will provide us with more space for our text in the second column.<\/p><p>Now we\u2019ll add a background image to the left column. Select it, and in Style, select the classic background, and click here to choose your image.<\/p><p>While we\u2019re here, let\u2019s go ahead and upload all the rest of the images we&#8217;ll be using on the site. That way, we can skip the upload process in the future. Simply select them from your folder and drop them in here.<\/p><p>Once you upload them, just select the image for this column, and click here to insert it. As you can see, it automatically expands proportionally to take up the whole area of the section.<\/p><p>Setting an image as a background gives us extra control and effects to choose from.<\/p><p>In Attachment, the default option is scroll, which as you can see scrolls along with the page<\/p><p>For our website, we\u2018ll select Fixed Attachment, which keeps the image fixed in place in the background, giving the illusion of the website scrolling over it.<\/p><p>To further control how the image displays, we\u2019ll edit its background size. You\u2019ll see many options, like Cover, which will make the image proportionally fill the width and height of the column, or Contain, where the image will stay always visible horizontally and vertically inside the column.<\/p><p>We\u2019ll select \u201ccover\u201d for this design. Since we chose Fixed Attachment earlier, selecting Cover will make the image proportionally fill the width and height of our viewport, instead of just the column.<br \/>Now I\u2019d like to add some white space around the column. To do this, navigate to the Advanced tab, where you&#8217;ll see Margin and Padding.<\/p><p>These options will be found in every section, column, and widget, under this tab.<\/p><p>These two options are commonly known to create confusion, since both are used to create space, and users often aren\u2019t sure which one to choose.<\/p><p>While they both add space, they are used for different reasons, and to achieve different results.<\/p><p>Before demonstrating the differences, let\u2019s populate the column with a widget. If a column doesn\u2019t have any widgets inside, some changes, like padding and margin, will not display.<\/p><p>Drag a spacer widget and drop it into the column. Spacers, as the name suggests, create space. Let&#8217;s give it some height as well. Now select the column again, and in the Advanced tab let\u2019s begin with Margin.<\/p><p>Margin is used to create space between an element and the content around it.<br \/>For columns like this one, you\u2019ll see, that setting a value for the margin, will create a space outside its content, making the entire column smaller.<\/p><p>Padding is used to create space within the element itself. Let\u2019s add a little padding to better understand it.<\/p><p>As you can see, it creates space inside the column itself which makes the spacer smaller.<\/p><p>Since we want to create some space outside the column to match the layout of the page, we\u2018ll use margin, here . Set it to 10 pixels.<\/p><p>Now let\u2019s add our content to the second column. From the widgets menu, drag and drop the heading widget here.<br \/>Change its text, and set the html tag to H3 since this will be a subheading. In style, set the typography to secondary.<\/p><p>Next, from the widgets menu, drag and drop in another heading. Change its text, and in Style, change its size, and change the letter spacing a bit. We\u2019ll go ahead and create a new global font style, since we\u2019ll be using this style again.<\/p><p>Click the plus icon and name it \u201cSection text,\u201d then click create. As you can see, it\u2019s already been added to the list!<\/p><p>Now, back in the widgets menu, find and drag the text editor widget below the heading. This widget is ideal for adding and styling text copy. Type your text, and in style, change the text color to Grape.<\/p><p>Now let\u2019s tweak the widgets&#8217; spacing within the column. Click the column, and set the Vertical alignment to Middle. In the Advanced tab, for the padding, select percent for the unit, and set it to 10. Great. Section two is complete.<br \/>Let\u2019s create our next section. To save some time, right click this section and select \u201cDuplicate.\u201d<\/p><p>This section should have three columns, so right click the first column, and click, \u201cAdd New Column\u201d to insert another column. Perfect!<\/p><p>As I showed you earlier, Elementor not only allows you to drag and drop widgets from the widget menu into your page, you can also drag widgets, columns, and sections within the Editor to rearrange their order.<\/p><p>Let\u2019s rearrange the position of some of the elements to see it in action. Starting with this column, click and drag it all the way to the left, to place it here. Now, right click, and delete this heading, And drag the remaining heading to this column.<\/p><p>Now that we&#8217;ve re-arranged the columns and their elements, we\u2019ll update the content and style.<\/p><p>Click the text editor widget and replace the text. Now select the column and in the Advanced tab, increase the padding. Great!<\/p><p>Next, select the second column, and in style, replace the background image. Change its position a bit, by setting it to the center.<br \/>Now let\u2019s edit the third column. Select it, and under Vertical alignment, select Middle. This positions all the widgets vertically to the center. In Style, give it a background color. In the Advanced tab, add 10 pixels of margin to match the other columns.<\/p><p>Now click the heading, and in style, select the global color, Almond, to give a strong contrast. Back in the Content tab, type the text, and align it to the center.<\/p><p>And in the Advanced tab, unlink the padding, and set the right and left values to 30 percent.<\/p><p>Next we\u2019ll need a button. Since we designed one already in our hero section, let\u2019s save ourselves some work and reuse it. Scroll up. Right click on it, and select \u201ccopy.\u201d This will copy the entire widget, including all its settings.<\/p><p>Scrolling back down to the section\u2026 right click again inside the column, and select paste.<\/p><p>Now type your text, and just like that, the button is done. We\u2019ll come back to link this button to the end of the page, a bit later, once we\u2019ve built the last section.<\/p><p>Now, we&#8217;ll add an image widget. Select your image, and Insert it.<\/p><p>For this example I used a transparent png image, but you can use any image you\u2019d like.<\/p><p>Next, in Style, set the width to 20 percent. And&#8230;done!<br \/>With every new section we add, the length of the page is increased, which can make it more difficult to navigate within the Editor. This is where the Navigator comes in.<\/p><p>You\u2019ll find the Navigator here, in the Panel Toolbar. Click to open it, or use the keyboard shortcut, <strong>Command or Control I<\/strong>. You&#8217;ll see that a new window pops up, that displays the page\u2019s sections, columns and widgets in expandable layer format.<\/p><p>Clicking any item, will navigate you directly to it and enable its settings. You can drag and drop elements to reposition them, like this.<\/p><p>To make it easier to navigate through each section, let\u2019s rename the ones we\u2019ve added so far.<\/p><p>Double click the first one, and give it the name, \u201cHero.\u201d<br \/>Next, double click the second section and give it a memorable name. Repeat this for the third section.<\/p><p>Right click the third section, where you\u2019ll find even more options, and select \u201cDuplicate\u201d to create a copy of it. Double click it, and name this section. Great. Go ahead and close the Navigator for now.<\/p><p>Delete the first column since we won\u2019t need it here, and reposition the columns by dragging the second column to the left. Change its width to match one third of the column, or 33.33 percent.<\/p><p>And in style, change the background color to Basil.<br \/>Now we&#8217;ll update the content.<br \/>Click the image widget, and replace it with a new image. Click the heading and update the text. Select the button, and replace the text. There&#8217;s no need to update the link, since it&#8217;s already connected to the Our Menu page.<\/p><p>In style, change the hover color to basil to match the background.<\/p><p>Next, click the column to enter its settings, and in style, replace this image with a new one. And that\u2019s it! We\u2019re already done with this section!<\/p><p>Moving right along, let\u2019s add another section, following the same design style.<\/p><p>Open the navigator, using the shortcut we learned before. Right click this section and select \u201cDuplicate\u201d. Give it a name. And Drag it all the way to the bottom. Now drag the second column to the end of the section, and in Style, replace the existing image with the new one. Go ahead and close the navigator.<\/p><p>Select the second column, and in style, change the background color to raspberry. Replace the image, update the Heading content, and the button text. And link it to the Contact Us page<br \/>In style, change the hover color option to match the background.<\/p><p>Next, click on the text editor, and replace the text. Great!<\/p><p>The last section, as you can see in the design, features the story of Simaya.<\/p><p>Create a new section with one column. Open the Navigator, and name the section.<\/p><p>Now, remember the Our Story button from the third column?<br \/>There\u2019s a super simple way to create an anchor link to this section, so when the button is clicked, the page will scroll right to it. Let\u2019s do it!<\/p><p>In the Advanced tab, you\u2019ll see the option, CSS ID, which is used to provide a unique name that can be given to only one element on a page.<\/p><p>Let\u2019s give it the name \u201cstory.\u201d<\/p><p>From the navigator, click the \u201cSince 1998\u201d section. And in link, type, hashtag, and the ID name of the section.<\/p><p>The CSS ID is case sensitive, so be sure to use exactly the same word in both the ID and the link.<\/p><p>Ok, let\u2019s see if it works. Click the button. Fantastic!<br \/>Now close the Navigator, using the same shortcut, we used to open it. From the widgets menu, drag and drop the heading widget into the column. Name it Our Story, and align it to the center.<\/p><p>Hold down <strong>Command or Control D<\/strong> to duplicate the heading. This will be the subheading. Click it to change the text.. And set it to H3. In style, select a global font for the typography, to match the design.<\/p><p>Back in widgets, drag the text editor under the headings, and update the text..<\/p><p>In Style, align it to the center, and select a Global color.<\/p><p>And in the advanced tab, we\u2019ll control the width of the text content by adding some padding on the right and left sides.<\/p><p>Perfect!<\/p><p>From the widget menu, let\u2019s add a spacer widget.<br \/>Spacers, as I mentioned before, are used to create space, for example between widgets, or to create line breaks.<\/p><p>Set its height to 300 pixels. In Advanced, add a background image to the spacer. Set the Attachment to Fixed and the size to Cover.<\/p><p>Now, expand the Advanced tab, and add some space above and below, by unlinking, and adding a margin to the top and bottom of the widget.<\/p><p>Now we\u2019ll add our social media icons. We&#8217;ll use the same ones we created previously in the hero section.<\/p><p>Open the Navigator, and select the hero section. Drag the Navigator window over a bit, so we can see the icons in the Editor, and right click to copy the social icons.<\/p><p>Click the last section to take us back to the bottom of the page. Right click the spacer, and select paste.<br \/>Hooray for the Navigator!<\/p><p>You can\u2019t see the icons yet, so go to Style, and change the secondary color here, as well as for the hover state.<\/p><p>Go to Content, and set the Columns to Auto. In the Navigator, click the our Story section, and in Advanced, change the Margin unit to percent. Type in 10 to add ten percent margin to the top and bottom of the section.<\/p><p>Ok, time to preview! Click the first section to jump to the top of the page, and close the Navigator. Click the icon here to hide the panel or use the shortcut <strong>Command or Control P<\/strong>.<\/p><p>Everything looks great here in the Desktop view, and we\u2019ve now completed the desktop version of the homepage. You\u2019re already becoming a pro at creating and customizing sections, columns, and widgets. Continue to the next lesson, to learn how to optimize your webpages for responsive viewing. See you there!<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\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<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1927\" class=\"e-tab-content elementor-clearfix\" data-tab=\"7\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1927\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=sNLlysb87gY&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=8\" data-video-type=\"youtube\" data-video-title=\"Responsive Design &amp; Connect the Home Page\" data-video-duration=\"9:08\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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 class=\"e-inner-tab-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Transcript<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\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<div >\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<p>In this lesson we will cover the responsive editing foundations in Elementor, optimize our homepage for responsive viewing. We\u2019ll also set this page in WordPress to display as the homepage on the website.<\/p><p>This lesson will cover:<br \/>\u2714\ufe0e Responsive editing foundations in Elementor<br \/>\u2714\ufe0e Inheritance Principles in Elementor<br \/>\u2714\ufe0e Optimizing web pages for responsive viewing<br \/>\u2714\ufe0e Setting a page to display as the homepage on a website<br \/>\u2714\ufe0e And much more!<\/p><p>See also:\u00a0<br \/><a href=\"https:\/\/elementor.com\/academy\/elementor-responsive-101-all-you-need-to-know\/\" target=\"_blank\" rel=\"noopener\">Elementor Responsive 101: All You Need to Know<\/a><\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\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<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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 class=\"e-inner-tab-title e-tab-mobile-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTranscript\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div hidden class=\"e-inner-tab-content  collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\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<div >\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<p>Hey there, it\u2019s Aviva from Elementor. Welcome back to How to Build a Website in Elementor.<\/p><p>In the last lesson, we built the homepage for the restaurant website, Simaya, and covered concepts such as, page structuring, margin and padding, and workflow shortcuts.<\/p><p>In this lesson, we\u2019ll cover the responsive editing foundations in Elementor, optimize the Simaya homepage for responsive viewing, and set this page up, to display as the homepage on the website.<\/p><p>With so many people accessing websites from different devices these days, it\u2019s more important than ever to optimize your website for different viewports, or screen sizes.<\/p><p>Elementor provides you with tools to preview your website for different devices, and optimize your designs, accordingly.<\/p><p>With just a few tweaks, we\u2019ll make the homepage display perfectly, on tablet and mobile. So let\u2019s go!<\/p><p>Let\u2019s start with a tour of the responsive features in Elementor.\u00a0<span>First, click here, on the bottom panel, to enter responsive mode.<\/span><\/p><p>At the top of your screen you will see this panel, which shows mobile, tablet, and desktop viewport icons.<\/p><p>Clicking a viewport icon will preview the page at the selected screen size<\/p><p>The presence of a Viewport Icon next to any option, in the settings of a widget, column, or section, indicates that the changes made there will apply specifically to that viewport.<br \/>It\u2019s important to understand that in most cases, responsive edits in Elementor are inherited from the larger viewport down to the smaller viewport. So this means that Desktop responsive settings are applied downward to Tablet, as well as Mobile views, and changes to Tablet settings are applied to Mobile.<\/p><p>Since we\u2019ve already got everything set up for Desktop view, we\u2019re ready to optimize the tablet view, and apply these principles to the design.<\/p><p>Let\u2019s take a look at the Hero section. When spread out over three columns in tablet mode, the content gets cut off. Let\u2019s modify the way they display, to give each element the attention it deserves.<\/p><p>We\u2019ll move the first column to the top, and allow it to take up the full width of the section.<\/p><p>To do this, select the column and for the Column Width Percentage, type in 100.<\/p><p>Ta da! As you see, the column now takes up the full width of the section pushing the other two below, into the next row.<\/p><p>When this happens, the width of these two columns resets, so select the second column and set its width to 90.<\/p><p>Now we just need to add some padding to the top of the inner section, like this .<\/p><p>Scrolling down, we can see that the section below already looks great on tablet. Scrolling further down\u2026 well&#8230;this section could be adjusted a bit.<\/p><p>Select it, and set the Minimum height to 300 pixels.<\/p><p>Let\u2019s use a shortcut to quickly apply this setting to the two sections below. Right click the section and select Copy. Now right click the section below and select Paste Style, or use the keyboard shortcut: Command or Control Shift V. This applies the settings of the copied section, without changing the content.<\/p><p>Right click the next section and Paste Style once more. Neat!<\/p><p>Now select this heading, to adjust its layout. In Advanced, unlink the padding. This resets the padding to zero.<\/p><p>Now Copy, and Paste Style on the next two headings.<\/p><p>Scroll back up, and select the right column. In Advanced, add 5% padding to give the content a little more breathing room. Do the same for the matching columns in the next two sections. We\u2019re not using Paste Style in this case, because it will paste the column background color as well.<\/p><p>Ok, these sections are good to go. Scroll down to the last section. The heading is a bit large here, so we\u2019ll need to update its size for tablet.<\/p><p>We\u2019ll be using this heading again on the website, so it\u2019s a good idea to edit it from the global style, and not have to make this change again, next time we use this style on tablet.<\/p><p>Click the heading, and in Style, Typography, click the global icon. You\u2019ll notice a gear icon here. Click it, to enter the Global Fonts settings. Now click the pencil icon for the style Primary, and change the size. Since we\u2019re in tablet mode, this will not affect the desktop font size we set previously.<\/p><p>Great. Be sure to Update, and go back to the editor. Let\u2019s take a quick look at the heading. Perfect!<\/p><p>Now let\u2019s take a look at mobile.<br \/>The Editor scrolls all the way down upon switching to mobile, so I\u2019ll just pull up my handy navigator (now I know you know that shortcut!) and zoom back to the first section.<\/p><p>By default, on mobile, each column takes up the full width of the page. So we don\u2019t need to manually adjust the column sizes one-by-one.<\/p><p>The font-size looked great for desktop and tablet, but it\u2019s a bit large for mobile devices. Since it\u2019s a custom style that we\u2019re only using once on the website, there\u2019s no need to go into the global settings.<\/p><p>Click this heading, and in style, change the size of the font. And since we\u2019re in mobile view, this change will not affect tablet or desktop views.<br \/>Scroll down, and adjust the social icons, by selecting them, and setting the columns to Auto.<\/p><p>Scroll down a bit more, and you\u2019ll see that we have two adjacent sections of text. We can actually reverse the display order of columns in responsive views, by going to Advanced, Responsive, and Toggle Reverse Columns (Mobile) to YES.<\/p><p>Ok, let\u2019s adjust the layout of the solid-colored columns, so they are proportionate to the other columns. Click the first one, and in Advanced, add 15% padding. Do the same for the other two solid color block columns.<\/p><p>Great, almost done. Scroll down to the last section, and in Advanced, unlink and add some margin to the top and bottom.<\/p><p>Then select the text, and add some Padding, which as you can see, adjusts the layout, making it easier to read. Perfect.<\/p><p>Our responsive edits are now complete.<\/p><p>Go to the bottom panel, where the save options are, and click Update to save the changes.<\/p><p>Recall that we already published our page from the WordPress dashboard, but for pages that have not yet been published, the button would display \u201cPublish\u201d instead.<\/p><p>Ok, the homepage\u2019s layout and design is complete. We have one last step, which is to let WordPress know that this page is the homepage for the website, ensuring visitors will always land here, when entering your URL.<\/p><p>Click the top left menu, and then Exit to Dashboard, to go back to WordPress. Here on the left, hover your cursor over the settings, and click \u201cReading.\u201d<\/p><p>Make sure a static page is selected and expand the list to see your available pages. Select the home page. Click save, and your homepage is complete!<br \/>Ok great, you now know how to use Elementor\u2019s responsive options to optimize your web pages.<\/p><p>In the next lesson, we\u2019ll build the Our Menu page, using what you\u2019ve learned so far, as well as new concepts, including new widgets and layouts! We will also learn how to reuse elements in other ways, and save a page as a template, so keep watching to learn how.<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\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<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1928\" class=\"e-tab-content elementor-clearfix\" data-tab=\"8\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1928\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=9rWCfTTlpOo&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=9\" data-video-type=\"youtube\" data-video-title=\"Creating the \u201cOur Menu\u201d Page\" data-video-duration=\"17:21\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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 class=\"e-inner-tab-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Transcript<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\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<div >\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<p>In this lesson we will build the \u201cOur Menu\u201d page, learn about new widgets, discuss more efficient workflow methods, and go over some basic optimization concepts.<\/p><p>This lesson will cover:<\/p><p>\u2714\ufe0e Workflow Methods<br \/>\u2714\ufe0e New Widgets<br \/>\u2714\ufe0e New Techniques<br \/>\u2714\ufe0e Anchor links and CSS ID<br \/>\u2714\ufe0e And much more!<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\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<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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 class=\"e-inner-tab-title e-tab-mobile-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTranscript\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div hidden class=\"e-inner-tab-content  collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\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<div >\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<p>Hey there, it\u2019s Aviva from Elementor. Welcome back to How to Build a Website in Elementor.<\/p><p>In the last lesson, we learned about responsive editing in Elementor, optimized the homepage for devices, and designated the homepage in WordPress.<\/p><p>In this lesson, we\u2019ll create the Our Menu page, learn new widgets, and go over some new techniques to help you become a pro in no time!<\/p><p>If you haven\u2019t seen the previous lessons in this course, I highly recommend watching them, as we\u2019ll be building off of what we learned previously.<br \/>Ok let\u2019s get started! We\u2019ll begin with the hero section, which as you can see from our design includes two headings, a text editor widget and a spacer widget&#8230;<\/p><p>Wait a minute! Haven\u2019t we designed a section similar to this before? We sure have! The last section of the homepage has the same widgets as this one.<\/p><p>When you have sections that are very similar on your website, there\u2019s no need to start designing again from scratch.<br \/>I\u2019ll share a few workflow methods that will help you save time while building websites in Elementor.<\/p><p>Ok, so in order to reuse that section I mentioned, we\u2019ll need to reopen the homepage. You can hit the Escape button on your keyboard, and click here, to exit to the dashboard..<\/p><p>Another way to quickly exit the Editor is to type <strong>Command or Control E<\/strong>, which opens the finder.<\/p><p>The Finder helps you find your content easily and navigate through WordPress in no time!<\/p><p>Just type the word \u201chome,\u201d and the homepage will display. Then hold down the <strong>Command or Control<\/strong> key, and click the link, to open it in a new tab.<\/p><p>In the previous lesson, we copied elements and pasted them in different sections throughout the page. Now we\u2019ll use the same method to copy from this page, and paste into the Our Menu page!<\/p><p>Open the Navigator, right click the Our Story section, and click Copy. Now go back to the Our Menu page. Right click, Paste, or use the keyboard shortcut <strong>Command or Control V<\/strong>.<\/p><p>Works like a charm.<br \/>Ok, so now let\u2019s customize it. Click the sub-heading, and update the text. In style, change the color to Basil. Now select the second header.<\/p><p>Add your text, and in style, change the color. Next, drag the text editor widget under the spacer, and type your text. In Style, change the color to basil.<\/p><p>Select the spacer, and in the Advanced tab, select a new background image.<\/p><p>Right click on the social icons, and delete them, as we don\u2019t need them for this page.<\/p><p>From Widgets, drag and drop the icon widget under the text editor. You can upload your own icon, or as in our case, select one from the Icon Library. Type \u201cchevron\u201d in the search, select one of the available chevrons, and insert it. In style, change the color. Change the size to 20.<br \/>Now select the section, and in Advanced, add a margin of 5%&#8230; Great! The Hero section is ready.<\/p><p>This section, including its widgets and style, will be used over again across the rest of our site, so let\u2019s make good use of it.<\/p><p>Another way to reuse a section is to save it as a template.<br \/>To do this, right click o n the section, and select save as a template. Give it a memorable name, and click save.<\/p><p>To access your templates in the future, you\u2019ll find them, by clicking the gray folder icon, here. This opens the Templates Library, and in \u201cMy templates,\u201d you\u2019ll find all of your own saved templates. Then just hover over the template, and click Insert, to add it to your page.<\/p><p>As you&#8217;ve just seen, copying elements and saving them as templates saves valuable time, and I encourage you to incorporate these processes into your workflow.<br \/>Let\u2019s continue to the next section. Create a new section with one column. As we did before, we\u2019ll give a name to the sections, so we can navigate quickly throughout the page. Open the Navigator, name the Hero section&#8230; as well as the Starters section.<\/p><p>Now close the Navigator, and from the widgets menu, search for the divider widget, and drag it into the section.<\/p><p>The divider widget creates an organized and aesthetic separation between sections, with a customizable line that you can combine with an icon, or even text.<\/p><p>To add text to the divider, click here, and type your text.<br \/>We can\u2019t see it at the moment, because its default color is the same color as the background.<\/p><p>Let\u2019s take care of that, so we can see what we\u2019re working with. Go to the Style tab and change the divider\u2019s color..<\/p><p>In text, select basil for the font color.. and set the typography global style&#8230;to Section. Great!<\/p><p>From the widget menu, drag and drop an inner section, below the divider. Right click here.. and select add new column.<\/p><p>We\u2019ll continue by creating the first item of our menu offering..<br \/>As we did in the previous lesson, begin by adding and styling the widgets for the first column, one by one.<br \/>From the widgets menu, drag the image widget, and drop into the first column.<\/p><p>Choose an image, and in Style, adjust the width.<\/p><p>Back in the widget menu, drag a heading widget under the image. Type your text, and change the html tag to H3. Now align it to the center. In Style, change the color to basil, and set the typography to the global style \u201cMenu Titles\u201d.<\/p><p>From Widgets, drag in a text editor widget, and type your text.<br \/>Now right click on the heading, and select duplicate.<br \/>Drag it below the other widgets, and change the text..<br \/>Set its HTML tag to H4, And in Style, Typography,<\/p><p>Select the\u2026 hmm. Nothing here quite works. So let\u2019s set one more global font style for the price text.<\/p><p>Select the pencil icon to set a custom font style, and change the font size. Set its weight to 600. And in Transform, remove the Uppercase, by setting it back to default. Now click the plus icon, type a name&#8230; and save it as a Global font. Perfect!<\/p><p>Select the column, and in the advanced tab, change the unit to percent, unlink the values, and add some padding, to give more space to the widgets. Great!<br \/>Now that we understand how easy it is to create each section with different widgets, let\u2019s talk about more optimal ways to build in Elementor.<\/p><p>As you familiarize yourself with the Elementor Editor, and gain more experience, you\u2019ll find yourself coming up with ways to simplify and optimize your website building process.<\/p><p>For example, widgets like the icon box&#8230; as well as the image box&#8230; include an image, a title, and a description, all in one place. Using them in the right way will reduce the amount of widgets, and can even be used to create entire sections from them. Designing this way not only boosts the performance but also reduces the loading time of your page. Win-win!<br \/>To see how this works let\u2019s re-create this menu item, in a more optimal way.<\/p><p>Drag the image box widget to the top of the column.<br \/>Add an image\u2026 Then type the title\u2026 And finally the text\u2026<\/p><p>In Style, there are loads of options to design and position each of the elements. Take some time, and go ahead and experiment with all the options!<\/p><p>Let\u2019s change the image width a bit. And under content, set the title\u2019s color to basil. For the typography, choose the global style, menu titles. Everything else looks great as is.<\/p><p>Right click, and delete the previous image, title, and description. And leave only the price.<\/p><p>Fantastic! We\u2019ve achieved the same design, with fewer widgets!<br \/>Now we\u2019ll continue, by duplicating the column twice.. and deleting the extra columns.. Click on the image box, replace the title and text. Click on the price, and change its content as well..<br \/>Great!<br \/>Repeat this one last time for the third section, and we\u2019re done!<br \/>Sometimes the amount of text present in a widget can lead to varying section heights, creating an imbalance between the position of your widgets, just like this price here.<\/p><p>It\u2019s not wrong to leave it as is, but if you\u2019d like all the prices to be in the exact position, there\u2019s a simple fix for that.<\/p><p>Select the inner section, and under vertical positioning, you\u2019ll find different options that enable you to control the widgets\u2018 position inside sections.<\/p><p>Select \u201cSpace between\u201d which, just as the name suggests, creates space between elements, positioning the first one at the top of the column and the last one at the bottom. Looking at the prices now, they\u2019re all at the same height! This is a super simple, but often overlooked way, to be pixel perfect.<br \/>Back in widgets, drag in a spacer widget. Set its height to 300 pixels And in the Advanced tab, uncheck the values, and add some margin.<\/p><p>Next, expand the background tab and choose an image.<br \/>Set the attachment to Fixed, and the background to Cover, so the image nicely covers the spacer.<\/p><p>Great.<br \/>Now, remember the arrow icon we created in our hero section?<br \/>Let\u2019s create an anchor link, to connect the icon to this section, so when someone clicks it, it will scroll straight to the Starters!<\/p><p>Select the section, and in the Advanced tab, enter the ID name \u201cstart\u201d.<\/p><p>Now scroll up to find the button, and click on it. Under link, type the pound symbol, or hashtag, and the ID of the section. Again, be sure to type it exactly the same, as the ID name.<\/p><p>Let\u2019s test it. And, voila!<br \/>Let\u2019s continue with the Mains. Right click the section and duplicate.<\/p><p>With the second section selected, head over to the Advanced tab. You\u2019ll notice the CSS ID is empty. As I mentioned earlier, CSS IDs should appear only once on your page, so duplicated elements do not copy the ID over&#8230;<br \/>ID names must be unique, so remember to use different names, when creating more than one anchor link!<\/p><p>Now open the navigator, and change the section\u2019s name to \u201cMains.\u201d Great<br \/>Select the divider, and change its text. In style, set the divider\u2019s global color to grape, as well as the text\u2019s color..<\/p><p>Select the image box, and choose an image for the Mains. Change the title and the description..<br \/>Then go to the style tab, and under content, select the global color grape, for both the title and description.<\/p><p>Now select the heading. Change the price, and in style.. Set the color to grape, as well.<br \/>We\u2019ll repeat these steps for the next item\u2026.<br \/>And the following one, as well&#8230;<br \/>Now select the spacer, and in the Advanced tab, choose a suitable image for the Mains.<br \/>Almost there! Just one section to go! Right click the section, and duplicate it.<\/p><p>Time for dessert! Open the navigator and name the section \u201cDesserts.\u201d Now, select the divider\u2026 and update the text. In Style, set both the divider and text global colors to raspberry.<br \/>Select the image box, and choose an image for the Desserts.<br \/>Change the title and the description. Then go to the Style tab, and under content, set the global color to raspberry, for both the title and description.<\/p><p>Select the heading. Change the price, and in style.. Set the Raspberry color as well.<br \/>Repeat these steps for the next column, and the following one.<br \/>All that\u2019s left now, is to change the spacer image. Select it, and in the Advanced tab, under background, use an image of your choice.<\/p><p>Great. Let\u2019s take a look at the page. Looks good enough to eat! So we\u2019re done, right!? Well&#8230;not quite<br \/>The page does look fantastic on Desktop, but it\u2019s really important to preview each page in responsive mode, to make sure they display correctly in all viewports.<\/p><p>Use the keyboard shortcut <strong>Command Shift M<\/strong> to go directly to tablet view in responsive mode. It looks pretty good, but personally, I\u2019d prefer to reduce the amount of space between columns. Click the first one, and in the advanced tab, set the padding to 10%.<\/p><p>We\u2019ll use the hotkeys we learned earlier, to copy and paste this style quickly to the other columns.<\/p><p>Type <strong>Control or Command C<\/strong> to copy the style. Select the next one, and hold down <strong>Control or Command Shift V<\/strong> to paste the style. Repeat these steps for the other columns as well.<\/p><p>Easy as well&#8230;pie! Now let\u2019s see how the page looks on mobile.<\/p><p>Scrolling down, the page looks perfect on mobile. Just in time, because designing this mouthwatering page has made me hungry! Click update, and preview the page. Looks great, if I say so myself.<br \/>Ok, we\u2019ve now completed the Our Menu page, learned about new widgets, and added more techniques to our repertoire.<\/p><p>In the next lesson, we\u2019ll create the Contact Us page, which is the last page of our website. We\u2019ll delve into the Advanced tab to learn more about optimization and best practices when building websites. So go have some dessert, and then click to keep watching!<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\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<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div id=\"e-tab-content-1929\" class=\"e-tab-content elementor-clearfix\" data-tab=\"9\" role=\"tabpanel\" aria-labelledby=\"e-tab-title-1929\" tabindex=\"0\" data-video-url=\"https:\/\/www.youtube.com\/watch?v=ksTvSAqjfyM&amp;list=PLZyp9H25CboE6dhe7MnUxUdp4zU7OsNSe&amp;index=10\" data-video-type=\"youtube\" data-video-title=\"Creating the \u201cContact Us\u201d Page\" data-video-duration=\"9:29\" hidden=\"hidden\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Overview<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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 class=\"e-inner-tab-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"e-inner-tab-title-text\" tabindex=\"0\">Transcript<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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<\/div>\n\t\t\t\t\t\t\t\t<div class=\"e-inner-tabs-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-title e-tab-mobile-title e-inner-tab-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tOverview\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div  class=\"e-inner-tab-content e-inner-tab-active collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\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<div >\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<p>In this lesson we will create the \u201cContact Us\u201d page, cover widget positioning and more optimization methods, and conclude the course with a review and suggestions for your next steps.<\/p><p>This lesson will cover:<br \/>\u2714\ufe0e Reusing and modifying previously saved templates and elements<br \/>\u2714\ufe0e Optimizing layouts using fewer columns and custom positioning<br \/>\u2714\ufe0e Course conclusion and review<br \/>\u2714\ufe0e And much more!<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\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<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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 class=\"e-inner-tab-title e-tab-mobile-title \">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tTranscript\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div hidden class=\"e-inner-tab-content  collapsible\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-text\">\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<div >\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<p>Hey there, it\u2019s Aviva from Elementor. Welcome back to How to Build a Website in Elementor.<\/p><p>In the previous lesson, we created the Our Menu page, covered new widgets, and sharpened our web building techniques.<\/p><p>In this lesson, we\u2019ll complete the website, by creating the Contact Us page, go over widget Positioning, and learn new website optimization methods. We\u2019ll also conclude the course with a review, and suggest the next steps for you to take in your Elementor journey.<\/p><p>Let\u2019s open the Contact Us page, we created earlier in the course.<br \/>Hit <b>Command or Control E<\/b> to open the Finder, and type \u201cContact.\u201d<\/p><p>Notice that the Contact page isn\u2019t found. That\u2019s because in order for it to display, we need to first convert the Contact page to an Elementor page. To do this, click Exit to the Dashboard, go back to pages, find the Contact Us page, and click to open it. Then click the \u201cEdit with Elementor&#8221; button. From now on, we\u2019ll be able to find this page using the Elementor Finder.<\/p><p>The first thing we\u2019ll need to do is to add the template of the hero section we created previously. Click the gray folder icon, and the My Templates tab. Hover over the template, and click insert. Great.<\/p><p>Change the subheading&#8230;and the heading text..<br \/>Then, select the spacer, and in the Advanced tab, change the background image.<br \/>Now go ahead and delete the other elements, as they are not needed in this page.<\/p><p>Next, add an inner section, and right click here, to add one more column. This will be where we\u2019ll add the contact information, phone number, and location.<\/p><p>From the widget menu, find and drag an image box into the first column. Update the image\u2026 Add a title, and description.<\/p><p>Next, in the Style tab, change the image width.<br \/>Under content, set the title color to basil, and change the typography to button text.<\/p><p>Now, change the description\u2019s color to basil, and we\u2019re done with our first column!<\/p><p>From the Advanced tab, we\u2019ll add some padding. To do this,<br \/>Select percent for the unit, uncheck the linked values, and add some padding.<\/p><p>Right click on the column, and duplicate it twice. Now delete the empty columns.<\/p><p>Update the content of the second image box, and apply different colors. Repeat this process for the last one.<\/p><p>And just like that, we\u2019ve completed this section!<br \/>As I mentioned in the previous lesson, using fewer elements, such as columns and sections, auto generates less code on your web pages, allowing them to load faster.<\/p><p>So next we\u2019ll take a look at how we can optimize this section, and recreate it without using an inner section and three columns. While this step is optional, I encourage you to give it a try, to get a better understanding of these optimization techniques.<\/p><p>So, let\u2019s do it! Right click on the first image box, and duplicate it. Now, drag it directly under the spacer. By default, every widget takes up 100 percent of the available column\u2019s width. The blue outline shows the extent of the widget\u2019s width.<\/p><p>Dragging in the second image box, places it below the first widget, since at 100 percent, the first image box pushes the second image box below it<br \/>However, in the Advanced tab, you will have the option to change any widget\u2019s width. Under positioning, you\u2019ll see \u201cWidth\u201d, where you have a number of options.<\/p><p>Full width, which is the same as the default, Inline, which resizes the widget to the width of its content, and Custom, which gives you the freedom to set the width of your choice.<\/p><p>We\u2019ll select Custom, so we can set the 3 widgets to have equal space between them, like the original 3 column layout we created before.<br \/>Now, we know that a column takes up 100 percent of the available space, so by changing the unit to percent, and typing in 100, the image box widget will continue to take up 100% of the column\u2019s space.<\/p><p>By changing it to 50, the image box will take up half of the column\u2019s width. If we change the second second widget\u2019s width to 50, you can see they now fit side by side in the column.<\/p><p>(I think you can see where I\u2019m going with this.) Since we have three widgets, we\u2019ll need each of them to take up one third of the column\u2019s width, so set the value to 33.3%. Great, now do that same for the second one.<\/p><p>No go ahead and duplicate the third widget, here, and drag it above the inner section. In Advanced, under positioning, give this image box the same value. Perfect!<\/p><p>We\u2019ve now created the exact same layout for this section, but without the need for the Inner section widget and with two columns fewer.<\/p><p>As you continue to gain experience building websites in Elementor, you\u2019ll start to find yourself coming up with new approaches to building websites in more optimal ways.<\/p><p>So if you\u2019d like to give your web pages a boost, go ahead and give optimized layout a shot!<br \/>Next let\u2019s delete the inner section, now that we no longer need it.<\/p><p>The page looks great, so let\u2019s enter responsive mode to make sure that everything displays correctly. Using the keyboard shortcut <strong>Command Shift M<\/strong>, will take you directly into tablet view.<\/p><p>Ok, everything already looks great here so let\u2019s switch to mobile<\/p><p>The widgets display next to each other here as well, but it\u2019s a bit tight for this view, so let\u2019s space them out to make them more visible. Select the first image box, and in Advanced, under positioning, you\u2019ll notice the mobile viewport icon. As you\u2019ll recall, this indicates that any changes made to this setting will display only at this viewport size, since it\u2019s the smallest breakpoint.<\/p><p>Set it to full width. Repeat this step for the second\u2026 And the third image box. Great, let\u2019s preview it!<\/p><p>Congratulations! You\u2019ve now completed building your first website in Elementor. Well Done!<\/p><p>So let\u2019s recap what we\u2019ve learned, and take a tour of the site.<\/p><p>We got started by Installing and Activating the Hello theme, creating our website pages, and adding a navigation menu.<\/p><p>With that done, we went on to set up our website\u2019s design system and structure, including our header and footer.<\/p><p>We then dove full force into the Elementor Editor to build the Homepage, Our Menu Page, and Contact Us Page, complete with responsive edits.<\/p><p>And throughout the course, we covered lots of other tips and tricks, to make your website building process more efficient and effective.<\/p><p>Now you know how to create a professional website from start to finish, without using a single line of code! Great job!<\/p><p>If you\u2019d like to further advance your skills, you\u2019ll find links in the description to some of our many resources, including:<br \/>a playlist dedicated to the Elementor widgets, a video on responsive editing, optimization lessons, and even a full course on building a website using Elementor Pro features!<br \/>Go check them out!<\/p><p>I hope you enjoyed this course and feel confident in using Elementor to design, build, and publish websites for your own business or customers.<\/p><p>As always, Check out the Elementor Academy for more tips and tutorials.\u00a0<span>Till next time! Thanks for watching.<\/span><\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"e-inner-tab-buttons\">\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<button class=\"show-button\">Show More<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button>Show Less<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\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<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\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\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Getting-Started With Elementor 9 Videos Getting Started with Elementor 2:03 Installing Hello and Setting Up 5:07 Elementor Editor Basics 6:09 Building the Design System 5:07 Website Essentials: Layout, Header &amp; Footer 9:35 Building the Homepage in Elementor 29:59 Responsive Design &amp; Connect the Home Page 9:08 Creating the \u201cOur Menu\u201d Page 17:21 Creating the \u201cContact [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":5597,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4,29,32,35],"tags":[39],"class_list":["post-5595","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","category-home-courses","category-home-start-with-the-basics","category-top-picks-selection-courses","tag-courses"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Getting Started with Elementor | Elementor Academy<\/title>\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\/academy\/getting-started-with-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting Started with Elementor | Elementor Academy\" \/>\n<meta property=\"og:description\" content=\"Getting-Started With Elementor 9 Videos Getting Started with Elementor 2:03 Installing Hello and Setting Up 5:07 Elementor Editor Basics 6:09 Building the Design System 5:07 Website Essentials: Layout, Header &amp; Footer 9:35 Building the Homepage in Elementor 29:59 Responsive Design &amp; Connect the Home Page 9:08 Creating the \u201cOur Menu\u201d Page 17:21 Creating the \u201cContact [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/getting-started-with-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-29T08:17:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-04T12:52:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/INTRO-Getting-Started.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Saar Kedem\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Saar Kedem\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"59 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Getting Started with Elementor | Elementor Academy","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\/academy\/getting-started-with-elementor\/","og_locale":"en_US","og_type":"article","og_title":"Getting Started with Elementor | Elementor Academy","og_description":"Getting-Started With Elementor 9 Videos Getting Started with Elementor 2:03 Installing Hello and Setting Up 5:07 Elementor Editor Basics 6:09 Building the Design System 5:07 Website Essentials: Layout, Header &amp; Footer 9:35 Building the Homepage in Elementor 29:59 Responsive Design &amp; Connect the Home Page 9:08 Creating the \u201cOur Menu\u201d Page 17:21 Creating the \u201cContact [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/getting-started-with-elementor\/","og_site_name":"Academy","article_published_time":"2021-07-29T08:17:15+00:00","article_modified_time":"2023-05-04T12:52:26+00:00","og_image":[{"width":2560,"height":1440,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/INTRO-Getting-Started.jpg","type":"image\/jpeg"}],"author":"Saar Kedem","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Saar Kedem","Est. reading time":"59 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/getting-started-with-elementor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/getting-started-with-elementor\/"},"author":{"name":"Saar Kedem","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/7d19eaa5cd2e49e5f8037ec2e985eaf5"},"headline":"Getting Started with Elementor","datePublished":"2021-07-29T08:17:15+00:00","dateModified":"2023-05-04T12:52:26+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/getting-started-with-elementor\/"},"wordCount":13676,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/getting-started-with-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/INTRO-Getting-Started.jpg","keywords":["Courses"],"articleSection":["Design \/ Layout","home \u2013 courses","home \u2013 start with the basics","top picks selection \u2013 courses"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/getting-started-with-elementor\/","url":"https:\/\/elementor.com\/academy\/getting-started-with-elementor\/","name":"Getting Started with Elementor | Elementor Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/getting-started-with-elementor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/getting-started-with-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/INTRO-Getting-Started.jpg","datePublished":"2021-07-29T08:17:15+00:00","dateModified":"2023-05-04T12:52:26+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/getting-started-with-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/getting-started-with-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/getting-started-with-elementor\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/INTRO-Getting-Started.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/INTRO-Getting-Started.jpg","width":2560,"height":1440,"caption":"Getting-Started-course"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/getting-started-with-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"Getting Started with Elementor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/7d19eaa5cd2e49e5f8037ec2e985eaf5","name":"Saar Kedem","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1088ed3a6dcab53c172d632030ff97173b1e7adc49cd74d116e0e9d0f43b0d7a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1088ed3a6dcab53c172d632030ff97173b1e7adc49cd74d116e0e9d0f43b0d7a?s=96&d=mm&r=g","caption":"Saar Kedem"},"sameAs":["https:\/\/test.com"],"url":"https:\/\/elementor.com\/academy\/author\/saarkedem\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/5595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=5595"}],"version-history":[{"count":4,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/5595\/revisions"}],"predecessor-version":[{"id":9770,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/5595\/revisions\/9770"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/5597"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=5595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=5595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=5595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}